npm - @cluesmith/codev - Versions diffs - 1.1.0 → 1.2.0 - Mend

@cluesmith/codev 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/dist/agent-farm/cli.d.ts.map +1 -1
package/dist/agent-farm/cli.js +19 -0
package/dist/agent-farm/cli.js.map +1 -1
package/dist/agent-farm/commands/cleanup.d.ts.map +1 -1
package/dist/agent-farm/commands/cleanup.js +18 -1
package/dist/agent-farm/commands/cleanup.js.map +1 -1
package/dist/agent-farm/commands/consult.d.ts +16 -0
package/dist/agent-farm/commands/consult.d.ts.map +1 -0
package/dist/agent-farm/commands/consult.js +51 -0
package/dist/agent-farm/commands/consult.js.map +1 -0
package/dist/agent-farm/commands/open.js +6 -6
package/dist/agent-farm/commands/open.js.map +1 -1
package/dist/agent-farm/commands/spawn.d.ts.map +1 -1
package/dist/agent-farm/commands/spawn.js +51 -42
package/dist/agent-farm/commands/spawn.js.map +1 -1
package/dist/agent-farm/commands/start.d.ts.map +1 -1
package/dist/agent-farm/commands/start.js +9 -14
package/dist/agent-farm/commands/start.js.map +1 -1
package/dist/agent-farm/commands/util.js +2 -2
package/dist/agent-farm/commands/util.js.map +1 -1
package/dist/agent-farm/db/errors.d.ts +4 -0
package/dist/agent-farm/db/errors.d.ts.map +1 -1
package/dist/agent-farm/db/errors.js +8 -0
package/dist/agent-farm/db/errors.js.map +1 -1
package/dist/agent-farm/servers/dashboard-server.js +125 -71
package/dist/agent-farm/servers/dashboard-server.js.map +1 -1
package/dist/agent-farm/servers/open-server.d.ts +9 -0
package/dist/agent-farm/servers/open-server.d.ts.map +1 -0
package/dist/agent-farm/servers/{annotate-server.js → open-server.js} +17 -15
package/dist/agent-farm/servers/open-server.js.map +1 -0
package/dist/agent-farm/servers/tower-server.js +4 -7
package/dist/agent-farm/servers/tower-server.js.map +1 -1
package/dist/agent-farm/state.d.ts +5 -0
package/dist/agent-farm/state.d.ts.map +1 -1
package/dist/agent-farm/state.js +17 -0
package/dist/agent-farm/state.js.map +1 -1
package/dist/agent-farm/types.d.ts +1 -1
package/dist/agent-farm/types.d.ts.map +1 -1
package/dist/agent-farm/utils/config.d.ts.map +1 -1
package/dist/agent-farm/utils/config.js +13 -7
package/dist/agent-farm/utils/config.js.map +1 -1
package/dist/agent-farm/utils/port-registry.d.ts +1 -1
package/dist/agent-farm/utils/port-registry.d.ts.map +1 -1
package/dist/agent-farm/utils/port-registry.js +1 -1
package/dist/agent-farm/utils/port-registry.js.map +1 -1
package/dist/agent-farm/utils/shell.d.ts +19 -0
package/dist/agent-farm/utils/shell.d.ts.map +1 -1
package/dist/agent-farm/utils/shell.js +28 -0
package/dist/agent-farm/utils/shell.js.map +1 -1
package/dist/cli.d.ts.map +1 -1
package/dist/cli.js +33 -0
package/dist/cli.js.map +1 -1
package/dist/commands/adopt.d.ts +3 -0
package/dist/commands/adopt.d.ts.map +1 -1
package/dist/commands/adopt.js +31 -25
package/dist/commands/adopt.js.map +1 -1
package/dist/commands/consult/index.d.ts +3 -2
package/dist/commands/consult/index.d.ts.map +1 -1
package/dist/commands/consult/index.js +128 -54
package/dist/commands/consult/index.js.map +1 -1
package/dist/commands/doctor.d.ts.map +1 -1
package/dist/commands/doctor.js +88 -36
package/dist/commands/doctor.js.map +1 -1
package/dist/commands/eject.d.ts +18 -0
package/dist/commands/eject.d.ts.map +1 -0
package/dist/commands/eject.js +149 -0
package/dist/commands/eject.js.map +1 -0
package/dist/commands/import.d.ts +16 -0
package/dist/commands/import.d.ts.map +1 -0
package/dist/commands/import.js +278 -0
package/dist/commands/import.js.map +1 -0
package/dist/commands/init.d.ts +3 -0
package/dist/commands/init.d.ts.map +1 -1
package/dist/commands/init.js +32 -27
package/dist/commands/init.js.map +1 -1
package/dist/lib/projectlist-parser.d.ts +70 -0
package/dist/lib/projectlist-parser.d.ts.map +1 -0
package/dist/lib/projectlist-parser.js +200 -0
package/dist/lib/projectlist-parser.js.map +1 -0
package/dist/lib/skeleton.d.ts +41 -0
package/dist/lib/skeleton.d.ts.map +1 -0
package/dist/lib/skeleton.js +110 -0
package/dist/lib/skeleton.js.map +1 -0
package/dist/lib/templates.d.ts +2 -1
package/dist/lib/templates.d.ts.map +1 -1
package/dist/lib/templates.js +11 -10
package/dist/lib/templates.js.map +1 -1
package/package.json +5 -4
package/{templates → skeleton}/DEPENDENCIES.md +3 -48
package/skeleton/bin/agent-farm +7 -0
package/skeleton/docs/commands/agent-farm.md +469 -0
package/skeleton/docs/commands/codev.md +253 -0
package/skeleton/docs/commands/consult.md +286 -0
package/skeleton/docs/commands/overview.md +108 -0
package/skeleton/maintain/.gitkeep +2 -0
package/{templates → skeleton}/protocols/experiment/protocol.md +2 -2
package/skeleton/protocols/maintain/protocol.md +502 -0
package/skeleton/protocols/maintain/templates/maintenance-run.md +64 -0
package/{templates → skeleton}/protocols/spider/protocol.md +9 -9
package/{templates/protocols/spider-solo → skeleton/protocols/spider}/templates/plan.md +22 -1
package/{templates/protocols/spider-solo → skeleton/protocols/spider}/templates/spec.md +30 -1
package/skeleton/protocols/tick/protocol.md +277 -0
package/skeleton/resources/lessons-learned.md +30 -0
package/skeleton/resources/workflow-reference.md +242 -0
package/skeleton/roles/architect.md +283 -0
package/{templates → skeleton}/roles/builder.md +2 -0
package/skeleton/roles/review-types/impl-review.md +56 -0
package/skeleton/roles/review-types/integration-review.md +68 -0
package/skeleton/roles/review-types/plan-review.md +59 -0
package/skeleton/roles/review-types/pr-ready.md +72 -0
package/skeleton/roles/review-types/spec-review.md +55 -0
package/skeleton/templates/lessons-learned.md +28 -0
package/{templates → skeleton}/templates/projectlist.md +17 -16
package/dist/agent-farm/servers/annotate-server.d.ts +0 -9
package/dist/agent-farm/servers/annotate-server.d.ts.map +0 -1
package/dist/agent-farm/servers/annotate-server.js.map +0 -1
package/templates/agents/architecture-documenter.md +0 -189
package/templates/agents/codev-updater.md +0 -276
package/templates/agents/spider-protocol-updater.md +0 -118
package/templates/annotate.html +0 -903
package/templates/bin/agent-farm +0 -18
package/templates/bin/annotate-server.js +0 -140
package/templates/dashboard-split.html +0 -1679
package/templates/dashboard.html +0 -149
package/templates/protocols/maintain/protocol.md +0 -235
package/templates/protocols/spider/templates/plan.md +0 -169
package/templates/protocols/spider/templates/review.md +0 -207
package/templates/protocols/spider/templates/spec.md +0 -140
package/templates/protocols/spider-solo/protocol.md +0 -619
package/templates/protocols/tick/protocol.md +0 -250
package/templates/roles/architect.md +0 -230
package/templates/tower.html +0 -1032
/package/{templates/AGENTS.md → skeleton/AGENTS.md.template} +0 -0
/package/{templates/CLAUDE.md → skeleton/CLAUDE.md.template} +0 -0
/package/{templates → skeleton}/bin/codev-doctor +0 -0
/package/{templates → skeleton}/builders.md +0 -0
/package/{templates → skeleton}/config.json +0 -0
/package/{templates → skeleton}/plans/.gitkeep +0 -0
/package/{templates → skeleton}/protocols/experiment/templates/notes.md +0 -0
/package/{templates/protocols/spider-solo → skeleton/protocols/spider}/templates/review.md +0 -0
/package/{templates → skeleton}/protocols/tick/templates/plan.md +0 -0
/package/{templates → skeleton}/protocols/tick/templates/review.md +0 -0
/package/{templates → skeleton}/protocols/tick/templates/spec.md +0 -0
/package/{templates → skeleton}/reviews/.gitkeep +0 -0
/package/{templates → skeleton}/roles/consultant.md +0 -0
/package/{templates → skeleton}/specs/.gitkeep +0 -0

