@hanzlaa/rcode 3.5.0 → 3.6.0

package/server/lib/html/client/components/shared.js

@@ -0,0 +1,330 @@
+/**
+ * Shared visual-primitive Preact components.
+ *
+ * All components are stateless unless noted. Each ports its string-template
+ * counterpart from client-render.js exactly, preserving CSS class names.
+ *
+ * Import from here; do NOT inline these in view modules.
+ */
+
+import { html, useState } from '../preact.js';
+import { pctNum, chip as chipDesc, humanDate, pct } from '../util.js';
+import {
+  runAndOpenTerm, isSessionRunning, runningInSprint, runningInPhase,
+} from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+// ---- Toast helper (shared by CmdHint copy action and any view) ----
+export function showToast(msg) {
+  const el = document.getElementById('toast');
+  if (!el) return;
+  el.textContent = msg;
+  el.classList.add('show');
+  setTimeout(() => el.classList.remove('show'), 2000);
+}
+
+// ---- Chip ----
+/**
+ * Status chip.
+ * @param {{ status: string }} props
+ */
+export function Chip({ status }) {
+  const { cls, label } = chipDesc(status);
+  return html`<span class=${'status-chip ' + cls}>● ${label}</span>`;
+}
+
+// ---- Tag ----
+/**
+ * Inline label tag.
+ * @param {{ children: any }} props
+ */
+export function Tag({ children }) {
+  return html`<span class="tag">${children}</span>`;
+}
+
+// ---- ProgressBar ----
+/**
+ * Horizontal progress bar matching progressBar() in client-render.js.
+ * @param {{ done: number, total: number }} props
+ */
+export function ProgressBar({ done, total }) {
+  const p = pctNum(done, total);
+  const color =
+    p >= 100 ? 'var(--accent-green)' :
+    p > 50   ? 'var(--accent-blue)'  :
+               'var(--accent-amber)';
+  return html`
+    <div class="progress-bar">
+      <div class="progress-bar-fill" style=${'width:' + p + '%;background:' + color}></div>
+    </div>
+  `;
+}
+
+// ---- CompletionRing ----
+/**
+ * SVG completion ring matching completionRing() in client-render.js.
+ * @param {{ done: number, total: number }} props
+ */
+export function CompletionRing({ done, total }) {
+  const p = pctNum(done, total);
+  const r = 28;
+  const c = 2 * Math.PI * r;
+  const offset = c - (p / 100) * c;
+  return html`
+    <div class="completion-ring">
+      <svg width="64" height="64" viewBox="0 0 64 64">
+        <circle cx="32" cy="32" r=${r} fill="none" stroke="var(--border)" stroke-width="4"/>
+        <circle cx="32" cy="32" r=${r} fill="none" stroke="var(--accent-green)" stroke-width="4"
+          stroke-dasharray=${c} stroke-dashoffset=${offset} stroke-linecap="round"/>
+      </svg>
+      <span class="ring-text">${p}%</span>
+    </div>
+  `;
+}
+
+// ---- Breadcrumb ----
+/**
+ * Back-button breadcrumb row.
+ * @param {{ items: Array<{label: string, hash: string}> }} props
+ */
+export function Breadcrumb({ items }) {
+  return html`
+    <div class="breadcrumb">
+      ${items.map(item => html`
+        <button class="back-btn" onClick=${() => { location.hash = item.hash; }}>
+          ← ${item.label}
+        </button>
+      `)}
+    </div>
+  `;
+}
+
+// ---- CmdHint + CmdHints ----
+/**
+ * Single command hint row — copy to clipboard on click.
+ * @param {{ cmd: string, desc: string }} props
+ */
+export function CmdHint({ cmd, desc }) {
+  function handleClick() {
+    navigator.clipboard.writeText(cmd)
+      .then(() => showToast('Copied: ' + cmd))
+      .catch(() => {
+        const ta = document.createElement('textarea');
+        ta.value = cmd;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        showToast('Copied: ' + cmd);
+      });
+  }
+  return html`
+    <div class="cmd-hint-item" onClick=${handleClick}>
+      <span class="cmd-text">${cmd}</span>
+      <span class="cmd-desc">${desc}</span>
+      <${Icon} name="copy" size=${14} cls="cmd-copy"/>
+    </div>
+  `;
+}
+
+/**
+ * Collapsible command-hints accordion.
+ * @param {{ hints: Array<[string, string]> }} props — each item is [cmd, desc]
+ */
+export function CmdHints({ hints }) {
+  if (!hints || !hints.length) return null;
+  return html`
+    <details class="cmd-hints">
+      <summary><${Icon} name="lightbulb" size=${14}/> Commands</summary>
+      <div class="cmd-hints-list">
+        ${hints.map(([cmd, desc]) => html`<${CmdHint} key=${cmd} cmd=${cmd} desc=${desc}/>`)}
+      </div>
+    </details>
+  `;
+}
+
+// ---- RunBtn ----
+/**
+ * Compact run button. Calls runAndOpenTerm from orchestrator.js.
+ * @param {{ storyId: string, cmd: string, label: string }} props
+ */
+export function RunBtn({ storyId, cmd, label }) {
+  function handleClick(e) {
+    e.stopPropagation();
+    runAndOpenTerm(storyId, cmd, label);
+  }
+  return html`
+    <button class="card-run-btn" title=${'Run ' + label} onClick=${handleClick}>
+      ▶ Run
+    </button>
+  `;
+}
+
+// ---- RunningBadge ----
+/**
+ * "N running" badge. Returns null when count is 0.
+ * @param {{ count: number }} props
+ */
+export function RunningBadge({ count }) {
+  if (!count) return null;
+  return html`<span class="run-badge">● ${count} running</span>`;
+}
+
+// ---- PhaseCard ----
+/**
+ * Clickable phase card used in Milestones, Phases, and Roadmap views.
+ * Ports phaseCard() from client-render.js:146-165.
+ * @param {{ phase: object, S: object }} props
+ */
+export function PhaseCard({ phase: p, S }) {
+  const sps = p.sprints || [];
+  const stories = sps.flatMap(s => s.stories || []);
+  const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
+  const isCur = String(p.id) === String(S && S.currentPhase);
+  const running = runningInPhase(p);
+  const borderStyle = isCur ? 'border-left-color:var(--accent-amber)' : '';
+  return html`
+    <div class=${'item item-clickable'} style=${borderStyle}
+      onClick=${() => { location.hash = 'phases/' + p.id; }}>
+      <div class="item-title">
+        ${sps.length ? html`<${RunBtn} storyId=${'phase-' + p.id} cmd=${'/rihal-execute ' + p.id} label=${'Phase ' + p.id}/>` : null}
+        Phase ${p.id} — ${p.name}
+        ${isCur ? html`<${Tag}>current</${Tag}>` : null}
+        <${Chip} status=${p.status}/>
+      </div>
+      <div class="item-meta">
+        <${Tag}>${sps.length} sprint${sps.length !== 1 ? 's' : ''}</${Tag}>
+        <${Tag}>${done}/${stories.length} tasks</${Tag}>
+        ${stories.length > 0 ? html`<${Tag}>${pct(done, stories.length)} done</${Tag}>` : null}
+        ${p.completed_at ? html`
+          <span style="color:var(--text-muted);font-size:var(--text-xs);">
+            Done ${humanDate(p.completed_at)}
+          </span>
+        ` : null}
+        <${RunningBadge} count=${running}/>
+      </div>
+      ${stories.length > 0 ? html`
+        <div style="margin-top:6px;"><${ProgressBar} done=${done} total=${stories.length}/></div>
+      ` : null}
+      ${sps[0]?.goal ? html`
+        <div style="color:var(--text-secondary);font-size:var(--text-sm);margin-top:4px;">
+          ${sps[0].goal}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
+// ---- SprintCard ----
+/**
+ * Clickable sprint card used in Phases, Sprints, and Roadmap views.
+ * Ports sprintCard() from client-render.js:167-188.
+ * @param {{ sprint: object, S: object }} props
+ */
+export function SprintCard({ sprint: s, S }) {
+  const stories = s.stories || [];
+  const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
+  const isCur = s.id === (S && S.currentSprint);
+  const phaseId = s.phaseId || s.id || '';
+  const running = runningInSprint(s);
+  const borderStyle = isCur
+    ? 'border-left-color:var(--accent-amber);background:rgba(245,158,11,0.04)'
+    : '';
+  return html`
+    <div class=${'item item-clickable' + (isCur ? ' sprint-current' : '')} style=${borderStyle}
+      onClick=${() => { location.hash = 'sprints/' + s.id; }}>
+      <div class="item-title">
+        <${RunBtn} storyId=${'sprint-' + s.id} cmd=${'/rihal-execute-sprint ' + s.id} label=${'Sprint ' + s.id}/>
+        Sprint ${s.id} — ${s.goal || 'No goal'}
+        ${isCur ? html`<${Tag}>current</${Tag}>` : null}
+        <${Chip} status=${s.status}/>
+      </div>
+      <div class="item-meta">
+        ${s.phaseId ? html`<${Tag}>Phase ${s.phaseId}</${Tag}>` : null}
+        <${Tag}>${done}/${stories.length} tasks</${Tag}>
+        ${s.velocity_target != null ? html`<${Tag}>Target: ${s.velocity_target}pts</${Tag}>` : null}
+        ${s.velocity_actual != null ? html`<${Tag}>Actual: ${s.velocity_actual}pts</${Tag}>` : null}
+        <${RunningBadge} count=${running}/>
+      </div>
+      <div style="margin-top:6px;"><${ProgressBar} done=${done} total=${stories.length}/></div>
+      ${stories.length === 0 ? html`
+        <div class="empty-action" style="margin-top:var(--space-2);font-size:var(--text-xs);">
+          No tasks — run <code>/rihal-plan ${phaseId}</code> to populate
+        </div>
+      ` : null}
+      ${s.started_at ? html`
+        <div style="color:var(--text-muted);font-size:var(--text-xs);margin-top:4px;">
+          ${humanDate(s.started_at)}${s.completed_at ? ' → ' + humanDate(s.completed_at) : ' → ongoing'}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
+// ---- TaskCard ----
+/**
+ * Expandable task card. Expansion is component useState (replaces toggleTaskDetail).
+ * Ports taskCard() from client-render.js:190-234.
+ * @param {{ task: object }} props
+ */
+export function TaskCard({ task: t }) {
+  const [expanded, setExpanded] = useState(false);
+  const done = t.status === 'done' || t.status === 'completed';
+  const running = isSessionRunning(t.id);
+
+  // Build cmd hints for this task
+  const taskCmds = [];
+  if (t.id) {
+    if (!done) {
+      taskCmds.push(['/rihal-dev-story ' + t.id, 'Implement this story']);
+      taskCmds.push(['/rihal-create-story ' + (t.sprintId || ''), 'Add related story']);
+    } else {
+      taskCmds.push(['/rihal-verify-work ' + t.id, 'Verify this story']);
+      taskCmds.push(['/rihal-code-review ' + t.id, 'Review code for this story']);
+    }
+    if (t.sprintId) {
+      taskCmds.push(['/rihal-sprint-status ' + t.sprintId, 'Sprint ' + t.sprintId + ' status']);
+    }
+  }
+
+  return html`
+    <div class="item item-clickable" data-status=${t.status || ''}
+      style=${done ? 'opacity:.65' : ''}
+      onClick=${() => setExpanded(e => !e)}>
+      <div class="item-title" style=${done ? 'text-decoration:line-through' : ''}>
+        ${t.id && !done ? html`<${RunBtn} storyId=${t.id} cmd=${'/rihal-dev-story ' + t.id} label=${'Story ' + t.id}/>` : null}
+        ${done ? '✓ ' : ''}${t.title}
+        <${Chip} status=${t.status}/>
+        <span class="task-expand-icon">${expanded ? '▼' : '▶'}</span>
+      </div>
+      <div class="item-meta">
+        ${t.points ? html`<${Tag}>${t.points}pts</${Tag}>` : null}
+        ${t.id ? html`<${Tag}>${t.id}</${Tag}>` : null}
+        ${t.sprintId ? html`<${Tag}>Sprint ${t.sprintId}</${Tag}>` : null}
+        ${t.phaseId ? html`<${Tag}>Phase ${t.phaseId}</${Tag}>` : null}
+        ${t.id && running ? html`<span class="run-badge">● running</span>` : null}
+      </div>
+      ${expanded ? html`
+        <div class="task-detail">
+          ${t.id ? html`<div class="task-detail-row"><strong>ID:</strong> <code>${t.id}</code></div>` : null}
+          ${t.points ? html`<div class="task-detail-row"><strong>Points:</strong> ${t.points}</div>` : null}
+          <div class="task-detail-row"><strong>Status:</strong> <${Chip} status=${t.status || 'unknown'}/></div>
+          ${t.sprintId ? html`<div class="task-detail-row"><strong>Sprint:</strong> ${t.sprintId}</div>` : null}
+          ${t.sprintGoal ? html`<div class="task-detail-row"><strong>Sprint Goal:</strong> ${t.sprintGoal}</div>` : null}
+          ${t.phaseId ? html`
+            <div class="task-detail-row">
+              <strong>Phase:</strong> P${t.phaseId}${t.phaseName ? ' — ' + t.phaseName : ''}
+            </div>
+          ` : null}
+          ${t.acceptance ? html`<div class="task-detail-row"><strong>Acceptance:</strong> ${t.acceptance}</div>` : null}
+          ${t.assignee ? html`<div class="task-detail-row"><strong>Assignee:</strong> ${t.assignee}</div>` : null}
+          ${taskCmds.length ? html`
+            <div class="task-detail-cmds">
+              ${taskCmds.map(([cmd, desc]) => html`<${CmdHint} key=${cmd} cmd=${cmd} desc=${desc}/>`)}
+            </div>
+          ` : null}
+        </div>
+      ` : null}
+    </div>
+  `;
+}

package/server/lib/html/client/icons-client.js

@@ -0,0 +1,85 @@
+/**
+ * Client-side ESM icon set — mirrors server/lib/html/icons.js.
+ *
+ * IMPORTANT: The ICONS map below is a copy of the one in icons.js (CJS).
+ * Keep both files in sync when adding or changing icon paths.
+ * Cross-reference: server/lib/html/icons.js (server-side CJS counterpart)
+ *
+ * Why two files? icons.js uses `module.exports` for Node require() in shell.js.
+ * The browser cannot import a CJS module as ESM without a build step, so this
+ * ESM-only copy is the no-build-step cost. The data is identical; update both.
+ */
+
+import { h } from './preact.js';
+
+// name → inner SVG markup (viewBox 0 0 24 24, stroke = currentColor)
+// Keep in sync with server/lib/html/icons.js
+export 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"/>',
+};
+
+/**
+ * Icon Preact component. Renders an inline SVG from the ICONS map.
+ *
+ * Props:
+ *   name  {string}  — key in ICONS
+ *   size  {number}  — px, default 16
+ *   cls   {string}  — extra CSS classes
+ *
+ * Usage: html`<${Icon} name="home" size=${16} />`
+ */
+export function Icon({ name, size = 16, cls = '' }) {
+  const paths = ICONS[name];
+  if (!paths) return null;
+  return h('svg', {
+    class: 'ic' + (cls ? ' ' + cls : ''),
+    width: size,
+    height: size,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+    dangerouslySetInnerHTML: { __html: paths },
+  });
+}