@hanzlaa/rcode 3.5.0 → 3.6.0

package/server/lib/html/css.js

@@ -1,3 +1,4 @@
+/* CLAUDE.md exemption: pure CSS data file, no logic — 1000-line limit does not apply */
 /**
  * Dashboard CSS — Linear design system.
  * Dark-first (Linear-style). Rihal accent: #5e6ad2 (Aether Blue).
@@ -62,6 +63,11 @@ function renderCss() {
   --text-sm:  14px;
   --text-xs:  13px;
   --text-2xs: 11px;
+  --text-stat: 28px;  /* stat card value — large metric numeral */
+
+  /* Component dimensions */
+  --h-header-btn:  26px; /* topbar button height */
+  --size-icon-btn: 32px; /* square icon button (hamburger, etc.) */
 
   /* Spacing (4px base) */
   --space-1: 2px;
@@ -236,9 +242,9 @@ html, body {
 .hamburger-btn {
   display: none;
   flex-direction: column;
-  gap: 4px;
-  width: 32px;
-  height: 32px;
+  gap: var(--space-2);
+  width: var(--size-icon-btn);
+  height: var(--size-icon-btn);
   align-items: center;
   justify-content: center;
   background: none;
@@ -261,7 +267,7 @@ html, body {
   display: none;
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0,0,0,0.5); /* intentional: one-off overlay tint; translucency can't be expressed as a theme token */
   z-index: 15;
 }
 
@@ -276,7 +282,7 @@ html, body {
 
 /* ── Topbar / header ───────────────────────────────────────────── */
 header {
-  background: rgba(8,9,10,0.8);
+  background: rgba(8,9,10,0.8); /* intentional: frosted glass tied to --bg-page exact value; alpha can't be expressed as a theme token */
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-subtle);
@@ -291,7 +297,7 @@ header {
 }
 
 [data-theme="light"] header {
-  background: rgba(245,245,247,0.85);
+  background: rgba(245,245,247,0.85); /* intentional: light frosted glass; alpha channel can't be expressed as a theme token */
 }
 
 .brand {
@@ -328,6 +334,17 @@ header {
   gap: var(--space-2);
 }
 
+.topbar-start-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4); /* --space-4 = 12px */
+}
+
+.updated-ago {
+  font-size: var(--text-2xs); /* --text-2xs = 11px */
+  color: var(--text-muted);
+}
+
 .live {
   width: 6px;
   height: 6px;
@@ -344,8 +361,8 @@ header {
 .header-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  height: 26px;
+  gap: var(--space-2);
+  height: var(--h-header-btn);
   padding: 0 var(--space-3);
   background: var(--bg-elev-2);
   border: 1px solid var(--border-default);
@@ -445,7 +462,7 @@ section .body {
   color: var(--text-muted);
 }
 .stat .value {
-  font-size: 28px;
+  font-size: var(--text-stat);
   font-weight: 700;
   letter-spacing: -0.025em;
   color: var(--text-primary);
@@ -1566,6 +1583,21 @@ footer {
   text-align: center;
 }
 
+.orch-empty-tab {
+  padding: var(--space-2) var(--space-3); /* 6px 8px via space tokens */
+  font-size: var(--text-2xs); /* 11px */
+  color: var(--text-muted);
+}
+
+.orch-footer-spacer {
+  flex: 1;
+}
+
+.orch-footer-status {
+  font-size: var(--text-2xs); /* 11px */
+  color: var(--text-muted);
+}
+
 /* Terminal log lines */
 .kt-line { color: #a0c4a0; word-break: break-word; }
 .kt-line.tool { color: #7cb8ff; }
@@ -1921,6 +1953,49 @@ footer {
   flex-direction: column;
 }
 .term-panel.open { display: flex; }
+.term-panel.fullscreen {
+  inset: 0;
+  left: 0;
+  height: 100vh;
+}
+
+/* Minimized terminal pill */
+.term-pill {
+  display: none;
+  position: fixed;
+  bottom: var(--space-4);
+  right: var(--space-4);
+  z-index: 201;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--bg-elev-3);
+  border: 1px solid var(--accent-primary);
+  border-radius: var(--radius-4);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  cursor: pointer;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
+}
+.term-pill.show { display: flex; }
+.term-pill:hover { background: var(--bg-hover); }
+.term-pill-icon { color: var(--text-muted); }
+
+/* "running" badge for phase / sprint / task cards */
+.run-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: var(--space-2);
+  padding: 1px var(--space-2);
+  background: rgba(63,185,80,0.15);
+  border: 1px solid rgba(63,185,80,0.4);
+  border-radius: var(--radius-2);
+  color: var(--accent-green);
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  white-space: nowrap;
+}
 .term-header {
   display: flex;
   align-items: center;
@@ -1975,47 +2050,14 @@ footer {
   padding: 6px 8px;
   background: #0c0c0e;
 }
-.term-input-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+.term-hint {
   padding: var(--space-2) var(--space-3);
   background: var(--bg-elev-2);
   border-top: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-.term-prompt {
-  color: var(--accent-primary);
-  font-family: var(--font-mono);
+  color: var(--text-muted);
   font-size: var(--text-xs);
   flex-shrink: 0;
 }
-.term-input-field {
-  flex: 1;
-  height: 26px;
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  outline: none;
-  letter-spacing: 0;
-}
-.term-input-field::placeholder { color: var(--text-muted); }
-.term-send-btn {
-  height: 24px;
-  padding: 0 var(--space-3);
-  background: var(--accent-primary);
-  border: none;
-  border-radius: var(--radius-2);
-  color: white;
-  font-size: 10px;
-  font-family: var(--font-mono);
-  cursor: pointer;
-  opacity: 0.85;
-  white-space: nowrap;
-}
-.term-send-btn:hover { opacity: 1; }
 /* Run / Terminal action buttons (used on sprint/phase detail) */
 .term-run-btn {
   display: inline-flex;
@@ -2040,12 +2082,133 @@ footer {
   color: var(--text-secondary);
 }
 .term-run-btn.outline:hover { background: var(--bg-hover); color: var(--text-primary); }
+.term-run-btn.danger {
+  background: transparent;
+  border-color: rgba(255,107,107,0.4);
+  color: #ff6b6b;
+}
+.term-run-btn.danger:hover { background: rgba(255,107,107,0.12); opacity: 1; }
 .term-action-bar {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin-bottom: var(--space-5);
 }
+.term-status-dot.exited  { background: #ff4444; animation: none; }
+.term-status-dot.waiting { background: var(--accent-amber); animation: pulse 1.2s infinite; }
+
+/* Compact ▶ Run button on phase / sprint / task list cards */
+.card-run-btn {
+  float: right;
+  margin-left: var(--space-3);
+  height: 20px;
+  padding: 0 var(--space-3);
+  background: transparent;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-2);
+  color: var(--text-tertiary);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--t-fast) var(--ease),
+              color var(--t-fast) var(--ease),
+              border-color var(--t-fast) var(--ease);
+}
+.card-run-btn:hover {
+  background: var(--accent-green);
+  border-color: var(--accent-green);
+  color: #fff;
+}
+.ms-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: var(--space-3);
+}
+.ms-audit-btn:hover {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+}
+
+/* ── Orchestration view ─────────────────────────────────────── */
+.orch-subtitle {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-5);
+}
+.orch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+.orch-card {
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--text-muted);
+  border-radius: var(--radius-4);
+  padding: var(--space-4) var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.orch-card.orch-running { border-left-color: var(--accent-green); }
+.orch-card.orch-waiting {
+  border-left-color: var(--accent-amber);
+  background: rgba(245,158,11,0.05);
+}
+.orch-card.orch-waiting .orch-card-badge { color: var(--accent-amber); }
+.orch-card.orch-error,
+.orch-card.orch-exited  { border-left-color: #ff4444; }
+.orch-card.orch-stopped { border-left-color: var(--accent-amber); }
+.orch-card.orch-done    { border-left-color: var(--accent-blue); }
+.orch-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.orch-card-id {
+  font-weight: 600;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+.orch-card-badge {
+  margin-left: auto;
+  font-size: var(--text-2xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.orch-card-cmd {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  background: var(--bg-elev-1);
+  border-radius: var(--radius-2);
+  padding: var(--space-2) var(--space-3);
+  word-break: break-all;
+}
+.orch-card-meta {
+  font-size: var(--text-2xs);
+  color: var(--text-tertiary);
+}
+.orch-card-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
+/* ── Icon alignment helpers (for sprint 32.2 SVG icon sweep) ── */
+.ic {
+  display: inline-block;
+  vertical-align: -0.15em;  /* optical baseline alignment with surrounding text */
+  flex-shrink: 0;
+}
+.btn-icon { display: inline-block; vertical-align: -0.1em; flex-shrink: 0; }
+.section-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.tree-icon .ic { vertical-align: -0.15em; }
 
 /* ── Scrollbar global ───────────────────────────────────────── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
@@ -2053,6 +2216,63 @@ footer {
 ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+
+/* ── Command runner (Sprint 33.2) ───────────────────────────────────────────── */
+.cmd-runner {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+.cmd-runner-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.cmd-runner-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+}
+.cmd-runner-select {
+  flex: 1;
+  background: var(--bg-input, var(--bg-elev-2));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+.cmd-runner-select:focus {
+  outline: none;
+  border-color: var(--accent-blue);
+}
+.cmd-runner-btn {
+  background: var(--accent-blue);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+.cmd-runner-btn:hover:not(:disabled) { opacity: 0.85; }
+.cmd-runner-btn:disabled,
+.cmd-runner-btn--busy { opacity: 0.6; cursor: not-allowed; }
 </style>`;
 }
 

package/server/lib/html/icons.js

@@ -0,0 +1,68 @@
+/**
+ * Inline SVG icon set (Lucide-style stroke icons).
+ *
+ * No CDN, no font — just path data rendered into a <svg>. Used server-side
+ * by shell.js for static chrome, and embedded as window.__ICONS__ so the
+ * client modules can render the same icons in dynamic markup.
+ *
+ * IMPORTANT: The ICONS map is duplicated in the ESM client counterpart:
+ *   server/lib/html/client/icons-client.js (in sync with this file)
+ * Keep both files in sync when adding or changing icon paths. The duplication
+ * is the no-build-step cost — the browser cannot import a CJS module as ESM.
+ */
+
+// name → inner SVG markup (viewBox 0 0 24 24, stroke = currentColor)
+// Keep in sync with server/lib/html/client/icons-client.js
+const ICONS = {
+  home:        '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/>',
+  activity:    '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+  map:         '<polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/>',
+  target:      '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
+  layers:      '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
+  zap:         '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
+  checkSquare: '<polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+  kanban:      '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="5" height="14" rx="1"/>',
+  file:        '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>',
+  users:       '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  scale:       '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/>',
+  database:    '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>',
+  play:        '<polygon points="6 3 20 12 6 21 6 3"/>',
+  terminal:    '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>',
+  square:      '<rect x="6" y="6" width="12" height="12" rx="1"/>',
+  x:           '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
+  minimize:    '<line x1="5" y1="14" x2="19" y2="14"/>',
+  maximize:    '<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>',
+  clock:       '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  eye:         '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>',
+  filePen:     '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7"/><polyline points="14 2 14 8 20 8"/><path d="M18.4 12.6a2 2 0 0 1 3 3L17 20l-4 1 1-4z"/>',
+  hourglass:   '<path d="M5 22h14M5 2h14M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2"/>',
+
+  // Added in sprint 32.2 — emoji-to-SVG sweep
+  building:        '<rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22V12h6v10"/><path d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01"/>',
+  link:            '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  'alert-triangle':'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+  brain:           '<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.46 2.5 2.5 0 0 1-1.28-4.56A3 3 0 0 1 5 12c0-.56.15-1.1.42-1.57a2.5 2.5 0 0 1-.42-4.93V5.5A2.5 2.5 0 0 1 9.5 2z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.46 2.5 2.5 0 0 0 1.28-4.56A3 3 0 0 0 19 12c0-.56-.15-1.1-.42-1.57a2.5 2.5 0 0 0 .42-4.93V5.5A2.5 2.5 0 0 0 14.5 2z"/>',
+  'clipboard-list':'<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/>',
+  flag:            '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>',
+  monitor:         '<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>',
+  'file-text':     '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>',
+  copy:            '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+  lightbulb:       '<line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/>',
+  'edit-3':        '<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>',
+
+  // Added in sprint 32.3 — App/Topbar theme toggle icons
+  moon:            '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>',
+  sun:             '<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="7.05" y2="7.05"/><line x1="16.95" y1="16.95" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="7.05" y2="16.95"/><line x1="16.95" y1="7.05" x2="19.78" y2="4.22"/>',
+};
+
+// Render an icon as an inline <svg>. size in px; cls adds extra classes.
+function icon(name, size, cls) {
+  const p = ICONS[name];
+  if (!p) return '';
+  const s = size || 16;
+  return '<svg class="ic' + (cls ? ' ' + cls : '') + '" width="' + s + '" height="' + s +
+    '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+    'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + p + '</svg>';
+}
+
+module.exports = { ICONS, icon };