npm - @cluesmith/codev - Versions diffs - 1.4.1 → 1.4.3 - Mend

@cluesmith/codev 1.4.1 → 1.4.3

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 (49) hide show

package/dist/agent-farm/servers/dashboard-server.js +487 -9
package/dist/agent-farm/servers/dashboard-server.js.map +1 -1
package/dist/agent-farm/servers/tower-server.js +141 -40
package/dist/agent-farm/servers/tower-server.js.map +1 -1
package/dist/agent-farm/utils/port-registry.d.ts.map +1 -1
package/dist/agent-farm/utils/port-registry.js +19 -5
package/dist/agent-farm/utils/port-registry.js.map +1 -1
package/dist/cli.d.ts.map +1 -1
package/dist/cli.js +2 -0
package/dist/cli.js.map +1 -1
package/dist/commands/adopt.d.ts.map +1 -1
package/dist/commands/adopt.js +10 -0
package/dist/commands/adopt.js.map +1 -1
package/dist/commands/consult/index.d.ts +1 -0
package/dist/commands/consult/index.d.ts.map +1 -1
package/dist/commands/consult/index.js +56 -8
package/dist/commands/consult/index.js.map +1 -1
package/dist/commands/init.d.ts.map +1 -1
package/dist/commands/init.js +8 -0
package/dist/commands/init.js.map +1 -1
package/package.json +1 -1
package/skeleton/resources/commands/consult.md +50 -0
package/skeleton/templates/projectlist-archive.md +21 -0
package/skeleton/templates/projectlist.md +17 -0
package/templates/dashboard/css/activity.css +151 -0
package/templates/dashboard/css/dialogs.css +149 -0
package/templates/dashboard/css/files.css +530 -0
package/templates/dashboard/css/layout.css +124 -0
package/templates/dashboard/css/projects.css +501 -0
package/templates/dashboard/css/statusbar.css +23 -0
package/templates/dashboard/css/tabs.css +314 -0
package/templates/dashboard/css/utilities.css +50 -0
package/templates/dashboard/css/variables.css +45 -0
package/templates/dashboard/index.html +158 -0
package/templates/dashboard/js/activity.js +238 -0
package/templates/dashboard/js/dialogs.js +328 -0
package/templates/dashboard/js/files.js +436 -0
package/templates/dashboard/js/main.js +487 -0
package/templates/dashboard/js/projects.js +544 -0
package/templates/dashboard/js/state.js +91 -0
package/templates/dashboard/js/tabs.js +500 -0
package/templates/dashboard/js/utils.js +57 -0
package/templates/tower.html +172 -4
package/dist/commands/eject.d.ts +0 -18
package/dist/commands/eject.d.ts.map +0 -1
package/dist/commands/eject.js +0 -149
package/dist/commands/eject.js.map +0 -1
package/templates/dashboard-split.html +0 -3721
package/templates/dashboard.html +0 -149

package/templates/dashboard-split.html DELETED Viewed

