Mission Control v2 – Schritt 1: SoC-Refactor + Design 2.0
Architektur auf Separation of Concerns umgestellt – ohne Build-Schritt,
ohne neues Framework, ohne DB (KISS bleibt). Endpoint-URLs unveraendert,
daher 1:1-kompatibel zum bisherigen Stand.
Backend (Top-Level-Helfer + ein Router je Bereich):
- app.py auf duennen Einstieg reduziert (FastAPI + include_router + static)
- config/auth/jobengine/llamaswap als getrennte Helfer-Module
- Endpoints in routers/{models,jobs,maintenance}.py
Frontend (native ES-Module statt Single-File):
- index.html = Huelle: Sidebar-Nav, Topbar, Alert-Banner, Hash-Routing
- css/{base,components}.css – Tokens + Komponenten
- js/core/{api,ui,nav}.js + js/panels/{overview,models,maintenance,jobs}.js + main.js
- Panel-Vertrag: { id, mount?(), onStatus?(s), onJobs?(jobs) }
- Optik an docs/mission-control-overview.png angelehnt (Hero, KPI-Kacheln,
Listen, Aktivitaets-Stream, getoente Karten)
Doku: CLAUDE.md + README auf die neue Struktur aktualisiert.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
@@ -0,0 +1,116 @@
|
||||
/* =========================================================================
|
||||
base.css — Design-Tokens, Reset, App-Layout (Sidebar + Topbar + Content)
|
||||
Optik orientiert an docs/mission-control-overview.png (GitHub-Dark-Familie).
|
||||
========================================================================= */
|
||||
|
||||
:root{
|
||||
/* Flächen */
|
||||
--bg:#0a0d12; --bg2:#0d1117; --panel:#10151c; --panel2:#151b23; --inset:#0a0e13;
|
||||
--line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
|
||||
/* Text */
|
||||
--tx:#d7dee7; --mut:#8b97a5; --dim:#5c6773;
|
||||
/* Akzente */
|
||||
--on:#3fb950; --act:#4493e0; --purple:#a371f7; --warn:#e0a32e; --err:#e5534b;
|
||||
--teal:#2dd4bf;
|
||||
/* Tints (für getönte Karten) */
|
||||
--t-green:rgba(63,185,80,.07); --b-green:rgba(63,185,80,.22);
|
||||
--t-blue:rgba(68,147,224,.07); --b-blue:rgba(68,147,224,.22);
|
||||
--t-purple:rgba(163,113,247,.08);--b-purple:rgba(163,113,247,.24);
|
||||
--t-red:rgba(229,83,75,.08); --b-red:rgba(229,83,75,.24);
|
||||
/* Schrift */
|
||||
--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
|
||||
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
||||
/* Maße */
|
||||
--side:62px; --radius:14px;
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
margin:0;background:var(--bg);color:var(--tx);
|
||||
font-family:var(--sans);font-size:14.5px;line-height:1.5;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
a{color:var(--act);text-decoration:none}
|
||||
::selection{background:rgba(68,147,224,.32)}
|
||||
|
||||
/* ---- App-Shell: feste Sidebar + scrollender Main ---- */
|
||||
#app{display:flex;min-height:100vh}
|
||||
|
||||
.sidebar{
|
||||
width:var(--side);flex:0 0 var(--side);
|
||||
background:var(--bg2);border-right:1px solid var(--line);
|
||||
display:flex;flex-direction:column;align-items:center;
|
||||
padding:14px 0;gap:6px;position:sticky;top:0;height:100vh;
|
||||
}
|
||||
.side-logo{
|
||||
width:34px;height:34px;border-radius:9px;margin-bottom:10px;
|
||||
display:grid;place-items:center;color:var(--teal);
|
||||
background:rgba(45,212,191,.10);border:1px solid rgba(45,212,191,.22);
|
||||
}
|
||||
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
|
||||
.side-foot{margin-top:auto}
|
||||
.nav-item{
|
||||
width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
|
||||
color:var(--mut);cursor:pointer;border:1px solid transparent;transition:.15s;
|
||||
}
|
||||
.nav-item:hover{color:var(--tx);background:var(--panel)}
|
||||
.nav-item.active{
|
||||
color:var(--teal);background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.22);
|
||||
}
|
||||
.nav-item.disabled{opacity:.34;cursor:not-allowed}
|
||||
.nav-item.disabled:hover{background:transparent;color:var(--mut)}
|
||||
.nav-item svg{width:20px;height:20px}
|
||||
|
||||
/* ---- Main-Spalte ---- */
|
||||
.main{flex:1;min-width:0;display:flex;flex-direction:column}
|
||||
|
||||
.topbar{
|
||||
position:sticky;top:0;z-index:20;
|
||||
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
|
||||
padding:12px 26px;background:rgba(10,13,18,.86);backdrop-filter:blur(8px);
|
||||
border-bottom:1px solid var(--line);
|
||||
}
|
||||
.spacer{flex:1}
|
||||
.status-pill{
|
||||
display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;
|
||||
padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--mut);background:var(--panel);
|
||||
}
|
||||
.dot{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:0 0 auto}
|
||||
.dot.on{background:var(--on);box-shadow:0 0 0 0 rgba(63,185,80,.5);animation:pulse 2.2s infinite}
|
||||
.dot.off{background:var(--err)}
|
||||
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.45)}70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
|
||||
.top-stat{font-size:12.5px;color:var(--mut)}
|
||||
.top-stat b{color:var(--tx);font-family:var(--mono);font-weight:600;margin-left:4px}
|
||||
.top-clock{font-family:var(--mono);font-size:12.5px;color:var(--act)}
|
||||
.tokin{
|
||||
font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--line);
|
||||
color:var(--tx);border-radius:8px;padding:7px 10px;width:128px;
|
||||
}
|
||||
.tokin:focus{outline:none;border-color:var(--act)}
|
||||
|
||||
/* ---- Content-Bereich ---- */
|
||||
.content{padding:22px 26px 64px;max-width:1500px;width:100%}
|
||||
.view[hidden]{display:none}
|
||||
.view{display:flex;flex-direction:column;gap:18px}
|
||||
|
||||
/* Raster-Helfer */
|
||||
.grid{display:grid;gap:18px}
|
||||
.grid-3{grid-template-columns:1fr 1fr 1fr}
|
||||
.grid-2{grid-template-columns:1fr 1fr}
|
||||
.kpis{grid-template-columns:repeat(5,1fr)}
|
||||
@media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:760px){.grid-3,.grid-2,.kpis{grid-template-columns:1fr}}
|
||||
|
||||
/* Alert-Banner */
|
||||
.alert{
|
||||
margin:14px 26px 0;padding:14px 18px;border-radius:12px;
|
||||
background:linear-gradient(90deg,rgba(229,83,75,.16),rgba(229,83,75,.04));
|
||||
border:1px solid rgba(229,83,75,.32);color:#ffcdc8;
|
||||
display:flex;align-items:center;gap:12px;font-size:13.5px;
|
||||
}
|
||||
.alert .a-dot{width:8px;height:8px;border-radius:50%;background:var(--err);flex:0 0 auto}
|
||||
.alert b{color:#ffe2de}
|
||||
.alert.warn{background:linear-gradient(90deg,rgba(224,163,46,.15),rgba(224,163,46,.03));
|
||||
border-color:rgba(224,163,46,.32);color:#f3dca6}
|
||||
.alert.warn .a-dot{background:var(--warn)}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* =========================================================================
|
||||
components.css — wiederverwendbare Bausteine (Karten, KPIs, Listen, Forms)
|
||||
========================================================================= */
|
||||
|
||||
/* ---- Karte (Grundbaustein) ---- */
|
||||
.card{
|
||||
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
|
||||
padding:18px 20px;
|
||||
}
|
||||
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
|
||||
.card-h h3{font-size:15px;font-weight:600;margin:0;flex:1;color:var(--tx)}
|
||||
.card-h .meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
|
||||
.card-h .meta.ok{color:var(--on)}
|
||||
|
||||
/* ---- Hero (Overview-Kopf) ---- */
|
||||
.hero{
|
||||
background:
|
||||
radial-gradient(120% 140% at 100% 0%,rgba(68,147,224,.10),transparent 60%),
|
||||
var(--panel);
|
||||
border:1px solid var(--line);border-radius:var(--radius);
|
||||
padding:26px 28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
|
||||
}
|
||||
.hero .eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
|
||||
.hero h1{font-size:26px;font-weight:650;margin:8px 0 6px}
|
||||
.hero p{margin:0;color:var(--mut);font-size:14px;max-width:60ch}
|
||||
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
|
||||
.mini{
|
||||
min-width:128px;border:1px solid var(--line);border-radius:10px;
|
||||
padding:11px 14px;background:var(--bg2);
|
||||
}
|
||||
.mini .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
|
||||
.mini .v{font-family:var(--mono);font-size:15px;margin-top:4px;color:var(--tx)}
|
||||
.mini .v b{color:var(--on);font-weight:600}
|
||||
|
||||
/* ---- KPI-Kacheln ---- */
|
||||
.kpi{
|
||||
position:relative;border-radius:var(--radius);padding:18px 20px;
|
||||
border:1px solid var(--line);background:var(--panel);overflow:hidden;
|
||||
}
|
||||
.kpi .k-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
|
||||
.kpi .k-t{font-size:13.5px;color:var(--mut)}
|
||||
.kpi .k-ic{color:var(--mut);opacity:.85}
|
||||
.kpi .k-ic svg{width:20px;height:20px}
|
||||
.kpi .k-v{font-family:var(--mono);font-size:32px;font-weight:600;line-height:1.1;margin:14px 0 4px;color:var(--tx)}
|
||||
.kpi .k-v small{font-size:15px;color:var(--mut);font-weight:400}
|
||||
.kpi .k-s{font-size:12px;color:var(--mut)}
|
||||
/* Farb-Varianten */
|
||||
.kpi.green {background:linear-gradient(160deg,var(--t-green),transparent 70%);border-color:var(--b-green)}
|
||||
.kpi.green .k-v,.kpi.green .k-ic{color:var(--on)}
|
||||
.kpi.blue {background:linear-gradient(160deg,var(--t-blue),transparent 70%);border-color:var(--b-blue)}
|
||||
.kpi.blue .k-v,.kpi.blue .k-ic{color:var(--act)}
|
||||
.kpi.purple{background:linear-gradient(160deg,var(--t-purple),transparent 70%);border-color:var(--b-purple)}
|
||||
.kpi.purple .k-v,.kpi.purple .k-ic{color:var(--purple)}
|
||||
.kpi.red {background:linear-gradient(160deg,var(--t-red),transparent 70%);border-color:var(--b-red)}
|
||||
.kpi.red .k-v,.kpi.red .k-ic{color:var(--err)}
|
||||
.kpi.muted .k-v{color:var(--dim)}
|
||||
|
||||
/* ---- Key-Value-Liste (Health-Signale) ---- */
|
||||
.kv{display:flex;flex-direction:column}
|
||||
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
|
||||
padding:11px 2px;border-top:1px solid var(--line)}
|
||||
.kv-row:first-child{border-top:0}
|
||||
.kv-row .kv-k{color:var(--mut);font-size:13.5px}
|
||||
.kv-row .kv-v{font-family:var(--mono);font-size:13.5px;color:var(--tx)}
|
||||
.kv-v.ok{color:var(--on)} .kv-v.bad{color:var(--err)} .kv-v.na{color:var(--dim)}
|
||||
.bar{height:4px;border-radius:3px;background:var(--panel2);margin-top:8px;overflow:hidden}
|
||||
.bar > i{display:block;height:100%;background:var(--on);border-radius:3px;transition:width .4s}
|
||||
.bar.blue > i{background:var(--act)} .bar.warn > i{background:var(--warn)}
|
||||
|
||||
/* ---- Listen-Items (Modelle / "Session Router") ---- */
|
||||
.list{display:flex;flex-direction:column}
|
||||
.li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line)}
|
||||
.li:first-child{border-top:0}
|
||||
.li .li-dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:0 0 auto}
|
||||
.li .li-dot.on{background:var(--on)} .li .li-dot.load{background:var(--warn)}
|
||||
.li .li-main{flex:1;min-width:0}
|
||||
.li .li-id{font-family:var(--mono);font-size:13px;color:#e8eef5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.li .li-sub{font-size:12px;color:var(--mut);margin-top:2px}
|
||||
.li .li-right{text-align:right;flex:0 0 auto}
|
||||
.li .li-meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
|
||||
.li .li-time{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:2px}
|
||||
|
||||
/* ---- Tabelle ---- */
|
||||
table{width:100%;border-collapse:collapse;font-size:14px}
|
||||
th{text-align:left;font-weight:500;color:var(--mut);font-size:11.5px;text-transform:uppercase;
|
||||
letter-spacing:.06em;padding:0 10px 10px}
|
||||
td{padding:12px 10px;border-top:1px solid var(--line)}
|
||||
.mid{font-family:var(--mono);font-size:13px;color:#e8eef5}
|
||||
.port{font-family:var(--mono);color:var(--mut);font-size:13px}
|
||||
|
||||
/* ---- Badges ---- */
|
||||
.badge{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:6px;display:inline-block}
|
||||
.b-run{background:rgba(63,185,80,.14);color:var(--on)}
|
||||
.b-idle{background:rgba(139,151,165,.14);color:var(--mut)}
|
||||
.b-load{background:rgba(224,163,46,.16);color:var(--warn)}
|
||||
.b-err{background:rgba(229,83,75,.16);color:var(--err)}
|
||||
.b-ok{background:rgba(63,185,80,.14);color:var(--on)}
|
||||
|
||||
/* ---- Empty-States ---- */
|
||||
.empty{color:var(--mut);font-size:13.5px;padding:14px 4px}
|
||||
.empty-c{display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
text-align:center;padding:44px 16px;color:var(--mut)}
|
||||
.empty-c .e-t{font-size:14px}
|
||||
.empty-c .e-s{font-size:12.5px;color:var(--dim);margin-top:6px}
|
||||
|
||||
/* ---- Forms ---- */
|
||||
label{display:block;font-size:12px;color:var(--mut);margin:0 0 5px}
|
||||
input,textarea,select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--tx);
|
||||
border-radius:8px;padding:9px 11px;font-family:var(--mono);font-size:13px;margin-bottom:12px}
|
||||
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--act)}
|
||||
textarea{resize:vertical;min-height:64px;font-family:var(--sans)}
|
||||
.row{display:flex;gap:10px}.row>div{flex:1}
|
||||
.hint{font-size:12px;color:var(--mut);margin:-4px 0 12px}
|
||||
.mono-sm{font-family:var(--mono);font-size:11.5px;color:var(--mut)}
|
||||
|
||||
/* ---- Buttons ---- */
|
||||
button{font-family:var(--sans);font-size:13.5px;font-weight:500;border:1px solid var(--line2);
|
||||
background:var(--panel2);color:var(--tx);border-radius:8px;padding:9px 15px;cursor:pointer;transition:.15s}
|
||||
button:hover{border-color:var(--act)}
|
||||
button.primary{background:var(--act);border-color:var(--act);color:#fff}
|
||||
button.primary:hover{filter:brightness(1.08)}
|
||||
button.danger{background:var(--err);border-color:var(--err);color:#fff}
|
||||
button.danger:hover{filter:brightness(1.08)}
|
||||
button.ghost{padding:6px 11px;font-size:12.5px}
|
||||
button:disabled{opacity:.5;cursor:not-allowed}
|
||||
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
|
||||
|
||||
/* ---- Reply / Log ---- */
|
||||
.reply{margin-top:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
|
||||
padding:12px;white-space:pre-wrap;font-size:14px;min-height:20px;color:var(--tx)}
|
||||
.log{font-family:var(--mono);font-size:12px;line-height:1.65;background:var(--inset);border:1px solid var(--line);
|
||||
border-radius:8px;padding:12px;max-height:240px;overflow:auto;white-space:pre-wrap;color:#aeb9c4}
|
||||
.job{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--bg2)}
|
||||
.job-h{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
|
||||
.job-h .mid{flex:1}
|
||||
|
||||
/* ---- Toast ---- */
|
||||
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
|
||||
border:1px solid var(--line2);border-radius:10px;padding:11px 16px;font-size:13.5px;
|
||||
opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:50}
|
||||
.toast.show{opacity:1}
|
||||
.toast.err{border-color:var(--err);color:#ffb4ae}
|
||||
Reference in New Issue
Block a user