@jmanuelcorral/openteam 0.11.0 → 0.12.0

package/dist/cli.js

@@ -2040,6 +2040,13 @@ var FAILURE_CAUSE_RULES = [
     "prompt-server"
   ]
 ];
+var TIMEOUT_NEEDLES = [
+  "timed out",
+  "timeout",
+  "timedout",
+  "etimedout",
+  "deadline exceeded"
+];
 function matchFailureCause(lowerReason) {
   for (const [needles, cls] of FAILURE_CAUSE_RULES) {
     if (needles.some((needle) => lowerReason.includes(needle))) {
@@ -2050,7 +2057,7 @@ function matchFailureCause(lowerReason) {
 }
 function classifyFailureForTelemetry(failureReason, failureStage) {
   const lower = failureReason.toLowerCase();
-  if (lower.includes("timed out") || lower.includes("timeout")) {
+  if (TIMEOUT_NEEDLES.some((needle) => lower.includes(needle))) {
     return "prompt-timeout";
   }
   if (lower.includes("did not include a session id") || lower.includes("missing session")) {
@@ -3517,91 +3524,80 @@ var RESTART_REQUIRED_KEYS = [
   "console.port"
 ];
 
+// src/web/graphRoute.ts
+var GRAPH_DISABLED_REMEDIATION = 'Agent tree is off. In .opencode/openteam.json set graph.mode to a value other than "off" and console.graphView.enabled to true, then restart the console.';
+var GRAPH_DISABLED_ENVELOPE = {
+  disabled: true,
+  reason: "graph-disabled",
+  remediation: GRAPH_DISABLED_REMEDIATION
+};
+var JSON_HEADERS = { "content-type": "application/json" };
+var GRAPH_SSE_EVENT = "graph";
+function graphSseMessage(json) {
+  return `event: ${GRAPH_SSE_EVENT}
+data: ${json}
+
+`;
+}
+function bearerFromHeader(request) {
+  const header = request.headers.authorization;
+  if (typeof header !== "string" || !header.startsWith("Bearer ")) {
+    return;
+  }
+  const value = header.slice("Bearer ".length).trim();
+  return value.length === 0 ? undefined : value;
+}
+function authorized(request, query, token) {
+  const provided = tokenFromQuery(query) ?? bearerFromHeader(request);
+  return provided !== undefined && safeEqualToken(provided, token);
+}
+async function handleGraphRoute(request, response, url, deps) {
+  if (url.pathname !== "/api/graph") {
+    return false;
+  }
+  if (request.method !== "GET") {
+    response.writeHead(405, JSON_HEADERS).end(JSON.stringify({ error: "method not allowed" }));
+    return true;
+  }
+  if (deps.remoteToken !== undefined && !authorized(request, url.searchParams, deps.remoteToken)) {
+    response.writeHead(401, JSON_HEADERS).end(JSON.stringify({ error: "unauthorized" }));
+    return true;
+  }
+  const view = await deps.readView();
+  response.writeHead(200, JSON_HEADERS).end(JSON.stringify(view));
+  return true;
+}
+
 // src/console/assets.ts
 var CONSOLE_STYLE = `
-:root{color-scheme:dark;--bg:#0f1115;--panel:#171a21;--fg:#e6e8eb;--muted:#8b929c;--good:#3fb950;--local:#58a6ff;--frontier:#d29922;--line:#262b34}
-*{box-sizing:border-box}
-body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}
-header{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
-header h1{font-size:18px;margin:0}
-header .meta{color:var(--muted);font-size:12px}
-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;padding:24px}
-.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
-.panel h2{font-size:14px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
-.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.stat{display:flex;flex-direction:column;gap:2px}
-.stat .k{color:var(--muted);font-size:12px}
-.stat .v{font-size:18px;font-weight:600}
-.good{color:var(--good)}
-.local{color:var(--local)}
-.frontier{color:var(--frontier)}
-.muted{color:var(--muted)}
-table{width:100%;border-collapse:collapse;font-size:13px}
-th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
-th{color:var(--muted);font-weight:600}
-.hash{font-family:ui-monospace,Consolas,monospace;color:var(--muted)}
-.progress{height:10px;background:#0b0d11;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
-.progress .bar{height:100%;background:var(--good)}
-ul.items,ul.timeline{list-style:none;margin:8px 0 0;padding:0;max-height:320px;overflow:auto}
-ul.items li,ul.timeline li{padding:4px 0;border-bottom:1px solid var(--line)}
-ul.items li.done{color:var(--muted)}
-ul.items .box{font-family:monospace}
-.who{color:var(--local)}
-.tag{color:var(--frontier);font-size:12px}
-.kind{display:inline-block;min-width:66px;color:var(--muted);font-size:12px}
-code{font-family:ui-monospace,Consolas,monospace;background:#0b0d11;padding:1px 5px;border-radius:4px}
-.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
-.tabs{display:flex;gap:6px;padding:12px 24px 0;flex-wrap:wrap;border-bottom:1px solid var(--line)}
-.tabs .tab{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:8px 14px;cursor:pointer;font:inherit;display:flex;align-items:center;gap:6px}
-.tabs .tab.active{background:var(--bg);border-color:var(--local);color:var(--fg)}
-.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
-.badge{font-size:11px;padding:1px 8px;border-radius:10px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}
-.status-running{background:var(--good)}
-.badge.status-running{color:var(--good);border-color:var(--good)}
-.status-idle{background:var(--muted)}
-.badge.status-idle{color:var(--muted)}
-.status-waiting-input{background:var(--frontier)}
-.badge.status-waiting-input{color:var(--frontier);border-color:var(--frontier)}
-.status-ended{background:#6e7681}
-.badge.status-ended{color:#6e7681}
-.term .termlog{background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:340px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:pre-wrap}
-.term .tl{padding:1px 0}
-.term .tl.input{color:var(--local)}
-.term .tl.tool{color:var(--frontier)}
-.term .tl.status{color:var(--muted)}
-.term .tl.error{color:#f85149}
-.term .tl.permission{color:var(--frontier);font-weight:600}
-.term form.terminput{display:flex;gap:8px;margin-top:10px}
-.term form.terminput input{flex:1;background:#0b0d11;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
-.term form.terminput button{background:var(--local);color:#04122b;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600}
-.pty .ptylog{background:#05070a;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:340px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:pre-wrap;color:#c8d1dc}
-.pty form.ptyinput{display:flex;gap:8px;margin-top:10px}
-.pty form.ptyinput input{flex:1;background:#05070a;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
-.pty form.ptyinput button,.pty .pty-start{background:var(--frontier);color:#1a1200;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600;margin-top:8px}
-.pty .pty-start:disabled{opacity:.5;cursor:default}
-.config-panel{grid-column:1/-1}
-.config-form{display:flex;flex-direction:column;gap:12px}
-.config-note{margin:0;font-size:12px;color:var(--muted)}
-.config-note.config-overlay{color:var(--frontier)}
-.reload-legend h3,.config-summary h4{font-size:12px;margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
-.reload-table{width:100%}
-.reload-table th{white-space:nowrap;vertical-align:top;width:1%}
-.reload-table th.reload-hot{color:var(--good)}
-.reload-table th.reload-restart{color:var(--frontier)}
-.config-label{font-size:12px;color:var(--muted)}
-.config-json{width:100%;min-height:280px;resize:vertical;background:#0b0d11;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.5}
-.config-actions{display:flex;gap:8px}
-.config-save{background:var(--good);color:#08110a;border:0;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer}
-.config-save:disabled{opacity:.5;cursor:default}
-.config-result:empty{display:none}
-.config-summary{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:4px}
-.config-ok{margin:0 0 8px;color:var(--good);font-weight:600}
-.config-err{margin:0;color:var(--frontier);font-weight:600}
-.config-applied h4{color:var(--good)}
-.config-restart h4{color:var(--frontier)}
-.config-warn{margin:0 0 6px;color:var(--frontier);font-size:13px}
-.config-summary ul{margin:0;padding-left:18px}
-.config-summary li{padding:2px 0;border:0}
+:root{color-scheme:dark;--bg:#0f0f0f;--surface:#17181b;--surface-2:#1e2024;--panel:var(--surface);--fg:#eceef1;--muted:#a2a8b2;--faint:#6b7079;--border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.16);--line:var(--border);--accent:#35c07a;--accent-bg:rgba(53,192,122,.12);--accent-fg:#57d492;--good:var(--accent-fg);--local:#6aa6f5;--frontier:#e0a53a;--warn:#e0a53a;--warn-bg:rgba(224,165,58,.12);--danger:#f0687f;--danger-bg:rgba(240,104,127,.12);--info:#6aa6f5;--info-bg:rgba(106,166,245,.12);--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;--shadow-pop:0 8px 28px rgba(0,0,0,.5);--sidebar-w:248px}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{background:var(--bg);color:var(--fg);font:14px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
+.mono,code,.hash{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
+button{font:inherit;cursor:pointer}
+button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+::selection{background:var(--accent-bg)}
+.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:100vh;min-height:100vh}
+.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
+.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;border-bottom:1px solid var(--border)}
+.logo{width:26px;height:26px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
+.logo svg{width:15px;height:15px}.brand .name{font-weight:600;letter-spacing:-.01em}.brand .tag{font:10px/1 var(--font-mono);letter-spacing:.08em;color:var(--accent-fg);background:var(--accent-bg);padding:3px 6px;border-radius:4px;margin-left:auto;text-transform:uppercase}
+.nav{padding:10px;display:flex;flex-direction:column;gap:2px}.nav-label{font:10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 8px 6px}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:var(--muted);background:transparent;border:0;width:100%;text-align:left;letter-spacing:-.005em;transition:background .12s,color .12s}.nav-item svg{width:17px;height:17px;flex:none}.nav-item .count{margin-left:auto;font:11px/1 var(--font-mono);color:var(--faint)}.nav-item .pill{margin-left:auto}.nav-item:hover{background:var(--surface-2);color:var(--fg)}.nav-item[aria-current="page"]{background:var(--accent-bg);color:var(--accent-fg);font-weight:550}.nav-item[aria-current="page"] .count{color:var(--accent-fg)}
+.sidebar-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}.host-row{display:flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--muted)}.dot.live,.dot.status-running{background:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.dot.warn,.dot.status-waiting-input{background:var(--warn)}.dot.down{background:var(--danger)}.dot.status-idle{background:var(--muted)}.dot.status-ended{background:#6e7681}
+.main{min-width:0;min-height:0;display:flex;flex-direction:column}.topbar{height:56px;flex:none;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);display:flex;align-items:center;gap:14px;padding:0 20px}.topbar h1{font-size:15px;font-weight:600;letter-spacing:-.01em}.refresh,.token-chip{display:inline-flex;align-items:center;gap:7px;font:11px/1 var(--font-mono);color:var(--muted);padding:5px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}.refresh .beat{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:beat 2s ease-in-out infinite}@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}.spacer{margin-left:auto}.icon-btn{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:grid;place-items:center;transition:background .12s,color .12s,border-color .12s}.icon-btn:hover{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}.icon-btn svg{width:17px;height:17px}.token-chip b{color:var(--fg);font-weight:600}
+.scroll{flex:1;overflow-y:auto;min-height:0}.screen{display:none;padding:22px 24px 40px;max-width:1320px}.screen.active{display:block}.screen[hidden]{display:none!important}.screen-head{margin-bottom:18px}.screen-head h2{font-size:19px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}.screen-head p{color:var(--muted);font-size:13px;margin-top:3px;max-width:74ch;text-wrap:pretty}.screen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}.screen-grid .wide,.panel.wide{grid-column:1/-1}
+.panel,.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}.panel h2,.panel h3,.card-head h3{font-size:13px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);margin:-16px -16px 14px}.card-head .sub{font:11px/1 var(--font-mono);color:var(--faint);margin-left:auto}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:15px 16px;display:flex;flex-direction:column;gap:2px}.stat .k{font:11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.stat .v{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-top:6px}.stat .d{font-size:12px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px}.good{color:var(--good)}.local{color:var(--local)}.frontier{color:var(--frontier)}.muted{color:var(--muted)}.faint{color:var(--faint)}
+table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{font:11px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:500}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--surface-2)}td.num{text-align:right;font-family:var(--font-mono)}.hash{color:var(--faint)}
+.pill,.badge{display:inline-flex;align-items:center;gap:5px;font:11px/1 var(--font-mono);letter-spacing:.02em;padding:3px 8px;border-radius:999px;border:1px solid transparent}.pill.local,.badge.status-running{color:var(--accent-fg);background:var(--accent-bg);border-color:var(--accent-bg)}.pill.frontier{color:var(--info);background:var(--info-bg)}.pill.warn,.badge.status-waiting-input{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bg)}.pill.danger{color:var(--danger);background:var(--danger-bg)}.pill.idle,.badge.status-idle,.badge.status-ended{color:var(--muted);background:var(--surface-2)}
+.progress{height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden;border:1px solid var(--border)}.progress .bar{height:100%;background:var(--accent)}ul.items,ul.timeline{list-style:none;margin:8px 0 0;padding:0;max-height:320px;overflow:auto}ul.items li,ul.timeline li{padding:6px 0;border-bottom:1px solid var(--border)}ul.items li.done{color:var(--muted)}ul.items .box{font-family:var(--font-mono)}.who{color:var(--local)}.tag{color:var(--frontier);font-size:12px}.kind{display:inline-block;min-width:66px;color:var(--muted);font-size:12px}code{background:var(--bg);padding:1px 5px;border-radius:4px}
+.logs-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;margin-bottom:16px}.session-list{padding:6px;max-height:70vh;overflow-y:auto}.session-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:7px;border:0;background:transparent;color:var(--muted);text-align:left;font:12px/1.3 var(--font-mono)}.session-btn:hover{background:var(--surface-2);color:var(--fg)}.session-btn.sel,.session-btn[aria-selected="true"]{background:var(--accent-bg);color:var(--accent-fg)}.session-btn .sid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-btn .n{margin-left:auto;color:var(--faint)}.session-detail{display:flex;flex-direction:column;gap:16px}.session-detail[hidden]{display:none}.empty-state{padding:28px;text-align:center;color:var(--muted)}
+.term .termlog,.pty .ptylog{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:340px;overflow:auto;font-family:var(--font-mono);font-size:12px;white-space:pre-wrap}.term .tl{padding:1px 0}.term .tl.input{color:var(--local)}.term .tl.tool{color:var(--frontier)}.term .tl.status{color:var(--muted)}.term .tl.error{color:var(--danger)}.term .tl.permission{color:var(--frontier);font-weight:600}.term form.terminput,.pty form.ptyinput{display:flex;gap:8px;margin-top:10px}.term form.terminput input,.pty form.ptyinput input{flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit}.term form.terminput button{background:var(--local);color:#04122b;border:none;border-radius:8px;padding:8px 16px;font:inherit;font-weight:600}.pty .ptylog{background:#05070a;color:#c8d1dc}.pty form.ptyinput button,.pty .pty-start{background:var(--frontier);color:#1a1200;border:none;border-radius:8px;padding:8px 16px;font:inherit;font-weight:600;margin-top:8px}.pty .pty-start:disabled{opacity:.5;cursor:default}
+.config-panel{grid-column:1/-1}.config-form{display:flex;flex-direction:column;gap:12px}.config-note{margin:0;font-size:12px;color:var(--muted)}.config-note.config-overlay{color:var(--frontier)}.reload-legend h3,.config-summary h4{font-size:12px;margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.reload-table{width:100%}.reload-table th{white-space:nowrap;vertical-align:top;width:1%}.reload-table th.reload-hot{color:var(--good)}.reload-table th.reload-restart{color:var(--frontier)}.config-label{font-size:12px;color:var(--muted)}.config-json{width:100%;min-height:280px;resize:vertical;background:var(--bg);color:var(--fg);border:1px solid var(--border-strong);border-radius:8px;padding:10px;font-family:var(--font-mono);font-size:12px;line-height:1.5}.config-actions{display:flex;gap:8px}.config-save{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer}.config-save:disabled{opacity:.5;cursor:default}.config-result:empty{display:none}.config-summary{border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:4px}.config-ok{margin:0 0 8px;color:var(--good);font-weight:600}.config-err{margin:0;color:var(--frontier);font-weight:600}.config-applied h4{color:var(--good)}.config-restart h4{color:var(--frontier)}.config-warn{margin:0 0 6px;color:var(--frontier);font-size:13px}.config-summary ul{margin:0;padding-left:18px}.config-summary li{padding:2px 0;border:0}
+.diag-banner{border-bottom:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-bg);color:var(--warn);padding:10px 20px;font-size:13px}.graph-panel{min-height:240px}.graph-disabled .hint{margin-top:6px}.scrim{display:none}.menu-btn{display:none}
+@media (max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:280px;z-index:50;transform:translateX(-100%);transition:transform .22s ease}body.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-pop)}body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}.menu-btn{display:grid}.logs-layout{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.token-chip .lbl{display:none}}
+@media (max-width:560px){.screen{padding:16px 14px 32px}.screen-grid{grid-template-columns:1fr}.topbar{padding:0 14px}.refresh{display:none}}
+@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
 `;
 var GRAPH_STYLE = `
 .graph-wrap{overflow:auto;background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:8px}
@@ -3671,24 +3667,69 @@ var CONSOLE_CLIENT_JS = `
   var ms=parseInt(document.documentElement.getAttribute('data-refresh')||'2000',10);
   setInterval(function(){reloadIfChanged(current)},isNaN(ms)?2000:Math.max(250,ms));
 
-  function selectTab(name){
-    var tabs=document.querySelectorAll('#tabbar .tab');
-    for(var i=0;i<tabs.length;i++){tabs[i].classList.toggle('active',tabs[i].getAttribute('data-tab')===name)}
-    var views=document.querySelectorAll('main .view');
+  function configActive(){
+    var s=document.getElementById('screen-config');
+    return !!(s&&!s.hidden);
+  }
+  function wireLogsScreen(screen){
+    if(screen.__logsWired){return}
+    screen.__logsWired=true;
+    var buttons=screen.querySelectorAll('[data-session-target]');
+    var cards=screen.querySelectorAll('[data-session-view]');
+    function showSession(id){
+      var matched=false;
+      for(var i=0;i<buttons.length;i++){
+        var on=buttons[i].getAttribute('data-session-target')===id;
+        buttons[i].classList.toggle('sel',on);
+        buttons[i].setAttribute('aria-selected',on?'true':'false');
+      }
+      for(var j=0;j<cards.length;j++){
+        var show=cards[j].getAttribute('data-session-view')===id;
+        cards[j].hidden=!show;
+        if(show){matched=true;connectTerminal(cards[j],id)}
+      }
+      return matched;
+    }
+    for(var k=0;k<buttons.length;k++){
+      buttons[k].addEventListener('click',function(e){
+        var id=e.currentTarget.getAttribute('data-session-target');
+        if(id){showSession(id)}
+      });
+    }
+    if(buttons.length>0){
+      showSession(buttons[0].getAttribute('data-session-target'));
+    }
+  }
+  function selectScreen(name){
+    var screens=document.querySelectorAll('.screen');
+    var items=document.querySelectorAll('[data-screen]');
     var matched=false;
-    for(var j=0;j<views.length;j++){
-      var show=views[j].getAttribute('data-view')===name;
-      views[j].hidden=!show;
-      if(show){matched=true;if(name==='config'){loadConfig(views[j])}else if(name!=='all'){connectTerminal(views[j],name)}}
+    var titleText='';
+    var activeScreen=null;
+    for(var i=0;i<screens.length;i++){
+      var show=screens[i].id==='screen-'+name;
+      screens[i].classList.toggle('active',show);
+      screens[i].hidden=!show;
+      if(show){matched=true;activeScreen=screens[i]}
     }
     if(!matched){return false}
-    try{sessionStorage.setItem('openteam.tab',name)}catch(e){}
+    for(var j=0;j<items.length;j++){
+      var on=items[j].getAttribute('data-screen')===name;
+      if(on){
+        items[j].setAttribute('aria-current','page');
+        titleText=items[j].getAttribute('data-title')||'';
+      }else{
+        items[j].removeAttribute('aria-current');
+      }
+    }
+    var title=document.getElementById('screen-title');
+    if(title){title.textContent=titleText}
+    if(name==='config'&&activeScreen){loadConfig(activeScreen)}
+    if(name==='logs'&&activeScreen){wireLogsScreen(activeScreen)}
+    try{localStorage.setItem('openteam.screen',name)}catch(e){}
+    document.body.classList.remove('nav-open');
     return true;
   }
-  function configActive(){
-    var v=document.querySelector('main .view[data-view="config"]');
-    return !!(v&&!v.hidden);
-  }
   function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}
   // Config editor (W7-S09 / #193). The config values travel only over the
   // token-gated /api/config, never in this open page, so the browser fetches
@@ -3827,7 +3868,7 @@ var CONSOLE_CLIENT_JS = `
     if(!token){return}
     var drill=document.querySelector('.graph-drill');
     if(!drill){return}
-    var gview=drill.closest('.view');
+    var gview=drill.closest('.screen');
     if(!gview){return}
     var log=drill.querySelector('.drilllog');
     var title=drill.querySelector('.drill-title');
@@ -3861,17 +3902,21 @@ var CONSOLE_CLIENT_JS = `
       if(t&&t.getAttribute&&t.getAttribute('data-session')){open(t.getAttribute('data-session'))}
     });
   }
-  var bar=document.getElementById('tabbar');
-  if(bar){
-    bar.addEventListener('click',function(e){
+  var nav=document.querySelector('.nav');
+  if(nav){
+    nav.addEventListener('click',function(e){
       var t=e.target;
-      while(t&&t!==bar&&!t.getAttribute('data-tab')){t=t.parentNode}
-      if(t&&t.getAttribute('data-tab')){selectTab(t.getAttribute('data-tab'))}
+      while(t&&t!==nav&&!(t.getAttribute&&t.getAttribute('data-screen'))){t=t.parentNode}
+      if(t&&t.getAttribute&&t.getAttribute('data-screen')){selectScreen(t.getAttribute('data-screen'))}
     });
   }
-  var saved='all';
-  try{saved=sessionStorage.getItem('openteam.tab')||'all'}catch(e){}
-  if(!selectTab(saved)){selectTab('all')}
+  var toggle=document.querySelector('[data-toggle-nav]');
+  if(toggle){toggle.addEventListener('click',function(){document.body.classList.toggle('nav-open')})}
+  var close=document.querySelector('[data-close-nav]');
+  if(close){close.addEventListener('click',function(){document.body.classList.remove('nav-open')})}
+  var saved='tree';
+  try{saved=localStorage.getItem('openteam.screen')||'tree'}catch(e){}
+  if(!selectScreen(saved)){selectScreen('tree')}
   wireGraphDrill();
 })();
 `;
@@ -3901,6 +3946,13 @@ function avgMs(stats) {
 function agentModel(agent) {
   return agent.model === undefined ? "inherits default" : `${agent.model.providerID}/${agent.model.modelID}`;
 }
+function domIdPart(value) {
+  const cleaned = value.replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return cleaned.length === 0 ? "session" : cleaned;
+}
+function panelId(base, idSuffix) {
+  return idSuffix === undefined ? base : `${base}-${idSuffix}`;
+}
 function summaryPanel(cost) {
   return [
     '<section class="panel" id="panel-summary">',
@@ -3979,10 +4031,11 @@ function teamPanel(team) {
 function routeRow(route) {
   return `<tr><td>${route.tier}</td><td class="${route.routeKind}">${route.routeKind}</td><td>${escapeHtml(route.model)}</td><td class="hash">${escapeHtml(route.promptHash)}</td><td>${usd(route.estimatedCostUSD)}</td><td class="good">${usd(route.estimatedSavingsUSD)}</td></tr>`;
 }
-function routesPanel(routes) {
+function routesPanel(routes, idSuffix) {
+  const id = panelId("panel-routes", idSuffix);
   if (routes.length === 0) {
     return [
-      '<section class="panel" id="panel-routes">',
+      `<section class="panel" id="${id}">`,
       "<h2>Recent decisions</h2>",
       '<p class="muted">No routing decisions yet.</p>',
       "</section>"
@@ -3990,7 +4043,7 @@ function routesPanel(routes) {
   }
   const rows = routes.map(routeRow).join("");
   return [
-    '<section class="panel" id="panel-routes">',
+    `<section class="panel" id="${id}">`,
     "<h2>Recent decisions</h2>",
     "<table><thead><tr><th>Tier</th><th>Route</th><th>Model</th><th>Prompt (hash)</th><th>Cost</th><th>Savings</th></tr></thead>",
     `<tbody>${rows}</tbody></table>`,
@@ -4001,10 +4054,11 @@ function activityRow(entry) {
   const who = entry.agent === undefined ? "" : `<span class="who">${escapeHtml(entry.agent)}</span> `;
   return `<li class="${entry.kind}"><span class="kind">${entry.kind}</span> ${who}${escapeHtml(entry.summary)}</li>`;
 }
-function activityPanel(activity) {
+function activityPanel(activity, idSuffix) {
+  const id = panelId("panel-activity", idSuffix);
   if (activity.length === 0) {
     return [
-      '<section class="panel" id="panel-activity">',
+      `<section class="panel" id="${id}">`,
       "<h2>Activity</h2>",
       '<p class="muted">No activity recorded.</p>',
       "</section>"
@@ -4012,7 +4066,7 @@ function activityPanel(activity) {
   }
   const rows = activity.map(activityRow).join("");
   return [
-    '<section class="panel" id="panel-activity">',
+    `<section class="panel" id="${id}">`,
     "<h2>Activity</h2>",
     `<ul class="timeline">${rows}</ul>`,
     "</section>"
@@ -4074,10 +4128,11 @@ function decisionRow(decision2) {
   const tags = decision2.tags === undefined || decision2.tags.length === 0 ? "" : ` ${decision2.tags.map((tag) => `<span class="tag">#${escapeHtml(tag)}</span>`).join(" ")}`;
   return `<li class="decision"><span class="kind">decision</span> ${who}${escapeHtml(decision2.summary)}${tags}</li>`;
 }
-function decisionsPanel(decisions) {
+function decisionsPanel(decisions, idSuffix) {
+  const id = panelId("panel-decisions", idSuffix);
   if (decisions.length === 0) {
     return [
-      '<section class="panel" id="panel-decisions">',
+      `<section class="panel" id="${id}">`,
       "<h2>Decisions</h2>",
       '<p class="muted">No decisions recorded (the scribe writes to <code>openteam-decisions.md</code>).</p>',
       "</section>"
@@ -4085,7 +4140,7 @@ function decisionsPanel(decisions) {
   }
   const rows = decisions.map(decisionRow).join("");
   return [
-    '<section class="panel" id="panel-decisions">',
+    `<section class="panel" id="${id}">`,
     "<h2>Decisions</h2>",
     `<ul class="timeline">${rows}</ul>`,
     "</section>"
@@ -4096,10 +4151,11 @@ function meetingRow(meeting) {
   const purpose = meeting.purpose === undefined ? "" : `: ${escapeHtml(meeting.purpose)}`;
   return `<li class="agent"><span class="kind">meeting</span> <span class="who">${roles}</span>${purpose}</li>`;
 }
-function meetingsPanel(meetings) {
+function meetingsPanel(meetings, idSuffix) {
+  const id = panelId("panel-meetings", idSuffix);
   if (meetings.length === 0) {
     return [
-      '<section class="panel" id="panel-meetings">',
+      `<section class="panel" id="${id}">`,
       "<h2>Meetings</h2>",
       '<p class="muted">No multi-agent meetings yet.</p>',
       "</section>"
@@ -4107,7 +4163,7 @@ function meetingsPanel(meetings) {
   }
   const rows = meetings.map(meetingRow).join("");
   return [
-    '<section class="panel" id="panel-meetings">',
+    `<section class="panel" id="${id}">`,
     "<h2>Meetings</h2>",
     `<ul class="timeline">${rows}</ul>`,
     "</section>"
@@ -4122,20 +4178,54 @@ var STATUS_LABELS = {
 function statusBadge(status) {
   return `<span class="badge status-${status}">${STATUS_LABELS[status]}</span>`;
 }
-function tabBar(sessions, graphEnabled, configEnabled) {
-  const allTab = '<button type="button" class="tab" data-tab="all">All</button>';
-  const graphTab = graphEnabled ? '<button type="button" class="tab" data-tab="graph">Graph</button>' : "";
-  const configTab = configEnabled ? '<button type="button" class="tab" data-tab="config">Configuration</button>' : "";
-  const tabs = sessions.map((tab) => {
-    const id = escapeHtml(tab.sessionID);
-    const short = escapeHtml(shortSessionID(tab.sessionID));
-    return `<button type="button" class="tab" data-tab="${id}"><span class="dot status-${tab.status}"></span>${short}</button>`;
-  }).join("");
-  return `<nav class="tabs" id="tabbar">${allTab}${graphTab}${configTab}${tabs}</nav>`;
-}
 function shortSessionID(sessionID) {
   return sessionID.length <= 12 ? sessionID : `${sessionID.slice(0, 12)}…`;
 }
+var ICON_TREE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="5" rx="1"></rect><rect x="3" y="16" width="6" height="5" rx="1"></rect><rect x="15" y="16" width="6" height="5" rx="1"></rect><path d="M12 8v4M6 16v-2h12v2"></path></svg>';
+var ICON_ROUTING = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="M7 15l3-4 3 2 4-6"></path></svg>';
+var ICON_LOGS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16M4 10h16M4 15h10M4 20h13"></path></svg>';
+var ICON_CONFIG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 6 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H0"></path></svg>';
+function navButton(screen, label, icon, options = {}) {
+  const active = options.active === true ? ' aria-current="page"' : "";
+  const count = options.count === undefined ? "" : `<span class="count mono"${screen === "tree" ? " data-live-count" : ""}>${options.count}</span>`;
+  const pill = options.pill === undefined ? "" : `<span class="pill warn">${escapeHtml(options.pill)}</span>`;
+  return `<button type="button" class="nav-item" role="tab" data-screen="${screen}" data-title="${escapeHtml(label)}" aria-controls="screen-${screen}"${active}>${icon} ${escapeHtml(label)}${count}${pill}</button>`;
+}
+function sidebarNav(liveCount, logCount) {
+  return [
+    '<aside class="sidebar" id="sidebar">',
+    '<div class="brand">',
+    '<span class="logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2.4"></circle><circle cx="5.5" cy="18" r="2.4"></circle><circle cx="18.5" cy="18" r="2.4"></circle><path d="M12 7.4v4.2M12 11.6 6.6 16M12 11.6 17.4 16"></path></svg></span>',
+    '<span class="name">openteam</span>',
+    '<span class="tag">console</span>',
+    "</div>",
+    '<nav class="nav" aria-label="Console surfaces">',
+    '<div class="nav-label">Operations</div>',
+    navButton("tree", "Agent tree", ICON_TREE, {
+      active: true,
+      count: liveCount
+    }),
+    navButton("routing", "Routing + telemetry", ICON_ROUTING),
+    navButton("logs", "Logs / activity", ICON_LOGS, { count: logCount }),
+    navButton("config", "Configuration", ICON_CONFIG, { pill: "editable" }),
+    "</nav>",
+    '<div class="sidebar-foot">',
+    '<div class="host-row"><span class="dot live"></span><span>loopback console</span></div>',
+    '<div class="host-row faint"><span>prompts stay redacted by hash</span></div>',
+    "</div>",
+    "</aside>"
+  ].join("");
+}
+function screenSection(screen, label, heading, description, body, active = false) {
+  const className = active ? "screen active" : "screen";
+  const hidden = active ? "" : " hidden";
+  return [
+    `<section class="${className}" id="screen-${screen}" role="tabpanel" aria-label="${escapeHtml(label)}"${hidden}>`,
+    `<div class="screen-head"><h2>${heading}</h2><p>${description}</p></div>`,
+    body,
+    "</section>"
+  ].join("");
+}
 function sessionHeaderPanel(tab) {
   const endpoint = tab.endpoint === undefined ? '<span class="muted">endpoint not announced</span>' : `<code>${escapeHtml(tab.endpoint.url)}</code>`;
   const dir = tab.endpoint?.directory === undefined ? "" : `<div class="stat"><span class="k">Directory</span><span class="v mono">${escapeHtml(tab.endpoint.directory)}</span></div>`;
@@ -4181,17 +4271,18 @@ function ptyPanel(tab) {
     "</section>"
   ].join("");
 }
-function sessionView(tab, terminalEnabled, ptyEnabled) {
+function sessionDetailCard(tab, terminalEnabled, ptyEnabled, visible, index) {
+  const idSuffix = `${index}-${domIdPart(tab.sessionID)}`;
   const body = [
     sessionHeaderPanel(tab),
     terminalEnabled ? terminalPanel(tab) : "",
     terminalEnabled && ptyEnabled ? ptyPanel(tab) : "",
-    routesPanel(tab.recentRoutes),
-    decisionsPanel(tab.decisions),
-    meetingsPanel(tab.meetings),
-    activityPanel(tab.activity)
+    routesPanel(tab.recentRoutes, idSuffix),
+    decisionsPanel(tab.decisions, idSuffix),
+    meetingsPanel(tab.meetings, idSuffix),
+    activityPanel(tab.activity, idSuffix)
   ].join("");
-  return `<div class="view" data-view="${escapeHtml(tab.sessionID)}" hidden>${body}</div>`;
+  return `<article class="session-detail" id="session-${idSuffix}" data-session-view="${escapeHtml(tab.sessionID)}"${visible ? "" : " hidden"}>${body}</article>`;
 }
 var GRAPH_COL_W = 220;
 var GRAPH_ROW_H = 96;
@@ -4356,51 +4447,110 @@ function drillPanel() {
     "</aside>"
   ].join("");
 }
-function graphViewPanel(projection, drilldownEnabled, disabled) {
+function treeGraphPanel(projection, drilldownEnabled, disabled) {
   return [
-    '<div class="view" data-view="graph" hidden>',
-    '<section class="panel" id="panel-graph">',
-    "<h2>Agent graph</h2>",
+    '<section class="panel graph-panel" id="panel-graph">',
+    "<h3>Live graph</h3>",
     disabled || projection === null ? "" : healthBanner(projection.health),
+    '<div id="tree-content" data-graph-mount>',
     renderGraphView(projection, { disabled }),
+    "</div>",
     !disabled && drilldownEnabled ? drillPanel() : "",
-    "</section>",
-    "</div>"
+    "</section>"
   ].join("");
 }
 function graphDisabledHint() {
   return [
     '<div class="graph-disabled" role="status">',
-    '<p class="muted">The live agent tree is disabled.</p>',
-    '<p class="hint">Set <code>graph.mode</code> to <code>shadow</code> in ',
-    "<code>.opencode/openteam.json</code> to enable it, then restart the session.</p>",
+    `<p class="muted">${escapeHtml(GRAPH_DISABLED_REMEDIATION)}</p>`,
     "</div>"
   ].join("");
 }
-function renderConsoleHtml(state, options = {}) {
-  const refreshMs = options.refreshMs ?? 2000;
-  const terminalEnabled = options.terminalEnabled === true;
-  const ptyEnabled = options.ptyEnabled === true;
-  const graphEnabled = options.graphView !== undefined;
-  const allBody = [
+function routingScreenBody(state) {
+  return [
+    '<div class="screen-grid">',
     summaryPanel(state.cost),
     totalsPanel(state.totals),
     sessionsPanel(state.sessions),
-    loopPanel(state.loop),
-    teamPanel(state.team),
     tierPanel(state.cost),
     routesPanel(state.recentRoutes),
+    "</div>"
+  ].join("");
+}
+function emptySessionList() {
+  return [
+    '<div class="card">',
+    '<div class="card-head"><h3>Sessions</h3><span class="sub">0</span></div>',
+    '<div class="empty-state">No sessions recorded yet.</div>',
+    "</div>"
+  ].join("");
+}
+function sessionList(sessions) {
+  if (sessions.length === 0) {
+    return emptySessionList();
+  }
+  const buttons = sessions.map((tab, index) => {
+    const selected = index === 0;
+    return [
+      `<button type="button" class="session-btn${selected ? " sel" : ""}" role="tab" aria-selected="${selected ? "true" : "false"}" data-session-target="${escapeHtml(tab.sessionID)}">`,
+      `<span class="dot status-${tab.status}"></span>`,
+      `<span class="sid">${escapeHtml(shortSessionID(tab.sessionID))}</span>`,
+      `<span class="n">${tab.summary.messageCount}</span>`,
+      "</button>"
+    ].join("");
+  }).join("");
+  return [
+    '<div class="card">',
+    `<div class="card-head"><h3>Sessions</h3><span class="sub">${sessions.length}</span></div>`,
+    '<div class="session-list" role="tablist" aria-label="Sessions">',
+    buttons,
+    "</div>",
+    "</div>"
+  ].join("");
+}
+function sessionDetailList(sessions, terminalEnabled, ptyEnabled) {
+  if (sessions.length === 0) {
+    return '<div class="card empty-state">No session activity recorded yet.</div>';
+  }
+  return sessions.map((tab, index) => sessionDetailCard(tab, terminalEnabled, ptyEnabled, index === 0, index)).join("");
+}
+function logsScreenBody(state, terminalEnabled, ptyEnabled) {
+  return [
+    '<div class="logs-layout">',
+    sessionList(state.sessionsDetail),
+    "<div>",
+    sessionDetailList(state.sessionsDetail, terminalEnabled, ptyEnabled),
+    "</div>",
+    "</div>",
+    '<div class="screen-grid">',
+    loopPanel(state.loop),
+    teamPanel(state.team),
     decisionsPanel(state.decisions),
     meetingsPanel(state.meetings),
-    activityPanel(state.activity)
+    activityPanel(state.activity),
+    "</div>"
   ].join("");
-  const allView = `<div class="view" data-view="all">${allBody}</div>`;
-  const graphDrilldown = graphEnabled && options.drilldownEnabled === true;
-  const graphView = graphEnabled ? graphViewPanel(options.graphView?.projection ?? null, graphDrilldown, options.graphView?.disabled === true) : "";
-  const sessionViews = state.sessionsDetail.map((tab) => sessionView(tab, terminalEnabled, ptyEnabled)).join("");
+}
+function configScreenBody(hasToken) {
+  return renderConfigEditorPanel({ hasToken });
+}
+function renderConsoleHtml(state, options = {}) {
+  const refreshMs = options.refreshMs ?? 2000;
+  const terminalEnabled = options.terminalEnabled === true;
+  const ptyEnabled = options.ptyEnabled === true;
+  const graphOptionProvided = options.graphView !== undefined;
+  const graphDrilldown = graphOptionProvided && options.drilldownEnabled === true;
+  const graphProjection = options.graphView?.projection ?? null;
+  const graphDisabled = options.graphView === undefined || options.graphView.disabled === true;
+  const liveCount = graphOptionProvided && graphProjection !== null && !graphDisabled ? graphProjection.nodes.length : state.sessionsDetail.length;
   const configEnabled = options.configEditor !== undefined;
-  const configView = configEnabled ? renderConfigView({ hasToken: options.configEditor?.hasToken === true }) : "";
-  const body = allView + graphView + configView + sessionViews;
+  const treeBody = treeGraphPanel(graphProjection, graphDrilldown, graphDisabled);
+  const body = [
+    screenSection("tree", "Live agent tree", "Agent tree · live", "Live agent topology. Graph updates arrive over the <code>graph</code> event on <code>/events</code>.", treeBody, true),
+    screenSection("routing", "Routing and telemetry", "Routing + telemetry", "Aggregate routing and cost telemetry from <code>GET /api/state</code> across all sessions.", routingScreenBody(state)),
+    screenSection("logs", "Logs and session activity", "Logs / activity", "Per-session activity. Prompts are referenced by hash only and never rendered in clear text.", logsScreenBody(state, terminalEnabled, ptyEnabled)),
+    screenSection("config", "Editable configuration", 'Configuration <span class="pill warn">editable</span>', "Edit the whole openteam JSON configuration. Roles are editable inside the JSON when present; unsupported surfaces are not shown.", configScreenBody(options.configEditor?.hasToken === true))
+  ].join("");
   const session = state.session.id === undefined ? "" : ` · session ${escapeHtml(state.session.id)}`;
   const tokenAttr = (terminalEnabled || graphDrilldown || configEnabled) && options.consoleToken !== undefined ? ` data-token="${escapeHtml(options.consoleToken)}"${terminalEnabled ? ' data-terminal="1"' : ""}${ptyEnabled ? ' data-pty="1"' : ""}${graphDrilldown ? ' data-drilldown="1"' : ""}${configEnabled ? ' data-config="1"' : ""}` : "";
   return [
@@ -4410,16 +4560,24 @@ function renderConsoleHtml(state, options = {}) {
     '<meta charset="utf-8">',
     '<meta name="viewport" content="width=device-width,initial-scale=1">',
     "<title>openteam console</title>",
-    `<style>${CONSOLE_STYLE}${graphEnabled ? GRAPH_STYLE : ""}</style>`,
+    `<style>${CONSOLE_STYLE}${graphOptionProvided ? GRAPH_STYLE : ""}</style>`,
     "</head>",
     "<body>",
-    "<header>",
-    "<h1>openteam console</h1>",
-    `<span class="meta">updated ${escapeHtml(state.generatedAt)}${session}</span>`,
+    '<div class="app">',
+    sidebarNav(liveCount, state.sessionsDetail.length),
+    '<div class="scrim" data-close-nav></div>',
+    '<main class="main">',
+    '<header class="topbar">',
+    '<button type="button" class="icon-btn menu-btn" data-toggle-nav aria-label="Open navigation"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg></button>',
+    '<h1 id="screen-title">Agent tree</h1>',
+    `<span class="refresh" title="SSE + polling"><span class="beat"></span> ${refreshMs} ms · SSE</span>`,
+    '<div class="spacer"></div>',
+    `<span class="token-chip" title="Page status"><span class="lbl">updated</span> <b class="mono">${escapeHtml(state.generatedAt)}${session}</b></span>`,
     "</header>",
     options.diagnosticActive === true ? '<div class="diag-banner" role="alert">Diagnostic mode enabled — this loopback console may show raw prompt and model text locally.</div>' : "",
-    tabBar(state.sessionsDetail, graphEnabled, configEnabled),
-    `<main>${body}</main>`,
+    `<div class="scroll">${body}</div>`,
+    "</main>",
+    "</div>",
     `<script>${CONSOLE_CLIENT_JS}</script>`,
     "</body>",
     "</html>"
@@ -4482,23 +4640,21 @@ function renderConfigSaveSummary(write) {
   }
   return `<div class="config-summary">${parts.join("")}</div>`;
 }
-function renderConfigView(opts) {
+function renderConfigEditorPanel(opts) {
   const inner = opts.hasToken ? [
     '<p class="muted">Edit the openteam configuration. Portable keys are committed to <code>.opencode/openteam.json</code>; machine-specific keys stay in your local overlay and are never committed; secrets are read from environment variables and are never shown here.</p>',
     '<div class="config-mount" data-config-mount><p class="muted">Loading configuration…</p></div>'
   ].join("") : '<p class="muted">Configuration editing requires the console session token, which is not present in this page. This view is read-only.</p>';
   return [
-    '<div class="view" data-view="config" hidden>',
     '<section class="panel config-panel">',
-    "<h2>Configuration</h2>",
+    "<h3>Configuration JSON</h3>",
     inner,
-    "</section>",
-    "</div>"
+    "</section>"
   ].join("");
 }
 
 // src/web/configRoute.ts
-var JSON_HEADERS = { "content-type": "application/json" };
+var JSON_HEADERS2 = { "content-type": "application/json" };
 var LOOPBACK_HOSTS = new Set([
   "127.0.0.1",
   "localhost",
@@ -4506,7 +4662,7 @@ var LOOPBACK_HOSTS = new Set([
   "::1"
 ]);
 var MAX_CONFIG_BODY_CHARS = 256 * 1024;
-function bearerFromHeader(request) {
+function bearerFromHeader2(request) {
   const header = request.headers.authorization;
   if (typeof header !== "string" || !header.startsWith("Bearer ")) {
     return;
@@ -4519,7 +4675,7 @@ function queryToken(query) {
   return value === null || value.length === 0 ? undefined : value;
 }
 function readAuthorized(request, query, token) {
-  const provided = bearerFromHeader(request) ?? queryToken(query);
+  const provided = bearerFromHeader2(request) ?? queryToken(query);
   return provided !== undefined && safeEqualToken(provided, token);
 }
 function isCrossOriginMutation(request) {
@@ -4570,34 +4726,34 @@ async function handleConfigRoute(request, response, url, deps) {
   }
   if (request.method === "GET") {
     if (!readAuthorized(request, url.searchParams, deps.token)) {
-      response.writeHead(401, JSON_HEADERS).end(JSON.stringify({ error: "unauthorized" }));
+      response.writeHead(401, JSON_HEADERS2).end(JSON.stringify({ error: "unauthorized" }));
       return true;
     }
     const result = await deps.editor.read();
-    response.writeHead(200, JSON_HEADERS).end(JSON.stringify({ ...result, render: renderConfigEditorForm(result) }));
+    response.writeHead(200, JSON_HEADERS2).end(JSON.stringify({ ...result, render: renderConfigEditorForm(result) }));
     return true;
   }
   if (request.method === "POST") {
     if (isCrossOriginMutation(request)) {
-      response.writeHead(403, JSON_HEADERS).end(JSON.stringify({ error: "cross-origin forbidden" }));
+      response.writeHead(403, JSON_HEADERS2).end(JSON.stringify({ error: "cross-origin forbidden" }));
       return true;
     }
-    const bearer = bearerFromHeader(request);
+    const bearer = bearerFromHeader2(request);
     if (bearer === undefined || !safeEqualToken(bearer, deps.token)) {
-      response.writeHead(401, JSON_HEADERS).end(JSON.stringify({ error: "unauthorized" }));
+      response.writeHead(401, JSON_HEADERS2).end(JSON.stringify({ error: "unauthorized" }));
       return true;
     }
     const body = await readJsonBody(request, MAX_CONFIG_BODY_CHARS);
     if (!body.ok) {
-      response.writeHead(400, JSON_HEADERS).end(JSON.stringify({ ok: false, error: "invalid JSON body" }));
+      response.writeHead(400, JSON_HEADERS2).end(JSON.stringify({ ok: false, error: "invalid JSON body" }));
       return true;
     }
     const result = await deps.editor.write(body.value);
     const responseBody = result.status === 200 ? { ...result.body, render: renderConfigSaveSummary(result.body) } : result.body;
-    response.writeHead(result.status, JSON_HEADERS).end(JSON.stringify(responseBody));
+    response.writeHead(result.status, JSON_HEADERS2).end(JSON.stringify(responseBody));
     return true;
   }
-  response.writeHead(405, JSON_HEADERS).end(JSON.stringify({ error: "method not allowed" }));
+  response.writeHead(405, JSON_HEADERS2).end(JSON.stringify({ error: "method not allowed" }));
   return true;
 }
 function createConfigReloader(deps) {
@@ -4921,8 +5077,8 @@ var SSE_HEADERS = {
   "cache-control": "no-cache",
   connection: "keep-alive"
 };
-var JSON_HEADERS2 = { "content-type": "application/json" };
-function bearerFromHeader2(request) {
+var JSON_HEADERS3 = { "content-type": "application/json" };
+function bearerFromHeader3(request) {
   const header = request.headers.authorization;
   if (typeof header !== "string" || !header.startsWith("Bearer ")) {
     return;
@@ -4930,8 +5086,8 @@ function bearerFromHeader2(request) {
   const value = header.slice("Bearer ".length).trim();
   return value.length === 0 ? undefined : value;
 }
-function authorized(request, query, token) {
-  const provided = tokenFromQuery(query) ?? bearerFromHeader2(request);
+function authorized2(request, query, token) {
+  const provided = tokenFromQuery(query) ?? bearerFromHeader3(request);
   return provided !== undefined && safeEqualToken(provided, token);
 }
 async function readJsonBody2(request, limit) {
@@ -4974,7 +5130,7 @@ function parseConsolePath(path) {
 async function handleStream(request, response, sessionID, deps, diagnostic) {
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "no endpoint" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "no endpoint" }));
     return;
   }
   response.writeHead(200, SSE_HEADERS);
@@ -4995,31 +5151,31 @@ data: {}
 async function handleMessages(_request, response, sessionID, deps, diagnostic) {
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "no endpoint" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "no endpoint" }));
     return;
   }
   const frames = await deps.createClient(endpoint).listMessages(sessionID, { diagnostic });
-  response.writeHead(200, JSON_HEADERS2).end(JSON.stringify({ frames }));
+  response.writeHead(200, JSON_HEADERS3).end(JSON.stringify({ frames }));
 }
 async function handleInput(request, response, sessionID, deps) {
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "no endpoint" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "no endpoint" }));
     return;
   }
   const body = await readJsonBody2(request, MAX_INPUT_CHARS + 1024);
   const input = parseSessionInput(body);
   if (input === undefined) {
-    response.writeHead(400, JSON_HEADERS2).end(JSON.stringify({ error: "invalid input" }));
+    response.writeHead(400, JSON_HEADERS3).end(JSON.stringify({ error: "invalid input" }));
     return;
   }
   await deps.createClient(endpoint).sendPrompt(sessionID, input.text);
-  response.writeHead(202, JSON_HEADERS2).end(JSON.stringify({ ok: true }));
+  response.writeHead(202, JSON_HEADERS3).end(JSON.stringify({ ok: true }));
 }
 async function handlePermission(request, response, sessionID, deps) {
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "no endpoint" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "no endpoint" }));
     return;
   }
   const body = await readJsonBody2(request, 4096);
@@ -5027,34 +5183,34 @@ async function handlePermission(request, response, sessionID, deps) {
   const permissionID = record.permissionID;
   const responseValue = record.response;
   if (typeof permissionID !== "string" || permissionID.length === 0 || responseValue !== "once" && responseValue !== "always" && responseValue !== "reject") {
-    response.writeHead(400, JSON_HEADERS2).end(JSON.stringify({ error: "invalid permission" }));
+    response.writeHead(400, JSON_HEADERS3).end(JSON.stringify({ error: "invalid permission" }));
     return;
   }
   await deps.createClient(endpoint).respondPermission(sessionID, permissionID, responseValue);
-  response.writeHead(202, JSON_HEADERS2).end(JSON.stringify({ ok: true }));
+  response.writeHead(202, JSON_HEADERS3).end(JSON.stringify({ ok: true }));
 }
 async function handlePty(_request, response, sessionID, deps) {
   if (deps.ptyEnabled !== true || deps.createPtyClient === undefined) {
-    response.writeHead(403, JSON_HEADERS2).end(JSON.stringify({ error: "pty disabled" }));
+    response.writeHead(403, JSON_HEADERS3).end(JSON.stringify({ error: "pty disabled" }));
     return;
   }
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "no endpoint" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "no endpoint" }));
     return;
   }
   const client = deps.createPtyClient(endpoint);
   const pty = await client.createPty({ command: "", title: "openteam" });
   if (pty === undefined) {
-    response.writeHead(502, JSON_HEADERS2).end(JSON.stringify({ error: "pty create failed" }));
+    response.writeHead(502, JSON_HEADERS3).end(JSON.stringify({ error: "pty create failed" }));
     return;
   }
   const token = await client.connectToken(pty.id);
   if (token === undefined) {
-    response.writeHead(502, JSON_HEADERS2).end(JSON.stringify({ error: "connect token failed" }));
+    response.writeHead(502, JSON_HEADERS3).end(JSON.stringify({ error: "connect token failed" }));
     return;
   }
-  response.writeHead(200, JSON_HEADERS2).end(JSON.stringify({
+  response.writeHead(200, JSON_HEADERS3).end(JSON.stringify({
     ptyID: pty.id,
     wsUrl: client.wsUrl(pty.id, token.ticket)
   }));
@@ -5065,17 +5221,17 @@ async function handleConsoleRoute(request, response, url, deps) {
   }
   const route = parseConsolePath(url.pathname);
   if (route === undefined) {
-    response.writeHead(404, JSON_HEADERS2).end(JSON.stringify({ error: "not found" }));
+    response.writeHead(404, JSON_HEADERS3).end(JSON.stringify({ error: "not found" }));
     return true;
   }
   const readOnlyAction = route.action === "stream" || route.action === "messages";
   const channelEnabled = deps.terminalEnabled || readOnlyAction && deps.drilldownEnabled === true;
   if (!channelEnabled) {
-    response.writeHead(403, JSON_HEADERS2).end(JSON.stringify({ error: "terminal disabled" }));
+    response.writeHead(403, JSON_HEADERS3).end(JSON.stringify({ error: "terminal disabled" }));
     return true;
   }
-  if (!authorized(request, url.searchParams, deps.token)) {
-    response.writeHead(401, JSON_HEADERS2).end(JSON.stringify({ error: "unauthorized" }));
+  if (!authorized2(request, url.searchParams, deps.token)) {
+    response.writeHead(401, JSON_HEADERS3).end(JSON.stringify({ error: "unauthorized" }));
     return true;
   }
   const diagnostic = deps.diagnosticEnabled === true && url.searchParams.get("diagnostic") === "1";
@@ -5099,45 +5255,7 @@ async function handleConsoleRoute(request, response, url, deps) {
     await handlePty(request, response, route.sessionID, deps);
     return true;
   }
-  response.writeHead(405, JSON_HEADERS2).end(JSON.stringify({ error: "method not allowed" }));
-  return true;
-}
-
-// src/web/graphRoute.ts
-var JSON_HEADERS3 = { "content-type": "application/json" };
-var GRAPH_SSE_EVENT = "graph";
-function graphSseMessage(json) {
-  return `event: ${GRAPH_SSE_EVENT}
-data: ${json}
-
-`;
-}
-function bearerFromHeader3(request) {
-  const header = request.headers.authorization;
-  if (typeof header !== "string" || !header.startsWith("Bearer ")) {
-    return;
-  }
-  const value = header.slice("Bearer ".length).trim();
-  return value.length === 0 ? undefined : value;
-}
-function authorized2(request, query, token) {
-  const provided = tokenFromQuery(query) ?? bearerFromHeader3(request);
-  return provided !== undefined && safeEqualToken(provided, token);
-}
-async function handleGraphRoute(request, response, url, deps) {
-  if (url.pathname !== "/api/graph") {
-    return false;
-  }
-  if (request.method !== "GET") {
-    response.writeHead(405, JSON_HEADERS3).end(JSON.stringify({ error: "method not allowed" }));
-    return true;
-  }
-  if (deps.remoteToken !== undefined && !authorized2(request, url.searchParams, deps.remoteToken)) {
-    response.writeHead(401, JSON_HEADERS3).end(JSON.stringify({ error: "unauthorized" }));
-    return true;
-  }
-  const view = await deps.readView();
-  response.writeHead(200, JSON_HEADERS3).end(JSON.stringify(view));
+  response.writeHead(405, JSON_HEADERS3).end(JSON.stringify({ error: "method not allowed" }));
   return true;
 }
 
@@ -5408,6 +5526,14 @@ async function createConsoleServer(deps) {
     if (graphDeps !== undefined && await handleGraphRoute(request, response, url2, graphDeps)) {
       return;
     }
+    if (graphDeps === undefined && url2.pathname === "/api/graph") {
+      if (request.method !== "GET") {
+        response.writeHead(405, { "content-type": "application/json" }).end(JSON.stringify({ error: "method not allowed" }));
+        return;
+      }
+      response.writeHead(200, { "content-type": "application/json" }).end(JSON.stringify(GRAPH_DISABLED_ENVELOPE));
+      return;
+    }
     if (deps.storageApi !== undefined && await handleStorageRoute(request, response, url2, deps.storageApi)) {
       return;
     }
@@ -5982,7 +6108,7 @@ async function createConsoleRuntime(deps) {
   });
   const createServer = deps.serve ?? createConsoleServer;
   const graphApi = deps.config.graphView?.enabled === true && deps.graphView !== undefined ? { readView: deps.graphView.readView } : undefined;
-  const graphDisabled = deps.config.graphView?.enabled === true && graphApi === undefined;
+  const graphDisabled = graphApi === undefined;
   const server = await createServer({
     readSnapshot,
     config: deps.config,
@@ -15315,7 +15441,7 @@ async function buildMemoryRuntimeFromConfig(config, deps, options = {}) {
 // package.json
 var package_default = {
   name: "@jmanuelcorral/openteam",
-  version: "0.11.0",
+  version: "0.12.0",
   packageManager: "bun@1.3.14",
   description: "Cost-aware, local-first routing plugin for opencode with cheapest-capable frontier fallback and multi-agent orchestration.",
   license: "MIT",