@cluesmith/codev 1.4.1 → 1.4.2

package/templates/dashboard/css/tabs.css

@@ -0,0 +1,314 @@
+/* Tab Bar, Tab Buttons, Overflow Menu */
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  align-items: center;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  min-height: 40px;
+  overflow: visible;  /* Allow overflow menu dropdown to be visible */
+  position: relative;  /* Position context for overflow menu */
+}
+
+.tabs-scroll {
+  display: flex;
+  overflow-x: auto;
+  flex: 1;
+  scrollbar-width: none;
+}
+
+.tabs-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-right: 1px solid var(--border);
+  border-bottom: 2px solid transparent;  /* Reserve space for active indicator */
+  white-space: nowrap;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.tab:hover {
+  background: var(--tab-hover);
+}
+
+.tab.active {
+  background: var(--bg-tertiary);
+  border-bottom: 2px solid var(--accent);  /* Blue accent line */
+}
+
+.tab.new-tab {
+  animation: tab-pulse 0.5s ease-out;
+}
+
+@keyframes tab-pulse {
+  0% { background: var(--accent); }
+  100% { background: var(--tab-active); }
+}
+
+.tab .icon {
+  font-size: 14px;
+}
+
+.tab .name {
+  font-size: 13px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-secondary);
+}
+
+.tab.active .name {
+  color: var(--text-primary);
+}
+
+.tab .status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+/* Shape modifiers for accessibility (not just color) */
+.tab .status-dot--diamond {
+  border-radius: 1px;
+  transform: rotate(45deg);
+}
+
+/* Ring shape for pr-ready (accessibility: distinct from circle) */
+.tab .status-dot--ring {
+  box-shadow: inset 0 0 0 1.5px currentColor;
+  background: transparent !important;
+  color: var(--status-waiting);
+}
+
+/* Distinct animations per status category (spec 0019) */
+@keyframes status-pulse {
+  /* Pulsing: Active/working (spawning, implementing) */
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(0.9); }
+}
+
+@keyframes status-blink-slow {
+  /* Slow blink: Idle/waiting (pr-ready) */
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+@keyframes status-blink-fast {
+  /* Fast blink: Error/blocked */
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+.tab .status-dot--pulse {
+  animation: status-pulse 2s ease-in-out infinite;
+}
+
+.tab .status-dot--blink-slow {
+  animation: status-blink-slow 3s ease-in-out infinite;
+}
+
+.tab .status-dot--blink-fast {
+  animation: status-blink-fast 0.8s ease-in-out infinite;
+}
+
+/* Respect reduced motion preference (WCAG 2.3.3) */
+/* Motion-independent differentiators remain: diamond for blocked, ring for pr-ready */
+@media (prefers-reduced-motion: reduce) {
+  .tab .status-dot--pulse,
+  .tab .status-dot--blink-slow,
+  .tab .status-dot--blink-fast {
+    animation: none;
+  }
+}
+
+.tab .close {
+  opacity: 0.6;  /* Always clearly visible */
+  margin-left: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 1;
+  min-width: 24px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab:hover .close {
+  opacity: 0.9;
+}
+
+.tab .close:hover {
+  opacity: 1;
+  background: rgba(239, 68, 68, 0.2);  /* Red tint on hover */
+  color: #ef4444;
+}
+
+/* Add buttons */
+.add-buttons {
+  display: flex;
+  gap: 4px;
+  padding: 0 8px;
+  flex-shrink: 0;
+}
+
+.add-btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.add-btn:hover {
+  border-style: solid;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+}
+
+/* Overflow indicator */
+.overflow-btn {
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border: none;
+  border-left: 1px solid var(--border);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: none;  /* Hidden by default, shown via JS */
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.overflow-btn:hover {
+  background: var(--tab-hover);
+}
+
+.overflow-btn:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.overflow-count {
+  font-size: 11px;
+  background: var(--accent);
+  color: white;
+  padding: 1px 5px;
+  border-radius: 8px;
+}
+
+/* Overflow menu dropdown */
+.overflow-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  max-height: 300px;
+  overflow-y: auto;
+  min-width: 200px;
+  z-index: 100;
+}
+
+.overflow-menu.hidden {
+  display: none;
+}
+
+.overflow-menu-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.overflow-menu-item:hover,
+.overflow-menu-item:focus {
+  background: var(--tab-hover);
+  outline: none;
+}
+
+.overflow-menu-item.active {
+  background: var(--tab-active);
+  border-left: 2px solid var(--accent);
+}
+
+.overflow-menu-item .icon {
+  font-size: 14px;
+}
+
+.overflow-menu-item .name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.overflow-menu-item .open-external {
+  opacity: 0.5;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.overflow-menu-item .open-external:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Tab content */
+.tab-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tab-content iframe {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: #000;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  gap: 12px;
+}
+
+.empty-state .hint {
+  font-size: 13px;
+  text-align: center;
+  max-width: 300px;
+}
+
+/* Projects tab without close button */
+.tab.tab-uncloseable .close {
+  display: none;
+}

package/templates/dashboard/css/utilities.css

@@ -0,0 +1,50 @@
+/* Utility Classes and Miscellaneous Styles */
+
+/* Hidden utility */
+.hidden {
+  display: none !important;
+}
+
+/* Accessibility: Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus visible for keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Selection color */
+::selection {
+  background: var(--accent);
+  color: white;
+}

package/templates/dashboard/css/variables.css

@@ -0,0 +1,45 @@
+/* Dashboard CSS Variables */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #252525;
+  --bg-tertiary: #2a2a2a;
+  --border: #333;
+  --text-primary: #fff;
+  --text-secondary: #ccc;
+  --text-muted: #666;
+  --accent: #3b82f6;
+  --tab-active: #333;
+  --tab-hover: #2a2a2a;
+  /* Status indicator colors per spec 0019 */
+  --status-active: #22c55e;    /* Green: spawning, implementing */
+  --status-waiting: #eab308;   /* Yellow: pr-ready (waiting for review) */
+  --status-error: #ef4444;     /* Red: blocked */
+  --status-complete: #9e9e9e;  /* Gray: complete */
+  /* Project lifecycle status colors per spec 0045 */
+  --project-conceived: #eab308;    /* Yellow */
+  --project-specified: #3b82f6;    /* Blue */
+  --project-planned: #3b82f6;      /* Blue */
+  --project-implementing: #f97316; /* Orange */
+  --project-implemented: #a855f7;  /* Purple */
+  --project-committed: #22c55e;    /* Green */
+  --project-integrated: #9e9e9e;   /* Gray */
+  --project-abandoned: #ef4444;    /* Red */
+  --project-on-hold: #9e9e9e;      /* Gray */
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/templates/dashboard/index.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent Farm - {{PROJECT_NAME}}</title>
+  <!-- CSS files loaded in dependency order -->
+  <link rel="stylesheet" href="/dashboard/css/variables.css">
+  <link rel="stylesheet" href="/dashboard/css/layout.css">
+  <link rel="stylesheet" href="/dashboard/css/tabs.css">
+  <link rel="stylesheet" href="/dashboard/css/statusbar.css">
+  <link rel="stylesheet" href="/dashboard/css/dialogs.css">
+  <link rel="stylesheet" href="/dashboard/css/activity.css">
+  <link rel="stylesheet" href="/dashboard/css/projects.css">
+  <link rel="stylesheet" href="/dashboard/css/files.css">
+  <link rel="stylesheet" href="/dashboard/css/utilities.css">
+</head>
+<body>
+  <header class="header">
+    <h1>Agent Farm - {{PROJECT_NAME}}</h1>
+    <div class="header-actions">
+      <button class="btn activity-summary-btn" onclick="showActivitySummary()" title="What did I do today?">
+        🕐 Today
+      </button>
+    </div>
+  </header>
+
+  <main class="main">
+    <!-- Left pane: Architect terminal -->
+    <div class="left-pane">
+      <div class="pane-header">
+        <span class="status-dot" id="architect-status"></span>
+        <span>Architect</span>
+      </div>
+      <div id="architect-content"></div>
+    </div>
+
+    <!-- Right pane: Tabbed interface -->
+    <div class="right-pane">
+      <div class="tab-bar">
+        <div class="tabs-scroll" id="tabs-container"></div>
+        <button class="overflow-btn" id="overflow-btn" onclick="toggleOverflowMenu()" aria-haspopup="true" aria-expanded="false" title="Show all tabs">
+          <span>...</span>
+          <span class="overflow-count" id="overflow-count">+0</span>
+        </button>
+        <div class="overflow-menu hidden" id="overflow-menu" role="menu"></div>
+      </div>
+      <div class="tab-content" id="tab-content"></div>
+    </div>
+  </main>
+
+  <footer class="status-bar">
+    <div class="status-item" id="status-architect">
+      <span class="dot" style="background: var(--text-muted)"></span>
+      <span>Architect: stopped</span>
+    </div>
+    <div class="status-item" id="status-builders">
+      <span>0 builders</span>
+    </div>
+    <div class="status-item" id="status-shells">
+      <span>0 shells</span>
+    </div>
+    <div class="status-item" id="status-files">
+      <span>0 files</span>
+    </div>
+  </footer>
+
+  <!-- File picker dialog -->
+  <div class="dialog-overlay hidden" id="file-dialog">
+    <div class="dialog">
+      <h3>Open File</h3>
+      <div class="quick-paths">
+        <button class="quick-path" onclick="setFilePath('codev/specs/')">codev/specs/</button>
+        <button class="quick-path" onclick="setFilePath('codev/plans/')">codev/plans/</button>
+        <button class="quick-path" onclick="setFilePath('codev/reviews/')">codev/reviews/</button>
+      </div>
+      <input type="text" id="file-path-input" placeholder="Enter file path..." />
+      <div class="dialog-actions">
+        <button class="btn" onclick="hideFileDialog()">Cancel</button>
+        <button class="btn" onclick="openFile()">Open</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Close confirmation dialog -->
+  <div class="dialog-overlay hidden" id="close-dialog">
+    <div class="dialog">
+      <h3 id="close-dialog-title">Close tab?</h3>
+      <p id="close-dialog-message" style="color: var(--text-secondary); margin-bottom: 16px; font-size: 14px;"></p>
+      <div class="dialog-actions">
+        <button class="btn" onclick="hideCloseDialog()">Cancel</button>
+        <button class="btn btn-danger" onclick="confirmClose()">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Context menu -->
+  <div class="context-menu hidden" id="context-menu" role="menu">
+    <div class="context-menu-item" role="menuitem" tabindex="0" data-action="openContextTab" onclick="openContextTab()" onkeydown="handleContextMenuKeydown(event)">Open in New Tab</div>
+    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="reloadContextTab" id="context-reload" onclick="reloadContextTab()" onkeydown="handleContextMenuKeydown(event)">Reload</div>
+    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeActiveTab" onclick="closeActiveTab()" onkeydown="handleContextMenuKeydown(event)">Close</div>
+    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeOtherTabs" onclick="closeOtherTabs()" onkeydown="handleContextMenuKeydown(event)">Close Others</div>
+    <div class="context-menu-item danger" role="menuitem" tabindex="-1" data-action="closeAllTabs" onclick="closeAllTabs()" onkeydown="handleContextMenuKeydown(event)">Close All</div>
+  </div>
+
+  <!-- Toast container -->
+  <div class="toast-container" id="toast-container"></div>
+
+  <!-- Activity Summary Modal (Spec 0059) -->
+  <div class="dialog-overlay hidden" id="activity-modal">
+    <div class="dialog activity-dialog">
+      <div class="activity-dialog-header">
+        <h3>Today's Summary</h3>
+        <button class="activity-close-btn" onclick="closeActivityModal()" title="Close (Esc)">×</button>
+      </div>
+      <div class="activity-dialog-content" id="activity-content">
+        <div class="activity-loading">
+          <span class="activity-spinner"></span>
+          Loading activity...
+        </div>
+      </div>
+      <div class="activity-dialog-footer">
+        <button class="btn" onclick="copyActivitySummary()">📋 Copy to Clipboard</button>
+        <button class="btn" onclick="closeActivityModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- File search palette (Cmd+P) - Spec 0058 -->
+  <div id="file-palette" class="file-palette hidden">
+    <div class="file-palette-backdrop" onclick="closePalette()"></div>
+    <div class="file-palette-container">
+      <input type="text"
+             id="palette-input"
+             class="file-palette-input"
+             placeholder="Search files by name..."
+             oninput="onPaletteInput(this.value)"
+             onkeydown="onPaletteKeydown(event)" />
+      <div id="palette-results" class="file-palette-results"></div>
+    </div>
+  </div>
+
+  <!-- State injection (replaced by server) -->
+  <script>
+    // STATE_INJECTION_POINT
+  </script>
+
+  <!-- JavaScript files loaded in dependency order -->
+  <script src="/dashboard/js/state.js"></script>
+  <script src="/dashboard/js/utils.js"></script>
+  <script src="/dashboard/js/tabs.js"></script>
+  <script src="/dashboard/js/dialogs.js"></script>
+  <script src="/dashboard/js/projects.js"></script>
+  <script src="/dashboard/js/files.js"></script>
+  <script src="/dashboard/js/activity.js"></script>
+  <script src="/dashboard/js/main.js"></script>
+</body>
+</html>