@@ -1,3721 +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 */
-      /* Project lifecycle status colors per spec 0045 */
-      --project-conceived: #eab308;    /* Yellow */
-      --project-specified: #3b82f6;    /* Blue */
-      --project-planned: #3b82f6;      /* Blue */
-      --project-implementing: #f97316; /* Orange */
-      --project-implemented: #a855f7;  /* Purple */
-      --project-committed: #22c55e;    /* Green */
-      --project-integrated: #9e9e9e;   /* Gray */
-      --project-abandoned: #ef4444;    /* Red */
-      --project-on-hold: #9e9e9e;      /* Gray */
-    }
-    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;
-    }
-    /* Projects Tab Styles (Spec 0045) */
-    .projects-container {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    /* Welcome Screen */
-    .projects-welcome {
-      max-width: 600px;
-      margin: 40px auto;
-      text-align: center;
-    }
-    .projects-welcome h2 {
-      font-size: 24px;
-      margin-bottom: 16px;
-      color: var(--text-primary);
-    }
-    .projects-welcome p {
-      color: var(--text-secondary);
-      line-height: 1.6;
-      margin-bottom: 16px;
-    }
-    .projects-welcome ol {
-      text-align: left;
-      margin: 24px 0;
-      padding-left: 24px;
-    }
-    .projects-welcome li {
-      margin-bottom: 8px;
-      color: var(--text-secondary);
-    }
-    .projects-welcome li strong {
-      color: var(--text-primary);
-    }
-    .projects-welcome .quick-tip {
-      margin-top: 24px;
-      padding: 12px;
-      background: var(--bg-tertiary);
-      border-radius: 6px;
-      border-left: 3px solid var(--accent);
-      color: var(--text-secondary);
-    }
-    .projects-welcome hr {
-      border: none;
-      border-top: 1px solid var(--border);
-      margin: 24px 0;
-    }
-    /* Status Summary */
-    .status-summary {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 12px 16px;
-    }
-    .status-summary-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-    }
-    .status-summary-header span {
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: var(--text-muted);
-    }
-    .status-summary-header button {
-      padding: 4px 8px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--bg-tertiary);
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 14px;
-    }
-    .status-summary-header button:hover {
-      background: var(--tab-hover);
-    }
-    .status-summary .active-projects {
-      margin-bottom: 8px;
-    }
-    .status-summary .active-count {
-      font-size: 14px;
-      color: var(--text-primary);
-    }
-    .status-summary .active-list {
-      margin-top: 4px;
-      padding-left: 16px;
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-    .status-summary .active-list li {
-      margin: 2px 0;
-    }
-    .status-summary .completed {
-      font-size: 13px;
-      color: var(--text-muted);
-    }
-    /* Kanban Grid */
-    .kanban-grid {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13px;
-    }
-    .kanban-grid th,
-    .kanban-grid td {
-      padding: 8px 6px;
-      text-align: center;
-      border-bottom: 1px solid var(--border);
-    }
-    .kanban-grid th {
-      background: var(--bg-secondary);
-      font-size: 10px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: var(--text-muted);
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
-    .kanban-grid th:first-child,
-    .kanban-grid td:first-child {
-      text-align: left;
-      padding-left: 12px;
-      width: 40%;
-    }
-    .kanban-grid th:not(:first-child),
-    .kanban-grid td:not(:first-child) {
-      width: 8%;
-    }
-    .kanban-grid tbody tr {
-      cursor: default;
-      transition: background 0.15s;
-    }
-    .kanban-grid tbody tr:hover {
-      background: var(--bg-secondary);
-    }
-    .kanban-grid tbody tr:focus {
-      outline: 2px solid var(--accent);
-      outline-offset: -2px;
-    }
-    .kanban-grid .project-cell {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .kanban-grid .project-id {
-      font-family: monospace;
-      color: var(--text-muted);
-    }
-    .kanban-grid .project-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .kanban-grid .project-cell.clickable {
-      cursor: pointer;
-    }
-    .kanban-grid .project-cell.clickable:hover .project-title {
-      text-decoration: underline;
-      color: var(--accent);
-    }
-    .kanban-grid .tick-badge {
-      font-size: 10px;
-      padding: 1px 4px;
-      background: var(--bg-tertiary);
-      border-radius: 3px;
-      color: var(--text-muted);
-    }
-    /* Stage cell styling */
-    .stage-cell {
-      font-size: 12px;
-      position: relative;
-    }
-    .stage-cell .checkmark {
-      color: #22c55e;
-      font-weight: bold;
-    }
-    .stage-cell .current-indicator {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border: 2px solid #f97316;
-      border-radius: 50%;
-    }
-    .stage-cell .celebration {
-      font-size: 16px;
-    }
-    .stage-cell a {
-      color: var(--text-primary);
-      text-decoration: underline;
-    }
-    /* Arrow between columns */
-    .kanban-grid th:not(:first-child):not(:last-child)::after,
-    .kanban-grid td.stage-cell:not(:last-child)::after {
-      content: '→';
-      position: absolute;
-      right: -8px;
-      color: var(--text-muted);
-      font-size: 10px;
-    }
-    /* Projects info header */
-    .projects-info {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 12px 16px;
-      margin-bottom: 12px;
-    }
-    .projects-info p {
-      color: var(--text-secondary);
-      font-size: 13px;
-      margin: 0 0 8px 0;
-    }
-    .projects-info p:last-child {
-      margin-bottom: 0;
-    }
-    .projects-info strong {
-      color: var(--text-primary);
-    }
-    .projects-info a {
-      color: var(--accent);
-      text-decoration: none;
-    }
-    .projects-info a:hover {
-      text-decoration: underline;
-    }
-    /* Project details row */
-    .project-details-row td {
-      padding: 0 !important;
-      border-bottom: 1px solid var(--border);
-    }
-    .project-details-content {
-      padding: 16px;
-      background: var(--bg-secondary);
-    }
-    .project-details-content h3 {
-      font-size: 16px;
-      margin-bottom: 8px;
-      color: var(--text-primary);
-    }
-    .project-details-content p {
-      margin-bottom: 8px;
-      color: var(--text-secondary);
-      font-size: 13px;
-    }
-    .project-details-content .notes {
-      font-style: italic;
-      color: var(--text-muted);
-    }
-    .project-details-links {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-    }
-    .project-details-links a {
-      padding: 4px 10px;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      color: var(--text-secondary);
-      text-decoration: none;
-      font-size: 12px;
-    }
-    .project-details-links a:hover {
-      background: var(--tab-hover);
-      color: var(--text-primary);
-    }
-    .project-dependencies {
-      margin-top: 8px;
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .project-ticks {
-      margin-top: 8px;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-    .project-ticks .tick-badge {
-      background: #238636;
-      color: white;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-size: 11px;
-    }
-    /* Collapsible project sections */
-    .project-section {
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      background: var(--bg-secondary);
-      margin-bottom: 12px;
-    }
-    .project-section summary {
-      padding: 12px 16px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-primary);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      user-select: none;
-    }
-    .project-section summary:hover {
-      background: var(--bg-tertiary);
-    }
-    .project-section summary::marker {
-      content: '';
-    }
-    .project-section summary::before {
-      content: '▶';
-      font-size: 10px;
-      transition: transform 0.2s;
-      color: var(--text-muted);
-    }
-    .project-section[open] summary::before {
-      transform: rotate(90deg);
-    }
-    .project-section .section-count {
-      font-size: 12px;
-      color: var(--text-muted);
-      font-weight: normal;
-    }
-    .project-section .kanban-grid {
-      margin: 0;
-      border-radius: 0 0 6px 6px;
-    }
-    /* Terminal projects section */
-    .terminal-projects {
-      margin-top: 16px;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      background: var(--bg-secondary);
-    }
-    .terminal-projects summary {
-      padding: 12px 16px;
-      cursor: pointer;
-      font-size: 13px;
-      color: var(--text-muted);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .terminal-projects summary:hover {
-      background: var(--bg-tertiary);
-    }
-    .terminal-projects summary::marker {
-      content: '';
-    }
-    .terminal-projects summary::before {
-      content: '▶';
-      font-size: 10px;
-      transition: transform 0.2s;
-      color: var(--text-muted);
-    }
-    .terminal-projects[open] summary::before {
-      transform: rotate(90deg);
-    }
-    .terminal-projects ul {
-      list-style: none;
-      padding: 0 16px 16px;
-    }
-    .terminal-projects li {
-      padding: 8px 0;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-    .terminal-projects li:last-child {
-      border-bottom: none;
-    }
-    .terminal-projects .project-abandoned {
-      color: var(--project-abandoned);
-      text-decoration: line-through;
-    }
-    .terminal-projects .project-on-hold {
-      color: var(--project-on-hold);
-      font-style: italic;
-    }
-    /* Error banner */
-    .projects-error {
-      padding: 16px;
-      background: rgba(239, 68, 68, 0.1);
-      border: 1px solid var(--status-error);
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .projects-error-message {
-      flex: 1;
-      color: var(--text-secondary);
-    }
-    .projects-error button {
-      padding: 6px 12px;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      color: var(--text-secondary);
-      cursor: pointer;
-    }
-    .projects-error button:hover {
-      background: var(--tab-hover);
-    }
-    /* Stage link styling */
-    .stage-link {
-      text-decoration: none;
-      color: inherit;
-      cursor: pointer;
-    }
-    .stage-link:hover .stage-indicator {
-      transform: scale(1.2);
-    }
-    /* Projects tab without close button */
-    .tab.tab-uncloseable .close {
-      display: none;
-    }
-    /* Tree Styles (used by dashboard file browser) */
-    .tree-item {
-      display: flex;
-      align-items: center;
-      padding: 4px 8px;
-      cursor: pointer;
-      user-select: none;
-    }
-    .tree-item:hover {
-      background: var(--bg-secondary);
-    }
-    .tree-item.selected {
-      background: var(--tab-active);
-    }
-    .tree-item-icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 10px;
-      color: var(--text-muted);
-    }
-    .tree-item-icon.folder-toggle {
-      cursor: pointer;
-    }
-    .tree-item-icon.folder-toggle:hover {
-      color: var(--text-secondary);
-    }
-    .tree-item-name {
-      font-size: 13px;
-      color: var(--text-secondary);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .tree-item:hover .tree-item-name {
-      color: var(--text-primary);
-    }
-    .tree-item[data-type="dir"] .tree-item-name {
-      color: var(--text-primary);
-    }
-    .tree-item[data-type="file"]:hover .tree-item-name {
-      color: var(--accent);
-    }
-    .tree-children {
-      overflow: hidden;
-    }
-    .tree-children.collapsed {
-      display: none;
-    }
-    /* Dashboard Tab Styles (Spec 0057) */
-    .dashboard-container {
-      flex: 1;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
-    .dashboard-header {
-      display: flex;
-      gap: 16px;
-      padding: 16px;
-      flex-shrink: 0;
-    }
-    @media (max-width: 900px) {
-      .dashboard-header {
-        flex-direction: column;
-      }
-    }
-    /* Collapsible section styles */
-    .dashboard-section {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    .dashboard-section.section-tabs,
-    .dashboard-section.section-files {
-      flex: 1;
-      max-height: 280px;
-    }
-    .dashboard-section.section-projects {
-      flex: 0 0 auto;
-      margin: 0 16px 16px 16px;
-      max-height: 50%;
-      overflow-y: auto;
-    }
-    .dashboard-section.section-projects .dashboard-section-content {
-      flex: 0 0 auto;
-    }
-    /* Tabs/Files expand to fill remaining space above Projects */
-    .dashboard-header {
-      flex: 1;
-      min-height: 0;
-    }
-    .dashboard-section.section-tabs,
-    .dashboard-section.section-files {
-      max-height: none;
-    }
-    .dashboard-section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 12px;
-      cursor: pointer;
-      user-select: none;
-      flex-shrink: 0;
-      border-bottom: 1px solid var(--border);
-    }
-    .dashboard-section-header:hover {
-      background: var(--bg-tertiary);
-    }
-    .dashboard-section-header h3 {
-      font-size: 12px;
-      text-transform: uppercase;
-      color: var(--text-muted);
-      letter-spacing: 0.5px;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .dashboard-section-header .collapse-icon {
-      font-size: 10px;
-      transition: transform 0.2s;
-    }
-    .dashboard-section.collapsed .collapse-icon {
-      transform: rotate(-90deg);
-    }
-    .dashboard-section.collapsed .dashboard-section-header {
-      border-bottom: none;
-    }
-    .dashboard-section-header .header-actions {
-      display: flex;
-      gap: 4px;
-    }
-    .dashboard-section-header .header-actions button {
-      padding: 4px 8px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--bg-tertiary);
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 11px;
-    }
-    .dashboard-section-header .header-actions button:hover {
-      background: var(--tab-hover);
-      color: var(--text-primary);
-    }
-    .dashboard-section-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px 12px;
-    }
-    .dashboard-section.collapsed .dashboard-section-content {
-      display: none;
-    }
-    /* Legacy support */
-    .dashboard-column {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 12px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      max-height: 280px;
-    }
-    .dashboard-column-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-      flex-shrink: 0;
-    }
-    .dashboard-column-header h3 {
-      font-size: 12px;
-      text-transform: uppercase;
-      color: var(--text-muted);
-      letter-spacing: 0.5px;
-      margin: 0;
-    }
-    .dashboard-column-header .header-actions {
-      display: flex;
-      gap: 4px;
-    }
-    .dashboard-column-header .header-actions button {
-      padding: 4px 8px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--bg-tertiary);
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 11px;
-    }
-    .dashboard-column-header .header-actions button:hover {
-      background: var(--tab-hover);
-      color: var(--text-primary);
-    }
-    .dashboard-tabs-list {
-      flex: 1;
-      overflow-y: auto;
-      margin-bottom: 8px;
-    }
-    .dashboard-tab-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-    .dashboard-tab-item:hover {
-      background: var(--bg-tertiary);
-    }
-    .dashboard-tab-item.active {
-      background: var(--accent);
-      color: white;
-    }
-    .dashboard-tab-item .tab-icon {
-      font-size: 14px;
-      flex-shrink: 0;
-    }
-    .dashboard-tab-item .tab-name {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .dashboard-actions {
-      flex-shrink: 0;
-      display: flex;
-      gap: 8px;
-    }
-    .dashboard-actions .btn-action {
-      flex: 1;
-      padding: 8px 12px;
-      border-radius: 4px;
-      border: 1px dashed var(--border);
-      background: transparent;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-    }
-    .dashboard-actions .btn-action:hover {
-      border-style: solid;
-      color: var(--text-secondary);
-      background: var(--bg-tertiary);
-    }
-    .dashboard-files-list {
-      flex: 1;
-      overflow-y: auto;
-    }
-    .dashboard-files-list .tree-item {
-      padding: 3px 6px;
-      font-size: 12px;
-    }
-    .dashboard-files-list .tree-item-name {
-      font-size: 12px;
-    }
-    .dashboard-empty-state {
-      color: var(--text-muted);
-      font-size: 13px;
-      padding: 12px;
-      text-align: center;
-    }
-    /* Status indicators in dashboard tab list */
-    .dashboard-status-indicator {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-    .dashboard-status-working {
-      background: var(--status-active);
-      animation: status-pulse 2s ease-in-out infinite;
-    }
-    .dashboard-status-idle {
-      background: var(--status-waiting);
-      animation: status-blink-slow 3s ease-in-out infinite;
-    }
-    .dashboard-status-blocked {
-      background: var(--status-error);
-      animation: status-blink-fast 0.8s ease-in-out infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .dashboard-status-working,
-      .dashboard-status-idle,
-      .dashboard-status-blocked {
-        animation: none;
-      }
-    }
-  </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="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;
-    // Collapsible section state (persisted to localStorage)
-    const SECTION_STATE_KEY = 'codev-dashboard-sections';
-    let sectionState = loadSectionState();
-    function loadSectionState() {
-      try {
-        const saved = localStorage.getItem(SECTION_STATE_KEY);
-        if (saved) return JSON.parse(saved);
-      } catch (e) { /* ignore */ }
-      return { tabs: true, files: true, projects: true };
-    }
-    function saveSectionState() {
-      try {
-        localStorage.setItem(SECTION_STATE_KEY, JSON.stringify(sectionState));
-      } catch (e) { /* ignore */ }
-    }
-    function toggleSection(section) {
-      sectionState[section] = !sectionState[section];
-      saveSectionState();
-      renderDashboardTabContent();
-    }
-    // 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();
-    // Projects tab state
-    let projectsData = [];
-    let projectlistHash = null;
-    let expandedProjectId = null;
-    let projectlistError = null;
-    let projectlistDebounce = null;
-    // Files tab state (Spec 0055)
-    let filesTreeData = [];
-    let filesTreeExpanded = new Set();  // Set of expanded folder paths
-    let filesTreeError = null;
-    let filesTreeLoaded = false;
-    // Build tabs from initial state
-    function buildTabsFromState() {
-      const previousTabIds = new Set(tabs.map(t => t.id));
-      tabs = [];
-      // Dashboard tab is ALWAYS first and uncloseable (Spec 0045, 0057)
-      tabs.push({
-        id: 'dashboard',
-        type: 'dashboard',
-        name: 'Dashboard',
-        closeable: false
-      });
-      // 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 (skip projects tab)
-      for (const tab of tabs) {
-        if (tab.id !== 'dashboard' && tab.id !== 'files' && !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 Dashboard on first load if none selected
-      if (!activeTabId) {
-        activeTabId = 'dashboard';
-      }
-    }
-    // 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);
-        const isUncloseable = tab.closeable === false;
-        return `
-          <div class="tab ${isActive ? 'active' : ''} ${isUncloseable ? 'tab-uncloseable' : ''}"
-               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}
-            ${!isUncloseable ? `<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 'dashboard': return '🏠';
-        case 'files': return '📁';
-        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;
-    let currentTabType = null;
-    // Render tab content
-    function renderTabContent() {
-      const content = document.getElementById('tab-content');
-      if (!activeTabId || tabs.length === 0) {
-        if (currentTabPort !== null || currentTabType !== null) {
-          currentTabPort = null;
-          currentTabType = 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 || currentTabType !== null) {
-          currentTabPort = null;
-          currentTabType = null;
-          content.innerHTML = '<div class="empty-state"><p>Tab not found</p></div>';
-        }
-        return;
-      }
-      // Handle dashboard tab specially (no iframe, inline content)
-      if (tab.type === 'dashboard') {
-        if (currentTabType !== 'dashboard') {
-          currentTabType = 'dashboard';
-          currentTabPort = null;
-          renderDashboardTab();
-        }
-        return;
-      }
-      // For other tabs, only update iframe if port changed (avoid flashing on poll)
-      if (currentTabPort !== tab.port || currentTabType !== tab.type) {
-        currentTabPort = tab.port;
-        currentTabType = tab.type;
-        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) {
-        // Skip uncloseable tabs (Projects tab)
-        const otherTabs = tabs.filter(t => t.id !== contextMenuTabId && t.closeable !== false);
-        otherTabs.forEach(t => doCloseTab(t.id));
-      }
-      hideContextMenu();
-    }
-    function closeAllTabs() {
-      // Skip uncloseable tabs (Projects tab)
-      tabs.filter(t => t.closeable !== false).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);
-        }
-      }
-    });
-    // ============================================
-    // Projects Tab Functions (Spec 0045)
-    // ============================================
-    // XSS-safe HTML escaping (used by escapeHtml above, same implementation)
-    function escapeProjectHtml(text) {
-      if (!text) return '';
-      const div = document.createElement('div');
-      div.textContent = String(text);
-      return div.innerHTML;
-    }
-    // Simple DJB2 hash for change detection
-    function hashString(str) {
-      let hash = 5381;
-      for (let i = 0; i < str.length; i++) {
-        hash = ((hash << 5) + hash) + str.charCodeAt(i);
-      }
-      return hash >>> 0;
-    }
-    // Parse a single project entry from YAML-like text
-    function parseProjectEntry(text) {
-      const project = {};
-      const lines = text.split('\n');
-      for (const line of lines) {
-        // Match key: value or key: "value"
-        // Also handle "- id:" YAML list format
-        const match = line.match(/^\s*-?\s*(\w+):\s*(.*)$/);
-        if (!match) continue;
-        const [, key, rawValue] = match;
-        // Remove quotes if present
-        let value = rawValue.trim();
-        if ((value.startsWith('"') && value.endsWith('"')) ||
-            (value.startsWith("'") && value.endsWith("'"))) {
-          value = value.slice(1, -1);
-        }
-        // Handle nested files object
-        if (key === 'files') {
-          project.files = {};
-          continue;
-        }
-        if (key === 'spec' || key === 'plan' || key === 'review') {
-          if (!project.files) project.files = {};
-          project.files[key] = value === 'null' ? null : value;
-          continue;
-        }
-        // Handle nested timestamps object
-        if (key === 'timestamps') {
-          project.timestamps = {};
-          continue;
-        }
-        const timestampFields = ['conceived_at', 'specified_at', 'planned_at',
-                                 'implementing_at', 'implemented_at', 'committed_at', 'integrated_at'];
-        if (timestampFields.includes(key)) {
-          if (!project.timestamps) project.timestamps = {};
-          project.timestamps[key] = value === 'null' ? null : value;
-          continue;
-        }
-        // Handle arrays (simple inline format)
-        if (key === 'dependencies' || key === 'tags' || key === 'ticks') {
-          if (value.startsWith('[') && value.endsWith(']')) {
-            const inner = value.slice(1, -1);
-            if (inner.trim() === '') {
-              project[key] = [];
-            } else {
-              project[key] = inner.split(',').map(s => s.trim().replace(/^["']|["']$/g, ''));
-            }
-          } else {
-            project[key] = [];
-          }
-          continue;
-        }
-        // Regular string values
-        if (value !== 'null') {
-          project[key] = value;
-        }
-      }
-      return project;
-    }
-    // Validate that a project entry is valid
-    function isValidProject(project) {
-      // Must have id (4-digit string, not "NNNN")
-      if (!project.id || project.id === 'NNNN' || !/^\d{4}$/.test(project.id)) {
-        return false;
-      }
-      // Must have status
-      const validStatuses = ['conceived', 'specified', 'planned', 'implementing',
-                            'implemented', 'committed', 'integrated', 'abandoned', 'on-hold'];
-      if (!project.status || !validStatuses.includes(project.status)) {
-        return false;
-      }
-      // Must have title
-      if (!project.title) {
-        return false;
-      }
-      // Filter out example entries
-      if (project.tags && project.tags.includes('example')) {
-        return false;
-      }
-      return true;
-    }
-    // Parse projectlist.md content into array of projects
-    function parseProjectlist(content) {
-      const projects = [];
-      try {
-        // Extract YAML code blocks
-        const yamlBlockRegex = /```yaml\n([\s\S]*?)```/g;
-        let match;
-        while ((match = yamlBlockRegex.exec(content)) !== null) {
-          const block = match[1];
-          // Split by project entries (lines starting with "  - id:")
-          // Handle both top-level and indented entries
-          const projectMatches = block.split(/\n(?=\s*- id:)/);
-          for (const projectText of projectMatches) {
-            if (!projectText.trim() || !projectText.includes('id:')) continue;
-            const project = parseProjectEntry(projectText);
-            if (isValidProject(project)) {
-              projects.push(project);
-            }
-          }
-        }
-      } catch (err) {
-        console.error('Error parsing projectlist:', err);
-        return [];
-      }
-      return projects;
-    }
-    // Render the welcome screen for new users
-    function renderWelcomeScreen() {
-      return `
-        <div class="projects-welcome">
-          <h2>Welcome to Codev</h2>
-          <p>Codev helps you build software with AI assistance. Projects flow through 7 stages from idea to production:</p>
-          <ol>
-            <li><strong>Conceived</strong> - Tell the architect what you want to build</li>
-            <li><strong>Specified</strong> - AI writes a spec, you approve it</li>
-            <li><strong>Planned</strong> - AI creates an implementation plan</li>
-            <li><strong>Implementing</strong> - Builder AI writes the code</li>
-            <li><strong>Implemented</strong> - Code complete, PR ready for review</li>
-            <li><strong>Committed</strong> - PR merged to main</li>
-            <li><strong>Integrated</strong> - Validated in production</li>
-          </ol>
-          <hr>
-          <p class="quick-tip">
-            <strong>Quick tip:</strong> Say "I want to build a [feature]" and the architect will guide you through the process.
-          </p>
-        </div>
-      `;
-    }
-    // Render the error banner
-    function renderErrorBanner(message) {
-      return `
-        <div class="projects-error">
-          <span class="projects-error-message">${escapeProjectHtml(message)}</span>
-          <button onclick="reloadProjectlist()">Retry</button>
-        </div>
-      `;
-    }
-    // Group projects by status for summary
-    function groupByStatus(projects, statuses) {
-      const groups = {};
-      for (const status of statuses) {
-        groups[status] = projects.filter(p => p.status === status);
-      }
-      return groups;
-    }
-    // Render the status summary section
-    function renderStatusSummary(projects) {
-      const activeStatuses = ['conceived', 'specified', 'planned', 'implementing', 'implemented', 'committed'];
-      const active = projects.filter(p => activeStatuses.includes(p.status));
-      const completed = projects.filter(p => p.status === 'integrated');
-      const byStatus = groupByStatus(active, activeStatuses);
-      const activeListItems = [];
-      for (const status of activeStatuses) {
-        const statusProjects = byStatus[status] || [];
-        if (statusProjects.length > 0) {
-          const names = statusProjects.slice(0, 3).map(p => `${p.id} ${p.title}`).join(', ');
-          const more = statusProjects.length > 3 ? ` (+${statusProjects.length - 3} more)` : '';
-          activeListItems.push(`<li>${statusProjects.length} ${status}: ${escapeProjectHtml(names)}${more}</li>`);
-        }
-      }
-      return `
-        <div class="status-summary">
-          <div class="status-summary-header">
-            <span>Status Summary</span>
-            <button onclick="reloadProjectlist()" title="Reload">↻</button>
-          </div>
-          <div class="active-projects">
-            <span class="active-count">Active: ${active.length} project${active.length !== 1 ? 's' : ''}</span>
-            ${activeListItems.length > 0 ? `<ul class="active-list">${activeListItems.join('')}</ul>` : ''}
-          </div>
-          <div class="completed">Completed: ${completed.length} integrated</div>
-        </div>
-      `;
-    }
-    // Get the lifecycle stages in order
-    const LIFECYCLE_STAGES = ['conceived', 'specified', 'planned', 'implementing', 'implemented', 'committed', 'integrated'];
-    // Abbreviated column headers
-    const STAGE_HEADERS = {
-      'conceived': "CONC'D",
-      'specified': "SPEC'D",
-      'planned': 'PLANNED',
-      'implementing': 'IMPLING',
-      'implemented': 'IMPLED',
-      'committed': 'CMTD',
-      'integrated': "INTGR'D"
-    };
-    // Stage tooltips explaining purpose and exit criteria
-    const STAGE_TOOLTIPS = {
-      'conceived': "CONCEIVED: Idea has been captured.\nExit: Human approves the specification.",
-      'specified': "SPECIFIED: Human approved the spec.\nExit: Architect creates an implementation plan.",
-      'planned': "PLANNED: Implementation plan is ready.\nExit: Architect spawns a Builder.",
-      'implementing': "IMPLEMENTING: Builder is working on the code.\nExit: Builder creates a PR.",
-      'implemented': "IMPLEMENTED: PR is ready for review.\nExit: Builder merges after Architect review.",
-      'committed': "COMMITTED: PR has been merged.\nExit: Human validates in production.",
-      'integrated': "INTEGRATED: Validated in production.\nThis is the goal state."
-    };
-    // Get stage index (for comparison)
-    function getStageIndex(status) {
-      return LIFECYCLE_STAGES.indexOf(status);
-    }
-    // Get the label and link for a stage cell
-    function getStageCellContent(project, stage) {
-      switch (stage) {
-        case 'specified':
-          if (project.files && project.files.spec) {
-            return { label: 'Spec', link: project.files.spec };
-          }
-          return { label: '', link: null };
-        case 'planned':
-          if (project.files && project.files.plan) {
-            return { label: 'Plan', link: project.files.plan };
-          }
-          return { label: '', link: null };
-        case 'implemented':
-          if (project.files && project.files.review) {
-            return { label: 'Revw', link: project.files.review };
-          }
-          return { label: '', link: null };
-        case 'committed':
-          // PR link from notes (format: "PR #N merged")
-          if (project.notes) {
-            const prMatch = project.notes.match(/PR\s*#?(\d+)/i);
-            if (prMatch) {
-              return { label: 'PR', link: `https://github.com/cluesmith/codev/pull/${prMatch[1]}`, external: true };
-            }
-          }
-          return { label: '', link: null };
-        default:
-          return { label: '', link: null };
-      }
-    }
-    // Render a stage cell with appropriate styling
-    function renderStageCell(project, stage) {
-      const currentIndex = getStageIndex(project.status);
-      const stageIndex = getStageIndex(stage);
-      let cellClass = 'stage-cell';
-      let content = '';
-      let ariaLabel = '';
-      if (stageIndex < currentIndex) {
-        // Completed stage - green checkmark
-        ariaLabel = `${stage}: completed`;
-        const cellContent = getStageCellContent(project, stage);
-        if (cellContent.label && cellContent.link) {
-          if (cellContent.external) {
-            content = `<span class="checkmark">✓</span> <a href="${cellContent.link}" target="_blank" rel="noopener">${cellContent.label}</a>`;
-          } else {
-            content = `<span class="checkmark">✓</span> <a href="#" onclick="openProjectFile('${cellContent.link}'); return false;">${cellContent.label}</a>`;
-          }
-        } else {
-          content = '<span class="checkmark">✓</span>';
-        }
-      } else if (stageIndex === currentIndex) {
-        // Current stage - hollow orange circle (or confetti if recently integrated)
-        if (stage === 'integrated' && isRecentlyIntegrated(project)) {
-          ariaLabel = `${stage}: recently completed!`;
-          content = '<span class="celebration">🎉</span>';
-        } else {
-          ariaLabel = `${stage}: in progress`;
-          const cellContent = getStageCellContent(project, stage);
-          if (cellContent.label && cellContent.link) {
-            if (cellContent.external) {
-              content = `<span class="current-indicator"></span> <a href="${cellContent.link}" target="_blank" rel="noopener">${cellContent.label}</a>`;
-            } else {
-              content = `<span class="current-indicator"></span> <a href="#" onclick="openProjectFile('${cellContent.link}'); return false;">${cellContent.label}</a>`;
-            }
-          } else {
-            content = '<span class="current-indicator"></span>';
-          }
-        }
-      } else {
-        // Future stage - empty
-        ariaLabel = `${stage}: pending`;
-      }
-      return `<td role="gridcell" class="${cellClass}" aria-label="${ariaLabel}">${content}</td>`;
-    }
-    // Get URL for stage-specific artifact
-    function getStageLinkUrl(project, stage) {
-      if (!project.files) return null;
-      switch (stage) {
-        case 'specified':
-          return project.files.spec || null;
-        case 'planned':
-          return project.files.plan || null;
-        case 'integrated':
-          return project.files.review || null;
-        default:
-          return null;
-      }
-    }
-    // Open a project file in a new annotation tab
-    async function openProjectFile(path) {
-      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());
-        }
-        await refresh();
-        showToast(`Opened ${path}`, 'success');
-      } catch (err) {
-        showToast('Failed to open file: ' + err.message, 'error');
-      }
-    }
-    // Render a single project row
-    function renderProjectRow(project) {
-      const isExpanded = expandedProjectId === project.id;
-      const row = `
-        <tr class="status-${project.status}"
-            role="row"
-            tabindex="0"
-            aria-expanded="${isExpanded}"
-            onkeydown="handleProjectRowKeydown(event, '${project.id}')">
-          <td role="gridcell">
-            <div class="project-cell clickable" onclick="toggleProjectDetails('${project.id}'); event.stopPropagation();">
-              <span class="project-id">${escapeProjectHtml(project.id)}</span>
-              <span class="project-title" title="${escapeProjectHtml(project.title)}">${escapeProjectHtml(project.title)}</span>
-            </div>
-          </td>
-          ${LIFECYCLE_STAGES.map(stage => renderStageCell(project, stage)).join('')}
-        </tr>
-      `;
-      if (isExpanded) {
-        return row + renderProjectDetailsRow(project);
-      }
-      return row;
-    }
-    // Render the details row when expanded
-    function renderProjectDetailsRow(project) {
-      const links = [];
-      if (project.files && project.files.review) {
-        links.push(`<a href="#" onclick="openProjectFile('${project.files.review}'); return false;">Review</a>`);
-      }
-      const dependencies = project.dependencies && project.dependencies.length > 0
-        ? `<div class="project-dependencies">Dependencies: ${project.dependencies.map(d => escapeProjectHtml(d)).join(', ')}</div>`
-        : '';
-      // Render TICKs if present
-      const ticks = project.ticks && project.ticks.length > 0
-        ? `<div class="project-ticks">TICKs: ${project.ticks.map(t => `<span class="tick-badge">TICK-${escapeProjectHtml(t)}</span>`).join(' ')}</div>`
-        : '';
-      return `
-        <tr class="project-details-row" role="row">
-          <td colspan="8">
-            <div class="project-details-content">
-              <h3>${escapeProjectHtml(project.title)}</h3>
-              ${project.summary ? `<p>${escapeProjectHtml(project.summary)}</p>` : ''}
-              ${project.notes ? `<p class="notes">${escapeProjectHtml(project.notes)}</p>` : ''}
-              ${ticks}
-              ${links.length > 0 ? `<div class="project-details-links">${links.join('')}</div>` : ''}
-              ${dependencies}
-            </div>
-          </td>
-        </tr>
-      `;
-    }
-    // Handle keyboard navigation on project rows
-    function handleProjectRowKeydown(event, projectId) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        toggleProjectDetails(projectId);
-      } else if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        const currentRow = event.target.closest('tr');
-        let nextRow = currentRow.nextElementSibling;
-        // Skip details rows
-        while (nextRow && nextRow.classList.contains('project-details-row')) {
-          nextRow = nextRow.nextElementSibling;
-        }
-        if (nextRow) nextRow.focus();
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        const currentRow = event.target.closest('tr');
-        let prevRow = currentRow.previousElementSibling;
-        // Skip details rows
-        while (prevRow && prevRow.classList.contains('project-details-row')) {
-          prevRow = prevRow.previousElementSibling;
-        }
-        if (prevRow && prevRow.getAttribute('tabindex') === '0') prevRow.focus();
-      }
-    }
-    // Toggle project details expansion
-    function toggleProjectDetails(projectId) {
-      if (expandedProjectId === projectId) {
-        expandedProjectId = null;
-      } else {
-        expandedProjectId = projectId;
-      }
-      // Re-render the projects tab to update expansion state
-      renderProjectsTabContent();
-    }
-    // Render a table for a list of projects
-    function renderProjectTable(projectList) {
-      if (projectList.length === 0) {
-        return '<p style="color: var(--text-muted); text-align: center; padding: 20px;">No projects</p>';
-      }
-      return `
-        <table class="kanban-grid" role="grid" aria-label="Project status grid">
-          <thead>
-            <tr role="row">
-              <th role="columnheader">Project</th>
-              ${LIFECYCLE_STAGES.map(stage => `<th role="columnheader" title="${STAGE_TOOLTIPS[stage]}">${STAGE_HEADERS[stage]}</th>`).join('')}
-            </tr>
-          </thead>
-          <tbody>
-            ${projectList.map(p => renderProjectRow(p)).join('')}
-          </tbody>
-        </table>
-      `;
-    }
-    // Check if a project was integrated in the last 24 hours
-    function isRecentlyIntegrated(project) {
-      if (project.status !== 'integrated') return false;
-      // Look in timestamps.integrated_at (new format)
-      const integratedAt = project.timestamps?.integrated_at;
-      if (!integratedAt) return false;
-      const integratedDate = new Date(integratedAt);
-      if (isNaN(integratedDate.getTime())) return false;
-      const now = new Date();
-      const hoursDiff = (now - integratedDate) / (1000 * 60 * 60);
-      return hoursDiff <= 24;
-    }
-    // Render the Kanban grid with Active/Inactive sections
-    function renderKanbanGrid(projects) {
-      // Separate active (conceived through committed) from inactive (integrated)
-      const activeStatuses = ['conceived', 'specified', 'planned', 'implementing', 'implemented', 'committed'];
-      // Status order for sorting (higher index = further along)
-      const statusOrder = {
-        'conceived': 0,
-        'specified': 1,
-        'planned': 2,
-        'implementing': 3,
-        'implemented': 4,
-        'committed': 5,
-        'integrated': 6
-      };
-      // Include recently integrated projects in Active section
-      const activeProjects = projects.filter(p =>
-        activeStatuses.includes(p.status) || isRecentlyIntegrated(p)
-      );
-      // Sort active projects by completion (most complete first)
-      activeProjects.sort((a, b) => {
-        const orderA = statusOrder[a.status] || 0;
-        const orderB = statusOrder[b.status] || 0;
-        // Higher status first (descending), then by ID (ascending) for tie-breaker
-        if (orderB !== orderA) return orderB - orderA;
-        return a.id.localeCompare(b.id);
-      });
-      const inactiveProjects = projects.filter(p =>
-        p.status === 'integrated' && !isRecentlyIntegrated(p)
-      );
-      let html = '';
-      // Active section - expanded by default
-      if (activeProjects.length > 0 || inactiveProjects.length === 0) {
-        html += `
-          <details class="project-section" open>
-            <summary>Active <span class="section-count">(${activeProjects.length})</span></summary>
-            ${renderProjectTable(activeProjects)}
-          </details>
-        `;
-      }
-      // Inactive section - collapsed by default
-      if (inactiveProjects.length > 0) {
-        html += `
-          <details class="project-section">
-            <summary>Completed <span class="section-count">(${inactiveProjects.length})</span></summary>
-            ${renderProjectTable(inactiveProjects)}
-          </details>
-        `;
-      }
-      return html;
-    }
-    // Render the terminal projects section (abandoned, on-hold)
-    function renderTerminalProjects(projects) {
-      const terminal = projects.filter(p => ['abandoned', 'on-hold'].includes(p.status));
-      if (terminal.length === 0) return '';
-      const items = terminal.map(p => {
-        const className = p.status === 'abandoned' ? 'project-abandoned' : 'project-on-hold';
-        const statusText = p.status === 'on-hold' ? ' (on-hold)' : '';
-        return `
-          <li>
-            <span class="${className}">
-              <span class="project-id">${escapeProjectHtml(p.id)}</span>
-              ${escapeProjectHtml(p.title)}${statusText}
-            </span>
-          </li>
-        `;
-      }).join('');
-      return `
-        <details class="terminal-projects">
-          <summary>Terminal Projects (${terminal.length})</summary>
-          <ul>${items}</ul>
-        </details>
-      `;
-    }
-    // ========================================
-    // Files Tab Functions (Spec 0055)
-    // ========================================
-    // Load the file tree from the API
-    async function loadFilesTree() {
-      try {
-        const response = await fetch('/api/files');
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        filesTreeData = await response.json();
-        filesTreeError = null;
-        filesTreeLoaded = true;
-      } catch (err) {
-        console.error('Failed to load files tree:', err);
-        filesTreeError = 'Could not load file tree: ' + err.message;
-        filesTreeData = [];
-      }
-    }
-    // Escape a string for use inside a JavaScript string literal in onclick handlers
-    // This handles quotes, backslashes, and other special characters
-    function escapeJsString(str) {
-      return str
-        .replace(/\\/g, '\\\\')
-        .replace(/'/g, "\\'")
-        .replace(/"/g, '\\"')
-        .replace(/\n/g, '\\n')
-        .replace(/\r/g, '\\r');
-    }
-    // Render tree nodes recursively
-    function renderTreeNodes(nodes, depth) {
-      if (!nodes || nodes.length === 0) return '';
-      return nodes.map(node => {
-        const indent = depth * 16;
-        const isExpanded = filesTreeExpanded.has(node.path);
-        // Use escapeJsString for onclick handlers (handles quotes correctly)
-        // Use escapeHtml for data attributes and display text (handles XSS)
-        const jsPath = escapeJsString(node.path);
-        if (node.type === 'dir') {
-          const icon = isExpanded ? '▼' : '▶';
-          const childrenHtml = node.children && node.children.length > 0
-            ? `<div class="tree-children ${isExpanded ? '' : 'collapsed'}" data-path="${escapeHtml(node.path)}">${renderTreeNodes(node.children, depth + 1)}</div>`
-            : '';
-          return `
-            <div class="tree-item" data-type="dir" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="toggleFolder('${jsPath}')">
-              <span class="tree-item-icon folder-toggle">${icon}</span>
-              <span class="tree-item-name">${escapeHtml(node.name)}</span>
-            </div>
-            ${childrenHtml}
-          `;
-        } else {
-          return `
-            <div class="tree-item" data-type="file" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="openFileFromTree('${jsPath}')">
-              <span class="tree-item-icon">${getFileIcon(node.name)}</span>
-              <span class="tree-item-name">${escapeHtml(node.name)}</span>
-            </div>
-          `;
-        }
-      }).join('');
-    }
-    // Get file icon based on extension
-    function getFileIcon(filename) {
-      const ext = filename.split('.').pop().toLowerCase();
-      const iconMap = {
-        'js': '📜',
-        'ts': '📜',
-        'jsx': '⚛️',
-        'tsx': '⚛️',
-        'json': '{}',
-        'md': '📝',
-        'html': '🌐',
-        'css': '🎨',
-        'py': '🐍',
-        'sh': '⚙️',
-        'bash': '⚙️',
-        'yml': '⚙️',
-        'yaml': '⚙️',
-        'png': '🖼️',
-        'jpg': '🖼️',
-        'jpeg': '🖼️',
-        'gif': '🖼️',
-        'svg': '🖼️',
-      };
-      return iconMap[ext] || '📄';
-    }
-    // Toggle folder expanded/collapsed state
-    function toggleFolder(path) {
-      if (filesTreeExpanded.has(path)) {
-        filesTreeExpanded.delete(path);
-      } else {
-        filesTreeExpanded.add(path);
-      }
-      rerenderFilesBrowser();
-    }
-    // Re-render file browser in current context (dashboard or files tab)
-    function rerenderFilesBrowser() {
-      if (activeTabId === 'dashboard') {
-        // Re-render just the files column in dashboard
-        const filesListEl = document.getElementById('dashboard-files-list');
-        if (filesListEl) {
-          filesListEl.innerHTML = renderDashboardFilesBrowser();
-        }
-      }
-    }
-    // Collapse all folders
-    function collapseAllFolders() {
-      filesTreeExpanded.clear();
-      rerenderFilesBrowser();
-    }
-    // Expand all folders
-    function expandAllFolders() {
-      function collectPaths(nodes) {
-        for (const node of nodes) {
-          if (node.type === 'dir') {
-            filesTreeExpanded.add(node.path);
-            if (node.children) {
-              collectPaths(node.children);
-            }
-          }
-        }
-      }
-      collectPaths(filesTreeData);
-      rerenderFilesBrowser();
-    }
-    // Refresh files tree
-    async function refreshFilesTree() {
-      await loadFilesTree();
-      rerenderFilesBrowser();
-      showToast('Files refreshed', 'success');
-    }
-    // Open file from tree click
-    async function openFileFromTree(filePath) {
-      try {
-        // Check if file is already open
-        const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
-        if (existingTab) {
-          selectTab(existingTab.id);
-          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());
-        }
-        // 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);
-        if (newTab) {
-          selectTab(newTab.id);
-        }
-        showToast(`Opened ${getFileName(filePath)}`, 'success');
-      } catch (err) {
-        showToast('Failed to open file: ' + err.message, 'error');
-      }
-    }
-    // ========================================
-    // Projects Tab Functions (Spec 0045)
-    // ========================================
-    // Render the info header with helpful links
-    function renderInfoHeader() {
-      return `
-        <div class="projects-info">
-          <h1 style="font-size: 20px; margin-bottom: 12px; color: var(--text-primary);">Agent Farm Dashboard</h1>
-          <p>Coordinate AI builders working on your codebase. The left panel shows the Architect terminal – tell it what you want to build. <strong>Tabs</strong> shows open terminals (Architect, Builders, utility shells). <strong>Files</strong> lets you browse and open project files. <strong>Projects</strong> tracks work as it moves from conception to integration.</p>
-          <p>Docs: <a href="#" onclick="openProjectFile('codev/resources/cheatsheet.md'); return false;">Cheatsheet</a> · <a href="#" onclick="openProjectFile('codev/resources/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/resources/commands/overview.md'); return false;">CLI Reference</a> · <a href="#" onclick="openProjectFile('codev/protocols/spider/protocol.md'); return false;">SPIDER Protocol</a> · <a href="https://github.com/cluesmith/codev#readme" target="_blank">README</a> · <a href="https://discord.gg/mJ92DhDa6n" target="_blank">Discord</a></p>
-        </div>
-      `;
-    }
-    // Render the dashboard tab content (internal - called after data is loaded)
-    function renderDashboardTabContent() {
-      const content = document.getElementById('tab-content');
-      content.innerHTML = `
-        <div class="dashboard-container">
-          ${renderInfoHeader()}
-          <div class="dashboard-header">
-            <!-- Tabs Section -->
-            <div class="dashboard-section section-tabs ${sectionState.tabs ? '' : 'collapsed'}">
-              <div class="dashboard-section-header" onclick="toggleSection('tabs')">
-                <h3><span class="collapse-icon">▼</span> Tabs</h3>
-              </div>
-              <div class="dashboard-section-content">
-                <div class="dashboard-tabs-list" id="dashboard-tabs-list">
-                  ${renderDashboardTabsList()}
-                </div>
-              </div>
-            </div>
-            <!-- Files Section -->
-            <div class="dashboard-section section-files ${sectionState.files ? '' : 'collapsed'}">
-              <div class="dashboard-section-header" onclick="toggleSection('files')">
-                <h3><span class="collapse-icon">▼</span> Files</h3>
-                <div class="header-actions" onclick="event.stopPropagation()">
-                  <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
-                  <button onclick="expandAllFolders()" title="Expand All">⊞</button>
-                </div>
-              </div>
-              <div class="dashboard-section-content">
-                <div class="dashboard-files-list" id="dashboard-files-list">
-                  ${renderDashboardFilesBrowser()}
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Projects Section -->
-          <div class="dashboard-section section-projects ${sectionState.projects ? '' : 'collapsed'}">
-            <div class="dashboard-section-header" onclick="toggleSection('projects')">
-              <h3><span class="collapse-icon">▼</span> Projects</h3>
-            </div>
-            <div class="dashboard-section-content" id="dashboard-projects">
-              ${renderDashboardProjectsSection()}
-            </div>
-          </div>
-        </div>
-      `;
-    }
-    // Render the tabs list for dashboard
-    function renderDashboardTabsList() {
-      // Filter to show terminal tabs only (not Dashboard/Files tabs)
-      const terminalTabs = tabs.filter(t => t.type !== 'dashboard' && t.type !== 'files');
-      if (terminalTabs.length === 0) {
-        return '<div class="dashboard-empty-state">No tabs open</div>';
-      }
-      return terminalTabs.map(tab => {
-        const isActive = tab.id === activeTabId;
-        const icon = getTabIcon(tab.type);
-        const statusIndicator = getDashboardStatusIndicator(tab);
-        return `
-          <div class="dashboard-tab-item ${isActive ? 'active' : ''}" onclick="selectTab('${tab.id}')">
-            ${statusIndicator}
-            <span class="tab-icon">${icon}</span>
-            <span class="tab-name">${escapeHtml(tab.name)}</span>
-          </div>
-        `;
-      }).join('');
-    }
-    // Get status indicator for dashboard tab list
-    function getDashboardStatusIndicator(tab) {
-      if (tab.type !== 'builder') return '';
-      // Use builder status from state
-      const builderState = (state.builders || []).find(b => `builder-${b.id}` === tab.id);
-      if (!builderState) return '';
-      const status = builderState.status;
-      if (['spawning', 'implementing'].includes(status)) {
-        return '<span class="dashboard-status-indicator dashboard-status-working" title="Working"></span>';
-      }
-      if (status === 'blocked') {
-        return '<span class="dashboard-status-indicator dashboard-status-blocked" title="Blocked"></span>';
-      }
-      if (['pr-ready', 'complete'].includes(status)) {
-        return '<span class="dashboard-status-indicator dashboard-status-idle" title="Idle"></span>';
-      }
-      return '';
-    }
-    // Render compact file browser for dashboard
-    function renderDashboardFilesBrowser() {
-      if (filesTreeError) {
-        return `<div class="dashboard-empty-state">${escapeHtml(filesTreeError)}</div>`;
-      }
-      if (!filesTreeLoaded || filesTreeData.length === 0) {
-        return '<div class="dashboard-empty-state">Loading files...</div>';
-      }
-      return renderTreeNodes(filesTreeData, 0);
-    }
-    // Render the projects section for dashboard
-    function renderDashboardProjectsSection() {
-      if (projectlistError) {
-        return renderErrorBanner(projectlistError);
-      }
-      if (projectsData.length === 0) {
-        // No welcome screen - just a helpful message
-        return `
-          <div class="dashboard-empty-state" style="padding: 24px;">
-            No projects yet. Ask the Architect to create your first project.
-          </div>
-        `;
-      }
-      // Render the existing project view
-      return `
-        ${renderKanbanGrid(projectsData)}
-        ${renderTerminalProjects(projectsData)}
-      `;
-    }
-    // Create new utility shell (quick action button)
-    async function createNewShell() {
-      try {
-        const response = await fetch('/api/tabs/shell', { method: 'POST' });
-        const data = await response.json();
-        if (!data.success && data.error) {
-          showToast(data.error || 'Failed to create shell', 'error');
-          return;
-        }
-        await refresh();
-        if (data.id) {
-          selectTab(`shell-${data.id}`);
-        }
-        showToast('Shell created', 'success');
-      } catch (err) {
-        showToast('Network error: ' + err.message, 'error');
-      }
-    }
-    // Create new worktree shell (quick action button)
-    async function createNewWorktreeShell() {
-      const branch = prompt('Branch name (leave empty for temp worktree):');
-      if (branch === null) return; // User cancelled
-      try {
-        const response = await fetch('/api/tabs/shell', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ worktree: true, branch: branch || undefined })
-        });
-        const data = await response.json();
-        if (!data.success && data.error) {
-          showToast(data.error || 'Failed to create worktree shell', 'error');
-          return;
-        }
-        await refresh();
-        // Auto-select the newly created tab (consistent with createNewShell behavior)
-        if (data.id) {
-          selectTab(`shell-${data.id}`);
-        }
-        showToast('Worktree shell created', 'success');
-      } catch (err) {
-        showToast('Network error: ' + err.message, 'error');
-      }
-    }
-    // Render the dashboard tab (entry point - loads data first)
-    async function renderDashboardTab() {
-      const content = document.getElementById('tab-content');
-      content.innerHTML = '<div class="dashboard-container"><p style="color: var(--text-muted); padding: 16px;">Loading dashboard...</p></div>';
-      // Load both projectlist and files tree in parallel
-      await Promise.all([
-        loadProjectlist(),
-        loadFilesTreeIfNeeded()
-      ]);
-      renderDashboardTabContent();
-      checkStarterMode(); // Update polling state after initial load
-    }
-    // Load files tree if not already loaded
-    async function loadFilesTreeIfNeeded() {
-      if (!filesTreeLoaded) {
-        await loadFilesTree();
-      }
-    }
-    // Legacy function for backward compatibility (still used by polling)
-    function renderProjectsTabContent() {
-      // If dashboard tab is active, re-render dashboard instead
-      if (activeTabId === 'dashboard') {
-        renderDashboardTabContent();
-      }
-    }
-    // Legacy function alias
-    async function renderProjectsTab() {
-      await renderDashboardTab();
-    }
-    // Load projectlist.md from disk
-    async function loadProjectlist() {
-      try {
-        const response = await fetch('/file?path=codev/projectlist.md');
-        if (!response.ok) {
-          if (response.status === 404) {
-            // File not found - show welcome screen
-            projectsData = [];
-            projectlistError = null;
-            return;
-          }
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        const text = await response.text();
-        const newHash = hashString(text);
-        // Only re-parse if content changed
-        if (newHash !== projectlistHash) {
-          projectlistHash = newHash;
-          projectsData = parseProjectlist(text);
-          projectlistError = null;
-        }
-      } catch (err) {
-        console.error('Failed to load projectlist:', err);
-        projectlistError = 'Could not load projectlist.md: ' + err.message;
-        // Preserve last good state if available
-        if (projectsData.length === 0) {
-          projectsData = [];
-        }
-      }
-    }
-    // Reload projectlist (manual refresh button)
-    async function reloadProjectlist() {
-      projectlistHash = null; // Force re-parse
-      await loadProjectlist();
-      renderProjectsTabContent();
-      checkStarterMode(); // Update polling state after reload
-    }
-    // Poll projectlist for changes (every 5 seconds)
-    async function pollProjectlist() {
-      // Only poll if dashboard tab is active
-      if (activeTabId !== 'dashboard') return;
-      try {
-        const response = await fetch('/file?path=codev/projectlist.md');
-        if (!response.ok) return;
-        const text = await response.text();
-        const newHash = hashString(text);
-        if (newHash !== projectlistHash) {
-          // Content changed - debounce to avoid reading mid-write
-          clearTimeout(projectlistDebounce);
-          projectlistDebounce = setTimeout(async () => {
-            projectlistHash = newHash;
-            projectsData = parseProjectlist(text);
-            projectlistError = null;
-            renderProjectsTabContent();
-            checkStarterMode(); // Update polling state after content change
-          }, 500);
-        }
-      } catch (err) {
-        // Silently ignore polling errors
-      }
-    }
-    // Poll for projectlist.md creation when in starter mode (every 15 seconds)
-    let starterModePollingInterval = null;
-    async function pollForProjectlistCreation() {
-      try {
-        const response = await fetch('/api/projectlist-exists');
-        if (!response.ok) return;
-        const { exists } = await response.json();
-        if (exists) {
-          // projectlist.md was created - stop polling and reload
-          if (starterModePollingInterval) {
-            clearInterval(starterModePollingInterval);
-            starterModePollingInterval = null;
-          }
-          window.location.reload();
-        }
-      } catch (err) {
-        // Silently ignore polling errors
-      }
-    }
-    // Check if we should start starter mode polling
-    function checkStarterMode() {
-      // We're in starter mode ONLY if:
-      // 1. projectsData is empty (no projects loaded)
-      // 2. No error occurred
-      // 3. projectlistHash is null (file was not found, not just empty)
-      // This prevents infinite reload loop when file exists but is empty
-      const isStarterMode = projectsData.length === 0 && !projectlistError && projectlistHash === null;
-      if (isStarterMode && !starterModePollingInterval) {
-        // Start polling for projectlist.md creation
-        starterModePollingInterval = setInterval(pollForProjectlistCreation, 15000);
-      } else if (!isStarterMode && starterModePollingInterval) {
-        // Stop polling - file exists now (even if empty)
-        clearInterval(starterModePollingInterval);
-        starterModePollingInterval = null;
-      }
-    }
-    // Start projectlist polling (separate from main state polling)
-    setInterval(pollProjectlist, 5000);
-    // Initialize on load
-    init();
-  </script>
-</body>
-</html>