feat: OX2 — OPAX unified operator cockpit (opax.html)
Single-pane-of-glass: Jason, CostGuard, Build, VMs, Sites, Terminal Same design language as jason.html. No new tabs, all inline panels.
This commit is contained in:
parent
d34ab15f92
commit
2e6ad2d490
793
static/opax.html
793
static/opax.html
|
|
@ -5,159 +5,688 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="robots" content="noindex, nofollow">
|
<meta name="robots" content="noindex, nofollow">
|
||||||
<title>OPAX — Vauco Operator Hub</title>
|
<title>OPAX — Vauco Operator Hub</title>
|
||||||
<link rel="manifest" href="/manifest.json">
|
|
||||||
<style>
|
<style>
|
||||||
:root{
|
:root{
|
||||||
--bg:#0a0a0f;--bg-2:#11131a;--bg-3:#161922;
|
--bg:#0a0a0f;--bg-2:#11131a;--bg-3:#161922;
|
||||||
--border:rgba(255,255,255,0.08);--border-2:rgba(255,255,255,0.14);
|
--border:rgba(255,255,255,0.08);--border-2:rgba(255,255,255,0.14);
|
||||||
--text:#e8eaf0;--text-dim:#8b909c;--text-faint:#5a5f6b;
|
--text:#e8eaf0;--text-dim:#8b909c;--text-faint:#5a5f6b;
|
||||||
--accent:#7c5cff;--accent-2:#00d4a8;--accent-glow:rgba(124,92,255,0.22);
|
--accent:#7c5cff;--accent-2:#00d4a8;
|
||||||
--green:#3ecf8e;--amber:#ffb547;--danger:#ff5c7c;
|
--green:#3ecf8e;--amber:#ffb547;--danger:#ff5c7c;
|
||||||
--radius:12px;--radius-lg:18px;
|
--radius:12px;
|
||||||
--sans:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display',system-ui,sans-serif;
|
--sans:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
|
||||||
--mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;
|
--mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;
|
||||||
|
--sidebar:220px;
|
||||||
}
|
}
|
||||||
*{margin:0;padding:0;box-sizing:border-box}
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
|
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
|
||||||
a{color:inherit;text-decoration:none}
|
|
||||||
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
||||||
::-webkit-scrollbar{width:10px;height:10px}
|
::-webkit-scrollbar{width:6px}
|
||||||
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:6px}
|
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:6px}
|
||||||
::-webkit-scrollbar-track{background:transparent}
|
|
||||||
|
|
||||||
/* topbar */
|
.shell{display:flex;height:100vh;overflow:hidden}
|
||||||
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(10,10,15,0.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
|
|
||||||
.topbar-brand{display:flex;align-items:center;gap:12px}
|
|
||||||
.logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#0a0a0f;flex-shrink:0}
|
|
||||||
.topbar-name{font-weight:800;font-size:16px;letter-spacing:-0.02em}
|
|
||||||
.topbar-sep{color:var(--text-faint);font-weight:300}
|
|
||||||
.topbar-sub{color:var(--text-dim);font-size:14px}
|
|
||||||
.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
|
|
||||||
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:var(--bg-3);border:1px solid var(--border);font-size:12px;color:var(--text-dim);font-weight:500;cursor:default}
|
|
||||||
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
|
|
||||||
.dot.amber{background:var(--amber)}
|
|
||||||
.dot.red{background:var(--danger)}
|
|
||||||
.dot.dim{background:var(--text-faint)}
|
|
||||||
.dot.pulse{animation:pulse 2s infinite}
|
|
||||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
|
|
||||||
.topbar-id{font-family:var(--mono);font-size:11px;color:var(--text-faint)}
|
|
||||||
|
|
||||||
/* shell */
|
/* SIDEBAR */
|
||||||
.shell{display:flex;min-height:calc(100vh - 60px)}
|
.sidebar{
|
||||||
.sidebar{width:230px;flex-shrink:0;padding:24px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto}
|
width:var(--sidebar);flex-shrink:0;
|
||||||
.side-label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);font-weight:600;padding:14px 12px 6px}
|
background:var(--bg-2);border-right:1px solid var(--border);
|
||||||
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--text-dim);font-weight:500;transition:background .15s,color .15s}
|
display:flex;flex-direction:column;padding:20px 12px;gap:2px;overflow-y:auto;
|
||||||
.nav-item:hover{background:var(--bg-2);color:var(--text)}
|
}
|
||||||
|
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px}
|
||||||
|
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#0a0a0f;font-weight:900;font-size:13px;flex-shrink:0}
|
||||||
|
.brand-name{font-weight:800;font-size:15px;letter-spacing:-0.02em}
|
||||||
|
.brand-sub{font-size:10px;color:var(--text-faint);font-family:var(--mono)}
|
||||||
|
.side-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);font-weight:700;padding:14px 10px 4px}
|
||||||
|
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:13px;color:var(--text-dim);font-weight:500;cursor:pointer;transition:background .14s,color .14s;user-select:none}
|
||||||
|
.nav-item:hover{background:var(--bg-3);color:var(--text)}
|
||||||
.nav-item.active{background:var(--bg-3);color:var(--text)}
|
.nav-item.active{background:var(--bg-3);color:var(--text)}
|
||||||
.nav-item svg{flex-shrink:0;opacity:.8}
|
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
|
||||||
.nav-badge{margin-left:auto;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--bg-3);color:var(--text-dim);border:1px solid var(--border)}
|
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--green);color:#0a0a0f;padding:1px 6px;border-radius:99px}
|
||||||
.nav-badge.live{background:rgba(62,207,142,0.12);color:var(--green);border-color:rgba(62,207,142,0.2)}
|
.build-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);margin-left:auto;flex-shrink:0}
|
||||||
.nav-badge.soon{background:rgba(255,181,71,0.1);color:var(--amber);border-color:rgba(255,181,71,0.18)}
|
.build-dot.ok{background:var(--green)}
|
||||||
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
|
.build-dot.fail{background:var(--danger)}
|
||||||
.me-card{padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border)}
|
.build-dot.running{background:var(--amber);animation:pulse 1.2s infinite}
|
||||||
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
|
||||||
|
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
|
||||||
|
.me-card{padding:10px;border-radius:9px;background:var(--bg-3);border:1px solid var(--border)}
|
||||||
.me-name{font-size:12px;font-weight:600}
|
.me-name{font-size:12px;font-weight:600}
|
||||||
.me-role{font-size:11px;color:var(--text-faint);margin-top:2px;font-family:var(--mono)}
|
.me-role{font-size:10px;color:var(--text-faint);margin-top:1px;font-family:var(--mono)}
|
||||||
|
.me-session{font-size:9px;color:var(--text-faint);font-family:var(--mono);margin-top:5px;word-break:break-all}
|
||||||
|
|
||||||
/* main */
|
/* MAIN */
|
||||||
.main{flex:1;padding:32px 40px 56px;max-width:1180px;width:100%}
|
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
|
||||||
.page-head{margin-bottom:36px}
|
|
||||||
.page-title{font-size:30px;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(180deg,#fff 0%,#a8aabc 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
|
|
||||||
.page-desc{color:var(--text-dim);font-size:15px;margin-top:6px;max-width:640px}
|
|
||||||
.section{margin-bottom:44px}
|
|
||||||
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
|
|
||||||
.section-label{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint);font-weight:700}
|
|
||||||
.section-line{flex:1;height:1px;background:var(--border)}
|
|
||||||
|
|
||||||
/* cards */
|
/* TOPBAR */
|
||||||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
|
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(10,10,15,0.92);backdrop-filter:blur(16px);flex-shrink:0;height:52px}
|
||||||
.card{padding:24px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color .2s,transform .2s,background .2s;position:relative;overflow:hidden}
|
.topbar-title{font-size:14px;font-weight:700;letter-spacing:-0.01em}
|
||||||
.card.clickable{cursor:pointer}
|
.topbar-sub{font-size:11px;color:var(--text-faint);font-family:var(--mono);margin-left:4px}
|
||||||
.card.clickable:hover{border-color:var(--border-2);transform:translateY(-2px);background:#13151e}
|
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
|
||||||
.card.muted{opacity:.62}
|
.topbar-user{font-size:12px;color:var(--text-dim);background:var(--bg-2);border:1px solid var(--border);padding:4px 10px;border-radius:7px}
|
||||||
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
|
.build-pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--bg-2);border:1px solid var(--border);display:flex;align-items:center;gap:6px;cursor:pointer}
|
||||||
.card-icon{width:40px;height:40px;border-radius:11px;background:var(--bg-3);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:var(--accent)}
|
.build-pill:hover{border-color:var(--border-2)}
|
||||||
.tag{font-size:10px;font-weight:700;letter-spacing:0.06em;padding:4px 10px;border-radius:99px;text-transform:uppercase}
|
.build-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0}
|
||||||
.tag.live{background:rgba(62,207,142,0.12);color:var(--green);border:1px solid rgba(62,207,142,0.22)}
|
.build-pill-dot.ok{background:var(--green)}
|
||||||
.tag.soon{background:var(--bg-3);color:var(--text-dim);border:1px solid var(--border)}
|
.build-pill-dot.fail{background:var(--danger)}
|
||||||
.card-name{font-size:17px;font-weight:700;letter-spacing:-0.01em}
|
.build-pill-dot.running{background:var(--amber);animation:pulse 1.2s infinite}
|
||||||
.card-desc{font-size:13.5px;color:var(--text-dim);margin-top:8px;line-height:1.55}
|
|
||||||
.card-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:12px;color:var(--text-faint);font-family:var(--mono)}
|
|
||||||
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13px;font-weight:600;color:var(--accent)}
|
|
||||||
.card-link:hover{color:#9b80ff}
|
|
||||||
|
|
||||||
/* agents */
|
/* PANELS */
|
||||||
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
|
.panels{flex:1;overflow:hidden;position:relative}
|
||||||
.agent-row{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s,background .2s}
|
.panel{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
|
||||||
.agent-row.actionable{cursor:pointer}
|
.panel.active{display:flex}
|
||||||
.agent-row.actionable:hover{border-color:var(--border-2);background:#13151e}
|
|
||||||
.agent-name{font-size:14px;font-weight:600}
|
|
||||||
.agent-desc{font-size:12px;color:var(--text-faint);margin-top:2px;font-family:var(--mono)}
|
|
||||||
.agent-go{margin-left:auto;font-size:11px;color:var(--accent);font-weight:600;opacity:0;transition:opacity .2s}
|
|
||||||
.agent-row.actionable:hover .agent-go{opacity:1}
|
|
||||||
|
|
||||||
/* build widget */
|
/* SHARED panel header */
|
||||||
.build-widget{padding:20px 24px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
|
.panel-head{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||||||
.build-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:var(--bg-3);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center}
|
.p-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
|
||||||
.build-info{flex:1;min-width:180px}
|
.p-title{font-size:14px;font-weight:700;letter-spacing:-0.01em}
|
||||||
.build-title{font-size:14px;font-weight:700;margin-bottom:3px}
|
.p-sub{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:5px;margin-top:2px}
|
||||||
.build-meta{font-size:12px;color:var(--text-faint);font-family:var(--mono)}
|
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2.4s infinite}
|
||||||
.build-status-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
|
.p-actions{margin-left:auto;display:flex;gap:8px}
|
||||||
.build-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600}
|
.hbtn{padding:5px 12px;border-radius:7px;font-size:11px;font-weight:600;background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);transition:background .14s,color .14s}
|
||||||
.build-badge.working{background:rgba(255,181,71,0.12);color:var(--amber);border:1px solid rgba(255,181,71,0.25)}
|
.hbtn:hover{background:var(--bg-3);color:var(--text)}
|
||||||
.build-badge.success{background:rgba(62,207,142,0.12);color:var(--green);border:1px solid rgba(62,207,142,0.22)}
|
.hbtn.danger:hover{color:var(--danger);border-color:rgba(255,92,124,.3)}
|
||||||
.build-badge.failure,.build-badge.timeout,.build-badge.internal_error{background:rgba(255,92,124,0.1);color:var(--danger);border:1px solid rgba(255,92,124,0.2)}
|
|
||||||
.build-badge.queued,.build-badge.unknown,.build-badge.error{background:var(--bg-3);color:var(--text-dim);border:1px solid var(--border)}
|
|
||||||
.build-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--amber);border-top-color:transparent;animation:spin .7s linear infinite;flex-shrink:0}
|
|
||||||
@keyframes spin{to{transform:rotate(360deg)}}
|
|
||||||
.build-duration,.build-commit{font-size:11px;color:var(--text-faint);font-family:var(--mono)}
|
|
||||||
.build-log-link{font-size:12px;color:var(--accent);font-weight:600}
|
|
||||||
.build-log-link:hover{color:#9b80ff}
|
|
||||||
|
|
||||||
/* infra */
|
/* panel scroll body */
|
||||||
.infra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
|
.panel-body{flex:1;overflow-y:auto;padding:28px 32px}
|
||||||
.infra-item{padding:16px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius)}
|
|
||||||
.infra-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint);font-weight:600;margin-bottom:6px}
|
|
||||||
.infra-value{font-size:14px;font-weight:600;font-family:var(--mono);display:flex;align-items:center;gap:8px}
|
|
||||||
.infra-value.ok{color:var(--green)}
|
|
||||||
.infra-value.warn{color:var(--amber)}
|
|
||||||
.infra-value.neutral{color:var(--text)}
|
|
||||||
|
|
||||||
/* ── OX1b: TUI panel ── */
|
/* JASON */
|
||||||
.tui-panel{
|
.messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:18px}
|
||||||
background:var(--bg-2);border:1px solid var(--border);
|
.msg{display:flex;gap:12px;max-width:820px;width:100%}
|
||||||
border-radius:var(--radius-lg);overflow:hidden;
|
.msg.user{align-self:flex-end;flex-direction:row-reverse}
|
||||||
|
.msg-av{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
|
||||||
|
.msg.user .msg-av{background:var(--accent);color:#fff;font-weight:700;font-size:11px}
|
||||||
|
.msg.jason .msg-av{background:linear-gradient(135deg,var(--accent),var(--accent-2));font-size:14px}
|
||||||
|
.msg-body{display:flex;flex-direction:column;gap:3px;min-width:0}
|
||||||
|
.msg.user .msg-body{align-items:flex-end}
|
||||||
|
.msg-meta{font-size:10px;color:var(--text-faint);font-family:var(--mono)}
|
||||||
|
.bubble{padding:11px 15px;border-radius:13px;font-size:13.5px;line-height:1.65;max-width:700px;word-break:break-word;white-space:pre-wrap}
|
||||||
|
.msg.user .bubble{background:var(--accent);color:#fff;border-radius:13px 4px 13px 13px}
|
||||||
|
.msg.jason .bubble{background:var(--bg-2);border:1px solid var(--border);color:var(--text);border-radius:4px 13px 13px 13px}
|
||||||
|
.bubble code{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px}
|
||||||
|
.bubble pre{background:rgba(0,0,0,.35);padding:12px;border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:12px;margin:8px 0}
|
||||||
|
.typing-dots{display:flex;gap:4px;align-items:center;padding:4px 0}
|
||||||
|
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:bounce 1.2s infinite}
|
||||||
|
.typing-dots span:nth-child(2){animation-delay:.2s}
|
||||||
|
.typing-dots span:nth-child(3){animation-delay:.4s}
|
||||||
|
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
|
||||||
|
.input-wrap{padding:14px 24px 18px;border-top:1px solid var(--border);flex-shrink:0}
|
||||||
|
.input-row{display:flex;gap:10px;align-items:flex-end;background:var(--bg-2);border:1px solid var(--border-2);border-radius:13px;padding:9px 13px;transition:border-color .2s}
|
||||||
|
.input-row:focus-within{border-color:var(--accent)}
|
||||||
|
#msg-input{flex:1;background:none;border:none;color:var(--text);font-family:var(--sans);font-size:14px;resize:none;outline:none;min-height:22px;max-height:160px;line-height:1.55}
|
||||||
|
#msg-input::placeholder{color:var(--text-faint)}
|
||||||
|
.send-btn{width:32px;height:32px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,opacity .15s}
|
||||||
|
.send-btn:hover{background:#6a4cff}
|
||||||
|
.send-btn:disabled{opacity:.35;cursor:default}
|
||||||
|
.input-hint{font-size:11px;color:var(--text-faint);margin-top:6px;padding:0 3px}
|
||||||
|
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center}
|
||||||
|
.empty-icon{font-size:44px}
|
||||||
|
.empty-title{font-size:19px;font-weight:700;letter-spacing:-0.02em}
|
||||||
|
.empty-desc{font-size:13.5px;color:var(--text-dim);max-width:380px;line-height:1.6}
|
||||||
|
.suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
|
||||||
|
.sug-btn{padding:7px 15px;border-radius:99px;background:var(--bg-2);border:1px solid var(--border);font-size:12.5px;color:var(--text-dim);transition:background .14s,color .14s,border-color .14s}
|
||||||
|
.sug-btn:hover{background:var(--bg-3);color:var(--text);border-color:var(--border-2)}
|
||||||
|
.error-bar{display:none;background:rgba(255,92,124,.1);border:1px solid rgba(255,92,124,.2);color:var(--danger);font-size:12px;padding:7px 16px;border-radius:8px;margin:0 24px 6px;text-align:center}
|
||||||
|
.error-bar.show{display:block}
|
||||||
|
|
||||||
|
/* BILLING */
|
||||||
|
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:28px}
|
||||||
|
.stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
|
||||||
|
.stat-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
|
||||||
|
.stat-value{font-size:26px;font-weight:800;letter-spacing:-0.03em;margin-top:6px}
|
||||||
|
.stat-sub{font-size:11px;color:var(--text-dim);margin-top:3px}
|
||||||
|
.stat-card.c-accent{border-color:rgba(124,92,255,.3);background:rgba(124,92,255,.06)}
|
||||||
|
.stat-card.c-green{border-color:rgba(62,207,142,.3);background:rgba(62,207,142,.06)}
|
||||||
|
.stat-card.c-amber{border-color:rgba(255,181,71,.3);background:rgba(255,181,71,.06)}
|
||||||
|
.sec-title{font-size:12px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px}
|
||||||
|
.anomaly-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
|
||||||
|
.anom{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:12px 16px}
|
||||||
|
.anom-icon{font-size:18px;flex-shrink:0}
|
||||||
|
.anom-info{flex:1;min-width:0}
|
||||||
|
.anom-title{font-size:13px;font-weight:600}
|
||||||
|
.anom-desc{font-size:11px;color:var(--text-dim);margin-top:2px}
|
||||||
|
.anom-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,181,71,.15);color:var(--amber);white-space:nowrap}
|
||||||
|
.anom-badge.high{background:rgba(255,92,124,.15);color:var(--danger)}
|
||||||
|
.mod-table{width:100%;border-collapse:collapse;font-size:13px}
|
||||||
|
.mod-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border)}
|
||||||
|
.mod-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
|
||||||
|
.mod-table tr:last-child td{border-bottom:none}
|
||||||
|
.mod-table tr:hover td{background:rgba(255,255,255,.02)}
|
||||||
|
.mod-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
|
||||||
|
|
||||||
|
/* BUILD */
|
||||||
|
.build-list{display:flex;flex-direction:column;gap:10px}
|
||||||
|
.build-item{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
|
||||||
|
.build-item:hover{border-color:var(--border-2)}
|
||||||
|
.build-ico{font-size:20px;flex-shrink:0}
|
||||||
|
.build-info{flex:1;min-width:0}
|
||||||
|
.build-id{font-size:12px;font-family:var(--mono);color:var(--text-faint)}
|
||||||
|
.build-branch{font-size:13px;font-weight:600;margin-top:2px}
|
||||||
|
.build-time{font-size:11px;color:var(--text-dim);margin-top:2px}
|
||||||
|
.log-box{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--text-dim);max-height:300px;overflow-y:auto;line-height:1.7}
|
||||||
|
.ll-ok{color:var(--green)}
|
||||||
|
.ll-fail{color:var(--danger)}
|
||||||
|
.ll-info{color:var(--accent-2)}
|
||||||
|
|
||||||
|
/* TERMINAL */
|
||||||
|
.term-wrap{flex:1;display:flex;flex-direction:column;background:#0d0d12;overflow:hidden}
|
||||||
|
.term-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||||||
|
.tdot{width:10px;height:10px;border-radius:50%}
|
||||||
|
.tdot.r{background:#ff5c7c}.tdot.y{background:#ffb547}.tdot.g{background:#3ecf8e}
|
||||||
|
.term-title{font-size:12px;font-family:var(--mono);color:var(--text-faint);margin:0 auto}
|
||||||
|
.term-body{flex:1;overflow-y:auto;padding:16px 20px;font-family:var(--mono);font-size:13px;line-height:1.7;color:#c8ccd8}
|
||||||
|
.tl{white-space:pre-wrap;word-break:break-all}
|
||||||
|
.tl.cmd{color:#7c5cff}.tl.ok{color:#3ecf8e}.tl.err{color:#ff5c7c}.tl.info{color:#00d4a8}
|
||||||
|
.term-input-row{display:flex;align-items:center;gap:8px;padding:10px 20px;border-top:1px solid var(--border);flex-shrink:0}
|
||||||
|
.term-prompt{font-family:var(--mono);font-size:13px;color:var(--accent-2);white-space:nowrap}
|
||||||
|
.term-in{flex:1;background:none;border:none;outline:none;font-family:var(--mono);font-size:13px;color:var(--text)}
|
||||||
|
.term-in::placeholder{color:var(--text-faint)}
|
||||||
|
|
||||||
|
/* SITES */
|
||||||
|
.sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
|
||||||
|
.site-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .14s}
|
||||||
|
.site-card:hover{border-color:var(--border-2)}
|
||||||
|
.site-hd{display:flex;align-items:center;gap:10px}
|
||||||
|
.site-icon{font-size:22px}
|
||||||
|
.site-name{font-size:14px;font-weight:700}
|
||||||
|
.site-url{font-size:11px;font-family:var(--mono);color:var(--text-faint)}
|
||||||
|
.site-desc{font-size:12px;color:var(--text-dim);line-height:1.5}
|
||||||
|
.site-ft{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
|
||||||
|
.site-status{font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px}
|
||||||
|
.site-status.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green)}
|
||||||
|
.site-status.pending::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber)}
|
||||||
|
.site-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:7px;background:var(--bg-3);border:1px solid var(--border);color:var(--text-dim);transition:background .14s,color .14s}
|
||||||
|
.site-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||||||
|
|
||||||
|
/* VMs */
|
||||||
|
.vm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
|
||||||
|
.vm-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px}
|
||||||
|
.vm-hd{display:flex;align-items:center;gap:10px}
|
||||||
|
.vm-name{font-size:14px;font-weight:700}
|
||||||
|
.vm-type{font-size:11px;font-family:var(--mono);color:var(--text-faint)}
|
||||||
|
.vm-meta{display:flex;flex-direction:column;gap:4px}
|
||||||
|
.vm-row{display:flex;justify-content:space-between;font-size:12px}
|
||||||
|
.vm-k{color:var(--text-faint)}
|
||||||
|
.vm-v{font-family:var(--mono);color:var(--text-dim)}
|
||||||
|
.vm-actions{display:flex;gap:8px;margin-top:4px}
|
||||||
|
.vm-btn{flex:1;padding:7px;border-radius:8px;font-size:12px;font-weight:600;background:var(--bg-3);border:1px solid var(--border);color:var(--text-dim);transition:background .14s,color .14s;text-align:center;text-decoration:none;display:block}
|
||||||
|
.vm-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||||||
|
.vm-btn.stop:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
|
||||||
|
.vm-running{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green)}
|
||||||
|
.vm-running::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
|
||||||
|
|
||||||
|
/* iframe overlay */
|
||||||
|
.if-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-2);flex-shrink:0}
|
||||||
|
.if-url{font-size:11px;font-family:var(--mono);color:var(--text-faint);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||||
|
.if-btn{font-size:11px;padding:4px 10px;border-radius:6px;background:var(--bg-3);border:1px solid var(--border);color:var(--text-dim);transition:background .14s;white-space:nowrap}
|
||||||
|
.if-btn:hover{background:var(--bg);color:var(--text)}
|
||||||
|
.if-frame{flex:1;border:none;width:100%;height:100%}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="shell">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<nav class="sidebar">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="logo">V</div>
|
||||||
|
<div>
|
||||||
|
<div class="brand-name">OPAX</div>
|
||||||
|
<div class="brand-sub">operator hub</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-label">Agenter</div>
|
||||||
|
<div class="nav-item active" onclick="go('jason')" id="nav-jason">
|
||||||
|
<span class="nav-icon">🤖</span> Jason
|
||||||
|
<span class="nav-badge">live</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-label">Oversikt</div>
|
||||||
|
<div class="nav-item" onclick="go('billing')" id="nav-billing">
|
||||||
|
<span class="nav-icon">💰</span> CostGuard
|
||||||
|
</div>
|
||||||
|
<div class="nav-item" onclick="go('build')" id="nav-build">
|
||||||
|
<span class="nav-icon">🔨</span> Cloud Build
|
||||||
|
<div class="build-dot" id="sb-build-dot"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-label">Infrastruktur</div>
|
||||||
|
<div class="nav-item" onclick="go('vms')" id="nav-vms">
|
||||||
|
<span class="nav-icon">💻</span> VM-er
|
||||||
|
</div>
|
||||||
|
<div class="nav-item" onclick="go('sites')" id="nav-sites">
|
||||||
|
<span class="nav-icon">🌐</span> Sites & Moduler
|
||||||
|
</div>
|
||||||
|
<div class="nav-item" onclick="go('terminal')" id="nav-terminal">
|
||||||
|
<span class="nav-icon">⌨️</span> Terminal
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-foot">
|
||||||
|
<div class="me-card">
|
||||||
|
<div class="me-name">Chris Christiansen</div>
|
||||||
|
<div class="me-role">operator · vauco.no</div>
|
||||||
|
<div class="me-session" id="sb-session">session: laster...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- MAIN -->
|
||||||
|
<div class="main">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="topbar-title" id="tb-title">Jason</div>
|
||||||
|
<span class="topbar-sub" id="tb-sub">Gemini 2.5 Pro · ADK</span>
|
||||||
|
<div class="topbar-right">
|
||||||
|
<div class="build-pill" onclick="go('build')">
|
||||||
|
<div class="build-pill-dot" id="tb-build-dot"></div>
|
||||||
|
<span id="tb-build-txt">Build: sjekker...</span>
|
||||||
|
</div>
|
||||||
|
<div class="topbar-user">👤 chris · admin</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panels">
|
||||||
|
|
||||||
|
<!-- JASON -->
|
||||||
|
<div class="panel active" id="panel-jason">
|
||||||
|
<div class="panel-head">
|
||||||
|
<div class="p-avatar" style="background:linear-gradient(135deg,var(--accent),var(--accent-2))">🤖</div>
|
||||||
|
<div>
|
||||||
|
<div class="p-title">Jason Vauger</div>
|
||||||
|
<div class="p-sub"><span class="online-dot"></span>Online · ADK + Gemini 2.5 Pro</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-actions">
|
||||||
|
<button class="hbtn" onclick="exportHistory()">⬇ Eksport</button>
|
||||||
|
<button class="hbtn danger" onclick="clearHistory()">Tøm chat</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="error-bar" id="error-bar"></div>
|
||||||
|
<div class="messages" id="messages">
|
||||||
|
<div class="empty-state" id="empty-state">
|
||||||
|
<div class="empty-icon">🤖</div>
|
||||||
|
<div class="empty-title">Jason er klar</div>
|
||||||
|
<div class="empty-desc">Primærgrensesnitt for Vauco OS. Still spørsmål, gi oppgaver, be om status på infrastruktur, builds og agenter.</div>
|
||||||
|
<div class="suggestions">
|
||||||
|
<button class="sug-btn" onclick="suggest(this)">Hva er status på siste build?</button>
|
||||||
|
<button class="sug-btn" onclick="suggest(this)">Oppsummer token-forbruk siste 7 dager</button>
|
||||||
|
<button class="sug-btn" onclick="suggest(this)">Hvilke oppgaver er aktive i ROADMAP?</button>
|
||||||
|
<button class="sug-btn" onclick="suggest(this)">Sjekk anomalier i dag</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-wrap">
|
||||||
|
<div class="input-row">
|
||||||
|
<textarea id="msg-input" rows="1" placeholder="Skriv til Jason... (Enter sender, Shift+Enter ny linje)" oninput="autoResize(this)" onkeydown="handleKey(event)"></textarea>
|
||||||
|
<button class="send-btn" id="send-btn" onclick="sendMessage()" disabled>
|
||||||
|
<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="input-hint">Jason har tilgang til GCP, GitHub og Vauco-agenter. Historikk lagres i denne nettleseren.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BILLING -->
|
||||||
|
<div class="panel" id="panel-billing">
|
||||||
|
<div class="panel-head">
|
||||||
|
<div class="p-avatar" style="background:linear-gradient(135deg,#00d4a8,#3ecf8e)">💰</div>
|
||||||
|
<div>
|
||||||
|
<div class="p-title">CostGuard — Token & Kostnad</div>
|
||||||
|
<div class="p-sub"><span class="online-dot"></span>Live data fra OPAX</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-actions"><button class="hbtn" onclick="loadBilling()">↻ Refresh</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body" id="billing-body">
|
||||||
|
<div class="empty-state"><div class="empty-icon">💰</div><div class="empty-title">Laster...</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BUILD -->
|
||||||
|
<div class="panel" id="panel-build">
|
||||||
|
<div class="panel-head">
|
||||||
|
<div class="p-avatar" style="background:linear-gradient(135deg,#ffb547,#ff5c7c)">🔨</div>
|
||||||
|
<div>
|
||||||
|
<div class="p-title">Cloud Build — Pipeline</div>
|
||||||
|
<div class="p-sub" id="build-panel-sub"><span style="width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block;margin-right:5px"></span>Sjekker...</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-actions"><button class="hbtn" onclick="loadBuild()">↻ Refresh</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body" id="build-body">
|
||||||
|
<div class="empty-state"><div class="empty-icon">🔨</div><div class="empty-title">Laster...</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- VMs -->
|
||||||
|
<div class="panel" id="panel-vms">
|
||||||
|
<div class="panel-head">
|
||||||
|
<div class="p-avatar" style="background:linear-gradient(135deg,#7c5cff,#5c8fff)">💻</div>
|
||||||
|
<div>
|
||||||
|
<div class="p-title">VM-er</div>
|
||||||
|
<div class="p-sub">Compute Engine · us-central1-b</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="vm-grid">
|
||||||
|
<div class="vm-card">
|
||||||
|
<div class="vm-hd">
|
||||||
|
<span style="font-size:22px">🖥️</span>
|
||||||
|
<div>
|
||||||
|
<div class="vm-name">osvauco-dev-vm</div>
|
||||||
|
<div class="vm-type">e2-standard-2 · us-central1-b</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vm-meta">
|
||||||
|
<div class="vm-row"><span class="vm-k">IP ekstern</span><span class="vm-v">34.59.131.162</span></div>
|
||||||
|
<div class="vm-row"><span class="vm-k">IP intern</span><span class="vm-v">10.128.0.5</span></div>
|
||||||
|
<div class="vm-row"><span class="vm-k">Prosjekt</span><span class="vm-v">propane-will-491900-m5</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="vm-running">RUNNING</div>
|
||||||
|
<div class="vm-actions">
|
||||||
|
<a class="vm-btn" href="https://ssh.cloud.google.com/v2/ssh/projects/propane-will-491900-m5/zones/us-central1-b/instances/osvauco-dev-vm" target="_blank">🔗 SSH</a>
|
||||||
|
<a class="vm-btn" href="https://console.cloud.google.com/compute/instancesDetail/zones/us-central1-b/instances/osvauco-dev-vm?project=propane-will-491900-m5" target="_blank">⚙ GCP</a>
|
||||||
|
<button class="vm-btn stop" onclick="confirmVmStop()">⏹ Stop</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SITES -->
|
||||||
|
<div class="panel" id="panel-sites">
|
||||||
|
<div class="panel-head">
|
||||||
|
<div class="p-avatar" style="background:linear-gradient(135deg,#00d4a8,#7c5cff)">🌐</div>
|
||||||
|
<div>
|
||||||
|
<div class="p-title">Sites & Moduler</div>
|
||||||
|
<div class="p-sub">Alle Vauco-flater</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="sites-grid" id="sites-grid"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TERMINAL -->
|
||||||
|
<div class="panel" id="panel-terminal">
|
||||||
|
<div class="term-wrap">
|
||||||
|
<div class="term-toolbar">
|
||||||
|
<div class="tdot r"></div><div class="tdot y"></div><div class="tdot g"></div>
|
||||||
|
<div class="term-title">OPAX Terminal · osvauco-agent · us-central1</div>
|
||||||
|
</div>
|
||||||
|
<div class="term-body" id="term-body"></div>
|
||||||
|
<div class="term-input-row">
|
||||||
|
<span class="term-prompt">chris@opax:~$</span>
|
||||||
|
<input class="term-in" id="term-in" placeholder="health / billing / build / clear / help" onkeydown="termKey(event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /panels -->
|
||||||
|
</div><!-- /main -->
|
||||||
|
</div><!-- /shell -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// CONFIG
|
||||||
|
const AGENT_URL = ''
|
||||||
|
const USER_ID = 'chris'
|
||||||
|
const STORAGE_KEY = 'jason_history_v2'
|
||||||
|
const SESSION_KEY = 'jason_session_v2'
|
||||||
|
|
||||||
|
const PANEL_META = {
|
||||||
|
jason: ['Jason', 'Gemini 2.5 Pro · ADK'],
|
||||||
|
billing: ['CostGuard', 'Token & kostnad · live'],
|
||||||
|
build: ['Cloud Build', 'Pipeline · propane-will-491900-m5'],
|
||||||
|
vms: ['VM-er', 'Compute Engine · us-central1-b'],
|
||||||
|
sites: ['Sites & Moduler', 'Alle Vauco-flater'],
|
||||||
|
terminal: ['Terminal', 'OPAX agent · Cloud Run'],
|
||||||
|
}
|
||||||
|
|
||||||
|
const SITES_DATA = [
|
||||||
|
{icon:'🏢', name:'vauco.no', url:'https://vauco.no', desc:'Bedriftens salgsportal', status:'live'},
|
||||||
|
{icon:'🤖', name:'OPAX Hub', url:'https://opax.vauco.no', desc:'Operator cockpit — du er her', status:'live'},
|
||||||
|
{icon:'💰', name:'CostGuard', url:'https://costguard.oss.vauco.no', desc:'Kostnadsmodul · staging', status:'live'},
|
||||||
|
{icon:'🧵', name:'Threadstone', url:'https://threadstone.vauco.no', desc:'Landingsside', status:'live'},
|
||||||
|
{icon:'🧵', name:'Threadstone App', url:'https://app.threadstone.vauco.no', desc:'App frontend · under bygg', status:'pending'},
|
||||||
|
{icon:'🔧', name:'Jason Chat', url:'https://opax.vauco.no/static/jason.html', desc:'Jason standalone UI', status:'live'},
|
||||||
|
]
|
||||||
|
|
||||||
|
// SESSION
|
||||||
|
function sid(){
|
||||||
|
let s = sessionStorage.getItem(SESSION_KEY)
|
||||||
|
if(!s){ s='ses-'+Date.now()+'-'+Math.random().toString(36).slice(2,8); sessionStorage.setItem(SESSION_KEY,s) }
|
||||||
|
return s
|
||||||
|
}
|
||||||
|
const SESSION_ID = sid()
|
||||||
|
document.getElementById('sb-session').textContent = 'session: '+SESSION_ID.slice(0,18)+'…'
|
||||||
|
|
||||||
|
// PANEL SWITCH
|
||||||
|
const PANELS = Object.keys(PANEL_META)
|
||||||
|
function go(name){
|
||||||
|
// remove any iframe overlay first
|
||||||
|
document.getElementById('panel-iframe-overlay')?.remove()
|
||||||
|
PANELS.forEach(p=>{
|
||||||
|
document.getElementById('panel-'+p).classList.remove('active')
|
||||||
|
document.getElementById('nav-'+p)?.classList.remove('active')
|
||||||
|
})
|
||||||
|
document.getElementById('panel-'+name).classList.add('active')
|
||||||
|
document.getElementById('nav-'+name)?.classList.add('active')
|
||||||
|
const [t,s] = PANEL_META[name]
|
||||||
|
document.getElementById('tb-title').textContent = t
|
||||||
|
document.getElementById('tb-sub').textContent = s
|
||||||
|
if(name==='billing') loadBilling()
|
||||||
|
if(name==='build') loadBuild()
|
||||||
|
if(name==='sites') renderSites()
|
||||||
|
if(name==='terminal') initTerminal()
|
||||||
|
}
|
||||||
|
|
||||||
|
// BUILD STATUS POLL
|
||||||
|
async function pollBuild(){
|
||||||
|
try{
|
||||||
|
const d = await fetch('/opax/build-status').then(r=>r.json())
|
||||||
|
const st = (d.status||'').toUpperCase()
|
||||||
|
const cls = st==='SUCCESS'?'ok':['FAILURE','TIMEOUT','CANCELLED'].includes(st)?'fail':st?'running':''
|
||||||
|
;['sb-build-dot','tb-build-dot'].forEach(id=>{ document.getElementById(id).className=(id==='sb-build-dot'?'build-dot ':'build-pill-dot ')+cls })
|
||||||
|
document.getElementById('tb-build-txt').textContent = 'Build: '+(st||'ukjent')
|
||||||
|
return d
|
||||||
|
}catch(e){
|
||||||
|
document.getElementById('tb-build-txt').textContent = 'Build: feil'
|
||||||
|
return null
|
||||||
}
|
}
|
||||||
.tui-head{
|
}
|
||||||
display:flex;align-items:center;gap:10px;
|
pollBuild()
|
||||||
padding:12px 18px;border-bottom:1px solid var(--border);
|
setInterval(pollBuild,30000)
|
||||||
background:var(--bg-3);
|
|
||||||
}
|
|
||||||
.tui-tabs{display:flex;gap:2px}
|
|
||||||
.tui-tab{
|
|
||||||
padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;
|
|
||||||
color:var(--text-dim);transition:background .15s,color .15s;
|
|
||||||
}
|
|
||||||
.tui-tab:hover{background:var(--bg-2);color:var(--text)}
|
|
||||||
.tui-tab.active{background:var(--accent);color:#fff}
|
|
||||||
.tui-actions{margin-left:auto;display:flex;gap:8px}
|
|
||||||
.tui-btn{
|
|
||||||
padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;
|
|
||||||
background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);
|
|
||||||
transition:background .15s,color .15s;
|
|
||||||
}
|
|
||||||
.tui-btn:hover{background:var(--bg-3);color:var(--text)}
|
|
||||||
.tui-btn.danger:hover{background:rgba(255,92,124,0.12);color:var(--danger);border-color:rgba(255,92,124,0.25)}
|
|
||||||
|
|
||||||
/* Chat-tab */
|
// BILLING
|
||||||
.tui-chat-body{
|
async function loadBilling(){
|
||||||
height:360px;overflow-y:auto;padding:20px;
|
const el=document.getElementById('billing-body')
|
||||||
display:flex;flex-direction:column;gap:12px;
|
el.innerHTML='<div class="empty-state"><div class="empty-icon">⏳</div><div class="empty-title">Laster data...</div></div>'
|
||||||
background:#0c0d13;
|
try{
|
||||||
font-family:var(--mono);font-size:13px;
|
const [sum,anm,mod] = await Promise.all([
|
||||||
|
fetch('/billing/summary').then(r=>r.json()).catch(()=>null),
|
||||||
|
fetch('/billing/anomalies').then(r=>r.json()).catch(()=>null),
|
||||||
|
fetch('/billing/tokens/by-module').then(r=>r.json()).catch(()=>null),
|
||||||
|
])
|
||||||
|
const total = sum?.total_tokens ?? '—'
|
||||||
|
const cost = sum?.estimated_cost_usd!=null?'$'+Number(sum.estimated_cost_usd).toFixed(4):'—'
|
||||||
|
const budg = sum?.budget_limit!=null?'$'+sum.budget_limit:'—'
|
||||||
|
let h = `<div class="stat-grid">
|
||||||
|
<div class="stat-card c-accent"><div class="stat-label">Totale tokens (30d)</div><div class="stat-value">${typeof total==='number'?total.toLocaleString('no'):total}</div><div class="stat-sub">Alle moduler</div></div>
|
||||||
|
<div class="stat-card c-green"><div class="stat-label">Estimert kostnad</div><div class="stat-value">${cost}</div><div class="stat-sub">Vertex AI · Gemini 2.5 Pro</div></div>
|
||||||
|
<div class="stat-card c-amber"><div class="stat-label">Budsjettgrense</div><div class="stat-value">${budg}</div><div class="stat-sub">Månedlig maks</div></div>
|
||||||
|
</div>`
|
||||||
|
const anoms = anm?.anomalies||[]
|
||||||
|
if(anoms.length){
|
||||||
|
h+='<div class="sec-title">⚠️ Anomalier</div><div class="anomaly-list">'
|
||||||
|
anoms.slice(0,5).forEach(a=>{
|
||||||
|
const sev=(a.severity||'').toLowerCase()
|
||||||
|
h+=`<div class="anom"><div class="anom-icon">${sev==='high'?'🔴':'🟡'}</div><div class="anom-info"><div class="anom-title">${esc(a.service||a.type||'Ukjent')}</div><div class="anom-desc">${esc(a.description||a.message||'')}</div></div><div class="anom-badge ${sev==='high'?'high':''}">${esc(a.severity||'medium')}</div></div>`
|
||||||
|
})
|
||||||
|
h+='</div>'
|
||||||
|
}else{ h+='<div class="sec-title" style="color:var(--green)">✅ Ingen anomalier</div>' }
|
||||||
|
const mods = mod?.modules||mod?.data||[]
|
||||||
|
if(mods.length){
|
||||||
|
const cols=['#7c5cff','#00d4a8','#ffb547','#ff5c7c','#3ecf8e']
|
||||||
|
h+='<div class="sec-title" style="margin-top:24px">Token-forbruk per modul</div><table class="mod-table"><thead><tr><th>Modul</th><th>Tokens</th><th>Input</th><th>Output</th></tr></thead><tbody>'
|
||||||
|
mods.forEach((m,i)=>{ h+=`<tr><td><span class="mod-dot" style="background:${cols[i%cols.length]}"></span>${esc(m.module||m.name||'—')}</td><td>${(m.total_tokens||0).toLocaleString('no')}</td><td>${(m.input_tokens||0).toLocaleString('no')}</td><td>${(m.output_tokens||0).toLocaleString('no')}</td></tr>` })
|
||||||
|
h+='</tbody></table>'
|
||||||
|
}
|
||||||
|
el.innerHTML=h
|
||||||
|
}catch(e){ el.innerHTML=`<div class="empty-state"><div class="empty-icon">❌</div><div class="empty-title">Feil</div><div class="empty-desc">${e.message}</div></div>` }
|
||||||
|
}
|
||||||
|
|
||||||
|
// BUILD PANEL
|
||||||
|
async function loadBuild(){
|
||||||
|
const el=document.getElementById('build-body')
|
||||||
|
el.innerHTML='<div class="empty-state"><div class="empty-icon">⏳</div><div class="empty-title">Laster builds...</div></div>'
|
||||||
|
const d=await pollBuild()
|
||||||
|
if(!d){el.innerHTML='<div class="empty-state"><div class="empty-icon">❌</div><div class="empty-title">Kunne ikke hente build</div></div>';return}
|
||||||
|
const st=(d.status||'').toUpperCase()
|
||||||
|
const ico=st==='SUCCESS'?'✅':['FAILURE','TIMEOUT'].includes(st)?'❌':'⏳'
|
||||||
|
document.getElementById('build-panel-sub').innerHTML=`<span style="width:6px;height:6px;border-radius:50%;background:${st==='SUCCESS'?'var(--green)':['FAILURE','TIMEOUT'].includes(st)?'var(--danger)':'var(--amber)'};display:inline-block;margin-right:5px"></span>${st}`
|
||||||
|
let h=`<div class="build-list"><div class="build-item"><div class="build-ico">${ico}</div><div class="build-info"><div class="build-id">${esc(d.build_id||d.id||'—')}</div><div class="build-branch">${esc(d.branch||d.trigger||'main')}</div><div class="build-time">${esc(d.created||d.timestamp||'—')}</div></div></div></div>`
|
||||||
|
const logs=d.log_lines||d.logs||[]
|
||||||
|
if(logs.length){
|
||||||
|
h+='<div class="log-box">'
|
||||||
|
logs.forEach(l=>{ const c=/error|fail/i.test(l)?'ll-fail':/success|done/i.test(l)?'ll-ok':''; h+=`<div class="${c}">${esc(l)}</div>` })
|
||||||
|
h+='</div>'
|
||||||
}
|
}
|
||||||
.tui-chat-foot{display:flex;gap:0;border-top:1px solid var(--border)}
|
el.innerHTML=h
|
||||||
.tui-prefix{padding:12px 14px;font-family:var(--mono);font-size:13px;color:var(--accent-2);background:#0c0d13;flex-shrink:0;display:flex;align-items:center}
|
}
|
||||||
.tui-input{
|
|
||||||
flex:1;background:#0c0d13;border:none;color:var(--text);
|
// SITES
|
||||||
font-family:var(--mono);font-size:13px;padding:12px 0;
|
function renderSites(){
|
||||||
outline:none;caret-color:var(--
|
const g=document.getElementById('sites-grid')
|
||||||
|
if(g.children.length) return
|
||||||
|
g.innerHTML=SITES_DATA.map(s=>`
|
||||||
|
<div class="site-card">
|
||||||
|
<div class="site-hd"><span class="site-icon">${s.icon}</span><div><div class="site-name">${s.name}</div><div class="site-url">${s.url}</div></div></div>
|
||||||
|
<div class="site-desc">${s.desc}</div>
|
||||||
|
<div class="site-ft">
|
||||||
|
<span class="site-status ${s.status}">${s.status==='live'?'Live':'Under bygg'}</span>
|
||||||
|
<button class="site-btn" onclick="openInline('${s.url}','${s.name}')">Åpne inline</button>
|
||||||
|
</div>
|
||||||
|
</div>`).join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
function openInline(url, name){
|
||||||
|
document.getElementById('panel-iframe-overlay')?.remove()
|
||||||
|
const p=document.createElement('div')
|
||||||
|
p.id='panel-iframe-overlay'
|
||||||
|
p.className='panel active'
|
||||||
|
p.style.cssText='z-index:10;background:var(--bg);display:flex;flex-direction:column'
|
||||||
|
p.innerHTML=`
|
||||||
|
<div class="if-bar">
|
||||||
|
<button class="if-btn" onclick="document.getElementById('panel-iframe-overlay').remove();go('sites')">← Tilbake</button>
|
||||||
|
<span class="if-url">${esc(url)}</span>
|
||||||
|
<button class="if-btn" onclick="document.getElementById('the-iframe').src=document.getElementById('the-iframe').src">↻</button>
|
||||||
|
</div>
|
||||||
|
<iframe id="the-iframe" class="if-frame" src="${url}" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>`
|
||||||
|
document.querySelector('.panels').appendChild(p)
|
||||||
|
document.getElementById('tb-title').textContent=name
|
||||||
|
document.getElementById('tb-sub').textContent=url
|
||||||
|
}
|
||||||
|
|
||||||
|
// TERMINAL
|
||||||
|
let termInited=false
|
||||||
|
function initTerminal(){
|
||||||
|
if(termInited) return
|
||||||
|
termInited=true
|
||||||
|
tprint('OPAX Terminal v1.0 · Cloud Run osvauco-agent','info')
|
||||||
|
tprint('Kommandoer: health billing build clear help','info')
|
||||||
|
tprint('')
|
||||||
|
}
|
||||||
|
function tprint(txt,cls=''){
|
||||||
|
const b=document.getElementById('term-body')
|
||||||
|
const d=document.createElement('div');d.className='tl '+(cls||'');d.textContent=txt
|
||||||
|
b.appendChild(d);b.scrollTop=b.scrollHeight
|
||||||
|
}
|
||||||
|
async function termKey(e){
|
||||||
|
if(e.key!=='Enter') return
|
||||||
|
const inp=document.getElementById('term-in')
|
||||||
|
const cmd=inp.value.trim();inp.value=''
|
||||||
|
if(!cmd) return
|
||||||
|
tprint('$ '+cmd,'cmd')
|
||||||
|
const parts=cmd.toLowerCase().split(' ')
|
||||||
|
switch(parts[0]){
|
||||||
|
case 'clear': document.getElementById('term-body').innerHTML=''; break
|
||||||
|
case 'help':
|
||||||
|
tprint(' health — sjekk /health')
|
||||||
|
tprint(' billing — hent billing summary')
|
||||||
|
tprint(' build — hent siste build-status')
|
||||||
|
tprint(' clear — tøm terminal')
|
||||||
|
break
|
||||||
|
case 'health':
|
||||||
|
try{ const d=await fetch('/health').then(r=>r.json()); tprint(JSON.stringify(d,null,2),'ok') }catch(e){ tprint('Feil: '+e.message,'err') }
|
||||||
|
break
|
||||||
|
case 'billing':
|
||||||
|
try{ const d=await fetch('/billing/summary').then(r=>r.json()); tprint(JSON.stringify(d,null,2),'ok') }catch(e){ tprint('Feil: '+e.message,'err') }
|
||||||
|
break
|
||||||
|
case 'build':
|
||||||
|
try{ const d=await fetch('/opax/build-status').then(r=>r.json()); tprint(JSON.stringify(d,null,2),'ok') }catch(e){ tprint('Feil: '+e.message,'err') }
|
||||||
|
break
|
||||||
|
default: tprint('Ukjent kommando: '+cmd+' (skriv «help»)','err')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function confirmVmStop(){
|
||||||
|
if(!confirm('⚠️ Stop osvauco-dev-vm? Du mister SSH-tilgang til den startes igjen.')) return
|
||||||
|
tprint('→ Stopper VM via: bash scripts/stop-osvauco-dev-vm.sh','info')
|
||||||
|
switchPanel('terminal');go('terminal')
|
||||||
|
}
|
||||||
|
|
||||||
|
// JASON CHAT
|
||||||
|
function lh(){ try{return JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]')}catch{return[]} }
|
||||||
|
function sh(h){ try{localStorage.setItem(STORAGE_KEY,JSON.stringify(h.slice(-120)))}catch{} }
|
||||||
|
function esc(s){ if(typeof s!=='string')s=String(s||''); return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') }
|
||||||
|
function fmt(ts){ return new Date(ts).toLocaleTimeString('no-NO',{hour:'2-digit',minute:'2-digit'}) }
|
||||||
|
function md(text){
|
||||||
|
let s=esc(text)
|
||||||
|
s=s.replace(/```([\s\S]*?)```/g,'<pre><code>$1</code></pre>')
|
||||||
|
s=s.replace(/`([^`]+)`/g,'<code>$1</code>')
|
||||||
|
s=s.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
|
||||||
|
return s
|
||||||
|
}
|
||||||
|
function appendMsg(role,text,ts){
|
||||||
|
document.getElementById('empty-state')?.remove()
|
||||||
|
const w=document.getElementById('messages'),iu=role==='user'
|
||||||
|
const d=document.createElement('div');d.className='msg '+(iu?'user':'jason')
|
||||||
|
d.innerHTML=`<div class="msg-av">${iu?'CC':'🤖'}</div><div class="msg-body"><div class="msg-meta">${iu?'deg':'Jason'} · ${fmt(ts||Date.now())}</div><div class="bubble">${iu?esc(text):md(text)}</div></div>`
|
||||||
|
w.appendChild(d);w.scrollTop=w.scrollHeight
|
||||||
|
}
|
||||||
|
function appendTyping(){
|
||||||
|
document.getElementById('empty-state')?.remove()
|
||||||
|
const w=document.getElementById('messages'),d=document.createElement('div')
|
||||||
|
d.className='msg jason';d.id='typing'
|
||||||
|
d.innerHTML='<div class="msg-av">🤖</div><div class="msg-body"><div class="msg-meta">Jason · skriver...</div><div class="bubble"><div class="typing-dots"><span></span><span></span><span></span></div></div></div>'
|
||||||
|
w.appendChild(d);w.scrollTop=w.scrollHeight
|
||||||
|
}
|
||||||
|
function rmTyping(){ document.getElementById('typing')?.remove() }
|
||||||
|
|
||||||
|
const inp=document.getElementById('msg-input'),sbtn=document.getElementById('send-btn')
|
||||||
|
inp.addEventListener('input',()=>sbtn.disabled=!inp.value.trim())
|
||||||
|
function autoResize(el){ el.style.height='auto';el.style.height=Math.min(el.scrollHeight,160)+'px' }
|
||||||
|
function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();if(!sbtn.disabled)sendMessage()} }
|
||||||
|
function suggest(btn){ inp.value=btn.textContent.trim();autoResize(inp);sbtn.disabled=false;sendMessage() }
|
||||||
|
|
||||||
|
let busy=false
|
||||||
|
async function sendMessage(){
|
||||||
|
if(busy)return
|
||||||
|
const txt=inp.value.trim();if(!txt)return
|
||||||
|
busy=true;sbtn.disabled=true;inp.value='';inp.style.height='auto'
|
||||||
|
document.getElementById('error-bar').classList.remove('show')
|
||||||
|
const ts=Date.now(),hist=lh();hist.push({role:'user',text:txt,ts});sh(hist)
|
||||||
|
appendMsg('user',txt,ts);appendTyping()
|
||||||
|
try{
|
||||||
|
const res=await fetch(AGENT_URL+'/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user_id:USER_ID,session_id:SESSION_ID,message:txt})})
|
||||||
|
rmTyping();if(!res.ok)throw new Error('HTTP '+res.status)
|
||||||
|
const data=await res.json(),reply=data.response||'(tomt svar)',rts=Date.now()
|
||||||
|
hist.push({role:'jason',text:reply,ts:rts});sh(hist);appendMsg('jason',reply,rts)
|
||||||
|
}catch(err){
|
||||||
|
rmTyping()
|
||||||
|
const b=document.getElementById('error-bar');b.textContent='Jason svarte ikke: '+err.message;b.classList.add('show')
|
||||||
|
}finally{busy=false;sbtn.disabled=!inp.value.trim();inp.focus()}
|
||||||
|
}
|
||||||
|
function clearHistory(){ if(!confirm('Tøm hele chat-historikken?'))return; localStorage.removeItem(STORAGE_KEY);sessionStorage.removeItem(SESSION_KEY);location.reload() }
|
||||||
|
function exportHistory(){
|
||||||
|
const h=lh(),lines=h.map(m=>`[${new Date(m.ts).toISOString()}] ${m.role.toUpperCase()}: ${m.text}`)
|
||||||
|
const a=document.createElement('a');a.href=URL.createObjectURL(new Blob([lines.join('\n\n')],{type:'text/plain'}));a.download='jason-historikk-'+new Date().toISOString().slice(0,10)+'.txt';a.click()
|
||||||
|
}
|
||||||
|
;(function(){ const h=lh();if(!h.length)return;h.forEach(m=>appendMsg(m.role,m.text,m.ts));document.getElementById('messages').scrollTop=99999 })()
|
||||||
|
inp.focus()
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user