@nimbus-sh/worker 0.1.5 → 0.1.6

package/public/s/index.html

@@ -29,7 +29,7 @@
     .toolbar .sep { width: 1px; height: 16px; background: #30363d; margin: 0 4px; }
     .toolbar .vite-status { font-size: 11px; color: #8b949e; margin-left: auto; }
     .toolbar .vite-status.running { color: #3fb950; }
-    /* Process count button. Sits next to the layout-mode buttons. Hidden
+    /* Process count button. Sits next to the workspace buttons. Hidden
        (display:none) until at least one process has been seen in this
        session so it doesn't clutter a brand-new session's toolbar. */
     .toolbar #btnProcs { display: none; gap: 6px; align-items: center; font-family: ui-monospace, Menlo, monospace; }
@@ -96,7 +96,35 @@
     /* Preview panel */
     .panel-preview { flex: 1; display: flex; flex-direction: column; background: #0d1117; overflow: hidden; min-width: 0; }
     .panel-preview.hidden { display: none; }
-    .preview-bar { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0; }
+    .preview-bar { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0; min-width: 0; }
+    .preview-tabs {
+      display: flex; align-items: center; gap: 3px; min-width: 110px; max-width: 45%;
+      overflow-x: auto; scrollbar-width: none; flex: 0 1 auto;
+    }
+    .preview-tabs::-webkit-scrollbar { display: none; }
+    .preview-bar .preview-tab {
+      height: 22px; display: inline-flex; align-items: center; gap: 5px; min-width: 0;
+      max-width: 150px; padding: 0 8px; border-radius: 4px 4px 0 0;
+      border: 1px solid transparent; border-bottom-color: transparent;
+      background: transparent; color: #8b949e; font-size: 11px; line-height: 1;
+      white-space: nowrap; cursor: pointer;
+    }
+    .preview-bar .preview-tab:hover { background: #21262d; color: #c9d1d9; }
+    .preview-bar .preview-tab.active {
+      background: #0d1117; color: #f0f6fc; border-color: #30363d;
+      border-bottom-color: #0d1117;
+    }
+    .preview-bar .preview-tab.running::before {
+      content: ""; width: 6px; height: 6px; border-radius: 999px;
+      background: #3fb950; box-shadow: 0 0 8px rgba(63,185,80,0.55);
+      flex: 0 0 auto;
+    }
+    .preview-bar .preview-tab.markdown::before {
+      content: "md"; color: #79c0ff; font: 9px/1 ui-monospace, Menlo, monospace;
+      border: 1px solid rgba(121,192,255,0.35); border-radius: 3px; padding: 1px 2px;
+      flex: 0 0 auto;
+    }
+    .preview-tab-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
     .preview-bar .url-bar { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 2px 8px; font-size: 11px; border-radius: 4px; font-family: monospace; }
     .preview-bar button { background: none; border: none; color: #8b949e; cursor: pointer; font-size: 14px; padding: 2px 4px; }
     .preview-bar button:hover { color: #c9d1d9; }
@@ -151,26 +179,201 @@
     .footer .stat-value { color: #c9d1d9; }
     .footer .stat-value.good { color: #3fb950; }
 
-    /* Layout modes */
-    .main.terminal-only .panel-preview,
-    .main.terminal-only .panel-editor,
-    .main.terminal-only .resize-handle { display: none; }
-    .main.terminal-only .panel-terminal { flex: 1; }
-    .main.preview-only .panel-terminal,
-    .main.preview-only .panel-editor,
-    .main.preview-only .resize-handle { display: none; }
-    .main.preview-only .panel-preview { flex: 1; }
-
-    /* Editor layout mode:
+    /* Agent chat */
+    .panel-agent {
+      display: none; flex: 1; min-width: 0; min-height: 0;
+      background: #0f141b; color: #d6dee8; flex-direction: column;
+    }
+    .agent-shell {
+      flex: 1; min-height: 0; display: grid;
+      grid-template-rows: auto 1fr auto;
+      width: 100%;
+      background:
+        linear-gradient(180deg, rgba(88,166,255,0.04), rgba(63,185,80,0.015) 28%, transparent 48%),
+        #0f141b;
+    }
+    .agent-top {
+      display: flex; align-items: center; gap: 8px;
+      padding: 7px 12px; background: rgba(22,27,34,0.96);
+      border-bottom: 1px solid #30363d; min-height: 40px;
+    }
+    .agent-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+    .agent-title { font-size: 12px; font-weight: 650; color: #f0f6fc; white-space: nowrap; }
+    .agent-subtitle {
+      color: #8b949e; font-size: 11px; overflow: hidden; text-overflow: ellipsis;
+      white-space: nowrap; max-width: 220px;
+    }
+    .agent-status {
+      margin-left: auto; font-size: 11px; color: #8b949e;
+      font-family: ui-monospace, Menlo, monospace; display: inline-flex;
+      align-items: center; gap: 6px; min-width: 0; white-space: nowrap;
+    }
+    .agent-status::before {
+      content: ''; width: 6px; height: 6px; border-radius: 50%;
+      background: #6e7681; box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
+    }
+    .agent-status.ready { color: #3fb950; }
+    .agent-status.ready::before { background: #3fb950; box-shadow: 0 0 8px rgba(63,185,80,0.55); }
+    .agent-status.warn { color: #d29922; }
+    .agent-status.warn::before { background: #d29922; box-shadow: 0 0 8px rgba(210,153,34,0.45); }
+    .agent-status.streaming { color: #58a6ff; }
+    .agent-status.streaming::before { background: #58a6ff; animation: pulse 1.1s ease-in-out infinite; }
+    .agent-top button,
+    .agent-composer button {
+      background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
+      padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px;
+    }
+    .agent-top button:hover,
+    .agent-composer button:hover { background: #30363d; }
+    .agent-top button:disabled,
+    .agent-composer button:disabled { opacity: 0.55; cursor: not-allowed; }
+    .agent-top .agent-secondary { color: #8b949e; }
+    .agent-top select {
+      background: #0d1117; border: 1px solid #30363d; color: #c9d1d9;
+      padding: 4px 8px; border-radius: 6px; font-size: 11px;
+      max-width: 260px;
+    }
+    .agent-messages {
+      min-height: 0; overflow: auto; padding: 22px 18px 26px;
+      display: flex; flex-direction: column; gap: 16px;
+      scrollbar-width: thin; scrollbar-color: #30363d transparent;
+    }
+    .agent-empty {
+      margin: auto; max-width: 560px; color: #8b949e; text-align: center;
+      font-size: 13px; line-height: 1.6; padding: 28px;
+      border: 1px dashed #30363d; border-radius: 8px;
+      background: rgba(22,27,34,0.55);
+    }
+    .agent-msg {
+      width: min(900px, 100%); margin: 0 auto;
+      display: flex; gap: 10px; align-items: flex-start;
+    }
+    .agent-msg.user { justify-content: flex-end; }
+    .agent-avatar {
+      width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
+      display: grid; place-items: center; margin-top: 2px;
+      border: 1px solid #30363d; background: #161b22;
+      color: #8b949e; font: 10px ui-monospace, Menlo, monospace;
+    }
+    .agent-msg.assistant .agent-avatar { color: #7ee787; border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.08); }
+    .agent-msg.user .agent-avatar { display: none; }
+    .agent-content {
+      min-width: 0; max-width: min(760px, 86%); display: flex; flex-direction: column; gap: 8px;
+    }
+    .agent-msg.user .agent-content { align-items: flex-end; }
+    .agent-meta {
+      color: #6e7681; font: 10px ui-monospace, Menlo, monospace;
+      text-transform: uppercase; letter-spacing: 0.02em;
+    }
+    .agent-bubble {
+      border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere;
+      font-size: 13px; line-height: 1.58; color: #d6dee8;
+    }
+    .agent-msg.assistant .agent-bubble {
+      background: rgba(22,27,34,0.78); border: 1px solid rgba(48,54,61,0.85);
+    }
+    .agent-msg.user .agent-bubble {
+      background: linear-gradient(180deg, rgba(31,111,235,0.24), rgba(31,111,235,0.15));
+      border: 1px solid rgba(88,166,255,0.65); color: #f0f6fc;
+      max-width: min(680px, 76%);
+    }
+    .agent-bubble p { margin: 0 0 10px; }
+    .agent-bubble p:last-child { margin-bottom: 0; }
+    .agent-bubble ul, .agent-bubble ol { margin: 6px 0 10px 18px; }
+    .agent-bubble li { margin: 3px 0; }
+    .agent-bubble code {
+      background: rgba(110,118,129,0.25); border-radius: 4px;
+      padding: 0.12em 0.35em; color: #f0f6fc;
+      font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em;
+    }
+    .agent-bubble pre {
+      margin: 8px 0; padding: 10px 12px; border-radius: 8px;
+      border: 1px solid #30363d; background: #0d1117; overflow: auto;
+      white-space: pre;
+    }
+    .agent-bubble pre code { background: transparent; padding: 0; }
+    .agent-thinking {
+      display: inline-flex; align-items: center; gap: 7px;
+      color: #8b949e; font-size: 12px; padding: 4px 0;
+    }
+    .agent-thinking .dots { display: inline-flex; gap: 4px; }
+    .agent-thinking .dots span {
+      width: 5px; height: 5px; border-radius: 50%; background: #58a6ff;
+      animation: agent-dot 1s ease-in-out infinite;
+    }
+    .agent-thinking .dots span:nth-child(2) { animation-delay: 120ms; }
+    .agent-thinking .dots span:nth-child(3) { animation-delay: 240ms; }
+    @keyframes agent-dot { 0%, 70%, 100% { opacity: 0.32; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
+    .agent-cursor {
+      display: inline-block; width: 2px; height: 1em; margin-left: 2px;
+      background: #58a6ff; vertical-align: -0.15em; animation: agent-cursor 1s steps(1) infinite;
+    }
+    @keyframes agent-cursor { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
+    .agent-reasoning {
+      border-left: 2px solid rgba(88,166,255,0.65); padding: 7px 10px;
+      background: rgba(88,166,255,0.06); color: #8b949e; border-radius: 0 8px 8px 0;
+      font-size: 12px; line-height: 1.5;
+    }
+    .agent-reasoning summary { cursor: pointer; color: #79c0ff; font-weight: 600; }
+    .agent-reasoning pre { margin-top: 7px; white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; color: #c9d1d9; }
+    .agent-tools { display: flex; flex-direction: column; gap: 7px; }
+    .agent-tool {
+      border: 1px solid #30363d; background: rgba(13,17,23,0.72);
+      border-radius: 8px; overflow: hidden;
+    }
+    .agent-tool summary {
+      display: flex; align-items: center; gap: 8px; cursor: pointer;
+      padding: 7px 9px; list-style: none; user-select: none;
+    }
+    .agent-tool summary::-webkit-details-marker { display: none; }
+    .agent-tool .tool-dot {
+      width: 7px; height: 7px; border-radius: 50%; background: #6e7681; flex: 0 0 auto;
+    }
+    .agent-tool.running .tool-dot { background: #58a6ff; box-shadow: 0 0 8px rgba(88,166,255,0.7); animation: pulse 1s ease-in-out infinite; }
+    .agent-tool.done .tool-dot { background: #3fb950; }
+    .agent-tool.error .tool-dot { background: #ff7b72; }
+    .agent-tool .tool-name { font: 12px ui-monospace, Menlo, monospace; color: #f0f6fc; }
+    .agent-tool .tool-state { margin-left: auto; color: #8b949e; font-size: 11px; }
+    .agent-tool.running .tool-state { color: #58a6ff; }
+    .agent-tool.done .tool-state { color: #3fb950; }
+    .agent-tool.error .tool-state { color: #ff7b72; }
+    .agent-tool-body {
+      border-top: 1px solid #30363d; padding: 8px 9px; display: grid;
+      gap: 8px; background: rgba(22,27,34,0.55);
+    }
+    .agent-tool-body label {
+      display: block; color: #6e7681; font-size: 10px; text-transform: uppercase;
+      margin-bottom: 4px; font-family: ui-monospace, Menlo, monospace;
+    }
+    .agent-tool-body pre {
+      margin: 0; max-height: 190px; overflow: auto; white-space: pre-wrap;
+      background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
+      padding: 8px; color: #c9d1d9; font: 11px/1.5 ui-monospace, Menlo, monospace;
+    }
+    .agent-composer {
+      display: grid; grid-template-columns: 1fr auto; gap: 8px;
+      padding: 12px 14px; background: rgba(22,27,34,0.96);
+      border-top: 1px solid #30363d;
+    }
+    .agent-composer textarea {
+      resize: none; min-height: 44px; max-height: 170px; background: #0d1117;
+      border: 1px solid #30363d; color: #f0f6fc; border-radius: 8px;
+      padding: 10px 12px; font: 13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; outline: none;
+    }
+    .agent-composer textarea:focus {
+      border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,0.16);
+    }
+    .agent-composer button { min-width: 76px; font-weight: 650; }
+    .agent-composer button.streaming { border-color: #ff7b72; color: #ff7b72; }
+
+    /* Editor workspace:
          FILE TREE | editor-stack (editor TOP + terminal BOTTOM) | PREVIEW
 
-       Editor + terminal live INSIDE .panel-left-stack. In 1D modes
-       (terminal-only / split / preview-only) the stack is
-       display:contents (layout-transparent — children flex directly
-       into .main). In editor mode the stack flips to flex column so
-       editor (top) + terminal (bottom) stack vertically. */
+       Editor, Agent, and terminal live inside .panel-left-stack. The top
+       surface switches between the editor and chat while the terminal and
+       preview stay visible. */
 
-    /* Editor panel — hidden by default; shown by mode-specific rules. */
+    /* Editor panel — hidden by default; shown by workspace rules. */
     .panel-editor {
       flex: 1; display: none; flex-direction: column;
       background: #1e1e1e;        /* VSCode dark editor background */
@@ -178,12 +381,11 @@
     }
     .panel-editor.active { display: flex; }
 
-    /* Wrapper for the editor-stack column. display:contents in 1D
-       modes (transparent). flex column in editor mode. */
+    /* Wrapper for the center workspace column. */
     .panel-left-stack { display: contents; }
 
     /* File-tree sidebar. Lives as a FIRST child of
-       .main; visible only in 'editor' mode. ~250px default width,
+       .main; visible in the editor workspace. ~250px default width,
        resizable via .tree-resize-handle. */
     .panel-tree {
       display: none; flex-direction: column;
@@ -283,6 +485,11 @@
     .main.editor .panel-terminal {
       display: flex; flex: 0 0 40%; min-height: 80px;
     }
+    .main.editor .panel-agent { display: none; }
+    .main.editor .panel-left-stack.agent-surface .panel-editor { display: none; }
+    .main.editor .panel-left-stack.agent-surface .panel-agent {
+      display: flex; flex: 1 1 60%; min-height: 100px;
+    }
     .main.editor .vresize-handle { display: block; }
     .main.editor .resize-handle { display: block; }
     .main.editor .panel-preview { display: flex; flex: 1; min-width: 0; }
@@ -333,13 +540,9 @@
     </div>
   </div>
   <div class="toolbar" id="toolbar">
-    <button id="btnTerminal" class="active" title="Terminal">Terminal</button>
-    <button id="btnPreview" title="Preview">Preview</button>
-    <button id="btnSplit" title="Split view">Split</button>
-    <!-- Single canonical editor mode:
-         file tree | editor (top) + terminal (bottom) | preview.
-         Lazy-loads Monaco + the tree on first click. -->
-    <button id="btnEditor" title="Editor (file tree + Monaco + terminal + preview)">Editor</button>
+    <!-- Single workspace: file tree | editor/agent + terminal | preview. -->
+    <button id="btnEditor" class="active" title="Editor">Editor</button>
+    <button id="btnAgent" title="Agent chat">Agent</button>
     <div class="sep"></div>
     <button id="btnProcs" title="Toggle process logs panel">
       <span class="procs-dot"></span>
@@ -350,9 +553,8 @@
     <span class="vite-status" id="viteStatus"></span>
   </div>
   <div class="main" id="mainPanel">
-    <!-- File-tree sidebar. Visible ONLY
-         in editor mode (CSS toggles display:flex on .main.editor).
-         The .tree-resize-handle sits between tree and editor stack;
+    <!-- File-tree sidebar. Visible in the workspace.
+         The .tree-resize-handle sits between tree and the center stack;
          dragging it adjusts .panel-tree's width inline. -->
     <div class="panel-tree" id="treePanel">
       <div class="tree-toolbar">
@@ -367,11 +569,7 @@
       <div class="tree-body" id="treeBody"></div>
     </div>
     <div class="tree-resize-handle" id="treeResizeHandle"></div>
-    <!-- The .panel-left-stack wrapper is display:contents in 1D modes
-         (terminal-only, split, preview-only) — its children act as
-         direct flex children of .main. In editor mode, CSS flips it to
-         display:flex so editor and terminal stack vertically in the middle
-         column. -->
+    <!-- The .panel-left-stack wrapper is the middle workspace column. -->
     <div class="panel-left-stack" id="leftStack">
       <div class="panel-editor" id="editorPanel">
         <div class="editor-bar">
@@ -394,9 +592,29 @@
           <span id="editorStatusEnc">UTF-8</span>
         </div>
       </div>
-      <!-- Vertical resize handle between
-           editor (top) and terminal (bottom) inside the editor-stack
-           column. Visible only in editor mode (.main.editor). -->
+      <div class="panel-agent" id="agentPanel">
+        <div class="agent-shell">
+          <div class="agent-top">
+            <div class="agent-heading">
+              <div class="agent-title">Nimbus Agent</div>
+              <div class="agent-subtitle" id="agentSubtitle">Workspace operator</div>
+            </div>
+            <select id="agentAccount" title="Cloudflare account" style="display:none"></select>
+            <button id="agentConnect" style="display:none">Connect Cloudflare</button>
+            <button id="agentDisconnect" class="agent-secondary" style="display:none">Disconnect</button>
+            <button id="agentClear" class="agent-secondary" title="Clear chat">Clear</button>
+            <div class="agent-status" id="agentStatus">Checking...</div>
+          </div>
+          <div class="agent-messages" id="agentMessages">
+            <div class="agent-empty" id="agentEmpty">Cloudflare connection required.</div>
+          </div>
+          <form class="agent-composer" id="agentForm">
+            <textarea id="agentInput" rows="2" placeholder="Message Nimbus"></textarea>
+            <button id="agentSend" type="submit">Send</button>
+          </form>
+        </div>
+      </div>
+      <!-- Vertical resize handle between the top surface and terminal. -->
       <div class="vresize-handle" id="editorTerminalResizeHandle"></div>
       <div class="panel-terminal">
         <div id="terminal-container"></div>
@@ -409,7 +627,7 @@
     <div class="resize-handle" id="resizeHandle"></div>
     <div class="panel-preview" id="previewPanel">
       <div class="preview-bar">
-        <span style="color:#3fb950;font-size:12px">&#9679;</span>
+        <div class="preview-tabs" id="previewTabs" aria-label="Preview tabs"></div>
         <input class="url-bar" id="urlBar" value="" readonly>
         <button id="btnReloadPreview" title="Reload">&#8635;</button>
       </div>
@@ -454,6 +672,11 @@
     const STATS_URL = SESSION_PREFIX + '/api/stats';
     const VITE_URL = SESSION_PREFIX + '/preview/';
     const WORKER_URL = SESSION_PREFIX + '/worker/';
+    const AGENT_STATUS_URL = SESSION_PREFIX + '/api/agent/status';
+    const AGENT_MESSAGES_URL = SESSION_PREFIX + '/api/agent/messages';
+    const AGENT_OAUTH_START_URL = SESSION_PREFIX + '/api/agent/oauth/start';
+    const AGENT_OAUTH_LOGOUT_URL = SESSION_PREFIX + '/api/agent/oauth/logout';
+    const AGENT_ACCOUNT_URL = SESSION_PREFIX + '/api/agent/account';
     // The iframe starts pointing at /preview/ which handles its own
     // "no dev server running" placeholder. When the user spawns a
     // wrangler dev (via `wrangler dev` in the terminal), stats polling
@@ -520,68 +743,67 @@
     const stText = document.getElementById('statusText');
     const previewFrame = document.getElementById('preview-frame');
     const previewPanel = document.getElementById('previewPanel');
+    const previewTabsEl = document.getElementById('previewTabs');
     const markdownPreview = document.getElementById('markdown-preview');
     const markdownPreviewBody = document.getElementById('markdown-preview-body');
     const mainPanel = document.getElementById('mainPanel');
     const viteStatus = document.getElementById('viteStatus');
     let ws = null, rd = 1000, statsTimer = null;
-    // Current layout modes. Editor mode keeps the file tree, Monaco,
-    // terminal, and preview visible together.
-    let layout = 'split';
+    // The app has one workspace layout. Only the top center surface switches.
+    let layout = 'editor';
+    let workSurface = 'editor';
 
     // ── Layout controls ──
     function setLayout(mode) {
-      layout = mode;
-      mainPanel.className = 'main' + (mode !== 'split' ? ' ' + mode : '');
-      document.getElementById('btnTerminal').classList.toggle('active', mode === 'terminal-only');
-      document.getElementById('btnPreview').classList.toggle('active', mode === 'preview-only');
-      document.getElementById('btnSplit').classList.toggle('active', mode === 'split');
-      document.getElementById('btnEditor').classList.toggle('active', mode === 'editor');
-      // Editor panel visibility — drives display:flex via .active.
+      workSurface = mode === 'agent' ? 'agent' : 'editor';
+      layout = 'editor';
+      mainPanel.className = 'main editor';
+      const leftStack = document.getElementById('leftStack');
+      leftStack.classList.toggle('agent-surface', workSurface === 'agent');
+      document.getElementById('btnEditor').classList.toggle('active', workSurface === 'editor');
+      document.getElementById('btnAgent').classList.toggle('active', workSurface === 'agent');
+      // Editor panel visibility — drives display:flex via .active unless
+      // the agent surface is currently selected.
       const editorPanel = document.getElementById('editorPanel');
-      const wantEditor = (mode === 'editor');
+      const wantEditor = (workSurface === 'editor');
       editorPanel.classList.toggle('active', wantEditor);
-      // Lazy-init Monaco + the file tree the FIRST time the user
-      // switches to editor mode. Cold session pays neither cost.
+      FileTree.ensureLoaded().catch(() => {});
+      // Lazy-init Monaco the first time the editor surface is selected.
       if (wantEditor) {
-        const editorReady = Editor.ensureLoaded();
-        const treeReady = FileTree.ensureLoaded();
-        Promise.allSettled([editorReady, treeReady])
+        Editor.ensureLoaded()
           .then(() => Editor.openDefaultWelcome())
           .catch(() => {});
       }
+      if (workSurface === 'agent') {
+        Agent.ensureLoaded().catch(() => {});
+      }
       setTimeout(() => {
-        // Re-apply persisted pane dims for this layout.
-        // PaneResizer uses inline flex which is mode-specific (split vs
-        // editor have different pane structures); onLayoutChange picks
-        // the right elements for the active mode.
+        // Re-apply persisted pane dims for this workspace.
         try { if (typeof PaneResizer !== 'undefined') PaneResizer.onLayoutChange(); } catch {}
         try { fitAddon.fit(); } catch {}
         // Re-layout Monaco after the panel resizes. automaticLayout:true
-        // already handles this but explicit layout() on mode switch
+        // already handles this but explicit layout() on surface switch
         // avoids a one-frame flash where the editor sees its old size.
         if (window.__nimbusMonacoEditor) {
           try { window.__nimbusMonacoEditor.layout(); } catch {}
         }
       }, 50);
     }
-    document.getElementById('btnTerminal').onclick = () => setLayout('terminal-only');
-    document.getElementById('btnPreview').onclick = () => setLayout('preview-only');
-    document.getElementById('btnSplit').onclick = () => setLayout('split');
     document.getElementById('btnEditor').onclick = () => setLayout('editor');
+    document.getElementById('btnAgent').onclick = () => setLayout('agent');
     document.getElementById('btnRefresh').onclick = () => reloadPreview();
     document.getElementById('btnReloadPreview').onclick = () => reloadPreview();
 
     // ── Editor module ──
     //
     // Lazy-loads Monaco via cdnjs UMD on first call to ensureLoaded().
-    // Cold session (terminal-only flow) never pays the ~5MB download.
     //
     // Owns the open file, dirty state, Ctrl+P palette, Ctrl+S save.
     // All fs operations route through the live WS via fs-read /
     // fs-write / fs-list messages → init.ts handler → SqliteVFS.
     //
-    // Perf-invariant: Monaco is not loaded on cold terminal-only sessions.
+    // Perf-invariant: Monaco is loaded by runtime appending, not by an eager
+    // <script src> in the served HTML.
     const Editor = (function() {
       // CDN choice: cdnjs hosts Monaco's UMD AMD-loader (`loader.min.js`)
       // which fetches the remaining vs/* chunks on demand. Total cold
@@ -1683,14 +1905,667 @@
       };
     })();
 
-    // Which preview backend the iframe currently points at. Driven by
-    // /api/stats polling: wrangler.running > vite.running > placeholder.
-    // Tracked separately from iframe.src so user reloads / hash changes
-    // don't confuse the switcher. Starts as null so the first
-    // applyPreviewTarget call always paints (even if nothing is running
-    // yet — that still wants the VITE_URL placeholder loaded).
-    let activePreview = null; // null | 'vite' | 'worker' | 'none'
-    let previewSurface = 'app'; // 'app' | 'markdown'
+    // ── Agent chat module ─────────────────────────────────────────────
+    const Agent = (function() {
+      const statusEl = document.getElementById('agentStatus');
+      const subtitleEl = document.getElementById('agentSubtitle');
+      const messagesEl = document.getElementById('agentMessages');
+      const emptyEl = document.getElementById('agentEmpty');
+      const form = document.getElementById('agentForm');
+      const input = document.getElementById('agentInput');
+      const sendBtn = document.getElementById('agentSend');
+      const connectBtn = document.getElementById('agentConnect');
+      const disconnectBtn = document.getElementById('agentDisconnect');
+      const clearBtn = document.getElementById('agentClear');
+      const accountSelect = document.getElementById('agentAccount');
+
+      let loaded = false;
+      let status = null;
+      let messages = [];
+      let busy = false;
+      let currentAbort = null;
+      let oauthPoll = null;
+      let renderSeq = 0;
+
+      function setAgentStatus(text, tone) {
+        statusEl.textContent = text;
+        statusEl.className = 'agent-status' + (tone ? ' ' + tone : '');
+      }
+
+      function canStartChat() {
+        return !!status && status.configured && status.connected;
+      }
+
+      function applyControls() {
+        const oauth = status?.oauth || {};
+        const owner = status?.ownerToken || {};
+        const connected = !!status?.connected;
+        const canStart = canStartChat();
+        connectBtn.style.display = oauth.configured && !oauth.connected ? 'inline-block' : 'none';
+        disconnectBtn.style.display = oauth.connected ? 'inline-block' : 'none';
+        accountSelect.style.display = oauth.connected && Array.isArray(oauth.accounts) && oauth.accounts.length > 1
+          ? 'inline-block'
+          : 'none';
+        input.disabled = !canStart || busy;
+        sendBtn.disabled = !canStart || (!busy && !input.value.trim());
+        sendBtn.textContent = busy ? 'Stop' : 'Send';
+        sendBtn.classList.toggle('streaming', busy);
+        if (!status) {
+          emptyEl.textContent = 'Cloudflare connection required.';
+          subtitleEl.textContent = 'Workspace operator';
+          setAgentStatus('Checking...', '');
+        } else if (!status.configured) {
+          emptyEl.textContent = 'Configure Cloudflare OAuth or an owner API token to enable chat.';
+          subtitleEl.textContent = 'Cloudflare Workers AI';
+          setAgentStatus('AI not configured', 'warn');
+        } else if (connected) {
+          const mode = oauth.connected ? 'Cloudflare connected' : owner.configured ? 'Owner token' : 'Ready';
+          emptyEl.textContent = 'Ask Nimbus to inspect or change this session.';
+          subtitleEl.textContent = 'Shell · files · runtimes · previews';
+          setAgentStatus((busy ? 'Streaming' : mode) + ' · ' + status.model, busy ? 'streaming' : 'ready');
+        } else {
+          emptyEl.textContent = 'Connect Cloudflare to use Workers AI.';
+          subtitleEl.textContent = 'Use your Cloudflare quota';
+          setAgentStatus('Connect Cloudflare', 'warn');
+        }
+      }
+
+      function renderAccounts() {
+        const oauth = status?.oauth || {};
+        const accounts = Array.isArray(oauth.accounts) ? oauth.accounts : [];
+        accountSelect.replaceChildren();
+        for (const account of accounts) {
+          const opt = document.createElement('option');
+          opt.value = account.id;
+          opt.textContent = account.name || account.id;
+          opt.selected = account.id === oauth.accountId;
+          accountSelect.appendChild(opt);
+        }
+      }
+
+      function roleLabel(role, name) {
+        if (role === 'tool') return name || 'tool';
+        return role === 'assistant' ? 'Nimbus' : 'You';
+      }
+
+      function formatTime(ts) {
+        const date = new Date(ts || Date.now());
+        if (Number.isNaN(date.getTime())) return '';
+        return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+      }
+
+      function renderMessages(list = messages) {
+        renderSeq++;
+        const seq = renderSeq;
+        const displayList = normalizeTranscriptForRender(list);
+        messagesEl.replaceChildren();
+        if (!displayList || displayList.length === 0) {
+          messagesEl.appendChild(emptyEl);
+          return;
+        }
+        for (const msg of displayList) {
+          messagesEl.appendChild(renderMessage(msg, seq));
+        }
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      function normalizeTranscriptForRender(list) {
+        if (!Array.isArray(list)) return [];
+        const out = [];
+        let pendingTools = [];
+        const flushPendingTools = () => {
+          for (const tool of pendingTools) {
+            out.push({ id: tool.toolCallId, role: 'assistant', content: '', createdAt: Date.now(), parts: [tool] });
+          }
+          pendingTools = [];
+        };
+        for (const msg of list) {
+          if (msg?.role === 'tool') {
+            pendingTools.push(legacyToolPart(msg));
+            continue;
+          }
+          if (msg?.role === 'assistant' && pendingTools.length > 0) {
+            const next = { ...msg, parts: [...pendingTools, ...normalizeTurnParts(msg)] };
+            pendingTools = [];
+            out.push(next);
+            continue;
+          }
+          flushPendingTools();
+          out.push(msg);
+        }
+        flushPendingTools();
+        return out;
+      }
+
+      function renderMessage(msg, seq) {
+        if (msg.role === 'tool') return renderStoredToolMessage(msg);
+
+        const row = document.createElement('div');
+        row.className = 'agent-msg ' + msg.role;
+        const avatar = document.createElement('div');
+        avatar.className = 'agent-avatar';
+        avatar.textContent = msg.role === 'assistant' ? 'N' : '';
+        const content = document.createElement('div');
+        content.className = 'agent-content';
+
+        const meta = document.createElement('div');
+        meta.className = 'agent-meta';
+        meta.textContent = roleLabel(msg.role, msg.name) + (msg.createdAt ? ' · ' + formatTime(msg.createdAt) : '');
+
+        const isStreaming = !!msg.streaming;
+
+        if (msg.role === 'assistant') content.appendChild(meta);
+
+        if (msg.role === 'assistant') {
+          const parts = normalizeTurnParts(msg);
+          if (msg.error) {
+            const bubble = document.createElement('div');
+            bubble.className = 'agent-bubble';
+            bubble.textContent = msg.error;
+            content.appendChild(bubble);
+          } else if (parts.length > 0) {
+            renderTurnParts(content, parts, { streaming: isStreaming, seq });
+          } else if (isStreaming) {
+            content.appendChild(renderThinking('Thinking'));
+          }
+        } else if (msg.content || msg.error) {
+          const bubble = document.createElement('div');
+          bubble.className = 'agent-bubble';
+          if (msg.error) {
+            bubble.textContent = msg.error;
+          } else {
+            bubble.textContent = String(msg.content || '');
+          }
+          content.appendChild(bubble);
+        }
+
+        if (msg.role === 'user') {
+          content.appendChild(meta);
+          row.append(content);
+        } else {
+          row.append(avatar, content);
+        }
+        return row;
+      }
+
+      function normalizeTurnParts(msg) {
+        if (Array.isArray(msg.parts)) return msg.parts.filter((part) => part && typeof part === 'object');
+        const parts = [];
+        if (msg.reasoning) parts.push({ type: 'reasoning', text: String(msg.reasoning) });
+        if (Array.isArray(msg.tools)) {
+          for (const tool of msg.tools) parts.push({ type: 'tool', ...tool });
+        }
+        if (msg.content) parts.push({ type: 'text', text: String(msg.content) });
+        return parts;
+      }
+
+      function renderTurnParts(content, parts, opts = {}) {
+        const lastTextIndex = findLastTextPartIndex(parts);
+        parts.forEach((part, index) => {
+          if (part.type === 'reasoning') {
+            if (part.text) content.appendChild(renderReasoning(part.text));
+          } else if (part.type === 'tool') {
+            content.appendChild(renderToolCard(part));
+          } else if (part.type === 'text' && part.text) {
+            const bubble = document.createElement('div');
+            bubble.className = 'agent-bubble';
+            renderMarkdownInto(bubble, part.text, {
+              cursor: !!opts.streaming && index === lastTextIndex,
+              seq: opts.seq,
+            });
+            content.appendChild(bubble);
+          }
+        });
+        if (opts.streaming && (parts.length === 0 || shouldShowPostPartThinking(parts))) {
+          content.appendChild(renderThinking('Thinking'));
+        }
+      }
+
+      function findLastTextPartIndex(parts) {
+        for (let i = parts.length - 1; i >= 0; i--) {
+          if (parts[i]?.type === 'text' && parts[i].text) return i;
+        }
+        return -1;
+      }
+
+      function shouldShowPostPartThinking(parts) {
+        const last = parts[parts.length - 1];
+        return !!last && last.type === 'tool' && last.status !== 'running';
+      }
+
+      function renderStoredToolMessage(msg) {
+        const row = document.createElement('div');
+        row.className = 'agent-msg assistant';
+        const avatar = document.createElement('div');
+        avatar.className = 'agent-avatar';
+        avatar.textContent = 'T';
+        const content = document.createElement('div');
+        content.className = 'agent-content';
+        content.appendChild(renderToolCard(legacyToolPart(msg)));
+        row.append(avatar, content);
+        return row;
+      }
+
+      function legacyToolPart(msg) {
+        const payload = parseToolPayload(msg);
+        const output = payload.output ?? msg.content;
+        return {
+          type: 'tool',
+          toolCallId: msg.id,
+          toolName: payload.tool || msg.name || 'tool',
+          input: payload.input,
+          output,
+          status: isToolOutputFailure(output) ? 'error' : 'done',
+          durationMs: payload.durationMs,
+        };
+      }
+
+      function parseToolPayload(msg) {
+        try {
+          const parsed = JSON.parse(msg.content || '{}');
+          if (parsed && typeof parsed === 'object') return parsed;
+        } catch {}
+        return { tool: msg.name || 'tool', output: msg.content || '' };
+      }
+
+      function renderThinking(label) {
+        const wrap = document.createElement('div');
+        wrap.className = 'agent-thinking';
+        const dots = document.createElement('span');
+        dots.className = 'dots';
+        dots.append(document.createElement('span'), document.createElement('span'), document.createElement('span'));
+        const text = document.createElement('span');
+        text.textContent = label;
+        wrap.append(dots, text);
+        return wrap;
+      }
+
+      function renderReasoning(text) {
+        const details = document.createElement('details');
+        details.className = 'agent-reasoning';
+        const summary = document.createElement('summary');
+        summary.textContent = 'Thinking';
+        const pre = document.createElement('pre');
+        pre.textContent = text;
+        details.append(summary, pre);
+        return details;
+      }
+
+      function renderToolCard(tool) {
+        const status = tool.status || 'done';
+        const details = document.createElement('details');
+        details.className = 'agent-tool ' + status;
+        if (status === 'running' || status === 'error') details.open = true;
+
+        const summary = document.createElement('summary');
+        const dot = document.createElement('span');
+        dot.className = 'tool-dot';
+        const name = document.createElement('span');
+        name.className = 'tool-name';
+        name.textContent = tool.toolName || 'tool';
+        const state = document.createElement('span');
+        state.className = 'tool-state';
+        state.textContent = toolStateLabel(tool);
+        summary.append(dot, name, state);
+
+        const body = document.createElement('div');
+        body.className = 'agent-tool-body';
+        if (tool.input !== undefined) body.appendChild(renderToolSection('Input', tool.input));
+        if (tool.output !== undefined) body.appendChild(renderToolSection(status === 'error' ? 'Error' : 'Output', tool.output));
+        if (tool.error) body.appendChild(renderToolSection('Error', tool.error));
+        details.append(summary, body);
+        return details;
+      }
+
+      function toolStateLabel(tool) {
+        if (tool.status === 'running') return 'running';
+        if (tool.status === 'error') return tool.durationMs ? 'failed · ' + formatDuration(tool.durationMs) : 'failed';
+        return tool.durationMs ? 'done · ' + formatDuration(tool.durationMs) : 'done';
+      }
+
+      function formatDuration(ms) {
+        if (!Number.isFinite(ms) || ms < 100) return '<0.1s';
+        return (ms / 1000).toFixed(1) + 's';
+      }
+
+      function renderToolSection(label, value) {
+        const section = document.createElement('div');
+        const title = document.createElement('label');
+        title.textContent = label;
+        const pre = document.createElement('pre');
+        pre.textContent = prettyValue(value);
+        section.append(title, pre);
+        return section;
+      }
+
+      function prettyValue(value) {
+        if (typeof value === 'string') return value;
+        try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+      }
+
+      function isToolOutputFailure(output) {
+        if (!output || typeof output !== 'object') return false;
+        if (typeof output.error === 'string' && output.error.trim()) return true;
+        if (output.success === false) return true;
+        if (typeof output.exitCode === 'number' && output.exitCode !== 0) return true;
+        if (output.exit && typeof output.exit === 'object' && typeof output.exit.code === 'number') {
+          return output.exit.code !== 0;
+        }
+        return false;
+      }
+
+      function renderMarkdownInto(el, text, opts = {}) {
+        const token = String((opts.seq || renderSeq) + ':' + text.length + ':' + (opts.cursor ? '1' : '0'));
+        el.dataset.renderToken = token;
+        el.textContent = text;
+        renderMarkdown(text).then((html) => {
+          if (el.dataset.renderToken !== token) return;
+          el.innerHTML = html;
+          if (opts.cursor) {
+            const cursor = document.createElement('span');
+            cursor.className = 'agent-cursor';
+            el.appendChild(cursor);
+          }
+        }).catch(() => {
+          if (opts.cursor) {
+            const cursor = document.createElement('span');
+            cursor.className = 'agent-cursor';
+            el.appendChild(cursor);
+          }
+        });
+      }
+
+      async function refreshStatus() {
+        const r = await fetch(AGENT_STATUS_URL, { headers: { Accept: 'application/json' } });
+        const payload = await r.json();
+        if (!r.ok) throw new Error(payload.error || 'Agent status failed');
+        status = payload;
+        renderAccounts();
+        applyControls();
+        return status;
+      }
+
+      async function loadMessages() {
+        const r = await fetch(AGENT_MESSAGES_URL, { headers: { Accept: 'application/json' } });
+        const payload = await r.json();
+        if (!r.ok) throw new Error(payload.error || 'Agent messages failed');
+        messages = Array.isArray(payload.messages) ? payload.messages : [];
+        renderMessages();
+      }
+
+      async function connectCloudflare() {
+        connectBtn.disabled = true;
+        try {
+          const r = await fetch(AGENT_OAUTH_START_URL, { method: 'POST', headers: { Accept: 'application/json' } });
+          const payload = await r.json();
+          if (!r.ok || !payload.authUrl) {
+            throw new Error(payload.error || 'OAuth start failed');
+          }
+          const popup = window.open(payload.authUrl, 'nimbus-agent-oauth', 'width=720,height=760');
+          if (!popup) location.href = payload.authUrl;
+          setAgentStatus('Waiting for Cloudflare...', 'warn');
+          if (oauthPoll) clearInterval(oauthPoll);
+          oauthPoll = setInterval(() => {
+            if (!popup || popup.closed) {
+              clearInterval(oauthPoll);
+              oauthPoll = null;
+              refreshStatus().catch((e) => setAgentStatus(e?.message || String(e), 'warn'));
+            }
+          }, 1200);
+        } catch (e) {
+          setAgentStatus(e?.message || String(e), 'warn');
+        } finally {
+          connectBtn.disabled = false;
+        }
+      }
+
+      async function selectAccount() {
+        const accountId = accountSelect.value;
+        if (!accountId) return;
+        await fetch(AGENT_ACCOUNT_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: JSON.stringify({ accountId }),
+        }).then(async (r) => {
+          const payload = await r.json().catch(() => ({}));
+          if (!r.ok) throw new Error(payload.error || 'Account switch failed');
+        });
+        await refreshStatus();
+      }
+
+      async function disconnectCloudflare() {
+        disconnectBtn.disabled = true;
+        try {
+          const r = await fetch(AGENT_OAUTH_LOGOUT_URL, { method: 'POST', headers: { Accept: 'application/json' } });
+          const payload = await r.json().catch(() => ({}));
+          if (!r.ok) throw new Error(payload.error || 'Disconnect failed');
+          status = null;
+          await refreshStatus();
+        } catch (e) {
+          setAgentStatus(e?.message || String(e), 'warn');
+        } finally {
+          disconnectBtn.disabled = false;
+        }
+      }
+
+      async function clearMessages() {
+        const r = await fetch(AGENT_MESSAGES_URL, { method: 'DELETE', headers: { Accept: 'application/json' } });
+        const payload = await r.json().catch(() => ({}));
+        if (!r.ok) {
+          setAgentStatus(payload.error || 'Clear failed', 'warn');
+          return;
+        }
+        messages = [];
+        renderMessages();
+      }
+
+      async function sendMessage(text) {
+        const content = String(text || '').trim();
+        if (busy) {
+          stopStreaming();
+          return;
+        }
+        if (!content) return;
+        busy = true;
+        currentAbort = new AbortController();
+        applyControls();
+        input.value = '';
+        const optimistic = {
+          id: 'pending-user',
+          role: 'user',
+          content,
+          createdAt: Date.now(),
+        };
+        const pending = {
+          id: 'pending-assistant',
+          role: 'assistant',
+          content: '',
+          createdAt: Date.now(),
+          streaming: true,
+          parts: [],
+        };
+        let liveList = [...messages, optimistic, pending];
+        renderMessages(liveList);
+        const repaint = () => {
+          liveList = [...messages, pending];
+          renderMessages(liveList);
+        };
+        try {
+          const r = await fetch(AGENT_MESSAGES_URL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', Accept: 'application/x-ndjson' },
+            body: JSON.stringify({ message: content, stream: true }),
+            signal: currentAbort.signal,
+          });
+          if (!r.ok || !r.body) {
+            const payload = await r.json().catch(() => ({}));
+            throw new Error(payload.error || 'Agent request failed');
+          }
+          await readAgentStream(r.body, pending, repaint);
+        } catch (e) {
+          if (e?.name !== 'AbortError') {
+            pending.streaming = false;
+            pending.error = e?.message || String(e);
+            repaint();
+          }
+        } finally {
+          busy = false;
+          currentAbort = null;
+          applyControls();
+          input.focus();
+        }
+      }
+
+      function stopStreaming() {
+        if (currentAbort) currentAbort.abort();
+      }
+
+      async function readAgentStream(body, liveAssistant, repaint) {
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          let lineEnd = buffer.indexOf('\n');
+          while (lineEnd >= 0) {
+            const line = buffer.slice(0, lineEnd).trim();
+            buffer = buffer.slice(lineEnd + 1);
+            if (line) applyStreamEvent(JSON.parse(line), liveAssistant, repaint);
+            lineEnd = buffer.indexOf('\n');
+          }
+        }
+        const tail = buffer.trim();
+        if (tail) applyStreamEvent(JSON.parse(tail), liveAssistant, repaint);
+      }
+
+      function applyStreamEvent(event, liveAssistant, repaint) {
+        if (!event || typeof event !== 'object') return;
+        if (event.type === 'start') {
+          if (Array.isArray(event.messages)) messages = event.messages;
+        } else if (event.type === 'assistant-start') {
+          liveAssistant.id = event.messageId || liveAssistant.id;
+          liveAssistant.createdAt = event.createdAt || liveAssistant.createdAt;
+        } else if (event.type === 'text-delta') {
+          const delta = String(event.delta || '');
+          liveAssistant.content += delta;
+          appendLiveTextPart(liveAssistant, 'text', delta);
+        } else if (event.type === 'reasoning-delta') {
+          appendLiveTextPart(liveAssistant, 'reasoning', String(event.delta || ''));
+        } else if (event.type === 'tool-call') {
+          upsertLiveTool(liveAssistant, {
+            toolCallId: event.toolCallId,
+            toolName: event.toolName,
+            input: event.input,
+            status: 'running',
+            startedAt: Date.now(),
+          });
+        } else if (event.type === 'tool-result' || event.type === 'tool-error') {
+          const tool = upsertLiveTool(liveAssistant, {
+            toolCallId: event.toolCallId,
+            toolName: event.toolName,
+            input: event.input,
+          });
+          tool.status = event.type === 'tool-error' ? 'error' : (event.status || 'done');
+          tool.output = event.type === 'tool-error' ? { error: event.error } : event.output;
+          tool.error = event.type === 'tool-error' ? event.error : '';
+          if (tool.startedAt) tool.durationMs = Date.now() - tool.startedAt;
+        } else if (event.type === 'done') {
+          liveAssistant.streaming = false;
+          if (Array.isArray(event.messages)) {
+            messages = event.messages;
+            renderMessages();
+            return;
+          }
+          if (event.message) {
+            messages = [...messages, event.message];
+          }
+        } else if (event.type === 'error') {
+          liveAssistant.streaming = false;
+          liveAssistant.error = event.error || 'Agent request failed';
+          if (Array.isArray(event.messages)) messages = event.messages;
+          setAgentStatus(liveAssistant.error, 'warn');
+        }
+        repaint();
+      }
+
+      function appendLiveTextPart(liveAssistant, type, delta) {
+        if (!delta) return;
+        if (!Array.isArray(liveAssistant.parts)) liveAssistant.parts = [];
+        const last = liveAssistant.parts[liveAssistant.parts.length - 1];
+        if (last && last.type === type) {
+          last.text = String(last.text || '') + delta;
+        } else {
+          liveAssistant.parts.push({ type, text: delta });
+        }
+      }
+
+      function upsertLiveTool(liveAssistant, patch) {
+        if (!Array.isArray(liveAssistant.parts)) liveAssistant.parts = [];
+        let tool = liveAssistant.parts.find((item) => item.type === 'tool' && item.toolCallId === patch.toolCallId);
+        if (!tool) {
+          tool = { type: 'tool', status: 'running' };
+          liveAssistant.parts.push(tool);
+        }
+        Object.assign(tool, patch);
+        return tool;
+      }
+
+      function wire() {
+        form.addEventListener('submit', (e) => {
+          e.preventDefault();
+          if (busy) stopStreaming();
+          else sendMessage(input.value);
+        });
+        input.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage(input.value);
+          }
+        });
+        input.addEventListener('input', applyControls);
+        connectBtn.addEventListener('click', connectCloudflare);
+        disconnectBtn.addEventListener('click', disconnectCloudflare);
+        clearBtn.addEventListener('click', clearMessages);
+        accountSelect.addEventListener('change', selectAccount);
+        window.addEventListener('message', (event) => {
+          if (event.origin !== location.origin) return;
+          if (event.data && event.data.type === 'nimbus-agent-oauth') {
+            if (oauthPoll) {
+              clearInterval(oauthPoll);
+              oauthPoll = null;
+            }
+            refreshStatus().catch(() => {});
+          }
+        });
+      }
+
+      async function ensureLoaded() {
+        if (!loaded) {
+          loaded = true;
+          wire();
+        }
+        const results = await Promise.allSettled([refreshStatus(), loadMessages()]);
+        if (results[0].status === 'rejected') {
+          setAgentStatus(results[0].reason?.message || String(results[0].reason), 'warn');
+          input.disabled = true;
+          sendBtn.disabled = true;
+        }
+        if (results[1].status === 'rejected') renderMessages([]);
+      }
+
+      const api = { ensureLoaded, refreshStatus, loadMessages };
+      window.NimbusAgent = api;
+      return api;
+    })();
+
+    // Tabbed preview surface. Markdown preview and live app previews share
+    // the right pane without fighting over a single iframe.
+    let previewBackendKind = 'none'; // 'vite' | 'worker' | 'none'
+    let activePreviewTabId = null;
+    let markdownRenderSeq = 0;
+    const previewTabs = new Map();
     let markdownRendererPromise = null;
     let markdownRenderer = null;
 
@@ -1698,32 +2573,199 @@
       return kind === 'worker' ? WORKER_URL : VITE_URL;
     }
 
+    function portPreviewUrl(port) {
+      return SESSION_PREFIX + '/port/' + Number(port) + '/';
+    }
+
+    function absolutePreviewUrl(url) {
+      return new URL(url, location.origin).href;
+    }
+
+    function shortPathLabel(path) {
+      const parts = String(path || '').split('/').filter(Boolean);
+      return parts[parts.length - 1] || 'Markdown';
+    }
+
+    function appTabFor(kind) {
+      const appKind = kind === 'worker' ? 'worker' : 'vite';
+      return {
+        id: 'app:' + appKind,
+        type: 'app',
+        kind: appKind,
+        label: appKind === 'worker' ? 'Worker' : 'Preview',
+        title: appKind === 'worker' ? 'Cloudflare Worker preview' : 'Vite preview',
+        url: previewUrlFor(appKind),
+        running: previewBackendKind === appKind,
+      };
+    }
+
+    function renderPreviewTabs() {
+      if (!previewTabsEl) return;
+      previewTabsEl.innerHTML = '';
+      for (const tab of previewTabs.values()) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = [
+          'preview-tab',
+          tab.type === 'markdown' ? 'markdown' : '',
+          tab.running ? 'running' : '',
+          tab.id === activePreviewTabId ? 'active' : '',
+        ].filter(Boolean).join(' ');
+        button.title = tab.title || tab.url || tab.path || tab.label;
+        button.onclick = () => activatePreviewTab(tab.id);
+
+        const label = document.createElement('span');
+        label.className = 'preview-tab-label';
+        label.textContent = tab.label;
+        button.appendChild(label);
+
+        previewTabsEl.appendChild(button);
+      }
+    }
+
+    function ensurePreviewTab(tab, options = {}) {
+      const existing = previewTabs.get(tab.id);
+      const merged = {
+        ...(existing || {}),
+        ...tab,
+        createdAt: existing?.createdAt || Date.now(),
+        updatedAt: Date.now(),
+      };
+      previewTabs.set(tab.id, merged);
+      if (!existing && options.focusNew) {
+        activatePreviewTab(tab.id);
+      } else {
+        renderPreviewTabs();
+      }
+      return merged;
+    }
+
+    function firstAppTabId() {
+      const port = [...previewTabs.values()].filter((tab) => tab.type === 'port').pop();
+      if (port) return port.id;
+      const preferred = previewBackendKind === 'worker' ? 'app:worker' : 'app:vite';
+      if (previewTabs.has(preferred)) return preferred;
+      if (previewTabs.has('app:vite')) return 'app:vite';
+      if (previewTabs.has('app:worker')) return 'app:worker';
+      return ensurePreviewTab(appTabFor('vite')).id;
+    }
+
+    function activatePreviewTab(id) {
+      const tab = previewTabs.get(id);
+      if (!tab) return;
+      activePreviewTabId = id;
+      renderPreviewTabs();
+      if (tab.type === 'markdown') {
+        previewPanel.classList.add('markdown-mode');
+        if (previewFrame) previewFrame.style.display = 'none';
+        if (markdownPreview) markdownPreview.classList.add('active');
+        setPreviewUrlBar('Markdown Preview · ' + tab.path);
+        paintMarkdownPreview(tab.markdown || '').catch(() => {});
+        return;
+      }
+
+      previewPanel.classList.remove('markdown-mode');
+      if (markdownPreview) markdownPreview.classList.remove('active');
+      if (previewFrame) {
+        previewFrame.style.display = 'block';
+        const next = absolutePreviewUrl(tab.url);
+        if (previewFrame.src !== next) previewFrame.src = tab.url;
+      }
+      setPreviewUrlBar(tab.url);
+    }
+
+    function normalizePortStats(portStats) {
+      const raw = Array.isArray(portStats?.ports)
+        ? portStats.ports
+        : Array.isArray(portStats)
+          ? portStats
+          : [];
+      const seen = new Set();
+      const ports = [];
+      for (const entry of raw) {
+        const port = Number(entry?.port);
+        if (!Number.isInteger(port) || port <= 0 || seen.has(port)) continue;
+        seen.add(port);
+        ports.push({ port, pid: Number(entry?.pid) || 0 });
+      }
+      return ports;
+    }
+
+    function syncPortPreviewTabs(portStats, canonicalPort, canonicalTabId) {
+      const ports = normalizePortStats(portStats);
+      const hiddenPort = Number.isInteger(canonicalPort) && canonicalPort > 0 ? canonicalPort : null;
+      const visiblePorts = hiddenPort == null
+        ? ports
+        : ports.filter((p) => p.port !== hiddenPort);
+      const live = new Set(visiblePorts.map((p) => 'port:' + p.port));
+      let activeWasRemoved = false;
+      let activeWasCanonicalAlias = false;
+
+      for (const [id, tab] of previewTabs) {
+        if (tab.type === 'port' && !live.has(id)) {
+          previewTabs.delete(id);
+          if (activePreviewTabId === id) {
+            activeWasRemoved = true;
+            activeWasCanonicalAlias = hiddenPort != null && tab.port === hiddenPort;
+          }
+        }
+      }
+
+      for (const entry of visiblePorts) {
+        const id = 'port:' + entry.port;
+        const existed = previewTabs.has(id);
+        ensurePreviewTab({
+          id,
+          type: 'port',
+          port: entry.port,
+          pid: entry.pid,
+          label: ':' + entry.port,
+          title: 'Port ' + entry.port,
+          url: portPreviewUrl(entry.port),
+          running: true,
+        }, { focusNew: !existed });
+      }
+
+      if (activeWasRemoved || !activePreviewTabId || !previewTabs.has(activePreviewTabId)) {
+        activatePreviewTab(activeWasCanonicalAlias && canonicalTabId ? canonicalTabId : firstAppTabId());
+      } else {
+        renderPreviewTabs();
+      }
+    }
+
     function setPreviewUrlBar(value) {
       const urlBar = document.getElementById('urlBar');
       if (urlBar) urlBar.value = value;
     }
 
     function showAppPreview() {
-      previewSurface = 'app';
-      if (markdownPreview) markdownPreview.classList.remove('active');
-      if (previewFrame) previewFrame.style.display = 'block';
-      previewPanel.classList.remove('markdown-mode');
-      const kind = (activePreview === null || activePreview === 'none') ? 'vite' : activePreview;
-      const url = previewUrlFor(kind);
-      if (previewFrame && (previewFrame.src === 'about:blank' || !previewFrame.src.includes(url))) {
-        previewFrame.src = url;
-      }
-      setPreviewUrlBar(url);
+      ensurePreviewTab(appTabFor(previewBackendKind));
+      activatePreviewTab(firstAppTabId());
     }
 
     async function showMarkdownPreview(path, markdown) {
-      previewSurface = 'markdown';
-      previewPanel.classList.add('markdown-mode');
-      if (previewFrame) previewFrame.style.display = 'none';
-      if (markdownPreview) markdownPreview.classList.add('active');
-      setPreviewUrlBar('Markdown Preview · ' + path);
+      const id = 'markdown:' + path;
+      ensurePreviewTab({
+        id,
+        type: 'markdown',
+        label: shortPathLabel(path),
+        title: path,
+        path,
+        markdown: markdown || '',
+        running: false,
+      });
+      activatePreviewTab(id);
+      if (activePreviewTabId !== id) return;
+      await paintMarkdownPreview(markdown || '');
+    }
+
+    async function paintMarkdownPreview(markdown) {
+      const seq = ++markdownRenderSeq;
       const html = await renderMarkdown(markdown || '');
-      if (markdownPreviewBody) markdownPreviewBody.innerHTML = html;
+      const active = activePreviewTabId ? previewTabs.get(activePreviewTabId) : null;
+      if (seq === markdownRenderSeq && active?.type === 'markdown' && markdownPreviewBody) {
+        markdownPreviewBody.innerHTML = html;
+      }
     }
 
     async function renderMarkdown(markdown) {
@@ -1763,48 +2805,47 @@
       return div.innerHTML;
     }
 
-    function applyPreviewTarget(kind) {
-      // Idempotent: only update iframe + URL bar when the backend kind
-      // actually changes. Avoids tearing down the inner app on every
-      // 5-second stats poll.
-      if (activePreview === kind && previewSurface === 'app') return;
-      activePreview = kind;
-      if (previewSurface !== 'app') return;
-      const url = previewUrlFor(kind);
-      // Always use the VITE_URL path when nothing is running — that
-      // endpoint serves the styled "no dev server" placeholder, which
-      // self-refreshes via its own polling loop.
-      previewFrame.src = url;
-      setPreviewUrlBar(url);
-      // If the user had collapsed the preview because nothing was up,
-      // surface it automatically when the first backend comes online.
-      if (kind !== 'none' && layout === 'terminal-only') setLayout('split');
+    function previewBackendPort(kind, stats) {
+      const raw = kind === 'vite' ? stats?.vite?.port : null;
+      const n = Number(raw);
+      return Number.isInteger(n) && n > 0 ? n : null;
+    }
+
+    function applyPreviewTarget(kind, stats) {
+      const previousKind = previewBackendKind;
+      previewBackendKind = kind === 'worker' || kind === 'vite' ? kind : 'none';
+      const appKind = previewBackendKind === 'worker' ? 'worker' : 'vite';
+      const appTab = ensurePreviewTab(appTabFor(appKind));
+      const shouldFocusApp = previousKind !== previewBackendKind && previewBackendKind !== 'none';
+      if (shouldFocusApp) activatePreviewTab(appTab.id);
+      if (!activePreviewTabId) activatePreviewTab(appTab.id);
+      syncPortPreviewTabs(stats?.ports, previewBackendPort(previewBackendKind, stats), appTab.id);
     }
 
     function reloadPreview() {
-      if (previewSurface === 'markdown') {
+      const active = activePreviewTabId ? previewTabs.get(activePreviewTabId) : null;
+      if (active?.type === 'markdown') {
         Editor.refreshMarkdownPreview().catch(() => {});
         return;
       }
       // Refreshing without a running backend should re-poll the
       // placeholder so users see dev-server status update promptly.
-      if (previewFrame.src === 'about:blank' ||
-          (!previewFrame.src.includes('/preview') && !previewFrame.src.includes('/worker'))) {
-        previewFrame.src = previewUrlFor(
-          (activePreview === 'none' || activePreview === null) ? 'vite' : activePreview
-        );
+      if (!active || previewFrame.src === 'about:blank') {
+        activatePreviewTab(firstAppTabId());
       } else {
         try { previewFrame.contentWindow?.location.reload(); }
         catch { previewFrame.src = previewFrame.src; }
       }
     }
 
+    applyPreviewTarget('none', null);
+
     // ── Pane resize manager ──
     //
-    // Owns the 3 resize handles in editor mode + 1 in split mode:
-    //   H1 tree ↔ editor-stack (col, in editor mode)         — TreeResizeHandle in FileTree IIFE
-    //   H2 editor-stack ↔ preview (col, in editor + split)    — #resizeHandle (mode-aware)
-    //   V1 editor ↔ terminal (row, in editor mode)            — #editorTerminalResizeHandle
+    // Owns the three workspace resize handles:
+    //   H1 tree ↔ center stack (col)       — TreeResizeHandle in FileTree IIFE
+    //   H2 center stack ↔ preview (col)    — #resizeHandle
+    //   V1 top surface ↔ terminal (row)    — #editorTerminalResizeHandle
     //
     // Each handle persists its dimension to localStorage so a reload
     // restores the user's layout. Keyed per-session.
@@ -1853,41 +2894,25 @@
         applyMonacoLayout();
       }
 
-      // Map middlePct → flex basis on the two children that actually
-      // compete for horizontal space in each mode:
-      //   - split mode:    .panel-terminal vs .panel-preview
-      //   - editor mode:   .panel-left-stack vs .panel-preview
-      // In editor mode .panel-left-stack is flex:1 (CSS rule); we
-      // override with explicit basis. Same for .panel-terminal in split.
+      // Map middlePct to the center workspace and preview columns.
       function applyMiddlePreviewFlex() {
         const stack = document.getElementById('leftStack');
         const term = mainPanel.querySelector('.panel-terminal');
         const prev = mainPanel.querySelector('.panel-preview');
         const middlePct = Math.max(20, Math.min(80, dims.middlePct));
-        if (layout === 'editor') {
-          // stack drives middle width; terminal is INSIDE stack.
-          if (stack) stack.style.flex = middlePct + ' 0 0%';
-          if (prev) prev.style.flex = (100 - middlePct) + ' 0 0%';
-          if (term) term.style.flex = '';  // unset; vertical handler owns it
-        } else if (layout === 'split') {
-          if (term) term.style.flex = middlePct + ' 0 0%';
-          if (prev) prev.style.flex = (100 - middlePct) + ' 0 0%';
-          if (stack) stack.style.flex = '';
-        } else {
-          // Other modes (terminal-only / preview-only) don't use either
-          // handle visibly; clear inline so CSS defaults take effect.
-          if (term) term.style.flex = '';
-          if (prev) prev.style.flex = '';
-          if (stack) stack.style.flex = '';
-        }
+        if (stack) stack.style.flex = middlePct + ' 0 0%';
+        if (prev) prev.style.flex = (100 - middlePct) + ' 0 0%';
+        if (term) term.style.flex = '';
       }
 
       function applyEditorTerminalFlex() {
         if (layout !== 'editor') return;
-        const editor = document.getElementById('editorPanel');
+        const topSurface = workSurface === 'agent'
+          ? document.getElementById('agentPanel')
+          : document.getElementById('editorPanel');
         const term = mainPanel.querySelector('.panel-terminal');
         const editorPct = Math.max(10, Math.min(90, dims.editorPct));
-        if (editor) editor.style.flex = editorPct + ' 0 0%';
+        if (topSurface) topSurface.style.flex = editorPct + ' 0 0%';
         if (term) term.style.flex = (100 - editorPct) + ' 0 0%';
       }
 
@@ -1975,9 +3000,7 @@
         if (tree) tree.style.width = dims.treeWidth + 'px';
       }
 
-      // Re-apply dims any time setLayout() switches modes — the inline
-      // flex values are mode-specific (split vs editor have different
-      // pane structures).
+      // Re-apply dims any time setLayout() switches surfaces.
       function onLayoutChange() {
         applyMiddlePreviewFlex();
         applyEditorTerminalFlex();
@@ -2014,7 +3037,7 @@
         let kind = 'none';
         if (s.wrangler?.running) kind = 'worker';
         else if (s.vite?.running) kind = 'vite';
-        applyPreviewTarget(kind);
+        applyPreviewTarget(kind, s);
 
         if (s.wrangler?.running) {
           viteStatus.textContent = 'worker running (' + (s.wrangler.name || '?') + ')';
@@ -2503,7 +3526,10 @@
     // Restore persisted pane dims before activating layout so the first paint
     // shows the user's prior arrangement.
     PaneResizer.restoreDims();
-    setLayout('editor');
+    const initialMode = new URLSearchParams(location.search).get('agent') === '1'
+      ? 'agent'
+      : 'editor';
+    setLayout(initialMode);
     connect();
   </script>
 </body>