npm - bobs-workshop - Versions diffs - 0.1.8 → 0.2.0 - Mend

bobs-workshop 0.1.8 → 0.2.0

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

Files changed (29) hide show

package/README.md +34 -26
package/dist/dashboard/server.js +20 -23
package/dist/dashboard/server.js.map +1 -1
package/dist/index.js +81 -35
package/dist/index.js.map +1 -1
package/dist/prompts/architect.js +72 -13
package/dist/prompts/architect.js.map +1 -1
package/dist/prompts/debugger.js +69 -18
package/dist/prompts/debugger.js.map +1 -1
package/dist/prompts/engineer.js +89 -16
package/dist/prompts/engineer.js.map +1 -1
package/dist/prompts/orchestrator.js +125 -46
package/dist/prompts/orchestrator.js.map +1 -1
package/dist/prompts/reviewer.js +87 -2
package/dist/prompts/reviewer.js.map +1 -1
package/dist/services/activitySummarizer.js +36 -1
package/dist/services/activitySummarizer.js.map +1 -1
package/dist/tools/dashboardTools.js +6 -23
package/dist/tools/dashboardTools.js.map +1 -1
package/dist/tools/orchestratorTools.js +96 -29
package/dist/tools/orchestratorTools.js.map +1 -1
package/dist/tools/specTools.js +1 -19
package/dist/tools/specTools.js.map +1 -1
package/package.json +4 -2
package/public/.well-known/mcp/manifest.json +471 -0
package/public/index.html +3157 -0
package/public/index.html.backup +2805 -0
package/public/index.html.backup2 +1292 -0
package/scripts/cleanup-system-logs.ts +121 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,3157 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>🔧 Bob's Workshop - Manual Management Dashboard</title>
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+  <!-- Google Fonts: Poppins and Outfit -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      /* Color System */
+      --bg-primary: linear-gradient(to bottom, #000000 0%, #1a1a1a 50%, #1f1f21 100%);
+      --bg-glass: rgba(255, 255, 255, 0.1);
+      --bg-glass-hover: rgba(255, 255, 255, 0.15);
+      --border-glass: rgba(255, 255, 255, 0.2);
+      --text-primary: #ffffff;
+      --text-secondary: rgba(255, 255, 255, 0.8);
+      --text-muted: rgba(255, 255, 255, 0.6);
+      --accent-blue: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+      --accent-green: #10b981;
+      --accent-orange: #f59e0b;
+      --accent-yellow: #f59e0b;
+      --accent-red: #ef4444;
+      /* Typography */
+      --font-heading: 'Poppins', sans-serif;
+      --font-body: 'Outfit', sans-serif;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: var(--font-body);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+      overflow-x: hidden;
+      zoom: 0.69;
+    }
+    /* Glass morphism utility classes */
+    .glass {
+      background: var(--bg-glass);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--border-glass);
+      border-radius: 16px;
+    }
+    .glass-hover {
+      transition: all 0.3s ease;
+    }
+    .glass-hover:hover {
+      background: var(--bg-glass-hover);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+    /* Typography */
+    .heading {
+      font-family: var(--font-heading);
+      font-weight: 600;
+    }
+    .text-gradient {
+      background: var(--accent-orange);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    /* Header */
+    .header {
+      background: var(--bg-glass);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border-glass);
+      padding: 1.5rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 50;
+    }
+    .logo {
+      font-family: var(--font-heading);
+      font-size: 1.5rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    /* Metrics Cards */
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+      padding: 2rem;
+    }
+    .metric-card {
+      padding: 1.5rem;
+      background: var(--bg-glass);
+      backdrop-filter: blur(12px);
+      border-radius: 16px;
+      border: 1px solid var(--border-glass);
+      transition: all 0.3s ease;
+    }
+    .metric-card:hover {
+      background: var(--bg-glass-hover);
+      transform: translateY(-4px);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    }
+    .metric-value {
+      font-family: var(--font-heading);
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    .metric-label {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    /* Spec Table */
+    .spec-container {
+      margin: 2rem;
+      background: var(--bg-glass);
+      backdrop-filter: blur(12px);
+      border-radius: 20px;
+      border: 1px solid var(--border-glass);
+      border-top: 3px solid var(--accent-orange);
+      overflow: hidden;
+    }
+    .spec-header {
+      padding: 1.5rem 2rem;
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+      border-bottom: 1px solid var(--border-glass);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .spec-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .spec-table th {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 1rem 1.5rem;
+      text-align: left;
+      font-family: var(--font-heading);
+      font-weight: 600;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--border-glass);
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      transition: all 0.2s ease;
+    }
+    .spec-table th:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--text-primary);
+    }
+    .spec-table th.sortable::after {
+      content: '↕';
+      position: absolute;
+      right: 0.5rem;
+      opacity: 0.3;
+      font-size: 0.8rem;
+    }
+    .spec-table th.sorted-asc::after {
+      content: '↑';
+      opacity: 1;
+      color: var(--accent-blue);
+    }
+    .spec-table th.sorted-desc::after {
+      content: '↓';
+      opacity: 1;
+      color: var(--accent-blue);
+    }
+    .spec-table td {
+      padding: 1rem 1.5rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      transition: all 0.2s ease;
+    }
+    .spec-table tr:hover td {
+      background: rgba(255, 255, 255, 0.02);
+    }
+    /* Table gradient - darker at top, lighter only for last 4-5 rows */
+    .spec-table tbody {
+      background: linear-gradient(to bottom,
+        rgba(0, 0, 0, 0.4) 0%,
+        rgba(0, 0, 0, 0.3) 70%,
+        rgba(255, 255, 255, 0.02) 85%,
+        rgba(255, 255, 255, 0.05) 100%);
+    }
+    /* Status badges */
+    .status-badge {
+      padding: 0.25rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    /* New 4-state system with improved colors */
+    .status-draft { background: rgba(156, 163, 175, 0.2); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.3); }
+    .status-ready { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
+    .status-engineered { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
+    .status-done { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
+    /* Legacy state mapping for backward compatibility */
+    .status-planning { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
+    .status-implementation { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
+    .status-review { background: rgba(147, 51, 234, 0.2); color: #a855f7; border: 1px solid rgba(147, 51, 234, 0.3); }
+    .status-completed { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
+    .status-in-progress { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
+    /* Buttons */
+    .btn {
+      padding: 0.75rem 1.5rem;
+      border-radius: 12px;
+      font-family: var(--font-heading);
+      font-weight: 600;
+      font-size: 0.875rem;
+      border: none;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .btn-primary {
+      background: var(--accent-blue);
+      color: white;
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+    }
+    .btn-secondary {
+      background: var(--bg-glass);
+      backdrop-filter: blur(12px);
+      color: var(--text-primary);
+      border: 1px solid var(--border-glass);
+    }
+    .btn-secondary:hover {
+      background: var(--bg-glass-hover);
+      transform: translateY(-2px);
+    }
+    /* Modal */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(8px);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      z-index: 100;
+      padding: 1rem;
+      padding-top: 5vh; /* Move up by 10% from center (50vh - 10% = 40vh, but flex-start means 5vh works) */
+    }
+    .modal-content {
+      background: var(--bg-glass);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-glass);
+      border-radius: 24px;
+      width: 99vw;
+      height: 95vh;
+      max-width: none;
+      min-width: 1728px; /* Increased from 1440px by 20% (1440 * 1.2) */
+      min-height: 1000px;
+      display: grid;
+      grid-template-columns: 60% 40%;
+      grid-template-rows: auto 1fr;
+      overflow: hidden;
+    }
+    .modal-header {
+      grid-column: 1 / -1;
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid var(--border-glass);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .modal-title-section {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .worktree-info {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .modal-main-container {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%; /* Ensure full height usage */
+    }
+    .modal-nav {
+      padding: 1rem 2rem 0;
+      border-bottom: 1px solid var(--border-glass);
+    }
+    .nav-tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      overflow-x: auto;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+      padding-bottom: 0.5rem;
+    }
+    .nav-tabs::-webkit-scrollbar {
+      height: 4px;
+    }
+    .nav-tabs::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 2px;
+    }
+    .nav-tabs::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+    }
+    .nav-tabs::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+    .nav-tab {
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      color: var(--text-secondary);
+      font-family: var(--font-body);
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+      flex-shrink: 0;
+      min-width: fit-content;
+    }
+    .nav-tab:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-primary);
+    }
+    .nav-tab.active {
+      background: var(--accent-blue);
+      color: white;
+      border-color: var(--accent-blue);
+    }
+    .nav-tab.keyboard-focus {
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
+      outline: none;
+    }
+    .modal-main {
+      padding: 2rem;
+      overflow-y: auto;
+      flex: 1; /* Take all available space */
+      min-height: 0; /* Allow flex shrinking */
+    }
+    .spec-content {
+      background: rgba(255, 255, 255, 0.03);
+      padding: 2.5rem 3.5rem 2.5rem 3.5rem; /* Increased left padding for better breathing room */
+      border-radius: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      font-family: var(--font-body);
+      line-height: 1.7; /* Improved line height for better readability */
+      overflow-y: auto;
+      height: 100%; /* Use full available height */
+    }
+    .spec-content h1, .spec-content h2, .spec-content h3 {
+      color: var(--text-primary);
+      margin-top: 2.5rem; /* Increased top margin */
+      margin-bottom: 1.5rem; /* Increased bottom margin */
+      font-family: var(--font-heading);
+    }
+    .spec-content h1:first-child,
+    .spec-content h2:first-child,
+    .spec-content h3:first-child {
+      margin-top: 0; /* Remove top margin from first heading */
+    }
+    .spec-content h1 { font-size: 1.5rem; }
+    .spec-content h2 { font-size: 1.3rem; }
+    .spec-content h3 { font-size: 1.1rem; }
+    .spec-content p {
+      margin-bottom: 1.5rem; /* Increased paragraph spacing */
+      color: var(--text-secondary);
+    }
+    .spec-content ul, .spec-content ol {
+      margin-bottom: 1.5rem; /* Increased list spacing */
+      padding-left: 2rem; /* Better indentation */
+      color: var(--text-secondary);
+    }
+    .spec-content li {
+      margin-bottom: 0.75rem; /* Increased list item spacing */
+      line-height: 1.6;
+    }
+    .spec-content code {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 0.9em;
+      color: var(--accent-blue);
+    }
+    .spec-content pre {
+      background: rgba(0, 0, 0, 0.4);
+      padding: 1.5rem; /* Increased padding for code blocks */
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 2rem 0; /* Increased margin around code blocks */
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      line-height: 1.5;
+    }
+    .spec-content pre code {
+      background: none;
+      padding: 0;
+      color: var(--text-primary);
+    }
+    .spec-content blockquote {
+      border-left: 3px solid var(--accent-blue);
+      padding-left: 1rem;
+      margin: 1rem 0;
+      font-style: italic;
+      color: var(--text-secondary);
+    }
+    .spec-content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1rem 0;
+    }
+    .spec-content th, .spec-content td {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      padding: 0.75rem;
+      text-align: left;
+    }
+    .spec-content th {
+      background: rgba(255, 255, 255, 0.05);
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .spec-content a {
+      color: var(--accent-blue);
+      text-decoration: underline;
+    }
+    .spec-content a:hover {
+      color: #60a5fa;
+    }
+    .modal-activity {
+      border-left: 1px solid var(--border-glass);
+      overflow: hidden;
+      background: rgba(0, 0, 0, 0.1);
+      display: flex;
+      flex-direction: column;
+    }
+    .activity-nav {
+      padding: 1rem 1.5rem 0.5rem;
+    }
+    .activity-tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    .activity-tab {
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      color: var(--text-secondary);
+      font-family: var(--font-body);
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .activity-tab:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-primary);
+    }
+    .activity-tab.active {
+      background: var(--accent-blue);
+      color: white;
+      border-color: var(--accent-blue);
+    }
+    .activity-content {
+      overflow-y: auto;
+      min-height: 0; /* Allow flex shrinking */
+    }
+    .sidebar-nav {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .sidebar-nav li {
+      margin-bottom: 0.5rem;
+    }
+    .sidebar-nav button {
+      width: 100%;
+      text-align: left;
+      padding: 0.75rem;
+      border-radius: 8px;
+      background: transparent;
+      border: none;
+      color: var(--text-secondary);
+      font-family: var(--font-body);
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .sidebar-nav button:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-primary);
+    }
+    .sidebar-nav button.active {
+      background: var(--accent-blue);
+      color: white;
+    }
+    /* Timeline Activity Layout */
+    .timeline-container {
+      position: relative;
+      padding: 1rem 0;
+      min-height: 60vh;
+      height: 100%;
+    }
+    .timeline-line {
+      position: absolute;
+      left: 200px; /* Align with fixed left column width */
+      top: 0;
+      height: 100%; /* Dynamic height to extend through all content */
+      width: 2px;
+      background: linear-gradient(to bottom,
+        transparent 0%,
+        rgba(59, 130, 246, 0.3) 2%,
+        rgba(59, 130, 246, 0.6) 10%,
+        rgba(59, 130, 246, 0.6) 90%,
+        rgba(59, 130, 246, 0.3) 98%,
+        transparent 100%);
+      z-index: 1;
+    }
+    .timeline-item {
+      display: flex;
+      margin-bottom: 2.5rem; /* Increased spacing between timeline items */
+      position: relative;
+      align-items: flex-start; /* Better alignment */
+    }
+    .timeline-left {
+      flex: 0 0 200px; /* Fixed width for better alignment */
+      text-align: right;
+      padding-right: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 60px; /* Ensure minimum height */
+    }
+    .timeline-right {
+      flex: 1;
+      padding-left: 1.5rem;
+      min-width: 0; /* Allow content to shrink properly */
+    }
+    .timeline-marker {
+      position: absolute;
+      left: 200px; /* Align with timeline line */
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--accent-blue);
+      border: 3px solid var(--bg-primary);
+      box-shadow: 0 0 0 2px var(--accent-blue);
+      z-index: 2;
+    }
+    .timeline-marker.debugger { background: var(--accent-red); box-shadow: 0 0 0 2px var(--accent-red); }
+    .timeline-marker.engineer { background: var(--accent-green); box-shadow: 0 0 0 2px var(--accent-green); }
+    .timeline-marker.architect { background: var(--accent-orange); box-shadow: 0 0 0 2px var(--accent-orange); }
+    .timeline-marker.reviewer { background: var(--accent-purple); box-shadow: 0 0 0 2px var(--accent-purple); }
+    .timeline-marker.orchestrator { background: #6366f1; box-shadow: 0 0 0 2px #6366f1; }
+    .timeline-marker.system { background: var(--text-muted); box-shadow: 0 0 0 2px var(--text-muted); }
+    /* Role-based status badge colors */
+    .status-badge.role-system { background: rgba(156, 163, 175, 0.2); color: var(--text-muted); }
+    .status-badge.role-engineer { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); }
+    .status-badge.role-architect { background: rgba(245, 158, 11, 0.2); color: var(--accent-orange); }
+    .status-badge.role-debugger { background: rgba(239, 68, 68, 0.2); color: var(--accent-red); }
+    .status-badge.role-reviewer { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); }
+    .status-badge.role-orchestrator { background: rgba(99, 102, 241, 0.2); color: #6366f1; }
+    .timeline-time {
+      font-size: 0.8rem; /* Slightly larger font */
+      color: var(--text-muted);
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      margin-bottom: 0.75rem; /* More space between time and role */
+      line-height: 1.4;
+    }
+    .timeline-role {
+      font-weight: 700; /* Bold headings only */
+      color: var(--text-primary);
+      margin-bottom: 0.5rem; /* More space after role */
+      font-size: 0.9rem;
+    }
+    .timeline-content {
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 12px;
+      padding: 1rem 1.25rem;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(12px);
+      transition: all 0.2s ease;
+      margin-bottom: 0.5rem;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    }
+    .timeline-content:hover {
+      background: rgba(255, 255, 255, 0.06);
+      border-color: rgba(255, 255, 255, 0.15);
+      transform: translateY(-1px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+    .activity-role {
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 0.25rem;
+    }
+    .activity-note {
+      font-size: 0.9rem; /* Slightly larger for better readability */
+      color: var(--text-secondary);
+      line-height: 1.5;
+      margin-bottom: 0.5rem;
+    }
+    /* Compliance Status Design System */
+    .compliance-compliant {
+      background: rgba(34, 197, 94, 0.1);
+      border-color: rgba(34, 197, 94, 0.3);
+      color: #22c55e;
+    }
+    .compliance-deviation {
+      background: rgba(245, 158, 11, 0.1);
+      border-color: rgba(245, 158, 11, 0.3);
+      color: #f59e0b;
+    }
+    .compliance-unexpected {
+      background: rgba(249, 115, 22, 0.1);
+      border-color: rgba(249, 115, 22, 0.3);
+      color: #f97316;
+    }
+    .compliance-unknown {
+      background: rgba(107, 114, 128, 0.1);
+      border-color: rgba(107, 114, 128, 0.3);
+      color: #6b7280;
+    }
+    /* Compliance Badge */
+    .compliance-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.125rem 0.5rem;
+      border-radius: 12px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border: 1px solid;
+    }
+    /* Enhanced File Change Cards */
+    .file-change-card {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 8px;
+      padding: 1rem;
+      margin-bottom: 0.75rem;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      transition: all 0.2s ease;
+    }
+    .file-change-card:hover {
+      background: rgba(255, 255, 255, 0.04);
+      transform: translateY(-1px);
+    }
+    .file-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+    .file-icon {
+      font-size: 1rem;
+    }
+    .file-name {
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 0.85rem;
+      color: var(--text-primary);
+      flex: 1;
+    }
+    .file-description {
+      color: var(--text-secondary);
+      font-size: 0.85rem;
+      margin-bottom: 0.5rem;
+      line-height: 1.4;
+    }
+    .file-meta {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    .change-type {
+      padding: 0.125rem 0.5rem;
+      border-radius: 12px;
+      background: rgba(99, 102, 241, 0.1);
+      color: #818cf8;
+      border: 1px solid rgba(99, 102, 241, 0.2);
+    }
+    .lines-changed {
+      color: var(--text-secondary);
+    }
+    /* Responsive design */
+    @media (max-width: 768px) {
+      .metrics-grid {
+        grid-template-columns: 1fr;
+        padding: 1rem;
+      }
+      .spec-container {
+        margin: 1rem;
+      }
+      .modal-content {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto 1fr auto;
+      }
+      .modal-sidebar,
+      .modal-activity {
+        border: none;
+        border-top: 1px solid var(--border-glass);
+      }
+    }
+    /* Loading animation */
+    .loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: #ffffff;
+      animation: spin 1s ease-in-out infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    /* Fade in animation */
+    .fade-in {
+      animation: fadeIn 0.5s ease-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* Status Banner */
+    .status-banner {
+      background: var(--bg-glass);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--border-glass);
+      border-left: 4px solid var(--accent-orange);
+      border-radius: 16px;
+      margin: 1.5rem 2rem;
+      padding: 1.5rem 2rem;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    }
+    .status-content {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: center;
+      gap: 1rem;
+    }
+    .status-left {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-size: 0.95rem;
+    }
+    .workshop-icon {
+      font-size: 1.2rem;
+    }
+    .workshop-name {
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .status-separator {
+      color: var(--text-muted);
+      margin: 0 0.25rem;
+    }
+    .build-status .building {
+      color: var(--accent-yellow);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .build-status .idle {
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .building-icon {
+      animation: spin 2s linear infinite;
+    }
+    .status-right {
+      font-size: 0.9rem;
+    }
+    .worktree-stats {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .stat-label {
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+    .stat-value {
+      color: var(--text-primary);
+    }
+    .stat-value.draft {
+      color: #9ca3af;
+    }
+    .stat-value.in-progress {
+      color: var(--accent-yellow);
+    }
+    .stat-value.done {
+      color: var(--accent-green);
+    }
+    .stat-value.committed {
+      color: var(--accent-green);
+    }
+    .stat-value.dirty {
+      color: var(--accent-yellow);
+    }
+    .stat-value.clean {
+      color: var(--text-secondary);
+    }
+    /* Responsive adjustments for status banner */
+    @media (max-width: 768px) {
+      .status-banner {
+        margin: 1rem;
+        padding: 1rem;
+      }
+      .status-content {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .worktree-stats {
+        font-size: 0.8rem;
+      }
+    }
+    .btn {
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      font-size: 0.85rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(59, 130, 246, 1) 100%);
+      border: 1px solid rgba(59, 130, 246, 1);
+      color: white;
+    }
+    .btn-primary:hover {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(79, 150, 255, 1) 100%);
+      transform: translateY(-1px);
+    }
+    .btn-secondary {
+      background: rgba(34, 197, 94, 0.1);
+      border: 1px solid rgba(34, 197, 94, 0.3);
+      color: rgba(34, 197, 94, 1);
+    }
+    .btn-secondary:hover {
+      background: rgba(34, 197, 94, 0.2);
+    }
+    .btn-danger {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      color: rgba(239, 68, 68, 1);
+    }
+    .btn-danger:hover {
+      background: rgba(239, 68, 68, 0.2);
+    }
+  </style>
+</head>
+  <script>
+    document.addEventListener('alpine:init', () => {
+      Alpine.data('dashboard', () => ({
+        selectedSpec: null,
+        section: 'summary',
+        activityTab: 'activity',
+        specs: [],
+        filteredSpecs: [],
+        loading: false,
+        searchTerm: '',
+        categoryFilter: 'all',
+        statusFilter: 'all',
+        showActivityLog: false,
+        showWorktreeModal: false,
+        activities: [],
+        // Main prompt interface
+        mainPrompt: '',
+        selectedTemplate: '',
+        uploadedImages: [], // Array of {id, filename, path, placeholder}
+        imageCounter: 0,
+        // Toast notifications
+        toasts: [],
+        sortBy: 'modified',
+        sortDirection: 'desc',
+        confirmDelete: null,
+        // Button state tracking for copy buttons
+        buttonStates: {},
+        // Keyboard navigation
+        selectedRowIndex: 0,
+        keyboardMode: false,
+        // Section navigation
+        sectionKeyboardMode: false,
+        hasContent(section) {
+          try {
+            // Special handling for log sections (stored as arrays, not in sections object)
+            if (section === 'execution_logs' || section === 'execution_log') {
+              const logs = this.selectedSpec?.execution_logs || this.selectedSpec?.execution_log || [];
+              return Array.isArray(logs) && logs.length > 0;
+            }
+            if (section === 'debug_logs' || section === 'debug_log') {
+              const logs = this.selectedSpec?.debug_logs || this.selectedSpec?.debug_log || [];
+              return Array.isArray(logs) && logs.length > 0;
+            }
+            // Regular section content check
+            if (!this.selectedSpec?.sections) return false;
+            const sectionData = this.selectedSpec.sections[section];
+            return sectionData && sectionData.content && sectionData.content.trim() !== '';
+          } catch (error) {
+            console.warn('Error checking content for section:', section, error);
+            return false;
+          }
+        },
+        getAvailableSections() {
+          try {
+            if (!this.selectedSpec?.sections) return [
+              { id: 'summary', label: 'Summary', key: 'executive_summary' }
+            ];
+            const sections = [
+              { id: 'summary', label: 'Summary', key: 'executive_summary' },
+              { id: 'product', label: 'Product', key: 'product_specifications' },
+              { id: 'architecture', label: 'Architecture', key: 'architecture_analysis' },
+              { id: 'implementation', label: 'Implementation', key: 'implementation_plan' },
+              { id: 'research', label: 'Research', key: 'research' },
+              { id: 'testing', label: 'Testing', key: 'testing' },
+              { id: 'execution', label: '🛠️ Execution Logs', key: 'execution_logs' },
+              { id: 'debug', label: '🐛 Debug Logs', key: 'debug_logs' },
+              { id: 'review', label: 'Review', key: 'review' }
+            ];
+            return sections.filter(section => this.hasContent(section.key));
+          } catch (error) {
+            console.warn('Error getting available sections:', error);
+            return [{ id: 'summary', label: 'Summary', key: 'executive_summary' }];
+          }
+        },
+        async fetchSpecs() {
+          this.loading = true;
+          try {
+            const response = await fetch('/api/tools/bob.spec.list');
+            const data = await response.json();
+            this.specs = data.specs || [];
+            this.filterSpecs();
+            // Initialize real-time events after first load
+            this.initRealTimeEvents();
+          } catch (error) {
+            console.error('Failed to fetch specs:', error);
+          } finally {
+            this.loading = false;
+          }
+        },
+        initRealTimeEvents() {
+          if (this.eventSource) return; // Already initialized
+          // Real-time event streaming
+          this.eventSource = new EventSource('/api/events/stream');
+          this.activeOperations = new Map();
+          this.eventSource.onmessage = (event) => {
+            const operation = JSON.parse(event.data);
+            if (operation.type === 'connected') return;
+            // Update timeline card with sub-events
+            this.updateTimelineCardWithSubEvents(operation);
+          };
+          this.eventSource.onerror = (error) => {
+            console.warn('SSE connection error:', error);
+            // Reconnect after 5 seconds
+            setTimeout(() => {
+              this.eventSource.close();
+              this.eventSource = null;
+              this.initRealTimeEvents();
+            }, 5000);
+          };
+        },
+        updateTimelineCardWithSubEvents(operation) {
+          // Find or create timeline card for this operation
+          const existingActivity = this.activities.find(activity =>
+            activity.spec_id === operation.spec_id &&
+            activity.operation_id === operation.id
+          );
+          if (existingActivity) {
+            // Update existing activity with sub-events
+            existingActivity.sub_events = operation.sub_events || [];
+            existingActivity.operation = operation.operation;
+          } else if (operation.type !== 'tool_call') {
+            // Add new activity for non-tool-call operations (role transitions, etc.)
+            this.activities.unshift({
+              timestamp: operation.timestamp,
+              spec_id: operation.spec_id,
+              operation_id: operation.id,
+              operation: operation.operation,
+              type: operation.type,
+              sub_events: operation.sub_events || [],
+              role: this.getRoleFromOperationType(operation.type)
+            });
+            // Keep only last 50 activities
+            if (this.activities.length > 50) {
+              this.activities = this.activities.slice(0, 50);
+            }
+          }
+        },
+        getRoleFromOperationType(type) {
+          const roleMap = {
+            'role_transition': 'orchestrator',
+            'engineer_session': 'engineer',
+            'debug_session': 'debugger',
+            'review_session': 'reviewer',
+            'tool_call': 'system'
+          };
+          return roleMap[type] || 'system';
+        },
+        sortSpecs(column) {
+          if (this.sortBy === column) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+          } else {
+            this.sortBy = column;
+            this.sortDirection = column === 'created_at' ? 'desc' : 'asc';
+          }
+          this.filterSpecs();
+        },
+        filterSpecs() {
+          this.filteredSpecs = this.specs.filter(spec => {
+            const matchesSearch = this.searchTerm === '' ||
+              spec.title.toLowerCase().includes(this.searchTerm.toLowerCase());
+            const matchesCategory = this.categoryFilter === 'all' ||
+              spec.category === this.categoryFilter;
+            const matchesStatus = this.statusFilter === 'all' ||
+              spec.state === this.statusFilter;
+            return matchesSearch && matchesCategory && matchesStatus;
+          });
+          // Sort filtered results
+          this.filteredSpecs.sort((a, b) => {
+            let valueA, valueB;
+            switch (this.sortBy) {
+              case 'title':
+                valueA = a.title?.toLowerCase() || '';
+                valueB = b.title?.toLowerCase() || '';
+                break;
+              case 'category':
+                valueA = a.category?.toLowerCase() || '';
+                valueB = b.category?.toLowerCase() || '';
+                break;
+              case 'state':
+                valueA = a.state?.toLowerCase() || '';
+                valueB = b.state?.toLowerCase() || '';
+                break;
+              case 'created_at':
+                valueA = new Date(a.created_at || '').getTime();
+                valueB = new Date(b.created_at || '').getTime();
+                break;
+              case 'modified':
+                valueA = new Date(a.updated_at || a.created_at || '').getTime();
+                valueB = new Date(b.updated_at || b.created_at || '').getTime();
+                break;
+              default:
+                return 0;
+            }
+            if (this.sortBy === 'created_at' || this.sortBy === 'modified') {
+              return this.sortDirection === 'desc' ? valueB - valueA : valueA - valueB;
+            } else {
+              if (valueA < valueB) return this.sortDirection === 'desc' ? 1 : -1;
+              if (valueA > valueB) return this.sortDirection === 'desc' ? -1 : 1;
+              return 0;
+            }
+          });
+        },
+        confirmDeleteSpec(specId, title) {
+          console.log('Confirming delete for:', specId, title);
+          this.confirmDelete = { id: specId, title: title };
+        },
+        cancelDelete() {
+          this.confirmDelete = null;
+        },
+        async deleteSpec() {
+          if (!this.confirmDelete) {
+            console.error('No confirmDelete object found');
+            return;
+          }
+          const specId = this.confirmDelete.id;
+          const title = this.confirmDelete.title;
+          console.log('Deleting spec:', specId, title);
+          try {
+            const response = await fetch('/api/tools/bob.spec.delete', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ spec_id: specId })
+            });
+            const result = await response.json();
+            console.log('Delete response:', result);
+            if (response.ok && (result.status === 'deleted' || result.success)) {
+              // Remove from local arrays
+              this.specs = this.specs.filter(spec => spec.spec_id !== specId);
+              this.filteredSpecs = this.filteredSpecs.filter(spec => spec.spec_id !== specId);
+              this.confirmDelete = null;  // Close the confirmation modal
+              this.showToast(`✅ Manual "${title}" deleted successfully`, 'success');
+            } else {
+              console.error('Delete failed:', result);
+              this.showToast(`❌ Failed to delete manual: ${result.error || result.message || 'Unknown error'}`, 'error');
+            }
+          } catch (error) {
+            console.error('Error deleting spec:', error);
+            this.showToast('❌ Error deleting manual. Please try again.', 'error');
+          }
+        },
+        async openSpec(specId) {
+          try {
+            const response = await fetch('/api/tools/bob.spec.get', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ spec_id: specId })
+            });
+            const spec = await response.json();
+            this.selectedSpec = spec;
+            // Set to first available section with content
+            const availableSections = this.getAvailableSections();
+            this.section = availableSections.length > 0 ? availableSections[0].id : 'summary';
+          } catch (error) {
+            console.error('Failed to fetch spec:', error);
+            alert('Failed to load MANUAL details');
+          }
+        },
+        async exportToMarkdown(specId) {
+          try {
+            const response = await fetch('/api/tools/bob.spec.export', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ spec_id: specId })
+            });
+            const data = await response.json();
+            if (data.markdown_path) {
+              alert(`✅ MANUAL exported to: ${data.markdown_path}`);
+            } else {
+              alert('❌ Export failed');
+            }
+          } catch (error) {
+            console.error('Export error:', error);
+            alert('❌ Export failed');
+          }
+        },
+        getWorktreeName(spec) {
+          // Generate worktree name from spec title
+          if (!spec || !spec.title) return 'none';
+          return 'feature/' + spec.title.toLowerCase()
+            .replace(/[^a-z0-9\s]/g, '')
+            .replace(/\s+/g, '-')
+            .substring(0, 20);
+        },
+        renderMarkdown(text) {
+          if (!text) return '';
+          // Escape HTML first
+          text = text.replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;');
+          // Handle language-specific code blocks with copy buttons
+          text = text.replace(/```(\w+)?\n?([\s\S]*?)\n?```/g, (match, language, code) => {
+            const cleanCode = code.trim();
+            const copyId = 'copy_' + Math.random().toString(36).substr(2, 9);
+            const lang = language || 'code';
+            // Special handling for JSON - format it nicely
+            let formattedCode = cleanCode;
+            if (lang === 'json') {
+              try {
+                const parsed = JSON.parse(cleanCode);
+                formattedCode = JSON.stringify(parsed, null, 2);
+              } catch (e) {
+                // If JSON parsing fails, use original code
+                formattedCode = cleanCode;
+              }
+            }
+            // Language display names
+            const languageNames = {
+              'js': 'JavaScript',
+              'javascript': 'JavaScript',
+              'ts': 'TypeScript',
+              'typescript': 'TypeScript',
+              'json': 'JSON',
+              'bash': 'Bash',
+              'sh': 'Shell',
+              'python': 'Python',
+              'py': 'Python',
+              'html': 'HTML',
+              'css': 'CSS',
+              'yaml': 'YAML',
+              'yml': 'YAML',
+              'xml': 'XML',
+              'sql': 'SQL',
+              'java': 'Java',
+              'go': 'Go',
+              'rust': 'Rust',
+              'cpp': 'C++',
+              'c': 'C',
+              'php': 'PHP',
+              'ruby': 'Ruby',
+              'swift': 'Swift',
+              'kotlin': 'Kotlin',
+              'dart': 'Dart',
+              'scala': 'Scala',
+              'r': 'R',
+              'matlab': 'MATLAB'
+            };
+            const displayName = languageNames[lang.toLowerCase()] || lang.charAt(0).toUpperCase() + lang.slice(1);
+            return `&lt;div class="code-block-container"&gt;
+              &lt;div class="code-block-header"&gt;
+                &lt;span class="code-lang"&gt;${displayName}&lt;/span&gt;
+                &lt;button class="copy-code-btn" onclick="copyToClipboard('${formattedCode.replace(/'/g, "\\'")}', '${copyId}')" id="${copyId}"&gt;📋 Copy&lt;/button&gt;
+              &lt;/div&gt;
+              &lt;pre&gt;&lt;code&gt;${formattedCode}&lt;/code&gt;&lt;/pre&gt;
+            &lt;/div&gt;`;
+          });
+          // Protect code block content from further processing
+          const codeBlockPlaceholders = [];
+          text = text.replace(/(&lt;div class="code-block-container"&gt;[\s\S]*?&lt;\/div&gt;)/g, (match) => {
+            const placeholder = `__CODE_BLOCK_${codeBlockPlaceholders.length}__`;
+            codeBlockPlaceholders.push(match);
+            return placeholder;
+          });
+          // Simple markdown renderer (now safe from code block interference)
+          let html = text
+            // Headers
+            .replace(/^### (.*$)/gim, '&lt;h3&gt;$1&lt;/h3&gt;')
+            .replace(/^## (.*$)/gim, '&lt;h2&gt;$1&lt;/h2&gt;')
+            .replace(/^# (.*$)/gim, '&lt;h1&gt;$1&lt;/h1&gt;')
+            // Bold
+            .replace(/\*\*(.*?)\*\*/g, '&lt;strong&gt;$1&lt;/strong&gt;')
+            // Italic
+            .replace(/\*(.*?)\*/g, '&lt;em&gt;$1&lt;/em&gt;')
+            // Inline code
+            .replace(/`([^`]+)`/g, '&lt;code class="inline-code"&gt;$1&lt;/code&gt;')
+            // Line breaks
+            .replace(/\n\n/g, '&lt;/p&gt;&lt;p&gt;')
+            .replace(/\n/g, '&lt;br&gt;')
+            // Lists
+            .replace(/^\* (.*$)/gim, '&lt;li&gt;$1&lt;/li&gt;')
+            .replace(/^- (.*$)/gim, '&lt;li&gt;$1&lt;/li&gt;')
+            // Checkmarks and emojis
+            .replace(/✅/g, '✅')
+            .replace(/🚀/g, '🚀')
+            .replace(/🔗/g, '🔗')
+            .replace(/📋/g, '📋')
+            // Wrap in paragraphs
+            .replace(/^(?!&lt;)/gm, '&lt;p&gt;')
+            .replace(/$/gm, '&lt;/p&gt;')
+            // Clean up
+            .replace(/&lt;\/p&gt;&lt;p&gt;/g, '&lt;/p&gt;\n&lt;p&gt;')
+            .replace(/(&lt;li&gt;.*&lt;\/li&gt;)/gs, '&lt;ul&gt;$1&lt;/ul&gt;')
+            .replace(/&lt;p&gt;&lt;\/p&gt;/g, '');
+          // Restore code blocks
+          codeBlockPlaceholders.forEach((codeBlock, index) => {
+            html = html.replace(`__CODE_BLOCK_${index}__`, codeBlock);
+          });
+          // Unescape the HTML tags we want
+          return html.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+        },
+        simplifyFilePath(fullPath) {
+          if (!fullPath) return '';
+          // Extract just the repo name and path after it
+          const match = fullPath.match(/\/([^\/]+)\/(.+)$/);
+          if (match && match[1] && match[2]) {
+            return `${match[1]}/${match[2]}`;
+          }
+          return fullPath; // fallback to full path if pattern doesn't match
+        },
+        // Helper functions for enhanced file change visualization
+        getFileName(filePath) {
+          if (!filePath) return '';
+          return filePath.split('/').pop() || filePath;
+        },
+        getFileIcon(filePath) {
+          if (!filePath) return '📄';
+          const ext = filePath.split('.').pop()?.toLowerCase();
+          const iconMap = {
+            'ts': '🟦', 'tsx': '🔷', 'js': '🟨', 'jsx': '🔸',
+            'json': '📋', 'md': '📖', 'css': '🎨', 'html': '🌐',
+            'vue': '💚', 'py': '🐍', 'go': '🐹', 'rs': '🦀',
+            'yml': '⚙️', 'yaml': '⚙️', 'xml': '📜', 'sql': '🗃️'
+          };
+          return iconMap[ext] || '📄';
+        },
+        getComplianceClass(fileChange) {
+          const status = fileChange?.compliance_status || 'unknown';
+          return `compliance-${status}`;
+        },
+        getComplianceCardClass(fileChange) {
+          const status = fileChange?.compliance_status || 'unknown';
+          return `compliance-${status}-border`;
+        },
+        getComplianceBadge(fileChange) {
+          const status = fileChange?.compliance_status || 'unknown';
+          const badgeMap = {
+            'compliant': '✅ Compliant',
+            'deviation': '⚠️ Deviation',
+            'unexpected': '❓ Unexpected',
+            'unknown': '⚪ Unknown'
+          };
+          return badgeMap[status] || '⚪ Unknown';
+        },
+        getActivityTimeline(spec) {
+          if (!spec) return [];
+          // PRIORITY 1: Use pre-built timeline from backend (includes enhanced activities)
+          // Backend already prioritizes enhanced_activities and enriches with git diff
+          if (spec.timeline && spec.timeline.length > 0) {
+            // Timeline already sorted by backend, reverse for newest first
+            return spec.timeline.slice().reverse().slice(0, 50);
+          }
+          // PRIORITY 2: Build timeline from enhanced_activities if available
+          const timeline = [];
+          const enhancedActivities = spec.enhanced_activities || [];
+          if (enhancedActivities.length > 0) {
+            enhancedActivities.forEach(activity => {
+              timeline.push({
+                ...activity,
+                human_description: activity.summary,
+                is_enhanced: true
+              });
+            });
+            // Sort by timestamp and return
+            return timeline.sort((a, b) =>
+              new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+            ).slice(0, 50);
+          }
+          // FALLBACK: Build timeline client-side from legacy logs
+          // Add execution logs
+          const executionLogs = spec.execution_logs || spec.execution_log || [];
+          executionLogs.forEach(log => {
+            timeline.push({
+              ...log,
+              type: 'execution',
+              role: 'Engineer',
+              is_enhanced: false
+            });
+          });
+          // Add debug logs
+          const debugLogs = spec.debug_logs || spec.debug_log || [];
+          debugLogs.forEach(log => {
+            timeline.push({
+              ...log,
+              type: 'debug',
+              role: 'Debugger',
+              is_enhanced: false
+            });
+          });
+          // Add activity logs (new field for spec activity tracking)
+          if (spec.activity) {
+            spec.activity.forEach(activity => {
+              timeline.push({
+                ...activity,
+                type: activity.type || 'activity',
+                action: activity.action || activity.note || 'Activity logged',
+                is_enhanced: false
+              });
+            });
+          }
+          // Add synthetic spec creation event if timeline is empty
+          if (timeline.length === 0 && spec.created_at) {
+            timeline.push({
+              timestamp: spec.created_at,
+              type: 'spec_created',
+              role: 'Architect',
+              action: 'Created MANUAL',
+              note: `MANUAL ${spec.spec_id} created`,
+              is_enhanced: false
+            });
+          }
+          // Add worktree creation if it exists
+          if (spec.worktree && timeline.length <= 2) {
+            const workTreeTime = new Date(spec.modified_at || Date.now()).toISOString();
+            timeline.push({
+              timestamp: workTreeTime,
+              type: 'worktree_created',
+              role: 'System',
+              action: 'worktree_created',
+              note: `Created worktree: ${spec.worktree}`,
+              branch: spec.worktree,
+              is_enhanced: false
+            });
+          }
+          // Sort by timestamp (newest first for better UX)
+          return timeline.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()).slice(0, 50);
+        },
+        async loadActivityLog() {
+          try {
+            // Load real activity from dashboard API
+            const response = await fetch('/api/dashboard-data');
+            const data = await response.json();
+            // Format recent changes for display
+            this.activities = (data.recent_changes || []).slice(0, 20).map(change => ({
+              timestamp: change.timestamp,
+              type: change.event || change.type,
+              author: change.role || 'system',
+              message: this.formatActivityMessage(change),
+              spec_id: change.spec_id,
+              data: change.data
+            }));
+          } catch (error) {
+            console.error('Failed to load activity log:', error);
+            // Fallback to empty state
+            this.activities = [];
+          }
+          this.showActivityLog = true;
+        },
+        formatActivityMessage(change) {
+          if (change.event === 'orchestrator_routing') {
+            return `Orchestrator routed to ${change.data?.target_mode} mode`;
+          } else if (change.event === 'mcp_tool_workshop') {
+            return `MCP tool executed: ${change.data?.tool_name} (${change.data?.duration_ms}ms)`;
+          } else if (change.type === 'file') {
+            return `File changed: ${change.path}`;
+          } else {
+            return change.event || change.type || 'Unknown activity';
+          }
+        },
+        showToast(message, type = 'info') {
+          console.log('🔔 showToast called:', message, type);
+          const toast = {
+            id: Date.now() + Math.random(),
+            message,
+            type,
+            visible: true
+          };
+          console.log('🔔 Toast object created:', toast);
+          this.toasts.push(toast);
+          console.log('🔔 Toasts array after push:', this.toasts.length, this.toasts);
+          // Auto-remove after 4 seconds
+          setTimeout(() => {
+            console.log('🔔 Removing toast:', toast.id);
+            this.removeToast(toast.id);
+          }, 4000);
+        },
+        removeToast(id) {
+          const index = this.toasts.findIndex(toast => toast.id === id);
+          if (index !== -1) {
+            this.toasts.splice(index, 1);
+          }
+        },
+        async handleImagePaste(event) {
+          const items = event.clipboardData?.items;
+          if (!items) return;
+          for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.type.startsWith('image/')) {
+              event.preventDefault();
+              const file = item.getAsFile();
+              if (file) {
+                await this.uploadImageFile(file);
+              }
+            }
+          }
+        },
+        async uploadImageFile(file) {
+          try {
+            const formData = new FormData();
+            formData.append('image', file);
+            const response = await fetch('/api/images/upload-inline', {
+              method: 'POST',
+              body: formData
+            });
+            const result = await response.json();
+            if (response.ok && result.success) {
+              // Add image to uploaded list
+              this.uploadedImages.push(result.placeholder);
+              // Insert placeholder into prompt text at cursor position
+              const placeholder = `[🖼️ ${result.placeholder.filename}]`;
+              this.insertTextAtCursor(placeholder);
+              this.addToast(`📎 Image uploaded: ${result.placeholder.filename}`, 'success');
+            } else {
+              throw new Error(result.error || 'Upload failed');
+            }
+          } catch (error) {
+            console.error('Image upload error:', error);
+            this.addToast(`Failed to upload image: ${error.message}`, 'error');
+          }
+        },
+        async handleImageDrop(event) {
+          const files = event.dataTransfer?.files;
+          if (!files) return;
+          for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (file.type.startsWith('image/')) {
+              await this.uploadImageFile(file);
+            }
+          }
+        },
+        insertTextAtCursor(text) {
+          // Simple text insertion - append to current prompt
+          if (this.mainPrompt) {
+            this.mainPrompt += ' ' + text;
+          } else {
+            this.mainPrompt = text;
+          }
+        },
+        removeImage(imageId) {
+          // Remove from uploaded images
+          this.uploadedImages = this.uploadedImages.filter(img => img.id !== imageId);
+          // Remove placeholder from prompt text
+          const placeholderPattern = new RegExp(`\\[🖼️ ${imageId}\\.(png|jpg|jpeg|gif|webp)\\]`, 'gi');
+          this.mainPrompt = this.mainPrompt.replace(placeholderPattern, '').trim();
+          this.addToast('Image removed', 'info');
+        },
+        translatePromptWithImages() {
+          let translatedPrompt = this.mainPrompt;
+          // Replace image placeholders with file paths
+          this.uploadedImages.forEach(image => {
+            const placeholderPattern = new RegExp(`\\[🖼️ ${image.filename}\\]`, 'g');
+            translatedPrompt = translatedPrompt.replace(placeholderPattern, image.path);
+          });
+          return translatedPrompt;
+        },
+        // Duplicate toast system removed - using main toast system at line 1020
+        getToastIcon(type) {
+          switch (type) {
+            case 'success': return '✅';
+            case 'error': return '❌';
+            case 'warning': return '⚠️';
+            case 'info': return 'ℹ️';
+            default: return '💬';
+          }
+        },
+        getToastColor(type) {
+          switch (type) {
+            case 'success': return 'rgba(34, 197, 94, 0.9)';
+            case 'error': return 'rgba(239, 68, 68, 0.9)';
+            case 'warning': return 'rgba(245, 158, 11, 0.9)';
+            case 'info': return 'rgba(59, 130, 246, 0.9)';
+            default: return 'rgba(75, 85, 99, 0.9)';
+          }
+        },
+        // Keyboard navigation methods
+        handleKeydown(event) {
+          // Handle Tab navigation when in a manual modal
+          if (this.selectedSpec) {
+            switch(event.key) {
+              case 'Tab':
+                event.preventDefault();
+                this.navigateToNextSection(event.shiftKey);
+                break;
+            }
+            return;
+          }
+          // Only handle keys when not in other modals and when we have specs
+          if (this.showActivityLog || this.showWorktreeModal || this.filteredSpecs.length === 0) {
+            return;
+          }
+          switch(event.key) {
+            case 'ArrowDown':
+              event.preventDefault();
+              this.keyboardMode = true;
+              this.selectedRowIndex = Math.min(this.selectedRowIndex + 1, this.filteredSpecs.length - 1);
+              this.scrollToSelectedRow();
+              break;
+            case 'ArrowUp':
+              event.preventDefault();
+              this.keyboardMode = true;
+              this.selectedRowIndex = Math.max(this.selectedRowIndex - 1, 0);
+              this.scrollToSelectedRow();
+              break;
+            case 'Enter':
+              event.preventDefault();
+              if (this.keyboardMode && this.filteredSpecs[this.selectedRowIndex]) {
+                this.openSpec(this.filteredSpecs[this.selectedRowIndex].spec_id);
+              }
+              break;
+            case 'Delete':
+            case 'Backspace':
+              event.preventDefault();
+              if (this.keyboardMode && this.filteredSpecs[this.selectedRowIndex]) {
+                const spec = this.filteredSpecs[this.selectedRowIndex];
+                this.confirmDeleteSpec(spec.spec_id, spec.title);
+              }
+              break;
+          }
+        },
+        scrollToSelectedRow() {
+          this.$nextTick(() => {
+            const table = document.querySelector('.spec-table tbody');
+            const rows = table?.querySelectorAll('tr');
+            if (rows && rows[this.selectedRowIndex]) {
+              rows[this.selectedRowIndex].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+              });
+            }
+          });
+        },
+        isRowSelected(index) {
+          return this.keyboardMode && this.selectedRowIndex === index;
+        },
+        // Section navigation methods
+        navigateToNextSection(reverse = false) {
+          const sections = this.getAvailableSections();
+          if (sections.length <= 1) return; // No navigation needed with 0 or 1 sections
+          const currentIndex = sections.findIndex(s => s.id === this.section);
+          let nextIndex;
+          if (reverse) {
+            // Shift+Tab: go to previous section
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : sections.length - 1;
+          } else {
+            // Tab: go to next section
+            nextIndex = currentIndex < sections.length - 1 ? currentIndex + 1 : 0;
+          }
+          this.section = sections[nextIndex].id;
+          this.sectionKeyboardMode = true;
+        },
+      }));
+    });
+  </script>
+<body class="h-full" x-data="dashboard" x-init="fetchSpecs()" @keydown.escape.window="selectedSpec = null; showActivityLog = false; showWorktreeModal = false" @keydown.window="handleKeydown($event)">
+  <!-- Header -->
+  <header class="header">
+    <div class="logo">
+      <span style="color: var(--accent-orange);">👷</span>
+      <span class="text-gradient" style="text-transform: lowercase;">Bob's Workshop</span>
+    </div>
+    <!-- Separate Metric Boxes -->
+    <div style="display: flex; align-items: center; gap: 1rem;"
+         x-data="{
+           worktrees: { committed: 0, dirty: 0, clean: 0 },
+           specs: { draft: 0, 'in-progress': 0, completed: 0 },
+           async loadMetrics() {
+             try {
+               const [worktreesRes, specsRes] = await Promise.all([
+                 fetch('/api/tools/bob.worktree.list').catch(() => ({ json: () => ({committed:0,dirty:0,clean:0}) })),
+                 fetch('/api/tools/bob.spec.list')
+               ]);
+               const worktreesData = await worktreesRes.json();
+               this.worktrees = worktreesData;
+               const specsData = await specsRes.json();
+               const allSpecs = specsData.specs || [];
+               this.specs = {
+                 draft: allSpecs.filter(s => s.state === 'draft').length,
+                 'in-progress': allSpecs.filter(s => s.state === 'in-progress').length,
+                 completed: allSpecs.filter(s => s.state === 'completed').length
+               };
+             } catch (error) {
+               console.error('Failed to load metrics:', error);
+             }
+           }
+         }" x-init="loadMetrics()">
+      <!-- Manuals Box -->
+      <div style="background: rgba(59, 130, 246, 0.12); backdrop-filter: blur(10px); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; padding: 0.6rem 0.9rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; color: var(--text-secondary);">
+        <span>📖 Manuals:</span>
+        <span style="color: #9ca3af;" x-text="specs.draft + 'd'"></span>
+        <span style="color: var(--text-muted);">|</span>
+        <span style="color: var(--accent-orange);" x-text="specs['in-progress'] + 'p'"></span>
+        <span style="color: var(--text-muted);">|</span>
+        <span style="color: var(--accent-green);" x-text="specs.completed + '✓'"></span>
+      </div>
+      <!-- Trees Box -->
+      <div style="background: rgba(16, 185, 129, 0.12); backdrop-filter: blur(10px); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; padding: 0.6rem 0.9rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; color: var(--text-secondary);">
+        <span>🌿 Trees:</span>
+        <span style="color: var(--accent-green);" x-text="(worktrees.committed?.length || 0) + 'c'"></span>
+        <span style="color: var(--text-muted);">|</span>
+        <span style="color: var(--accent-orange);" x-text="(worktrees.dirty?.length || 0) + '!'"></span>
+        <span style="color: var(--text-muted);">|</span>
+        <span style="color: var(--text-secondary);" x-text="(worktrees.clean?.length || 0) + '~'"></span>
+        <button @click="showWorktreeModal = true"
+                style="margin-left: 0.5rem; padding: 0.25rem 0.5rem; background: var(--accent-orange); border: 1px solid var(--accent-orange); border-radius: 6px; color: white; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; font-weight: 600;"
+                @mouseenter="$el.style.background = '#e97b00'"
+                @mouseleave="$el.style.background = 'var(--accent-orange)'"
+                title="View Active Worktrees">
+          🏗️ View
+        </button>
+      </div>
+    </div>
+    <div style="font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap;"
+         x-data="{
+           projectName: 'loading...',
+           workshopVerbs: ['servicing', 'working on', 'fixing', 'building', 'crafting', 'assembling', 'engineering', 'constructing', 'maintaining', 'upgrading'],
+           currentVerb: 'servicing',
+           async init() {
+             this.currentVerb = this.workshopVerbs[Math.floor(Math.random() * this.workshopVerbs.length)];
+             // Fetch dynamic repo name from API
+             try {
+               const response = await fetch('/api/project-info');
+               const data = await response.json();
+               this.projectName = data.repoName || 'unknown';
+             } catch (error) {
+               console.error('Failed to fetch project info:', error);
+               this.projectName = 'unknown';
+             }
+           }
+         }">
+      <span style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%); backdrop-filter: blur(8px); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 12px; padding: 0.7rem 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; color: var(--text-primary); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);">
+        <span style="color: #fbbf24;">now</span>
+        <span style="color: var(--accent-orange);" x-text="currentVerb"></span>
+        <span style="color: var(--text-muted);">:</span>
+        <span style="color: #fbbf24; font-weight: 600;" x-text="projectName"></span>
+      </span>
+    </div>
+  </header>
+  <!-- Manual Table -->
+  <div class="spec-container fade-in" style="margin: 2rem;">
+    <!-- Header with integrated controls -->
+    <div class="spec-header" style="padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+      <div style="display: flex; align-items: center; gap: 1rem;">
+        <h2 class="heading" style="margin: 0; font-size: 1.25rem; color: white; text-transform: lowercase;">📄 manual explorer</h2>
+        <span style="background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;"
+              x-text="`${filteredSpecs.length} of ${specs.length} Manuals`"></span>
+        <span x-show="loading" class="loading"></span>
+      </div>
+      <!-- Integrated Controls Row -->
+      <div style="display: flex; align-items: center; gap: 1rem; flex: 1; max-width: 800px;">
+        <!-- Search Input -->
+        <div style="flex: 2; min-width: 200px;">
+          <input type="text"
+                 placeholder="🔍 Search Manuals..."
+                 x-model="searchTerm"
+                 @input="filterSpecs()"
+                 style="width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 6px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.875rem;">
+        </div>
+        <!-- Category Filter -->
+        <select x-model="categoryFilter"
+                @change="filterSpecs()"
+                style="padding: 0.5rem 0.75rem; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 6px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.875rem;">
+          <option value="all">All Categories</option>
+          <option value="frontend">Frontend</option>
+          <option value="backend">Backend</option>
+          <option value="fullstack">Fullstack</option>
+          <option value="general">General</option>
+        </select>
+        <!-- Status Filter -->
+        <select x-model="statusFilter"
+                @change="filterSpecs()"
+                style="padding: 0.5rem 0.75rem; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 6px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.875rem;">
+          <option value="all">All Status</option>
+          <option value="draft">Draft</option>
+          <option value="planning">Planning</option>
+          <option value="in-progress">In Progress</option>
+          <option value="completed">Completed</option>
+        </select>
+        <!-- Clear Filters -->
+        <button class="btn btn-secondary"
+                @click="searchTerm = ''; categoryFilter = 'all'; statusFilter = 'all'; filterSpecs()"
+                style="padding: 0.5rem 0.75rem; font-size: 0.875rem; white-space: nowrap;">
+          ✕ Clear
+        </button>
+        <!-- Refresh Button -->
+        <button class="btn btn-secondary" @click="fetchSpecs()" style="padding: 0.5rem 0.75rem; font-size: 0.875rem; white-space: nowrap; font-family: var(--font-body);">
+          🔄 Refresh
+        </button>
+      </div>
+    </div>
+    <table class="spec-table">
+      <thead>
+        <tr>
+          <th class="sortable"
+              :class="{ 'sorted-asc': sortBy === 'title' && sortDirection === 'asc', 'sorted-desc': sortBy === 'title' && sortDirection === 'desc' }"
+              @click="sortSpecs('title')">Title</th>
+          <th class="sortable"
+              :class="{ 'sorted-asc': sortBy === 'category' && sortDirection === 'asc', 'sorted-desc': sortBy === 'category' && sortDirection === 'desc' }"
+              @click="sortSpecs('category')">Category</th>
+          <th class="sortable"
+              :class="{ 'sorted-asc': sortBy === 'state' && sortDirection === 'asc', 'sorted-desc': sortBy === 'state' && sortDirection === 'desc' }"
+              @click="sortSpecs('state')">Status</th>
+          <th>Worktree</th>
+          <th class="sortable"
+              :class="{ 'sorted-asc': sortBy === 'modified' && sortDirection === 'asc', 'sorted-desc': sortBy === 'modified' && sortDirection === 'desc' }"
+              @click="sortSpecs('modified')">Modified</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template x-for="(spec, index) in filteredSpecs" :key="spec.spec_id">
+          <tr :class="{ 'keyboard-selected': isRowSelected(index) }"
+              @click="keyboardMode = false; selectedRowIndex = index"
+              :style="isRowSelected(index) ? 'background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--accent-orange);' : ''"
+              tabindex="0">
+            <td>
+              <div style="font-weight: 600; cursor: pointer; color: var(--text-primary);"
+                   x-text="spec.title"
+                   @click="openSpec(spec.spec_id)"></div>
+              <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;"
+                   x-text="spec.spec_id"></div>
+            </td>
+            <td style="color: var(--text-secondary);" x-text="spec.category || '—'"></td>
+            <td>
+              <span class="status-badge"
+                    :class="`status-${spec.state}`"
+                    x-text="spec.state"></span>
+            </td>
+            <td style="color: var(--text-secondary); font-family: monospace; font-size: 0.875rem;">
+              <div x-data="{ worktreeName: getWorktreeName(spec) }">
+                <span x-show="worktreeName !== 'none'" x-text="worktreeName" style="color: var(--accent-blue);"></span>
+                <span x-show="worktreeName === 'none'" style="color: var(--text-muted);">—</span>
+                <div x-show="worktreeName !== 'none'" style="font-size: 0.75rem; margin-top: 0.25rem;">
+                  <span style="color: var(--accent-green);">✓ clean</span>
+                </div>
+              </div>
+            </td>
+            <td style="color: var(--text-secondary); font-size: 0.875rem;"
+                x-text="new Date(spec.updated_at).toLocaleDateString()"></td>
+            <td>
+              <div style="display: flex; gap: 0.5rem;">
+                <button class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.75rem; font-family: var(--font-body);"
+                        @click="openSpec(spec.spec_id)">
+                  View
+                </button>
+                <button class="btn btn-danger" style="padding: 0.5rem 0.75rem; font-size: 0.75rem; background: var(--accent-red); border: 1px solid var(--accent-red); font-family: var(--font-body);"
+                        @click="confirmDeleteSpec(spec.spec_id, spec.title)"
+                        :title="`Delete ${spec.title}`">
+                  🗑
+                </button>
+              </div>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <div x-show="filteredSpecs.length === 0 && !loading"
+         style="text-align: center; padding: 3rem; color: var(--text-muted);">
+      <div x-show="specs.length === 0">No Manuals found. Create your first Manual to get started!</div>
+      <div x-show="specs.length > 0">No Manuals match your current filters.</div>
+    </div>
+    <!-- Activity Log Button -->
+    <div style="padding: 1.5rem; border-top: 1px solid var(--border-glass); text-center;">
+      <button class="btn btn-secondary" @click="loadActivityLog()">
+        📊 View Activity Log
+      </button>
+    </div>
+  </div>
+  <!-- Enhanced Modal -->
+  <div class="modal-overlay"
+       x-show="selectedSpec"
+       x-transition:enter="transition ease-out duration-300"
+       x-transition:enter-start="opacity-0"
+       x-transition:enter-end="opacity-100"
+       x-transition:leave="transition ease-in duration-200"
+       x-transition:leave-start="opacity-100"
+       x-transition:leave-end="opacity-0"
+       @click.self="selectedSpec=null">
+    <div class="modal-content"
+         x-show="selectedSpec"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95">
+      <!-- Modal Header -->
+      <div class="modal-header" style="flex-direction: column; align-items: stretch; gap: 0.75rem; background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%); border-bottom: 1px solid rgba(245, 158, 11, 0.2);">
+        <!-- Top Row: Title, Status, and Worktree Info -->
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div class="modal-title-section">
+            <h2 class="heading" style="margin: 0; font-size: 1.5rem;" x-text="selectedSpec?.title"></h2>
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <!-- Workflow Status Badge -->
+              <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;">
+                <span>📋</span>
+                <span class="status-badge"
+                      :class="`status-${selectedSpec?.state}`"
+                      x-text="selectedSpec?.state || 'draft'"></span>
+              </div>
+              <!-- Worktree Info -->
+              <div class="worktree-info" x-show="getWorktreeName(selectedSpec)">
+                <span>🔧</span>
+                <span x-text="getWorktreeName(selectedSpec)"></span>
+                <span class="status-badge status-completed" style="font-size: 0.7rem; padding: 0.2rem 0.5rem;">✓ clean</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; gap: 1rem;">
+            <button class="btn btn-primary" @click="exportToMarkdown(selectedSpec?.spec_id)">
+              📄 Export
+            </button>
+            <button class="btn btn-secondary" @click="selectedSpec=null"
+                    style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--accent-orange);"
+                    @mouseenter="$el.style.background = 'rgba(245, 158, 11, 0.2)'"
+                    @mouseleave="$el.style.background = 'rgba(245, 158, 11, 0.1)'">
+              ✕
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Main Content Container -->
+      <div class="modal-main-container">
+        <!-- Navigation Tabs - Only show sections with content -->
+        <div class="modal-nav">
+          <div class="nav-tabs">
+            <template x-for="sectionItem in getAvailableSections()" :key="sectionItem.id">
+              <button class="nav-tab"
+                      :class="{'active': section === sectionItem.id, 'keyboard-focus': sectionKeyboardMode && section === sectionItem.id}"
+                      @click="section = sectionItem.id; sectionKeyboardMode = false"
+                      x-text="sectionItem.label"
+                      tabindex="-1">
+              </button>
+            </template>
+          </div>
+        </div>
+        <!-- Content Area -->
+        <div class="modal-main">
+        <template x-if="section==='summary'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.executive_summary || selectedSpec?.sections?.executive_summary?.content || 'No executive summary yet')">
+          </div>
+        </template>
+        <template x-if="section==='product'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.product_specifications?.content || 'No product specifications yet')">
+          </div>
+        </template>
+        <template x-if="section==='architecture'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.architecture_analysis?.content || 'No architecture analysis yet')">
+          </div>
+        </template>
+        <template x-if="section==='implementation'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.implementation_plan?.content || 'No implementation plan yet')">
+          </div>
+        </template>
+        <template x-if="section==='research'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.research?.content || 'No research notes yet')">
+          </div>
+        </template>
+        <template x-if="section==='testing'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.testing?.content || 'No testing notes yet')">
+          </div>
+        </template>
+        <template x-if="section==='review'">
+          <div class="spec-content" x-html="renderMarkdown(selectedSpec?.sections?.review?.content || 'No review notes yet')">
+          </div>
+        </template>
+        <template x-if="section==='execution'">
+          <div class="spec-content">
+            <h3 style="color: var(--text-primary); margin-bottom: 1rem;">🛠️ Execution Logs</h3>
+            <template x-for="(log, index) in (selectedSpec?.execution_logs || selectedSpec?.execution_log || [])" :key="'exec_' + index">
+              <div style="background: rgba(59, 130, 246, 0.1); border-left: 3px solid var(--accent-blue); padding: 1rem; margin-bottom: 1rem; border-radius: 6px;">
+                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
+                  <span style="font-size: 0.75rem; color: var(--text-muted);" x-text="new Date(log.timestamp).toLocaleString()"></span>
+                  <span x-show="log.engineer" style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;" x-text="log.engineer"></span>
+                </div>
+                <div style="margin-bottom: 0.5rem;">
+                  <strong style="color: var(--accent-blue);">Action:</strong>
+                  <span x-text="log.action" style="color: var(--text-primary); margin-left: 0.5rem;"></span>
+                </div>
+                <div x-show="log.task_id" style="margin-bottom: 0.5rem;">
+                  <strong style="color: var(--accent-blue);">Task ID:</strong>
+                  <span x-text="log.task_id" style="color: var(--text-primary); margin-left: 0.5rem; font-family: monospace;"></span>
+                </div>
+                <div x-show="log.note" style="margin-bottom: 0.5rem;">
+                  <strong style="color: var(--accent-blue);">Note:</strong>
+                  <span x-text="log.note" style="color: var(--text-primary); margin-left: 0.5rem;"></span>
+                </div>
+                <div x-show="log.files_changed && log.files_changed.length > 0" style="margin-bottom: 0.5rem;">
+                  <strong style="color: var(--accent-blue);">Files Changed:</strong>
+                  <div style="margin-top: 0.25rem;">
+                    <template x-for="file in log.files_changed" :key="file">
+                      <span style="background: rgba(0, 0, 0, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-family: monospace; display: inline-block; margin: 0.25rem 0.25rem 0 0;" x-text="file"></span>
+                    </template>
+                  </div>
+                </div>
+                <div x-show="log.commit_hash" style="font-size: 0.75rem; color: var(--text-muted);">
+                  <strong>Commit:</strong> <span x-text="log.commit_hash" style="font-family: monospace;"></span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+        <template x-if="section==='debug'">
+          <div class="spec-content">
+            <h3 style="color: var(--text-primary); margin-bottom: 1rem;">🐛 Debug Logs</h3>
+            <template x-for="(log, index) in (selectedSpec?.debug_logs || selectedSpec?.debug_log || [])" :key="'debug_' + index">
+              <div style="background: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--accent-red); padding: 1rem; margin-bottom: 1rem; border-radius: 6px;">
+                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
+                  <span style="font-size: 0.75rem; color: var(--text-muted);" x-text="new Date(log.timestamp).toLocaleString()"></span>
+                  <span x-show="log.confidence" style="padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; text-transform: capitalize;"
+                        :style="log.confidence === 'High' || log.confidence === 'high' ? 'background: rgba(16, 185, 129, 0.2); color: var(--accent-green);' : log.confidence === 'Medium' || log.confidence === 'medium' ? 'background: rgba(245, 158, 11, 0.2); color: var(--accent-orange);' : 'background: rgba(239, 68, 68, 0.2); color: var(--accent-red);'"
+                        x-text="log.confidence"></span>
+                </div>
+                <div style="margin-bottom: 0.75rem;">
+                  <strong style="color: var(--accent-red);">Issue:</strong>
+                  <div x-text="log.issue" style="color: var(--text-primary); margin-top: 0.25rem;"></div>
+                </div>
+                <div style="margin-bottom: 0.75rem;">
+                  <strong style="color: var(--accent-orange);">Root Cause:</strong>
+                  <div x-text="log.root_cause" style="color: var(--text-primary); margin-top: 0.25rem;"></div>
+                </div>
+                <div>
+                  <strong style="color: var(--accent-green);">Fix:</strong>
+                  <div x-text="log.fix" style="color: var(--text-primary); margin-top: 0.25rem;"></div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+        </div>
+      </div>
+      <!-- Right Sidebar: Activity & Files -->
+      <div class="modal-activity">
+        <!-- Activity Navigation Tabs -->
+        <div class="activity-nav">
+          <div class="activity-tabs">
+            <button class="activity-tab" :class="{'active': activityTab==='activity'}" @click="activityTab='activity'">📊 Activity</button>
+            <button class="activity-tab" :class="{'active': activityTab==='insights'}" @click="activityTab='insights'" x-show="selectedSpec?.implementation_summary || selectedSpec?.change_validation">🔍 Insights</button>
+          </div>
+        </div>
+        <!-- Activity Content -->
+        <!-- Activity Log Section - Timeline Visualization -->
+        <div x-show="activityTab==='activity'" class="activity-content" style="padding: 1.5rem; flex: 1; display: flex; flex-direction: column;"
+>
+            <div class="timeline-container" style="overflow-y: auto; flex: 1; min-height: fit-content;">
+              <!-- Combined Timeline -->
+              <template x-for="(event, index) in getActivityTimeline(selectedSpec)" :key="'timeline_' + index">
+                <div class="timeline-item">
+                  <!-- Left side: Time and Tool info -->
+                  <div class="timeline-left">
+                    <div class="timeline-time" x-text="new Date(event.timestamp).toLocaleString()"></div>
+                    <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;">
+                      <span class="status-badge"
+                            :class="'role-' + (event.role || 'system').toLowerCase()"
+                            x-text="(event.role || 'System').toUpperCase()"
+                      </span>
+                      <div style="font-size: 1.2rem;" x-text="event.role === 'DEBUGGER' ? '🐛' : event.role === 'ENGINEER' ? '⚙️' : event.role === 'ARCHITECT' ? '📐' : event.role === 'ORCHESTRATOR' ? '🎯' : event.role === 'REVIEWER' ? '👁️' : event.role === 'system' ? '⚙️' : '🔧'"></div>
+                    </div>
+                  </div>
+                  <!-- Timeline marker -->
+                  <div class="timeline-marker"
+                       :class="(event.role || 'system').toLowerCase()"></div>
+                  <!-- Right side: Content -->
+                  <div class="timeline-right">
+                    <div class="timeline-content">
+                      <div class="timeline-role">
+                        <span x-text="event.human_description || event.action || event.note || event.message || event.issue || 'Activity recorded'"></span>
+                      </div>
+                      <!-- Enhanced Engineer Data -->
+                      <div x-show="event.is_enhanced && event.engineer_data" style="margin: 0.75rem 0; font-size: 0.85rem; line-height: 1.5;">
+                        <!-- Layer Progress -->
+                        <div x-show="event.engineer_data.layer" style="background: rgba(59, 130, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-blue);">
+                          <strong style="color: var(--accent-blue);">Layer:</strong>
+                          <span x-text="event.engineer_data.layer.charAt(0).toUpperCase() + event.engineer_data.layer.slice(1)" style="color: var(--text-primary); text-transform: capitalize;"></span>
+                          <span x-show="event.engineer_data.completion_percentage !== undefined" style="color: var(--text-muted); margin-left: 0.5rem;" x-text="'(' + event.engineer_data.completion_percentage + '% complete)'"></span>
+                        </div>
+                        <!-- Build/Test Status -->
+                        <div x-show="event.engineer_data.build_status || event.engineer_data.test_status" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
+                          <span x-show="event.engineer_data.build_status === 'success'" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">✅ Build</span>
+                          <span x-show="event.engineer_data.build_status === 'failed'" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">❌ Build</span>
+                          <span x-show="event.engineer_data.test_status === 'passed'" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">🧪 Tests</span>
+                          <span x-show="event.engineer_data.test_status === 'failed'" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">🧪 Tests</span>
+                        </div>
+                      </div>
+                      <!-- Enhanced Debugger Data -->
+                      <div x-show="event.is_enhanced && event.debugger_data" style="margin: 0.75rem 0; font-size: 0.85rem; line-height: 1.5;">
+                        <div x-show="event.debugger_data.issue" style="background: rgba(239, 68, 68, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-red);">
+                          <strong style="color: var(--accent-red);">Issue:</strong> <span x-text="event.debugger_data.issue" style="color: var(--text-primary);"></span>
+                        </div>
+                        <div x-show="event.debugger_data.root_cause" style="background: rgba(245, 158, 11, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-orange);">
+                          <strong style="color: var(--accent-orange);">Root Cause:</strong> <span x-text="event.debugger_data.root_cause" style="color: var(--text-primary);"></span>
+                        </div>
+                        <div x-show="event.debugger_data.fix" style="background: rgba(16, 185, 129, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-green);">
+                          <strong style="color: var(--accent-green);">Fix:</strong> <span x-text="event.debugger_data.fix" style="color: var(--text-primary);"></span>
+                        </div>
+                        <div x-show="event.debugger_data.confidence" style="display: flex; align-items: center; gap: 0.5rem;">
+                          <span x-text="event.debugger_data.confidence === 'high' ? '🎯' : event.debugger_data.confidence === 'medium' ? '⚖️' : '❓'"></span>
+                          <span style="font-size: 0.75rem; color: var(--text-muted);">Confidence: </span>
+                          <span x-text="event.debugger_data.confidence" style="font-size: 0.75rem; color: var(--text-primary); text-transform: capitalize;"></span>
+                        </div>
+                      </div>
+                      <!-- Enhanced Architect Data -->
+                      <div x-show="event.is_enhanced && event.architect_data" style="margin: 0.75rem 0; font-size: 0.85rem; line-height: 1.5;">
+                        <div x-show="event.architect_data.phase" style="background: rgba(139, 92, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid #8b5cf6;">
+                          <strong style="color: #8b5cf6;">Phase:</strong>
+                          <span x-text="event.architect_data.phase.charAt(0).toUpperCase() + event.architect_data.phase.slice(1)" style="color: var(--text-primary); text-transform: capitalize;"></span>
+                        </div>
+                        <!-- Clarifications with Status Badges -->
+                        <div x-show="event.architect_data.clarifications && event.architect_data.clarifications.length > 0" style="background: rgba(245, 158, 11, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-orange);">
+                          <strong style="color: var(--accent-orange);">Clarifications:</strong>
+                          <div style="margin-top: 0.5rem;">
+                            <template x-for="clarification in event.architect_data.clarifications">
+                              <div style="margin-bottom: 0.5rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px;">
+                                <div style="display: flex; align-items: start; gap: 0.5rem;">
+                                  <span x-show="clarification.status === 'pending'" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-orange); padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.65rem; flex-shrink: 0;">⏳ Awaiting</span>
+                                  <span x-show="clarification.status === 'answered'" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.65rem; flex-shrink: 0;">✅ Answered</span>
+                                  <div style="flex: 1;">
+                                    <div x-text="clarification.question" style="color: var(--text-primary); font-size: 0.8rem; margin-bottom: 0.25rem;"></div>
+                                    <div x-show="clarification.answer" x-text="'Answer: ' + clarification.answer" style="color: var(--text-muted); font-size: 0.75rem; font-style: italic;"></div>
+                                  </div>
+                                </div>
+                              </div>
+                            </template>
+                          </div>
+                        </div>
+                        <div x-show="event.architect_data.design_decisions && event.architect_data.design_decisions.length > 0" style="background: rgba(59, 130, 246, 0.1); padding: 0.75rem; border-radius: 6px; border-left: 3px solid var(--accent-blue);">
+                          <strong style="color: var(--accent-blue);">Design Decisions:</strong>
+                          <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                            <template x-for="decision in event.architect_data.design_decisions">
+                              <li x-text="decision" style="margin-bottom: 0.25rem;"></li>
+                            </template>
+                          </ul>
+                        </div>
+                      </div>
+                      <!-- Enhanced Orchestrator Data -->
+                      <div x-show="event.is_enhanced && event.orchestrator_data" style="margin: 0.75rem 0; font-size: 0.85rem; line-height: 1.5;">
+                        <div x-show="event.orchestrator_data.workflow_action" style="background: rgba(99, 102, 241, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid #6366f1;">
+                          <strong style="color: #6366f1;">Workflow:</strong>
+                          <span x-text="event.orchestrator_data.workflow_action" style="color: var(--text-primary);"></span>
+                        </div>
+                        <div x-show="event.orchestrator_data.coordinated_roles && event.orchestrator_data.coordinated_roles.length > 0" style="background: rgba(139, 92, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid #8b5cf6;">
+                          <strong style="color: #8b5cf6;">Coordinated Roles:</strong>
+                          <span x-text="event.orchestrator_data.coordinated_roles.join(', ')" style="color: var(--text-primary); margin-left: 0.5rem;"></span>
+                        </div>
+                        <div x-show="event.orchestrator_data.milestones && event.orchestrator_data.milestones.length > 0" style="background: rgba(16, 185, 129, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-green);">
+                          <strong style="color: var(--accent-green);">Milestones:</strong>
+                          <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                            <template x-for="milestone in event.orchestrator_data.milestones">
+                              <li x-text="milestone" style="margin-bottom: 0.25rem;"></li>
+                            </template>
+                          </ul>
+                        </div>
+                        <div x-show="event.orchestrator_data.blockers && event.orchestrator_data.blockers.length > 0" style="background: rgba(239, 68, 68, 0.1); padding: 0.75rem; border-radius: 6px; border-left: 3px solid var(--accent-red);">
+                          <strong style="color: var(--accent-red);">Blockers:</strong>
+                          <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                            <template x-for="blocker in event.orchestrator_data.blockers">
+                              <li x-text="blocker" style="margin-bottom: 0.25rem;"></li>
+                            </template>
+                          </ul>
+                        </div>
+                      </div>
+                      <!-- Legacy Root cause & fix (debug logs) -->
+                      <div x-show="!event.is_enhanced && event.root_cause" style="margin: 0.75rem 0; font-size: 0.85rem; line-height: 1.5;">
+                        <div style="color: var(--text-secondary); background: rgba(239, 68, 68, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-red);"><strong style="color: var(--accent-red);">Root cause:</strong> <span x-text="event.root_cause" style="color: var(--text-primary);"></span></div>
+                        <div x-show="event.fix" style="color: var(--text-secondary); background: rgba(16, 185, 129, 0.1); padding: 0.75rem; border-radius: 6px; border-left: 3px solid var(--accent-green);"><strong style="color: var(--accent-green);">Fix:</strong> <span x-text="event.fix" style="color: var(--text-primary);"></span></div>
+                      </div>
+                      <!-- Enhanced Verbose Activity Details -->
+                      <div x-show="event.data?.verbose_details" style="margin: 0.75rem 0;">
+                        <!-- Engineer Mode Details -->
+                        <div x-show="event.data?.mode === 'engineer' && event.data?.verbose_details?.engineer" style="font-size: 0.85rem; line-height: 1.5;">
+                          <div x-show="event.data.verbose_details.engineer.completion_percentage !== undefined" style="background: rgba(59, 130, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-blue);">
+                            <strong style="color: var(--accent-blue);">Progress:</strong>
+                            <span x-text="event.data.verbose_details.engineer.completion_percentage + '% complete'" style="color: var(--text-primary);"></span>
+                          </div>
+                          <div x-show="event.data.verbose_details.engineer.tasks_completed?.length" style="background: rgba(16, 185, 129, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-green);">
+                            <strong style="color: var(--accent-green);">Tasks Completed:</strong>
+                            <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                              <template x-for="task in event.data.verbose_details.engineer.tasks_completed">
+                                <li x-text="task" style="margin-bottom: 0.25rem;"></li>
+                              </template>
+                            </ul>
+                          </div>
+                          <div x-show="event.data.verbose_details.engineer.tasks_remaining?.length" style="background: rgba(245, 158, 11, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-orange);">
+                            <strong style="color: var(--accent-orange);">Remaining Tasks:</strong>
+                            <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                              <template x-for="task in event.data.verbose_details.engineer.tasks_remaining">
+                                <li x-text="task" style="margin-bottom: 0.25rem;"></li>
+                              </template>
+                            </ul>
+                          </div>
+                          <div x-show="event.data.verbose_details.engineer.build_status || event.data.verbose_details.engineer.test_status" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
+                            <span x-show="event.data.verbose_details.engineer.build_status === 'success'" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">✅ Build Passed</span>
+                            <span x-show="event.data.verbose_details.engineer.build_status === 'failed'" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">❌ Build Failed</span>
+                            <span x-show="event.data.verbose_details.engineer.test_status === 'passed'" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">🧪 Tests Passed</span>
+                            <span x-show="event.data.verbose_details.engineer.test_status === 'failed'" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">🧪 Tests Failed</span>
+                          </div>
+                        </div>
+                        <!-- Debugger Mode Details -->
+                        <div x-show="event.data?.mode === 'debugger' && event.data?.verbose_details?.debugger" style="font-size: 0.85rem; line-height: 1.5;">
+                          <div x-show="event.data.verbose_details.debugger.issue_description" style="background: rgba(239, 68, 68, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-red);">
+                            <strong style="color: var(--accent-red);">Issue:</strong>
+                            <span x-text="event.data.verbose_details.debugger.issue_description" style="color: var(--text-primary);"></span>
+                          </div>
+                          <div x-show="event.data.verbose_details.debugger.reproduction_steps?.length" style="background: rgba(156, 163, 175, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--text-muted);">
+                            <strong style="color: var(--text-muted);">Reproduction Steps:</strong>
+                            <ol style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                              <template x-for="step in event.data.verbose_details.debugger.reproduction_steps">
+                                <li x-text="step" style="margin-bottom: 0.25rem;"></li>
+                              </template>
+                            </ol>
+                          </div>
+                          <div x-show="event.data.verbose_details.debugger.confidence_level" style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                            <span x-text="event.data.verbose_details.debugger.confidence_level === 'high' ? '🎯' : event.data.verbose_details.debugger.confidence_level === 'medium' ? '⚖️' : '❓'"></span>
+                            <span style="font-size: 0.75rem; color: var(--text-muted);">Confidence: </span>
+                            <span x-text="event.data.verbose_details.debugger.confidence_level" style="font-size: 0.75rem; color: var(--text-primary); text-transform: capitalize;"></span>
+                          </div>
+                        </div>
+                        <!-- Architect Mode Details -->
+                        <div x-show="event.data?.mode === 'architect' && event.data?.verbose_details?.architect" style="font-size: 0.85rem; line-height: 1.5;">
+                          <div x-show="event.data.verbose_details.architect.research_findings?.length" style="background: rgba(139, 92, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid #8b5cf6;">
+                            <strong style="color: #8b5cf6;">Research Findings:</strong>
+                            <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                              <template x-for="finding in event.data.verbose_details.architect.research_findings">
+                                <li x-text="finding" style="margin-bottom: 0.25rem;"></li>
+                              </template>
+                            </ul>
+                          </div>
+                          <div x-show="event.data.verbose_details.architect.design_decisions?.length" style="background: rgba(245, 158, 11, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-orange);">
+                            <strong style="color: var(--accent-orange);">Design Decisions:</strong>
+                            <ul style="margin: 0.5rem 0 0 1rem; color: var(--text-primary);">
+                              <template x-for="decision in event.data.verbose_details.architect.design_decisions">
+                                <li x-text="decision" style="margin-bottom: 0.25rem;"></li>
+                              </template>
+                            </ul>
+                          </div>
+                          <div x-show="event.data.verbose_details.architect.architecture_patterns?.length" style="background: rgba(59, 130, 246, 0.1); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid var(--accent-blue);">
+                            <strong style="color: var(--accent-blue);">Architecture Patterns:</strong>
+                            <div style="margin: 0.5rem 0 0 0; color: var(--text-primary);">
+                              <span x-text="event.data.verbose_details.architect.architecture_patterns.join(', ')"></span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Task/Commit Info -->
+                      <div x-show="event.task_id || event.commit_hash" style="display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
+                        <span x-show="event.task_id" x-text="'Task: ' + event.task_id"></span>
+                        <span x-show="event.commit_hash" x-text="'Commit: ' + event.commit_hash.substring(0, 8)"></span>
+                      </div>
+                      <!-- Files Modified - Compact Git Style (Enhanced Activities) -->
+                      <div x-show="event.is_enhanced && event.files_changed && event.files_changed.length > 0" style="margin-top: 0.75rem;">
+                        <div style="color: var(--text-muted); margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600;">
+                          📁 <span x-text="event.files_changed.length + ' file' + (event.files_changed.length > 1 ? 's' : '') + ' changed'"></span>
+                        </div>
+                        <!-- Compact File List - Git Style -->
+                        <div style="font-family: 'Monaco', 'Menlo', monospace; font-size: 0.7rem; color: var(--text-muted); line-height: 1.6;">
+                          <template x-for="(file, fileIdx) in event.files_changed" :key="event.id + '_file_' + fileIdx">
+                            <div style="display: flex; align-items: center; gap: 0.5rem;">
+                              <!-- Change Type (M/A/D) -->
+                              <span style="font-weight: 700; min-width: 12px;"
+                                   :style="file.change_type === 'added' ? 'color: #22c55e;' :
+                                          file.change_type === 'deleted' ? 'color: #ef4444;' :
+                                          'color: #f59e0b;'"
+                                   x-text="file.change_type === 'added' ? 'A' : file.change_type === 'deleted' ? 'D' : 'M'">
+                              </span>
+                              <!-- File Path -->
+                              <span style="color: var(--text-secondary);" x-text="file.path"></span>
+                              <!-- Git Diff Summary (+x / -y) -->
+                              <span x-show="file.lines_added > 0 || file.lines_removed > 0" style="color: var(--text-muted);">
+                                <span x-show="file.lines_added > 0" style="color: #22c55e;" x-text="'+' + file.lines_added"></span><span x-show="file.lines_added > 0 && file.lines_removed > 0"> / </span><span x-show="file.lines_removed > 0" style="color: #ef4444;" x-text="'-' + file.lines_removed"></span>
+                              </span>
+                            </div>
+                          </template>
+                        </div>
+                      </div>
+                      <!-- Files Modified - Legacy Format (Fallback) -->
+                      <div x-show="!event.is_enhanced && event.files_changed && event.files_changed.length > 0" style="margin-top: 0.5rem;">
+                        <div style="color: var(--text-muted); margin-bottom: 0.25rem; font-size: 0.8rem;">
+                          <span x-text="event.files_changed.length + ' file(s) changed'"></span>
+                        </div>
+                      </div>
+                      <!-- Branch Info -->
+                      <div x-show="event.branch" style="margin-top: 0.5rem; font-size: 0.7rem; color: var(--text-muted); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;">
+                        <span x-text="'Branch: ' + event.branch"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <!-- Timeline line positioned after all items are rendered -->
+              <div class="timeline-line"></div>
+              <div x-show="getActivityTimeline(selectedSpec).length === 0"
+                   style="text-align: center; padding: 3rem; color: var(--text-muted); font-size: 0.875rem;">
+                <div style="font-size: 2rem; margin-bottom: 1rem;">📋</div>
+                <div>No activity recorded yet</div>
+              </div>
+            </div>
+        </div>
+          <!-- Files Modified Section -->
+          <div x-show="activityTab==='files'" class="activity-content" style="padding: 1.5rem; flex: 1;">
+            <div style="max-height: 500px; overflow-y: auto; padding: 0.5rem 0;">
+              <!-- GitHub Desktop Style File List -->
+              <div style="background: rgba(255, 255, 255, 0.02); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); overflow: visible; max-height: none;">
+                <!-- Files from execution logs -->
+                <template x-for="(log, logIndex) in (selectedSpec?.execution_logs || selectedSpec?.execution_log || [])" :key="log.timestamp + 'exec'">
+                  <template x-for="(file, fileIndex) in (log.files_changed || [])" :key="log.timestamp + file + fileIndex">
+                    <div style="display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s ease;"
+                         @mouseenter="$el.style.background = 'rgba(255, 255, 255, 0.05)'"
+                         @mouseleave="$el.style.background = 'transparent'">
+                      <!-- Status Indicator (GitHub Desktop style) -->
+                      <div style="width: 18px; height: 18px; margin-right: 0.75rem; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(34, 197, 94, 0.15); color: #22c55e; font-size: 0.7rem; font-weight: 600; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;">
+                        M
+                      </div>
+                      <!-- File Icon and Name -->
+                      <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem;">
+                        <div style="font-size: 1rem;" x-text="getFileIcon(file)"></div>
+                        <div style="min-width: 0; flex: 1;">
+                          <div style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.875rem; color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" x-text="getFileName(file)"></div>
+                          <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" x-text="simplifyFilePath(file)"></div>
+                        </div>
+                      </div>
+                      <!-- Git Diff Statistics (GitHub Desktop style) -->
+                      <div style="margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.75rem;"
+                           x-data="{ gitDiffData: null, loading: true }"
+                           x-init="
+                             (async () => {
+                               try {
+                                 const response = await fetch(`/api/git-diff?file=${encodeURIComponent(file)}`);
+                                 if (response.ok) {
+                                   gitDiffData = await response.json();
+                                 }
+                               } catch (e) {
+                                 console.log('Could not fetch git diff for', file);
+                               } finally {
+                                 loading = false;
+                               }
+                             })()
+                           ">
+                        <div x-show="loading" style="color: var(--text-muted); width: 60px; text-align: center; font-size: 0.65rem;">...</div>
+                        <div x-show="!loading && gitDiffData && (gitDiffData.lines_added > 0 || gitDiffData.lines_removed > 0)" style="display: flex; align-items: center; gap: 0.375rem;">
+                          <span x-show="gitDiffData.lines_added > 0" style="color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.125rem 0.375rem; border-radius: 12px; font-size: 0.7rem;" x-text="`+${gitDiffData.lines_added}`"></span>
+                          <span x-show="gitDiffData.lines_removed > 0" style="color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 0.125rem 0.375rem; border-radius: 12px; font-size: 0.7rem;" x-text="`−${gitDiffData.lines_removed}`"></span>
+                        </div>
+                        <div x-show="!loading && (!gitDiffData || (gitDiffData.lines_added === 0 && gitDiffData.lines_removed === 0))" style="color: var(--text-muted); width: 60px; text-align: center; font-size: 0.65rem;">—</div>
+                      </div>
+                      <!-- Timestamp -->
+                      <div style="margin-left: 1rem; font-size: 0.7rem; color: var(--text-muted); min-width: 60px; text-align: right;" x-text="new Date(log.timestamp).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'})"></div>
+                    </div>
+                  </template>
+                </template>
+                <!-- Empty state -->
+                <div x-show="(!selectedSpec?.execution_logs || selectedSpec.execution_logs.length === 0) && (!selectedSpec?.execution_log || selectedSpec.execution_log.length === 0)" style="text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.875rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                  <div style="font-size: 1.5rem;">📁</div>
+                  <div>No files modified yet</div>
+                  <div style="font-size: 0.75rem; opacity: 0.7;">File changes will appear here during implementation</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Insights Section -->
+          <div x-show="activityTab==='insights'" class="activity-content" style="padding: 1.5rem; flex: 1;">
+            <div style="max-height: 500px; overflow-y: auto; padding: 0.5rem 0;">
+              <!-- Compliance Overview -->
+              <div x-show="selectedSpec?.change_validation" style="background: rgba(34, 197, 94, 0.05); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(34, 197, 94, 0.2);">
+                <h4 style="margin: 0 0 0.75rem 0; color: #22c55e; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem;">
+                  <span>🔍</span>
+                  <span>Compliance Status</span>
+                </h4>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin-bottom: 1rem;">
+                  <div style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px;">
+                    <div style="font-size: 1.5rem; margin-bottom: 0.25rem;" x-text="selectedSpec?.change_validation?.overall_compliance === 'compliant' ? '✅' : selectedSpec?.change_validation?.overall_compliance === 'partial' ? '⚠️' : '❌'"></div>
+                    <div style="font-size: 0.8rem; color: var(--text-secondary);" x-text="selectedSpec?.change_validation?.overall_compliance || 'Unknown'"></div>
+                  </div>
+                </div>
+                <div x-show="selectedSpec?.change_validation?.recommendations?.length > 0">
+                  <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Recommendations:</div>
+                  <template x-for="rec in selectedSpec?.change_validation?.recommendations" :key="rec">
+                    <div style="font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.25rem; padding-left: 1rem;" x-text="rec"></div>
+                  </template>
+                </div>
+              </div>
+              <!-- Implementation Summary -->
+              <div x-show="selectedSpec?.implementation_summary" style="background: rgba(99, 102, 241, 0.05); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(99, 102, 241, 0.2);">
+                <h4 style="margin: 0 0 0.75rem 0; color: #818cf8; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem;">
+                  <span>📊</span>
+                  <span>Implementation Progress</span>
+                </h4>
+                <!-- Progress Stats -->
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.5rem; margin-bottom: 1rem;">
+                  <div style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px;">
+                    <div style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary);" x-text="selectedSpec?.implementation_summary?.files_changed_count || 0"></div>
+                    <div style="font-size: 0.7rem; color: var(--text-secondary);">Files</div>
+                  </div>
+                  <div style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px;">
+                    <div style="font-size: 1.2rem; font-weight: 600; color: var(--text-primary);" x-text="selectedSpec?.implementation_summary?.git_commits_count || 0"></div>
+                    <div style="font-size: 0.7rem; color: var(--text-secondary);">Commits</div>
+                  </div>
+                  <div style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px;">
+                    <div style="font-size: 1.2rem; font-weight: 600;" :style="`color: ${selectedSpec?.implementation_summary?.compliance_overview?.overall_status === 'compliant' ? '#22c55e' : selectedSpec?.implementation_summary?.compliance_overview?.overall_status === 'partial' ? '#f59e0b' : '#ef4444'}`" x-text="Math.round((selectedSpec?.implementation_summary?.compliance_overview?.compliant_files || 0) / Math.max(selectedSpec?.implementation_summary?.compliance_overview?.total_files || 1, 1) * 100) + '%'"></div>
+                    <div style="font-size: 0.7rem; color: var(--text-secondary);">Compliant</div>
+                  </div>
+                </div>
+                <!-- Implementation Notes -->
+                <div x-show="selectedSpec?.implementation_summary?.implementation_notes?.length > 0">
+                  <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Recent Progress:</div>
+                  <template x-for="note in selectedSpec?.implementation_summary?.implementation_notes.slice(0, 3)" :key="note">
+                    <div style="font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.5rem; padding: 0.5rem; background: rgba(255, 255, 255, 0.02); border-radius: 4px;" x-text="note"></div>
+                  </template>
+                </div>
+                <!-- Actionable Insights -->
+                <div x-show="selectedSpec?.implementation_summary?.actionable_insights?.length > 0">
+                  <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Actionable Insights:</div>
+                  <template x-for="insight in selectedSpec?.implementation_summary?.actionable_insights" :key="insight">
+                    <div style="font-size: 0.8rem; color: var(--accent-blue); margin-bottom: 0.25rem; padding-left: 1rem;" x-text="insight"></div>
+                  </template>
+                </div>
+              </div>
+              <!-- Empty State -->
+              <div x-show="!selectedSpec?.implementation_summary && !selectedSpec?.change_validation" style="text-align: center; padding: 3rem; color: var(--text-muted); font-size: 0.875rem;">
+                <div style="font-size: 2rem; margin-bottom: 1rem;">🔍</div>
+                <div>No insights available yet</div>
+                <div style="font-size: 0.8rem; margin-top: 0.5rem;">Implementation summaries and validation results will appear here</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Activity Log Modal -->
+  <div class="modal-overlay"
+       x-show="showActivityLog"
+       x-transition:enter="transition ease-out duration-300"
+       x-transition:enter-start="opacity-0"
+       x-transition:enter-end="opacity-100"
+       x-transition:leave="transition ease-in duration-200"
+       x-transition:leave-start="opacity-100"
+       x-transition:leave-end="opacity-0"
+       @click.self="showActivityLog=false">
+    <div class="modal-content"
+         x-show="showActivityLog"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;">
+      <!-- Activity Log Header -->
+      <div class="modal-header">
+        <h2 class="heading" style="margin: 0; font-size: 1.5rem;">📊 Activity Log</h2>
+        <div style="display: flex; gap: 1rem;">
+          <button class="btn btn-secondary" @click="showActivityLog=false">
+            ✕ Close
+          </button>
+        </div>
+      </div>
+      <!-- Activity Log Content -->
+      <div class="modal-main">
+        <div style="margin-bottom: 1.5rem;">
+          <h3 class="heading" style="margin: 0 0 1rem 0;">Recent Activity</h3>
+          <div style="background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05);">
+            <template x-for="activity in activities" :key="activity.timestamp">
+              <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 1rem 0;">
+                <div style="display: flex; justify-content: between; align-items: start; margin-bottom: 0.5rem;">
+                  <div>
+                    <span class="status-badge"
+                          :class="{
+                            'status-completed': activity.type === 'spec_created',
+                            'status-in-progress': activity.type === 'worktree_created',
+                            'status-planning': activity.type === 'commit',
+                            'status-draft': activity.type === 'spec_updated'
+                          }"
+                          x-text="activity.type.replace('_', ' ')"></span>
+                    <span style="margin-left: 1rem; color: var(--text-secondary); font-size: 0.875rem;"
+                          x-text="new Date(activity.timestamp).toLocaleString()"></span>
+                  </div>
+                </div>
+                <div style="color: var(--text-primary); margin-bottom: 0.5rem;"
+                     x-text="activity.message"></div>
+                <div style="color: var(--text-secondary); font-size: 0.875rem;">
+                  <span>by </span>
+                  <span style="color: var(--accent-blue);" x-text="activity.author"></span>
+                  <template x-if="activity.files">
+                    <span>
+                      • Modified: <span x-text="activity.files.join(', ')"></span>
+                    </span>
+                  </template>
+                </div>
+              </div>
+            </template>
+            <div x-show="activities.length === 0" style="text-align: center; padding: 2rem; color: var(--text-muted);">
+              No recent activity
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Worktree Modal -->
+  <div class="modal-overlay"
+       x-show="showWorktreeModal"
+       x-transition:enter="transition ease-out duration-300"
+       x-transition:enter-start="opacity-0"
+       x-transition:enter-end="opacity-100"
+       x-transition:leave="transition ease-in duration-200"
+       x-transition:leave-start="opacity-100"
+       x-transition:leave-end="opacity-0"
+       @click.self="showWorktreeModal=false">
+    <div class="modal-content"
+         x-show="showWorktreeModal"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         style="width: 99vw; height: 98vh; max-width: none; min-width: 1440px; min-height: 960px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: hidden;">
+      <!-- Worktree Modal Header -->
+      <div class="modal-header" style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%); border-bottom: 1px solid rgba(245, 158, 11, 0.2);">
+        <h2 class="heading" style="margin: 0; font-size: 1.5rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.75rem;">
+          <span style="color: var(--accent-orange); font-size: 1.75rem;">🏗️</span>
+          <span>Active Worktrees</span>
+          <span style="color: var(--text-muted); font-size: 0.9rem; font-weight: 400;">(Construction Zones)</span>
+        </h2>
+        <button class="btn btn-secondary" @click="showWorktreeModal=false"
+                style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--accent-orange);"
+                @mouseenter="$el.style.background = 'rgba(245, 158, 11, 0.2)'"
+                @mouseleave="$el.style.background = 'rgba(245, 158, 11, 0.1)'">
+          🔧 Close
+        </button>
+      </div>
+      <!-- Worktree Modal Content -->
+      <div class="modal-main" x-data="{
+        worktreeDetails: [],
+        async loadWorktreeDetails() {
+          try {
+            const response = await fetch('/api/tools/bob.worktree.list');
+            const data = await response.json();
+            this.worktreeDetails = [
+              ...data.committed?.map(item => ({ name: item.name, status: 'committed', color: 'var(--accent-green)', icon: '✅' })) || [],
+              ...data.dirty?.map(item => ({ name: item.name, status: 'dirty', color: 'var(--accent-yellow)', icon: '⚠️' })) || [],
+              ...data.clean?.map(item => ({ name: item.name, status: 'clean', color: 'var(--text-secondary)', icon: '💤' })) || []
+            ];
+          } catch (error) {
+            console.error('Failed to load worktree details:', error);
+          }
+        }
+      }" x-init="loadWorktreeDetails()">
+        <template x-if="worktreeDetails.length > 0">
+          <div>
+            <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
+              <template x-for="(worktree, index) in worktreeDetails" :key="index">
+                <div style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(245, 158, 11, 0.2); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);"
+                     @mouseenter="$el.style.background = 'linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%)'; $el.style.borderColor = 'rgba(245, 158, 11, 0.3)'"
+                     @mouseleave="$el.style.background = 'linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%)'; $el.style.borderColor = 'rgba(245, 158, 11, 0.2)'"
+                  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
+                    <h3 style="margin: 0; font-size: 1rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; color: var(--text-primary);"
+                        x-text="worktree.name"></h3>
+                    <span style="font-size: 1.4rem; color: var(--accent-orange);">🏗️</span>
+                  </div>
+                  <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
+                    <span class="status-badge"
+                          :class="{
+                            'status-completed': worktree.status === 'committed',
+                            'status-in-progress': worktree.status === 'dirty',
+                            'status-draft': worktree.status === 'clean'
+                          }"
+                          x-text="worktree.status"></span>
+                  </div>
+                  <div style="font-size: 0.875rem; color: var(--text-muted);">
+                    <div>Branch: <span style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;" x-text="worktree.name"></span></div>
+                    <div style="margin-top: 0.5rem;">
+                      Status: <span :style="'color: ' + worktree.color" x-text="worktree.status"></span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+        <template x-if="worktreeDetails.length === 0">
+          <div style="text-align: center; padding: 3rem; color: var(--text-muted);">
+            <div style="font-size: 3rem; margin-bottom: 1rem; color: var(--accent-orange);">🏗️</div>
+            <h3 style="color: var(--text-primary); font-family: var(--font-heading);">No Active Construction Zones</h3>
+            <p style="color: var(--text-secondary);">All workshop activity is currently on the main branch.</p>
+            <div style="margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-muted);">
+              <span style="color: var(--accent-orange);">🔧</span> Ready for new projects
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+  <!-- Delete Confirmation Modal - Compact Top-Right -->
+  <div x-show="confirmDelete"
+       x-transition:enter="transition ease-out duration-300"
+       x-transition:enter-start="opacity-0 translate-x-4"
+       x-transition:enter-end="opacity-100 translate-x-0"
+       x-transition:leave="transition ease-in duration-200"
+       x-transition:leave-start="opacity-100 translate-x-0"
+       x-transition:leave-end="opacity-0 translate-x-4"
+       style="position: fixed; top: 1rem; right: 1rem; z-index: 1000; max-width: 400px;">
+    <div class="glass"
+         style="background: rgba(0, 0, 0, 0.95); border: 2px solid var(--accent-red); padding: 1.5rem; border-radius: 16px; backdrop-filter: blur(20px);">
+      <div>
+        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
+          <div style="font-size: 1.5rem; color: var(--accent-red);">⚠️</div>
+          <h3 class="heading" style="color: var(--text-primary); margin: 0; font-size: 1rem;">Confirm Deletion</h3>
+        </div>
+        <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.4;">
+          Delete "<span style="color: var(--text-primary); font-weight: 600;" x-text="confirmDelete?.title"></span>"?
+          <br>
+          <strong style="color: var(--accent-red); font-size: 0.85rem;">This cannot be undone.</strong>
+        </p>
+        <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
+          <button class="btn btn-secondary"
+                  style="padding: 0.5rem 1rem; font-size: 0.85rem;"
+                  @click="cancelDelete()">
+            Cancel
+          </button>
+          <button class="btn"
+                  style="padding: 0.5rem 1rem; font-size: 0.85rem; background: var(--accent-red); border: 1px solid var(--accent-red); color: white;"
+                  @click="deleteSpec()">
+            🗑 Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Toast Notifications -->
+  <div class="toast-container"
+       style="position: fixed; top: 1rem; right: 1rem; z-index: 9998; max-width: 400px; padding-top: 0;"
+       :style="confirmDelete ? 'padding-top: 200px;' : 'padding-top: 0;'">
+    <template x-for="toast in toasts" :key="toast.id">
+      <div x-show="toast.visible"
+           x-transition:enter="transition ease-out duration-300 transform"
+           x-transition:enter-start="translate-x-full opacity-0"
+           x-transition:enter-end="translate-x-0 opacity-100"
+           x-transition:leave="transition ease-in duration-200 transform"
+           x-transition:leave-start="translate-x-0 opacity-100"
+           x-transition:leave-end="translate-x-full opacity-0"
+           class="toast-notification"
+           :class="{
+             'toast-success': toast.type === 'success',
+             'toast-error': toast.type === 'error',
+             'toast-info': toast.type === 'info'
+           }"
+           style="margin-bottom: 0.75rem; padding: 1rem 1.5rem; border-radius: 8px; backdrop-filter: blur(10px); border: 1px solid; box-shadow: 0 4px 20px rgba(0,0,0,0.15); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; min-width: 300px;"
+           @click="removeToast(toast.id)">
+        <span x-text="toast.message" style="flex: 1; margin-right: 0.75rem;"></span>
+        <button @click.stop="removeToast(toast.id)"
+                style="background: none; border: none; color: inherit; opacity: 0.7; font-size: 1.1em; cursor: pointer; padding: 0; margin: 0; line-height: 1;"
+                @mouseover="$el.style.opacity = '1'"
+                @mouseout="$el.style.opacity = '0.7'">×</button>
+      </div>
+    </template>
+  </div>
+  <style>
+    /* Modern Toast Notifications */
+    .toast-notification {
+      font-weight: 500;
+      font-size: 0.875rem;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .toast-success {
+      background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%) !important;
+      border: 1px solid rgba(34, 197, 94, 0.4) !important;
+      color: white !important;
+      box-shadow: 0 8px 32px rgba(34, 197, 94, 0.3) !important;
+    }
+    .toast-error {
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(185, 28, 28, 0.95) 100%) !important;
+      border: 1px solid rgba(239, 68, 68, 0.4) !important;
+      color: white !important;
+      box-shadow: 0 8px 32px rgba(239, 68, 68, 0.3) !important;
+    }
+    .toast-info {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(29, 78, 216, 0.95) 100%) !important;
+      border: 1px solid rgba(59, 130, 246, 0.4) !important;
+      color: white !important;
+      box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3) !important;
+    }
+    .toast-notification:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15), 0 15px 15px -5px rgba(0, 0, 0, 0.06);
+    }
+  </style>
+  <!-- Toast Notification Container -->
+  <div style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px;">
+    <template x-for="toast in toasts" :key="toast.id">
+      <div x-show="true"
+           x-transition:enter="transform transition ease-out duration-300"
+           x-transition:enter-start="translate-x-full opacity-0"
+           x-transition:enter-end="translate-x-0 opacity-100"
+           x-transition:leave="transform transition ease-in duration-200"
+           x-transition:leave-start="translate-x-0 opacity-100"
+           x-transition:leave-end="translate-x-full opacity-0"
+           :style="`background: ${getToastColor(toast.type)}; backdrop-filter: blur(10px); border-radius: 8px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.2); color: white; font-weight: 500; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;`"
+           @click="removeToast(toast.id)">
+        <span x-text="getToastIcon(toast.type)" style="font-size: 1.1rem;"></span>
+        <span x-text="toast.message" style="flex: 1; line-height: 1.4;"></span>
+        <button @click.stop="removeToast(toast.id)"
+                style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.8rem; cursor: pointer; opacity: 0.8; transition: opacity 0.2s;"
+                @mouseenter="$el.style.opacity = '1'"
+                @mouseleave="$el.style.opacity = '0.8'">
+          ✕
+        </button>
+      </div>
+    </template>
+  </div>
+  <!-- Global copy functionality and enhanced code block styles -->
+  <script>
+    // Global function for copying code blocks
+    function copyToClipboard(text, buttonId) {
+      navigator.clipboard.writeText(text).then(() => {
+        const button = document.getElementById(buttonId);
+        if (button) {
+          const originalText = button.innerHTML;
+          button.innerHTML = '✅ Copied!';
+          button.style.background = 'rgba(16, 185, 129, 0.2)';
+          button.style.borderColor = 'rgba(16, 185, 129, 0.4)';
+          setTimeout(() => {
+            button.innerHTML = originalText;
+            button.style.background = '';
+            button.style.borderColor = '';
+          }, 2000);
+        }
+        // Also show toast notification if available
+        try {
+          window.Alpine.store('dashboard').addToast('📋 Command copied to clipboard!', 'success');
+        } catch (e) {
+          console.log('📋 Command copied to clipboard!');
+        }
+      }).catch(err => {
+        console.error('Failed to copy:', err);
+        try {
+          window.Alpine.store('dashboard').addToast('❌ Failed to copy command', 'error');
+        } catch (e) {
+          console.error('Failed to copy command');
+        }
+      });
+    }
+  </script>
+  <style>
+    /* Enhanced code block styles with copy buttons */
+    .code-block-container {
+      position: relative;
+      margin: 1.5rem 0;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      overflow: hidden;
+    }
+    .code-block-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.75rem 1rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .code-lang {
+      font-size: 0.8rem;
+      color: rgba(245, 158, 11, 0.9);
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .copy-code-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: var(--text-primary);
+      padding: 0.4rem 0.8rem;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+    }
+    .copy-code-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      border-color: rgba(255, 255, 255, 0.3);
+      transform: translateY(-1px);
+    }
+    .code-block-container pre {
+      margin: 0;
+      padding: 1.2rem;
+      background: transparent;
+      border: none;
+      overflow-x: auto;
+    }
+    .code-block-container code {
+      background: transparent;
+      color: var(--text-primary);
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+      font-size: 0.9rem;
+      line-height: 1.5;
+    }
+    .inline-code {
+      background: rgba(255, 255, 255, 0.1) !important;
+      padding: 0.2rem 0.4rem !important;
+      border-radius: 3px !important;
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
+      font-size: 0.85em !important;
+      color: rgba(245, 158, 11, 0.9) !important;
+      border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    }
+    /* Quick Access section styling */
+    .spec-content h3 {
+      color: rgba(34, 197, 94, 0.9);
+      border-bottom: 2px solid rgba(34, 197, 94, 0.3);
+      padding-bottom: 0.5rem;
+      margin-bottom: 1.5rem;
+    }
+    .spec-content ul li {
+      margin: 0.5rem 0;
+      color: var(--text-secondary);
+    }
+    .spec-content ul li strong {
+      color: var(--text-primary);
+    }
+  </style>
+</body>
+</html>