package/templates/dashboard-split.html DELETED Viewed

@@ -1,1679 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AF: {{PROJECT_NAME}}</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    :root {
-      --bg-primary: #1a1a1a;
-      --bg-secondary: #252525;
-      --bg-tertiary: #2a2a2a;
-      --border: #333;
-      --text-primary: #fff;
-      --text-secondary: #ccc;
-      --text-muted: #666;
-      --accent: #3b82f6;
-      --tab-active: #333;
-      --tab-hover: #2a2a2a;
-      /* Status indicator colors per spec 0019 */
-      --status-active: #22c55e;    /* Green: spawning, implementing */
-      --status-waiting: #eab308;   /* Yellow: pr-ready (waiting for review) */
-      --status-error: #ef4444;     /* Red: blocked */
-      --status-complete: #9e9e9e;  /* Gray: complete */
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    /* Header */
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px 16px;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-    }
-    .header h1 {
-      font-size: 16px;
-      font-weight: 600;
-    }
-    .header-actions {
-      display: flex;
-      gap: 8px;
-    }
-    .btn {
-      padding: 6px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--bg-tertiary);
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .btn:hover {
-      background: var(--tab-active);
-    }
-    .btn-danger {
-      border-color: #ef4444;
-      color: #ef4444;
-    }
-    .btn-danger:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-    /* Main content area */
-    .main {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-    }
-    /* Left pane - Architect */
-    .left-pane {
-      width: 50%;
-      min-width: 20%;
-      max-width: 80%;
-      resize: horizontal;
-      overflow: auto;
-      border-right: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-    }
-    .pane-header {
-      padding: 8px 12px;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .pane-header .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--status-active);
-    }
-    .pane-header .status-dot.inactive {
-      background: var(--text-muted);
-    }
-    #architect-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-    .left-pane iframe {
-      flex: 1;
-      width: 100%;
-      border: none;
-      background: #000;
-    }
-    .architect-placeholder {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-muted);
-      gap: 16px;
-    }
-    .architect-placeholder code {
-      background: var(--bg-tertiary);
-      padding: 4px 8px;
-      border-radius: 4px;
-      font-size: 13px;
-    }
-    /* Right pane - Tabs */
-    .right-pane {
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Tab bar */
-    .tab-bar {
-      display: flex;
-      align-items: center;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      min-height: 40px;
-      overflow: visible;  /* Allow overflow menu dropdown to be visible */
-      position: relative;  /* Position context for overflow menu */
-    }
-    .tabs-scroll {
-      display: flex;
-      overflow-x: auto;
-      flex: 1;
-      scrollbar-width: none;
-    }
-    .tabs-scroll::-webkit-scrollbar {
-      display: none;
-    }
-    .tab {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 8px 12px;
-      cursor: pointer;
-      border-right: 1px solid var(--border);
-      border-bottom: 2px solid transparent;  /* Reserve space for active indicator */
-      white-space: nowrap;
-      flex-shrink: 0;
-      position: relative;
-    }
-    .tab:hover {
-      background: var(--tab-hover);
-    }
-    .tab.active {
-      background: var(--bg-tertiary);
-      border-bottom: 2px solid var(--accent);  /* Blue accent line */
-    }
-    .tab.new-tab {
-      animation: tab-pulse 0.5s ease-out;
-    }
-    @keyframes tab-pulse {
-      0% { background: var(--accent); }
-      100% { background: var(--tab-active); }
-    }
-    .tab .icon {
-      font-size: 14px;
-    }
-    .tab .name {
-      font-size: 13px;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--text-secondary);
-    }
-    .tab.active .name {
-      color: var(--text-primary);
-    }
-    .tab .status-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-    }
-    /* Shape modifiers for accessibility (not just color) */
-    .tab .status-dot--diamond {
-      border-radius: 1px;
-      transform: rotate(45deg);
-    }
-    /* Ring shape for pr-ready (accessibility: distinct from circle) */
-    .tab .status-dot--ring {
-      box-shadow: inset 0 0 0 1.5px currentColor;
-      background: transparent !important;
-      color: var(--status-waiting);
-    }
-    /* Distinct animations per status category (spec 0019) */
-    @keyframes status-pulse {
-      /* Pulsing: Active/working (spawning, implementing) */
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50% { opacity: 0.7; transform: scale(0.9); }
-    }
-    @keyframes status-blink-slow {
-      /* Slow blink: Idle/waiting (pr-ready) */
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.3; }
-    }
-    @keyframes status-blink-fast {
-      /* Fast blink: Error/blocked */
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.2; }
-    }
-    .tab .status-dot--pulse {
-      animation: status-pulse 2s ease-in-out infinite;
-    }
-    .tab .status-dot--blink-slow {
-      animation: status-blink-slow 3s ease-in-out infinite;
-    }
-    .tab .status-dot--blink-fast {
-      animation: status-blink-fast 0.8s ease-in-out infinite;
-    }
-    /* Respect reduced motion preference (WCAG 2.3.3) */
-    /* Motion-independent differentiators remain: diamond for blocked, ring for pr-ready */
-    @media (prefers-reduced-motion: reduce) {
-      .tab .status-dot--pulse,
-      .tab .status-dot--blink-slow,
-      .tab .status-dot--blink-fast {
-        animation: none;
-      }
-    }
-    .tab .close {
-      opacity: 0.6;  /* Always clearly visible */
-      margin-left: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--text-secondary);
-      padding: 4px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      line-height: 1;
-      min-width: 24px;
-      min-height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .tab:hover .close {
-      opacity: 0.9;
-    }
-    .tab .close:hover {
-      opacity: 1;
-      background: rgba(239, 68, 68, 0.2);  /* Red tint on hover */
-      color: #ef4444;
-    }
-    /* Add buttons */
-    .add-buttons {
-      display: flex;
-      gap: 4px;
-      padding: 0 8px;
-      flex-shrink: 0;
-    }
-    .add-btn {
-      padding: 4px 8px;
-      border-radius: 4px;
-      border: 1px dashed var(--border);
-      background: transparent;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .add-btn:hover {
-      border-style: solid;
-      color: var(--text-secondary);
-      background: var(--bg-tertiary);
-    }
-    /* Overflow indicator */
-    .overflow-btn {
-      padding: 8px 12px;
-      background: var(--bg-tertiary);
-      border: none;
-      border-left: 1px solid var(--border);
-      color: var(--text-secondary);
-      cursor: pointer;
-      display: none;  /* Hidden by default, shown via JS */
-      align-items: center;
-      gap: 4px;
-      flex-shrink: 0;
-    }
-    .overflow-btn:hover {
-      background: var(--tab-hover);
-    }
-    .overflow-btn:focus {
-      outline: 2px solid var(--accent);
-      outline-offset: -2px;
-    }
-    .overflow-count {
-      font-size: 11px;
-      background: var(--accent);
-      color: white;
-      padding: 1px 5px;
-      border-radius: 8px;
-    }
-    /* Overflow menu dropdown */
-    .overflow-menu {
-      position: absolute;
-      right: 0;
-      top: 100%;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-      max-height: 300px;
-      overflow-y: auto;
-      min-width: 200px;
-      z-index: 100;
-    }
-    .overflow-menu.hidden {
-      display: none;
-    }
-    .overflow-menu-item {
-      padding: 8px 12px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-    }
-    .overflow-menu-item:hover,
-    .overflow-menu-item:focus {
-      background: var(--tab-hover);
-      outline: none;
-    }
-    .overflow-menu-item.active {
-      background: var(--tab-active);
-      border-left: 2px solid var(--accent);
-    }
-    .overflow-menu-item .icon {
-      font-size: 14px;
-    }
-    .overflow-menu-item .name {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .overflow-menu-item .open-external {
-      opacity: 0.5;
-      cursor: pointer;
-      padding: 2px 6px;
-      font-size: 12px;
-      border-radius: 3px;
-    }
-    .overflow-menu-item .open-external:hover {
-      opacity: 1;
-      background: rgba(255, 255, 255, 0.1);
-    }
-    /* Tab content */
-    .tab-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    .tab-content iframe {
-      flex: 1;
-      width: 100%;
-      border: none;
-      background: #000;
-    }
-    .empty-state {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-muted);
-      gap: 12px;
-    }
-    .empty-state .hint {
-      font-size: 13px;
-      text-align: center;
-      max-width: 300px;
-    }
-    /* Status bar */
-    .status-bar {
-      padding: 8px 16px;
-      background: var(--bg-secondary);
-      border-top: 1px solid var(--border);
-      font-size: 12px;
-      color: var(--text-muted);
-      display: flex;
-      gap: 16px;
-    }
-    .status-item {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .status-item .dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-    }
-    /* Dialogs */
-    .dialog-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-    }
-    .dialog-overlay.hidden {
-      display: none;
-    }
-    .dialog {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 20px;
-      min-width: 320px;
-      max-width: 90%;
-    }
-    .dialog h3 {
-      margin-bottom: 16px;
-      font-size: 16px;
-      font-weight: 500;
-    }
-    .dialog input {
-      width: 100%;
-      padding: 8px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--bg-tertiary);
-      color: var(--text-primary);
-      font-size: 14px;
-      margin-bottom: 16px;
-    }
-    .dialog input:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    .dialog-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-    }
-    .quick-paths {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 12px;
-    }
-    .quick-path {
-      padding: 4px 8px;
-      border-radius: 4px;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .quick-path:hover {
-      background: var(--tab-hover);
-      border-color: var(--accent);
-    }
-    /* Toast notifications */
-    .toast-container {
-      position: fixed;
-      bottom: 60px;
-      right: 16px;
-      z-index: 2000;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .toast {
-      padding: 12px 16px;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      font-size: 13px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      animation: toast-in 0.3s ease-out;
-    }
-    .toast.error {
-      border-color: #ef4444;
-    }
-    .toast.success {
-      border-color: #22c55e;
-    }
-    @keyframes toast-in {
-      from {
-        opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    /* Context menu */
-    .context-menu {
-      position: fixed;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 4px 0;
-      min-width: 150px;
-      z-index: 1000;
-    }
-    .context-menu.hidden {
-      display: none;
-    }
-    .context-menu-item {
-      padding: 8px 12px;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .context-menu-item:hover {
-      background: var(--tab-hover);
-    }
-    .context-menu-item.danger {
-      color: #ef4444;
-    }
-  </style>
-</head>
-<body>
-  <header class="header">
-    <h1>Agent Farm - {{PROJECT_NAME}}</h1>
-  </header>
-  <main class="main">
-    <!-- Left pane: Architect terminal -->
-    <div class="left-pane">
-      <div class="pane-header">
-        <span class="status-dot" id="architect-status"></span>
-        <span>Architect</span>
-      </div>
-      <div id="architect-content"></div>
-    </div>
-    <!-- Right pane: Tabbed interface -->
-    <div class="right-pane">
-      <div class="tab-bar">
-        <div class="tabs-scroll" id="tabs-container"></div>
-        <button class="overflow-btn" id="overflow-btn" onclick="toggleOverflowMenu()" aria-haspopup="true" aria-expanded="false" title="Show all tabs">
-          <span>...</span>
-          <span class="overflow-count" id="overflow-count">+0</span>
-        </button>
-        <div class="overflow-menu hidden" id="overflow-menu" role="menu"></div>
-        <div class="add-buttons">
-          <button class="add-btn" onclick="showFileDialog()" title="Open file">+ 📄</button>
-          <button class="add-btn" onclick="spawnBuilder()" title="Spawn worktree builder">+ 🔨</button>
-          <button class="add-btn" onclick="spawnShell()" title="New shell">+ >_</button>
-        </div>
-      </div>
-      <div class="tab-content" id="tab-content"></div>
-    </div>
-  </main>
-  <footer class="status-bar">
-    <div class="status-item" id="status-architect">
-      <span class="dot" style="background: var(--text-muted)"></span>
-      <span>Architect: stopped</span>
-    </div>
-    <div class="status-item" id="status-builders">
-      <span>0 builders</span>
-    </div>
-    <div class="status-item" id="status-shells">
-      <span>0 shells</span>
-    </div>
-    <div class="status-item" id="status-files">
-      <span>0 files</span>
-    </div>
-  </footer>
-  <!-- File picker dialog -->
-  <div class="dialog-overlay hidden" id="file-dialog">
-    <div class="dialog">
-      <h3>Open File</h3>
-      <div class="quick-paths">
-        <button class="quick-path" onclick="setFilePath('codev/specs/')">codev/specs/</button>
-        <button class="quick-path" onclick="setFilePath('codev/plans/')">codev/plans/</button>
-        <button class="quick-path" onclick="setFilePath('codev/reviews/')">codev/reviews/</button>
-      </div>
-      <input type="text" id="file-path-input" placeholder="Enter file path..." />
-      <div class="dialog-actions">
-        <button class="btn" onclick="hideFileDialog()">Cancel</button>
-        <button class="btn" onclick="openFile()">Open</button>
-      </div>
-    </div>
-  </div>
-  <!-- Close confirmation dialog -->
-  <div class="dialog-overlay hidden" id="close-dialog">
-    <div class="dialog">
-      <h3 id="close-dialog-title">Close tab?</h3>
-      <p id="close-dialog-message" style="color: var(--text-secondary); margin-bottom: 16px; font-size: 14px;"></p>
-      <div class="dialog-actions">
-        <button class="btn" onclick="hideCloseDialog()">Cancel</button>
-        <button class="btn btn-danger" onclick="confirmClose()">Close</button>
-      </div>
-    </div>
-  </div>
-  <!-- Context menu -->
-  <div class="context-menu hidden" id="context-menu" role="menu">
-    <div class="context-menu-item" role="menuitem" tabindex="0" data-action="openContextTab" onclick="openContextTab()" onkeydown="handleContextMenuKeydown(event)">Open in New Tab</div>
-    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeActiveTab" onclick="closeActiveTab()" onkeydown="handleContextMenuKeydown(event)">Close</div>
-    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeOtherTabs" onclick="closeOtherTabs()" onkeydown="handleContextMenuKeydown(event)">Close Others</div>
-    <div class="context-menu-item danger" role="menuitem" tabindex="-1" data-action="closeAllTabs" onclick="closeAllTabs()" onkeydown="handleContextMenuKeydown(event)">Close All</div>
-  </div>
-  <!-- Toast container -->
-  <div class="toast-container" id="toast-container"></div>
-  <script>
-    // STATE_INJECTION_POINT
-    // State management
-    const state = window.INITIAL_STATE || {
-      architect: null,
-      builders: [],
-      utils: [],
-      annotations: []
-    };
-    // Tab state
-    let tabs = [];
-    let activeTabId = null;
-    let pendingCloseTabId = null;
-    let contextMenuTabId = null;
-    // Initialize
-    function init() {
-      buildTabsFromState();
-      renderArchitect();
-      renderTabs();
-      renderTabContent();
-      updateStatusBar();
-      startPolling();
-      setupBroadcastChannel();
-      setupOverflowDetection();
-    }
-    // Set up overflow detection for the tab bar
-    function setupOverflowDetection() {
-      const container = document.getElementById('tabs-container');
-      // Check on load
-      checkTabOverflow();
-      // Check on window resize (debounced)
-      let resizeTimeout;
-      window.addEventListener('resize', () => {
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(checkTabOverflow, 100);
-      });
-      // Check on scroll (debounced) - updates +N count when user scrolls tabs
-      if (container) {
-        let scrollTimeout;
-        container.addEventListener('scroll', () => {
-          clearTimeout(scrollTimeout);
-          scrollTimeout = setTimeout(checkTabOverflow, 50);
-        });
-      }
-      // Also use ResizeObserver for the tabs container if available
-      if (typeof ResizeObserver !== 'undefined') {
-        if (container) {
-          const observer = new ResizeObserver(() => {
-            checkTabOverflow();
-          });
-          observer.observe(container);
-        }
-      }
-    }
-    // Set up BroadcastChannel for cross-tab communication
-    // This allows terminal file clicks to open files in the dashboard
-    function setupBroadcastChannel() {
-      const channel = new BroadcastChannel('agent-farm');
-      channel.onmessage = async (event) => {
-        const { type, path, line } = event.data;
-        if (type === 'openFile' && path) {
-          await openFileFromMessage(path, line);
-        }
-      };
-    }
-    // Open a file from a BroadcastChannel message
-    async function openFileFromMessage(filePath, lineNumber) {
-      try {
-        // Check if file is already open
-        const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
-        if (existingTab) {
-          // Just switch to the existing tab
-          selectTab(existingTab.id);
-          showToast(`Switched to ${getFileName(filePath)}`, 'success');
-          // TODO: scroll to line if lineNumber provided
-          return;
-        }
-        // Open the file via API
-        const response = await fetch('/api/tabs/file', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path: filePath })
-        });
-        if (!response.ok) {
-          throw new Error(await response.text());
-        }
-        const result = await response.json();
-        // Refresh state and switch to the new tab
-        await refresh();
-        // Find and select the new file tab
-        const newTab = tabs.find(t => t.type === 'file' && (t.path === filePath || t.annotationId === result.id));
-        if (newTab) {
-          selectTab(newTab.id);
-        }
-        showToast(`Opened ${getFileName(filePath)}${lineNumber ? ':' + lineNumber : ''}`, 'success');
-      } catch (err) {
-        showToast('Failed to open file: ' + err.message, 'error');
-      }
-    }
-    // Track known tab IDs to detect new tabs
-    let knownTabIds = new Set();
-    // Build tabs from initial state
-    function buildTabsFromState() {
-      const previousTabIds = new Set(tabs.map(t => t.id));
-      tabs = [];
-      // Add file tabs from annotations
-      for (const annotation of state.annotations || []) {
-        tabs.push({
-          id: `file-${annotation.id}`,
-          type: 'file',
-          name: getFileName(annotation.file),
-          path: annotation.file,
-          port: annotation.port,
-          annotationId: annotation.id
-        });
-      }
-      // Add builder tabs
-      for (const builder of state.builders || []) {
-        tabs.push({
-          id: `builder-${builder.id}`,
-          type: 'builder',
-          name: builder.name || `Builder ${builder.id}`,
-          projectId: builder.id,
-          port: builder.port,
-          status: builder.status
-        });
-      }
-      // Add shell tabs
-      for (const util of state.utils || []) {
-        tabs.push({
-          id: `shell-${util.id}`,
-          type: 'shell',
-          name: util.name,
-          port: util.port,
-          utilId: util.id
-        });
-      }
-      // Detect new tabs and auto-switch to them
-      for (const tab of tabs) {
-        if (!knownTabIds.has(tab.id) && previousTabIds.size > 0) {
-          // This is a new tab - switch to it
-          activeTabId = tab.id;
-          break;
-        }
-      }
-      // Update known tab IDs
-      knownTabIds = new Set(tabs.map(t => t.id));
-      // Set active tab to first one if none selected
-      if (tabs.length > 0 && !activeTabId) {
-        activeTabId = tabs[0].id;
-      }
-    }
-    // Get filename from path
-    function getFileName(path) {
-      const parts = path.split('/');
-      return parts[parts.length - 1];
-    }
-    // Track current architect port to avoid re-rendering iframe unnecessarily
-    let currentArchitectPort = null;
-    // Render architect pane
-    function renderArchitect() {
-      const content = document.getElementById('architect-content');
-      const statusDot = document.getElementById('architect-status');
-      if (state.architect && state.architect.port) {
-        statusDot.classList.remove('inactive');
-        // Only update iframe if port changed (avoid flashing on poll)
-        if (currentArchitectPort !== state.architect.port) {
-          currentArchitectPort = state.architect.port;
-          content.innerHTML = `<iframe src="http://localhost:${state.architect.port}" title="Architect Terminal" allow="clipboard-read; clipboard-write"></iframe>`;
-        }
-      } else {
-        if (currentArchitectPort !== null) {
-          currentArchitectPort = null;
-          content.innerHTML = `
-            <div class="architect-placeholder">
-              <p>Architect not running</p>
-              <p>Run <code>agent-farm start</code> to begin</p>
-            </div>
-          `;
-        }
-        statusDot.classList.add('inactive');
-      }
-    }
-    // Render tabs
-    function renderTabs() {
-      const container = document.getElementById('tabs-container');
-      if (tabs.length === 0) {
-        container.innerHTML = '';
-        checkTabOverflow();  // Update overflow state when tabs cleared
-        return;
-      }
-      container.innerHTML = tabs.map(tab => {
-        const isActive = tab.id === activeTabId;
-        const icon = getTabIcon(tab.type);
-        const statusDot = tab.type === 'builder' ? getStatusDot(tab.status) : '';
-        const tooltip = getTabTooltip(tab);
-        return `
-          <div class="tab ${isActive ? 'active' : ''}"
-               onclick="selectTab('${tab.id}')"
-               oncontextmenu="showContextMenu(event, '${tab.id}')"
-               data-tab-id="${tab.id}"
-               title="${tooltip}">
-            <span class="icon">${icon}</span>
-            <span class="name">${tab.name}</span>
-            ${statusDot}
-            <span class="close"
-                  onclick="event.stopPropagation(); closeTab('${tab.id}', event)"
-                  role="button"
-                  tabindex="0"
-                  aria-label="Close ${tab.name}"
-                  onkeydown="if(event.key==='Enter'||event.key===' '){event.stopPropagation();closeTab('${tab.id}',event)}">&times;</span>
-          </div>
-        `;
-      }).join('');
-      // Check overflow after tabs are rendered
-      checkTabOverflow();
-    }
-    // Get tab icon
-    function getTabIcon(type) {
-      switch (type) {
-        case 'file': return '📄';
-        case 'builder': return '🔨';
-        case 'shell': return '>_';
-        default: return '?';
-      }
-    }
-    // Status configuration - hoisted for performance (per Codex review)
-    // Colors per spec 0019: green=active, yellow=waiting, red=blocked, gray=complete
-    // Animations per spec 0019: pulse=active, blink-slow=waiting, blink-fast=blocked, static=complete
-    // Shapes for accessibility: circle=default, diamond=blocked, ring=waiting
-    const STATUS_CONFIG = {
-      'spawning':     { color: 'var(--status-active)',   label: 'Spawning',     shape: 'circle',  animation: 'pulse' },
-      'implementing': { color: 'var(--status-active)',   label: 'Implementing', shape: 'circle',  animation: 'pulse' },
-      'blocked':      { color: 'var(--status-error)',    label: 'Blocked',      shape: 'diamond', animation: 'blink-fast' },
-      'pr-ready':     { color: 'var(--status-waiting)',  label: 'PR Ready',     shape: 'ring',    animation: 'blink-slow' },
-      'complete':     { color: 'var(--status-complete)', label: 'Complete',     shape: 'circle',  animation: null }
-    };
-    const DEFAULT_STATUS_CONFIG = { color: 'var(--text-muted)', label: 'Unknown', shape: 'circle', animation: null };
-    // Get status dot HTML with accessibility support
-    // Accessibility: distinct animations per status, shapes for reduced-motion users
-    // Uses role="img" instead of role="status" to avoid screen reader chatter on poll (per Codex review)
-    function getStatusDot(status) {
-      const config = STATUS_CONFIG[status] || { ...DEFAULT_STATUS_CONFIG, label: status || 'Unknown' };
-      // Build CSS classes for accessibility
-      const classes = ['status-dot'];
-      if (config.shape === 'diamond') classes.push('status-dot--diamond');
-      if (config.shape === 'ring') classes.push('status-dot--ring');
-      if (config.animation === 'pulse') classes.push('status-dot--pulse');
-      if (config.animation === 'blink-slow') classes.push('status-dot--blink-slow');
-      if (config.animation === 'blink-fast') classes.push('status-dot--blink-fast');
-      return `<span class="${classes.join(' ')}" style="background: ${config.color}" title="${config.label}" role="img" aria-label="${config.label}"></span>`;
-    }
-    // Escape HTML special characters to prevent XSS
-    function escapeHtml(text) {
-      return String(text)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-    }
-    // Generate tooltip text for tab hover
-    function getTabTooltip(tab) {
-      const lines = [tab.name];
-      if (tab.type === 'builder') {
-        if (tab.port) lines.push(`Port: ${tab.port}`);
-        lines.push(`Status: ${tab.status || 'unknown'}`);
-        // Extract project ID from tab id (e.g., "builder-0037" -> "0037")
-        const projectId = tab.id.replace('builder-', '');
-        lines.push(`Worktree: .builders/${projectId}`);
-      } else if (tab.type === 'file') {
-        lines.push(`Path: ${tab.path}`);
-        if (tab.port) lines.push(`Port: ${tab.port}`);
-      } else if (tab.type === 'shell') {
-        if (tab.port) lines.push(`Port: ${tab.port}`);
-      }
-      return escapeHtml(lines.join('\n'));
-    }
-    // Track current tab content to avoid re-rendering iframe unnecessarily
-    let currentTabPort = null;
-    // Render tab content
-    function renderTabContent() {
-      const content = document.getElementById('tab-content');
-      if (!activeTabId || tabs.length === 0) {
-        if (currentTabPort !== null) {
-          currentTabPort = null;
-          content.innerHTML = `
-            <div class="empty-state">
-              <p>No tabs open</p>
-              <p class="hint">Click the + buttons above or ask the architect to open files/builders</p>
-            </div>
-          `;
-        }
-        return;
-      }
-      const tab = tabs.find(t => t.id === activeTabId);
-      if (!tab) {
-        if (currentTabPort !== null) {
-          currentTabPort = null;
-          content.innerHTML = '<div class="empty-state"><p>Tab not found</p></div>';
-        }
-        return;
-      }
-      // Only update iframe if port changed (avoid flashing on poll)
-      if (currentTabPort !== tab.port) {
-        currentTabPort = tab.port;
-        content.innerHTML = `<iframe src="http://localhost:${tab.port}" title="${tab.name}" allow="clipboard-read; clipboard-write"></iframe>`;
-      }
-    }
-    // Update status bar
-    function updateStatusBar() {
-      // Architect status
-      const archStatus = document.getElementById('status-architect');
-      if (state.architect) {
-        archStatus.innerHTML = `
-          <span class="dot" style="background: var(--status-active)"></span>
-          <span>Architect: running</span>
-        `;
-      } else {
-        archStatus.innerHTML = `
-          <span class="dot" style="background: var(--text-muted)"></span>
-          <span>Architect: stopped</span>
-        `;
-      }
-      // Counts
-      const builderCount = (state.builders || []).length;
-      const shellCount = (state.utils || []).length;
-      const fileCount = (state.annotations || []).length;
-      document.getElementById('status-builders').innerHTML = `<span>${builderCount} builder${builderCount !== 1 ? 's' : ''}</span>`;
-      document.getElementById('status-shells').innerHTML = `<span>${shellCount} shell${shellCount !== 1 ? 's' : ''}</span>`;
-      document.getElementById('status-files').innerHTML = `<span>${fileCount} file${fileCount !== 1 ? 's' : ''}</span>`;
-    }
-    // Select tab
-    function selectTab(tabId) {
-      activeTabId = tabId;
-      renderTabs();
-      renderTabContent();
-      // Scroll the active tab into view if needed
-      scrollActiveTabIntoView();
-    }
-    // Scroll the active tab into view
-    function scrollActiveTabIntoView() {
-      const container = document.getElementById('tabs-container');
-      const activeTab = container.querySelector('.tab.active');
-      if (activeTab) {
-        activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-      }
-    }
-    // Check if tabs are overflowing and update the overflow button
-    function checkTabOverflow() {
-      const container = document.getElementById('tabs-container');
-      const overflowBtn = document.getElementById('overflow-btn');
-      const overflowCount = document.getElementById('overflow-count');
-      if (!container || !overflowBtn) return;
-      const isOverflowing = container.scrollWidth > container.clientWidth;
-      overflowBtn.style.display = isOverflowing ? 'flex' : 'none';
-      if (isOverflowing) {
-        // Count hidden tabs (those partially or fully outside visible area - both sides)
-        const tabElements = container.querySelectorAll('.tab');
-        const containerRect = container.getBoundingClientRect();
-        let hiddenCount = 0;
-        tabElements.forEach(tab => {
-          const rect = tab.getBoundingClientRect();
-          // Tab is hidden if scrolled off the right edge
-          if (rect.right > containerRect.right + 1) {
-            hiddenCount++;
-          }
-          // Tab is hidden if scrolled off the left edge
-          else if (rect.left < containerRect.left - 1) {
-            hiddenCount++;
-          }
-        });
-        overflowCount.textContent = `+${hiddenCount}`;
-      }
-    }
-    // Toggle the overflow menu
-    function toggleOverflowMenu() {
-      const menu = document.getElementById('overflow-menu');
-      const btn = document.getElementById('overflow-btn');
-      const isHidden = menu.classList.contains('hidden');
-      if (isHidden) {
-        showOverflowMenu();
-      } else {
-        hideOverflowMenu();
-      }
-    }
-    // Show the overflow menu
-    function showOverflowMenu() {
-      const menu = document.getElementById('overflow-menu');
-      const btn = document.getElementById('overflow-btn');
-      // Build menu items for all tabs
-      menu.innerHTML = tabs.map((tab, index) => {
-        const icon = getTabIcon(tab.type);
-        const isActive = tab.id === activeTabId;
-        return `
-          <div class="overflow-menu-item ${isActive ? 'active' : ''}"
-               role="menuitem"
-               tabindex="${index === 0 ? 0 : -1}"
-               data-tab-id="${tab.id}"
-               onclick="selectTabFromMenu('${tab.id}')"
-               onkeydown="handleOverflowMenuKeydown(event, '${tab.id}')">
-            <span class="icon">${icon}</span>
-            <span class="name">${tab.name}</span>
-            <span class="open-external"
-                  onclick="event.stopPropagation(); openInNewTabFromMenu('${tab.id}')"
-                  onkeydown="if(event.key==='Enter'||event.key===' '){event.stopPropagation();openInNewTabFromMenu('${tab.id}')}"
-                  title="Open in new tab"
-                  role="button"
-                  tabindex="0"
-                  aria-label="Open ${tab.name} in new tab">↗</span>
-          </div>
-        `;
-      }).join('');
-      menu.classList.remove('hidden');
-      btn.setAttribute('aria-expanded', 'true');
-      // Focus the first item
-      const firstItem = menu.querySelector('.overflow-menu-item');
-      if (firstItem) firstItem.focus();
-      // Close on click outside (after a small delay to avoid immediate close)
-      setTimeout(() => {
-        document.addEventListener('click', handleOverflowClickOutside);
-      }, 0);
-    }
-    // Hide the overflow menu
-    function hideOverflowMenu() {
-      const menu = document.getElementById('overflow-menu');
-      const btn = document.getElementById('overflow-btn');
-      menu.classList.add('hidden');
-      btn.setAttribute('aria-expanded', 'false');
-      document.removeEventListener('click', handleOverflowClickOutside);
-    }
-    // Handle click outside overflow menu
-    function handleOverflowClickOutside(event) {
-      const menu = document.getElementById('overflow-menu');
-      const btn = document.getElementById('overflow-btn');
-      if (!menu.contains(event.target) && !btn.contains(event.target)) {
-        hideOverflowMenu();
-      }
-    }
-    // Select tab from overflow menu
-    function selectTabFromMenu(tabId) {
-      hideOverflowMenu();
-      selectTab(tabId);
-    }
-    // Open tab in new window from overflow menu
-    function openInNewTabFromMenu(tabId) {
-      hideOverflowMenu();
-      openInNewTab(tabId);
-    }
-    // Handle keyboard navigation in overflow menu
-    function handleOverflowMenuKeydown(event, tabId) {
-      const menu = document.getElementById('overflow-menu');
-      const items = Array.from(menu.querySelectorAll('.overflow-menu-item'));
-      const currentIndex = items.findIndex(item => item === document.activeElement);
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-          items[nextIndex].focus();
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-          items[prevIndex].focus();
-          break;
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          selectTabFromMenu(tabId);
-          break;
-        case 'Escape':
-          event.preventDefault();
-          hideOverflowMenu();
-          document.getElementById('overflow-btn').focus();
-          break;
-        case 'Tab':
-          // Allow Tab to close menu and move focus
-          hideOverflowMenu();
-          break;
-      }
-    }
-    // Close tab
-    function closeTab(tabId, event) {
-      const tab = tabs.find(t => t.id === tabId);
-      if (!tab) return;
-      // Shift+click bypasses confirmation
-      if (event && event.shiftKey) {
-        doCloseTab(tabId);
-        return;
-      }
-      // Files don't need confirmation
-      if (tab.type === 'file') {
-        doCloseTab(tabId);
-        return;
-      }
-      // Show confirmation for builders and shells
-      pendingCloseTabId = tabId;
-      const dialog = document.getElementById('close-dialog');
-      const title = document.getElementById('close-dialog-title');
-      const message = document.getElementById('close-dialog-message');
-      if (tab.type === 'builder') {
-        title.textContent = `Stop builder ${tab.name}?`;
-        message.textContent = 'This will terminate the builder process.';
-      } else {
-        title.textContent = `Close shell ${tab.name}?`;
-        message.textContent = 'This will terminate the shell process.';
-      }
-      dialog.classList.remove('hidden');
-    }
-    // Actually close the tab
-    async function doCloseTab(tabId) {
-      const tab = tabs.find(t => t.id === tabId);
-      if (!tab) return;
-      try {
-        // Call API to close the tab
-        await fetch(`/api/tabs/${encodeURIComponent(tabId)}`, { method: 'DELETE' });
-        // Remove from local state
-        tabs = tabs.filter(t => t.id !== tabId);
-        // If closing active tab, switch to another
-        if (activeTabId === tabId) {
-          activeTabId = tabs.length > 0 ? tabs[tabs.length - 1].id : null;
-        }
-        renderTabs();
-        renderTabContent();
-        showToast('Tab closed', 'success');
-      } catch (err) {
-        showToast('Failed to close tab: ' + err.message, 'error');
-      }
-    }
-    // Confirm close from dialog
-    function confirmClose() {
-      if (pendingCloseTabId) {
-        doCloseTab(pendingCloseTabId);
-        hideCloseDialog();
-      }
-    }
-    function hideCloseDialog() {
-      document.getElementById('close-dialog').classList.add('hidden');
-      pendingCloseTabId = null;
-    }
-    // Context menu
-    function showContextMenu(event, tabId) {
-      event.preventDefault();
-      contextMenuTabId = tabId;
-      const menu = document.getElementById('context-menu');
-      menu.style.left = event.clientX + 'px';
-      menu.style.top = event.clientY + 'px';
-      menu.classList.remove('hidden');
-      // Focus first item for keyboard navigation
-      const firstItem = menu.querySelector('.context-menu-item');
-      if (firstItem) firstItem.focus();
-      // Close on click outside
-      setTimeout(() => {
-        document.addEventListener('click', hideContextMenu, { once: true });
-      }, 0);
-    }
-    function hideContextMenu() {
-      document.getElementById('context-menu').classList.add('hidden');
-      contextMenuTabId = null;
-    }
-    // Handle keyboard navigation in context menu
-    function handleContextMenuKeydown(event) {
-      const menu = document.getElementById('context-menu');
-      const items = Array.from(menu.querySelectorAll('.context-menu-item'));
-      const currentIndex = items.findIndex(item => item === document.activeElement);
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-          items[nextIndex].focus();
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-          items[prevIndex].focus();
-          break;
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          const actionName = event.target.dataset.action;
-          if (actionName && typeof window[actionName] === 'function') {
-            window[actionName]();
-          }
-          break;
-        case 'Escape':
-          event.preventDefault();
-          hideContextMenu();
-          break;
-        case 'Tab':
-          hideContextMenu();
-          break;
-      }
-    }
-    function closeActiveTab() {
-      if (contextMenuTabId) {
-        closeTab(contextMenuTabId);
-      }
-      hideContextMenu();
-    }
-    function closeOtherTabs() {
-      if (contextMenuTabId) {
-        const otherTabs = tabs.filter(t => t.id !== contextMenuTabId);
-        otherTabs.forEach(t => doCloseTab(t.id));
-      }
-      hideContextMenu();
-    }
-    function closeAllTabs() {
-      tabs.forEach(t => doCloseTab(t.id));
-      hideContextMenu();
-    }
-    // Open tab content in a new browser tab
-    function openInNewTab(tabId) {
-      const tab = tabs.find(t => t.id === tabId);
-      if (!tab) return;
-      let url;
-      if (tab.type === 'file') {
-        // File tabs use the annotation port
-        if (!tab.port) {
-          showToast('Tab not ready', 'error');
-          return;
-        }
-        url = `http://localhost:${tab.port}`;
-      } else {
-        // Builder or shell - direct port access
-        if (!tab.port) {
-          showToast('Tab not ready', 'error');
-          return;
-        }
-        url = `http://localhost:${tab.port}`;
-      }
-      window.open(url, '_blank', 'noopener,noreferrer');
-    }
-    // Open context menu tab in new tab
-    function openContextTab() {
-      if (contextMenuTabId) {
-        openInNewTab(contextMenuTabId);
-      }
-      hideContextMenu();
-    }
-    // File dialog
-    function showFileDialog() {
-      document.getElementById('file-dialog').classList.remove('hidden');
-      document.getElementById('file-path-input').focus();
-    }
-    function hideFileDialog() {
-      document.getElementById('file-dialog').classList.add('hidden');
-      document.getElementById('file-path-input').value = '';
-    }
-    function setFilePath(path) {
-      document.getElementById('file-path-input').value = path;
-      document.getElementById('file-path-input').focus();
-    }
-    async function openFile() {
-      const path = document.getElementById('file-path-input').value.trim();
-      if (!path) return;
-      try {
-        const response = await fetch('/api/tabs/file', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path })
-        });
-        if (!response.ok) {
-          throw new Error(await response.text());
-        }
-        hideFileDialog();
-        await refresh();
-        showToast(`Opened ${path}`, 'success');
-      } catch (err) {
-        showToast('Failed to open file: ' + err.message, 'error');
-      }
-    }
-    // Spawn worktree builder (no dialog - spawns with random ID)
-    async function spawnBuilder() {
-      try {
-        const response = await fetch('/api/tabs/builder', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({})
-        });
-        if (!response.ok) {
-          throw new Error(await response.text());
-        }
-        const result = await response.json();
-        // Add to local tabs and select it
-        const newTab = {
-          id: `builder-${result.id}`,
-          type: 'builder',
-          name: result.name,
-          port: result.port
-        };
-        tabs.push(newTab);
-        activeTabId = newTab.id;
-        renderTabs();
-        renderTabContent();
-        showToast(`Builder ${result.name} spawned`, 'success');
-      } catch (err) {
-        showToast('Failed to spawn builder: ' + err.message, 'error');
-      }
-    }
-    // Spawn shell
-    async function spawnShell() {
-      try {
-        const response = await fetch('/api/tabs/shell', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({})
-        });
-        if (!response.ok) {
-          throw new Error(await response.text());
-        }
-        const result = await response.json();
-        // Add to local tabs and select it
-        const newTab = {
-          id: `shell-${result.id}`,
-          type: 'shell',
-          name: result.name,
-          port: result.port,
-          utilId: result.id,
-          pendingLoad: true  // Mark as pending to delay iframe
-        };
-        tabs.push(newTab);
-        activeTabId = newTab.id;
-        renderTabs();
-        // Show loading state, then load iframe after delay
-        const content = document.getElementById('tab-content');
-        content.innerHTML = '<div class="empty-state"><p>Starting shell...</p></div>';
-        setTimeout(() => {
-          delete newTab.pendingLoad;
-          currentTabPort = null;  // Force re-render
-          renderTabContent();
-        }, 800);
-        showToast('Shell spawned', 'success');
-      } catch (err) {
-        showToast('Failed to spawn shell: ' + err.message, 'error');
-      }
-    }
-    // Refresh state from API
-    async function refresh() {
-      try {
-        const response = await fetch('/api/state');
-        if (!response.ok) throw new Error('Failed to fetch state');
-        const newState = await response.json();
-        Object.assign(state, newState);
-        buildTabsFromState();
-        renderArchitect();
-        renderTabs();
-        renderTabContent();
-        updateStatusBar();
-      } catch (err) {
-        console.error('Refresh error:', err);
-      }
-    }
-    // Toast notifications
-    function showToast(message, type = 'info') {
-      const container = document.getElementById('toast-container');
-      const toast = document.createElement('div');
-      toast.className = `toast ${type}`;
-      toast.textContent = message;
-      container.appendChild(toast);
-      setTimeout(() => {
-        toast.remove();
-      }, 3000);
-    }
-    // Polling for state updates
-    let pollInterval = null;
-    function startPolling() {
-      pollInterval = setInterval(refresh, 1000);
-    }
-    function stopPolling() {
-      if (pollInterval) {
-        clearInterval(pollInterval);
-        pollInterval = null;
-      }
-    }
-    // Keyboard shortcuts
-    document.addEventListener('keydown', (e) => {
-      // Escape to close dialogs and menus
-      if (e.key === 'Escape') {
-        hideFileDialog();
-        hideCloseDialog();
-        hideContextMenu();
-        hideOverflowMenu();
-      }
-      // Enter in dialogs
-      if (e.key === 'Enter') {
-        if (!document.getElementById('file-dialog').classList.contains('hidden')) {
-          openFile();
-        }
-      }
-      // Ctrl+Tab / Ctrl+Shift+Tab to switch tabs
-      if (e.ctrlKey && e.key === 'Tab') {
-        e.preventDefault();
-        if (tabs.length < 2) return;
-        const currentIndex = tabs.findIndex(t => t.id === activeTabId);
-        let newIndex;
-        if (e.shiftKey) {
-          newIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
-        } else {
-          newIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
-        }
-        selectTab(tabs[newIndex].id);
-      }
-      // Ctrl+W to close current tab
-      if (e.ctrlKey && e.key === 'w') {
-        e.preventDefault();
-        if (activeTabId) {
-          closeTab(activeTabId, e);
-        }
-      }
-    });
-    // Initialize on load
-    init();
-  </script>
-</body>
-</html>