@cluesmith/codev 2.0.2 → 2.0.3

package/templates/dashboard/css/tabs.css

@@ -1,314 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-/* 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

@@ -1,45 +0,0 @@
-/* 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

@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AF: {{PROJECT_NAME}}</title>
-  <!-- CSS files loaded in dependency order (relative paths for proxy compatibility) -->
-  <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/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>
-  </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>
-
-  <!-- Create file dialog (Bugfix #131) -->
-  <div class="dialog-overlay hidden" id="create-file-dialog">
-    <div class="dialog">
-      <h3>Create New File</h3>
-      <div class="quick-paths">
-        <button class="quick-path" onclick="setCreateFilePath('codev/specs/')">codev/specs/</button>
-        <button class="quick-path" onclick="setCreateFilePath('codev/plans/')">codev/plans/</button>
-        <button class="quick-path" onclick="setCreateFilePath('src/')">src/</button>
-      </div>
-      <input type="text" id="create-file-path-input" placeholder="Enter file path (e.g., src/utils/helper.ts)" />
-      <div class="dialog-actions">
-        <button class="btn" onclick="hideCreateFileDialog()">Cancel</button>
-        <button class="btn btn-primary" onclick="createFile()">Create</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>
-
-  <!-- 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 -->
-  <!-- JS files (relative paths for proxy compatibility) -->
-  <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/main.js"></script>
-</body>
-</html>