@hanzlaa/rcode 4.1.2 → 4.3.0

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

@@ -0,0 +1,300 @@
+/**
+ * PhaseGraph — phase dependency graph, hand-rolled inline SVG (no libs).
+ *
+ * Layout: layered DAG. Each phase gets a layer = 0 when it has no resolvable
+ * dependencies, else 1 + max(layer of each dependency) — roots on the left,
+ * dependents to the right. A layer with more than MAX_ROWS phases wraps into
+ * adjacent sub-columns so 34+ phase milestones stay readable instead of
+ * producing one mile-high column. Layering is iterative with a pass cap and
+ * monotonic updates, so a dependency cycle in bad data cannot loop forever.
+ *
+ * Honest states:
+ *   - no phases            → friendly empty message
+ *   - no cross-phase deps  → simple wrapped flow row of chips (no fake DAG)
+ *   - real deps            → layered DAG with curved edges + arrowheads
+ *
+ * Interactions: hover highlights a node's ancestors + descendants and dims
+ * the rest; click navigates to the phase; an SVG-rendered tooltip shows the
+ * full name, sprint count and dependency list. The SVG sits in a horizontal
+ * scroll container for wide graphs.
+ */
+
+import { html, useState, useMemo } from '../preact.js';
+import { Icon } from '../icons-client.js';
+
+const NODE_W = 150, NODE_H = 44;   // capped chip size — names truncate to fit
+const COL_GAP = 56,  ROW_GAP = 14;
+const PAD = 16;
+const MAX_ROWS = 8;                // rows per column before a layer wraps
+
+/** Collapse the many status spellings into the four visual kinds. */
+export function statusKind(status) {
+  const s = String(status || '');
+  if (/blocked/i.test(s)) return 'blocked';
+  if (/complete|done/i.test(s)) return 'done';
+  if (/active|executing|in_progress|progress/i.test(s)) return 'active';
+  return 'todo';
+}
+
+/** Dependencies that resolve to a known phase (self-references dropped). */
+function resolvedDeps(p, known) {
+  return (p.dependsOn || []).map(String)
+    .filter(d => known.has(d) && d !== String(p.id));
+}
+
+/**
+ * Topological layering. Returns Map(id → layer). Monotonic updates + a pass
+ * cap of phases.length guarantee termination even on cyclic input.
+ */
+export function computeLayers(phases) {
+  const known = new Set(phases.map(p => String(p.id)));
+  const layers = new Map(phases.map(p => [String(p.id), 0]));
+  for (let pass = 0; pass < phases.length; pass++) {
+    let changed = false;
+    for (const p of phases) {
+      const deps = resolvedDeps(p, known);
+      if (!deps.length) continue;
+      const next = 1 + Math.max(...deps.map(d => layers.get(d) || 0));
+      if (next > (layers.get(String(p.id)) || 0)) {
+        layers.set(String(p.id), next);
+        changed = true;
+      }
+    }
+    if (!changed) break;
+  }
+  return layers;
+}
+
+/** parents/children adjacency over resolvable dependencies. */
+function buildAdjacency(phases) {
+  const known = new Set(phases.map(p => String(p.id)));
+  const parents = new Map(), children = new Map();
+  for (const p of phases) {
+    const id = String(p.id);
+    const deps = resolvedDeps(p, known);
+    parents.set(id, deps);
+    for (const d of deps) {
+      if (!children.has(d)) children.set(d, []);
+      children.get(d).push(id);
+    }
+  }
+  return { parents, children };
+}
+
+/** BFS one direction (parents = ancestors, children = descendants). */
+function reach(start, adj) {
+  const seen = new Set();
+  const queue = [start];
+  while (queue.length) {
+    const cur = queue.shift();
+    for (const next of adj.get(cur) || []) {
+      if (!seen.has(next)) { seen.add(next); queue.push(next); }
+    }
+  }
+  return seen;
+}
+
+/** Hovered node + every ancestor and descendant of it. */
+function relatedSet(id, { parents, children }) {
+  const set = new Set([id]);
+  for (const a of reach(id, parents)) set.add(a);
+  for (const d of reach(id, children)) set.add(d);
+  return set;
+}
+
+function truncate(text, max) {
+  const s = String(text || '');
+  return s.length > max ? s.slice(0, max - 1) + '…' : s;
+}
+
+function goToPhase(id) { location.hash = 'phases/' + id; }
+
+/**
+ * Pixel layout for the DAG mode. Layers become columns left→right; a layer
+ * larger than MAX_ROWS wraps into adjacent sub-columns. All values derive
+ * from integer counts, so positions are always finite — no NaN, no overlap.
+ */
+function layout(phases, layers) {
+  const byLayer = new Map();
+  for (const p of phases) {
+    const l = layers.get(String(p.id)) || 0;
+    if (!byLayer.has(l)) byLayer.set(l, []);
+    byLayer.get(l).push(p);
+  }
+  const order = [...byLayer.keys()].sort((a, b) => a - b);
+
+  const pos = new Map();
+  let col = 0, maxRowsUsed = 1;
+  for (const l of order) {
+    const group = byLayer.get(l);
+    const subCols = Math.max(1, Math.ceil(group.length / MAX_ROWS));
+    const perCol = Math.ceil(group.length / subCols);
+    group.forEach((p, i) => {
+      const sub = Math.floor(i / perCol);
+      const row = i % perCol;
+      maxRowsUsed = Math.max(maxRowsUsed, row + 1);
+      pos.set(String(p.id), {
+        x: PAD + (col + sub) * (NODE_W + COL_GAP),
+        y: PAD + row * (NODE_H + ROW_GAP),
+      });
+    });
+    col += subCols;
+  }
+  const width = PAD * 2 + col * NODE_W + Math.max(0, col - 1) * COL_GAP;
+  const height = PAD * 2 + maxRowsUsed * NODE_H + (maxRowsUsed - 1) * ROW_GAP;
+  return { pos, width, height };
+}
+
+/** Tooltip box rendered inside the SVG, clamped to stay within the canvas. */
+function Tooltip({ phase, nodePos, canvasW, canvasH }) {
+  const name = truncate(phase.name, 48);
+  const sprints = (phase.sprints || []).length;
+  const deps = (phase.dependsOn || []).map(String);
+  const lines = [
+    name,
+    sprints + (sprints === 1 ? ' sprint' : ' sprints'),
+    deps.length ? 'Needs: ' + deps.map(d => 'P' + d).join(', ') : 'No dependencies',
+  ];
+  const w = Math.min(330, Math.max(150, Math.max(...lines.map(l => l.length)) * 6.2 + 24));
+  const h = lines.length * 15 + 14;
+  const x = Math.max(4, Math.min(nodePos.x, canvasW - w - 4));
+  let y = nodePos.y + NODE_H + 8;
+  if (y + h > canvasH - 4) y = Math.max(4, nodePos.y - h - 8);
+  return html`
+    <g class="pg-tip">
+      <rect x=${x} y=${y} width=${w} height=${h} rx="6"/>
+      ${lines.map((line, i) => html`
+        <text key=${i} x=${x + 12} y=${y + 20 + i * 15}
+          class=${i === 0 ? 'pg-tip-title' : 'pg-tip-line'}>${line}</text>
+      `)}
+    </g>
+  `;
+}
+
+/** Wrapped flow row of chips — the honest no-dependencies presentation. */
+function FlowRow({ phases }) {
+  return html`
+    <div class="pg-flow">
+      ${phases.map(p => {
+        const kind = statusKind(p.status);
+        const sprints = (p.sprints || []).length;
+        return html`
+          <button key=${p.id} type="button"
+            class=${'pg-chip pg-' + kind}
+            title=${(p.name || '') + ' — ' + sprints + (sprints === 1 ? ' sprint' : ' sprints')}
+            onClick=${() => goToPhase(p.id)}>
+            <span class="pg-chip-id">P${p.id}</span>
+            <span class="pg-chip-name">${truncate(p.name, 24)}</span>
+          </button>
+        `;
+      })}
+    </div>
+    <div class="pg-hint">No cross-phase dependencies declared — phases shown in roadmap order.</div>
+  `;
+}
+
+/** Layered DAG with curved edges, hover ancestry highlighting and tooltips. */
+function Dag({ phases }) {
+  const [hoverId, setHoverId] = useState(null);
+
+  const model = useMemo(() => {
+    const layers = computeLayers(phases);
+    const { pos, width, height } = layout(phases, layers);
+    const adjacency = buildAdjacency(phases);
+    const known = new Set(phases.map(p => String(p.id)));
+    const edges = [];
+    for (const p of phases) {
+      for (const d of resolvedDeps(p, known)) {
+        const from = pos.get(d), to = pos.get(String(p.id));
+        if (!from || !to) continue;
+        edges.push({ from: d, to: String(p.id), x1: from.x + NODE_W, y1: from.y + NODE_H / 2, x2: to.x, y2: to.y + NODE_H / 2 });
+      }
+    }
+    return { pos, width, height, adjacency, edges };
+  }, [phases]);
+
+  const related = useMemo(
+    () => (hoverId ? relatedSet(hoverId, model.adjacency) : null),
+    [hoverId, model],
+  );
+
+  const hovered = hoverId ? phases.find(p => String(p.id) === hoverId) : null;
+
+  return html`
+    <div class="pg-scroll">
+      <svg class=${'pg-svg' + (hoverId ? ' pg-hovering' : '')}
+        width=${model.width} height=${model.height}
+        viewBox=${'0 0 ' + model.width + ' ' + model.height}
+        role="img" aria-label="Phase dependency graph">
+        <defs>
+          <marker id="pg-arrow" markerWidth="8" markerHeight="8"
+            refX="7" refY="4" orient="auto" markerUnits="userSpaceOnUse">
+            <path class="pg-arrow" d="M0,0 L8,4 L0,8 Z"/>
+          </marker>
+        </defs>
+        ${model.edges.map(e => {
+          const bend = Math.max(24, (e.x2 - e.x1) * 0.45);
+          const d = 'M' + e.x1 + ',' + e.y1
+            + ' C' + (e.x1 + bend) + ',' + e.y1
+            + ' ' + (e.x2 - bend) + ',' + e.y2
+            + ' ' + e.x2 + ',' + e.y2;
+          const on = related && related.has(e.from) && related.has(e.to);
+          return html`<path key=${e.from + '->' + e.to} d=${d}
+            class=${'pg-edge' + (on ? ' pg-related' : '')}
+            marker-end="url(#pg-arrow)"/>`;
+        })}
+        ${phases.map(p => {
+          const id = String(p.id);
+          const { x, y } = model.pos.get(id);
+          const kind = statusKind(p.status);
+          const on = related && related.has(id);
+          return html`
+            <g key=${id}
+              class=${'pg-node pg-' + kind + (on ? ' pg-related' : '')}
+              onClick=${() => goToPhase(p.id)}
+              onMouseEnter=${() => setHoverId(id)}
+              onMouseLeave=${() => setHoverId(null)}>
+              <rect x=${x} y=${y} width=${NODE_W} height=${NODE_H} rx="8"/>
+              <text x=${x + 10} y=${y + 18} class="pg-label">P${p.id}</text>
+              <text x=${x + 10} y=${y + 33} class="pg-sublabel">${truncate(p.name, 21)}</text>
+            </g>
+          `;
+        })}
+        ${hovered ? html`<${Tooltip} phase=${hovered}
+          nodePos=${model.pos.get(hoverId)}
+          canvasW=${model.width} canvasH=${model.height}/>` : null}
+      </svg>
+    </div>
+  `;
+}
+
+const LEGEND = [
+  ['done', 'Done'], ['active', 'Active'], ['todo', 'Todo'], ['blocked', 'Blocked'],
+];
+
+export function PhaseGraph({ phases }) {
+  const list = Array.isArray(phases) ? phases : [];
+  const known = new Set(list.map(p => String(p.id)));
+  const hasDeps = list.some(p => resolvedDeps(p, known).length > 0);
+
+  return html`
+    <details class="pg-panel" open>
+      <summary>
+        <${Icon} name="layers" size=${14}/> Dependency Graph
+        <span class="pg-count">${list.length} ${list.length === 1 ? 'phase' : 'phases'}</span>
+      </summary>
+      <div class="pg-legend">
+        ${LEGEND.map(([kind, label]) => html`
+          <span key=${kind} class="pg-legend-item">
+            <span class=${'pg-swatch pg-' + kind}></span>${label}
+          </span>
+        `)}
+      </div>
+      ${!list.length
+        ? html`<div class="pg-empty">No phases yet — plan a milestone with <code>/rcode-new-milestone</code> and the graph will appear here.</div>`
+        : hasDeps
+          ? html`<${Dag} phases=${list}/>`
+          : html`<${FlowRow} phases=${list}/>`}
+    </details>
+  `;
+}

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

@@ -0,0 +1,78 @@
+/**
+ * RejectDialog — structured rejection dialog for waiting checkpoint sessions.
+ *
+ * Props:
+ *   session  — OrchCard session object ({ storyId, phase?, ... })
+ *   onClose  — callback invoked on cancel, backdrop click, Escape, or after
+ *              a successful submission.
+ *
+ * Rules:
+ *   - Submit button is disabled until a non-empty reason is typed (GATE-1).
+ *   - Uses showToast() for post-submit feedback; browser dialogs are forbidden.
+ *   - All visuals are driven by CSS classes (no style attribute).
+ */
+
+import { html, useState, useEffect } from '../preact.js';
+import { submitRejection } from '../orchestrator.js';
+import { showToast } from './shared.js';
+
+export function RejectDialog({ session, onClose }) {
+  const [reason, setReason] = useState('');
+  const [busy, setBusy]     = useState(false);
+
+  const trimmed = reason.trim();
+  const disabled = !trimmed || busy;
+
+  // Escape-to-close
+  useEffect(() => {
+    function handleKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  function handleSubmit() {
+    if (disabled) return;
+    setBusy(true);
+    submitRejection(session.storyId, trimmed, session.phase || null)
+      .then(d => {
+        if (d && d.ok) {
+          showToast('Rejection recorded');
+          onClose();
+        } else {
+          showToast('Reject failed: ' + ((d && d.error) || 'unknown'));
+          setBusy(false);
+        }
+      })
+      .catch(() => {
+        showToast('Could not reach orchestrator');
+        setBusy(false);
+      });
+  }
+
+  return html`
+    <div class="reject-overlay" onClick=${onClose}>
+      <div class="reject-dialog" onClick=${e => e.stopPropagation()}>
+        <div class="reject-dialog-title">
+          Reject checkpoint — ${session.storyId}
+        </div>
+        <textarea
+          class="reject-dialog-input"
+          placeholder="Why is this checkpoint being rejected? (required)"
+          value=${reason}
+          onInput=${e => setReason(e.target.value)}
+          autofocus
+        ></textarea>
+        <div class="reject-dialog-actions">
+          <button class="reject-cancel" onClick=${onClose}>Cancel</button>
+          <button
+            class="reject-submit"
+            disabled=${disabled}
+            onClick=${handleSubmit}
+          >${busy ? 'Recording…' : 'Submit rejection'}</button>
+        </div>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,190 @@
+/**
+ * RunnerPicker — anchored popover for choosing which agent CLI + model a
+ * Run button launches.
+ *
+ * One instance is mounted in App.js; every Run button opens it via
+ * openRunnerPicker(anchorEl, run). State lives in store.runnerPicker:
+ *   { open, x, y, run: { kind: 'session'|'command', storyId?, cmd, title? } }
+ *
+ * kind 'session' → runAndOpenTerm(storyId, cmd, title, { runner, model })
+ * kind 'command' → runCommandFromUI(cmd, { runner, model })
+ *
+ * Runner list comes from GET /api/runners (fetchRunners, cached). Runners are
+ * rendered as an option list (not a <select>) so each row can carry a "Beta"
+ * pill (every CLI except claude) and unavailable ones can show their server-
+ * reported reason ('not installed' / 'untested flags') as a disabled tooltip.
+ * A runner with an empty models[] gets no model dropdown at all. The last
+ * confirmed runner + model are remembered in localStorage and preselected.
+ * Esc and click-outside close the popover. The server re-validates runner
+ * and model on POST /api/run — this UI is convenience, not the boundary.
+ *
+ * Positioning uses CSS custom properties (--rp-x/--rp-y) set via the element
+ * ref, never an inline style attribute; the popover clamps to the viewport.
+ */
+
+import { html, useState, useEffect, useRef } from '../preact.js';
+import { useStore, setState } from '../store.js';
+import { fetchRunners, runAndOpenTerm, runCommandFromUI } from '../orchestrator.js';
+
+const PREF_KEY = 'majlis-runner-pref';
+
+function loadPref() {
+  try { return JSON.parse(localStorage.getItem(PREF_KEY)) || {}; } catch { return {}; }
+}
+
+function savePref(runner, model) {
+  try { localStorage.setItem(PREF_KEY, JSON.stringify({ runner, model })); } catch { /* private mode */ }
+}
+
+/**
+ * Open the picker anchored under anchorEl.
+ * @param {Element} anchorEl — the clicked Run button
+ * @param {{ kind: 'session'|'command', storyId?: string, cmd: string, title?: string }} run
+ */
+export function openRunnerPicker(anchorEl, run) {
+  const r = anchorEl && anchorEl.getBoundingClientRect
+    ? anchorEl.getBoundingClientRect()
+    : { left: 24, bottom: 24 };
+  setState({
+    runnerPicker: { open: true, x: Math.round(r.left), y: Math.round(r.bottom + 6), run },
+  });
+}
+
+export function closeRunnerPicker() {
+  setState({ runnerPicker: null });
+}
+
+/** Preselect the remembered runner/model when valid, else claude, else the first installed CLI. */
+function initialSelection(runners) {
+  const pref  = loadPref();
+  const valid = id => runners.some(r => r.id === id && r.available);
+  const runnerId = valid(pref.runner) ? pref.runner
+    : valid('claude') ? 'claude'
+    : (runners.find(r => r.available) || {}).id || '';
+  const entry = runners.find(r => r.id === runnerId);
+  const model = (entry && pref.runner === runnerId && entry.models.includes(pref.model))
+    ? pref.model : '';
+  return { runnerId, model };
+}
+
+export function RunnerPicker() {
+  const picker = useStore(s => s.runnerPicker);
+  const open   = !!(picker && picker.open);
+
+  const [runners,  setRunners ] = useState(null); // null = loading, [] = unreachable
+  const [runnerId, setRunnerId] = useState('');
+  const [model,    setModel   ] = useState('');
+  const ref = useRef(null);
+
+  // Load the runner list and (re)apply the remembered selection on each open.
+  useEffect(() => {
+    if (!open) return;
+    let alive = true;
+    fetchRunners().then(list => {
+      if (!alive) return;
+      setRunners(list);
+      const sel = initialSelection(list);
+      setRunnerId(sel.runnerId);
+      setModel(sel.model);
+    });
+    return () => { alive = false; };
+  }, [open]);
+
+  // Esc / click-outside close. mousedown fires after the opening click's
+  // event cycle, so the click that opened the picker never closes it.
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e)  { if (e.key === 'Escape') closeRunnerPicker(); }
+    function onDown(e) {
+      if (ref.current && !ref.current.contains(e.target)) closeRunnerPicker();
+    }
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onDown);
+    };
+  }, [open]);
+
+  // Anchor below the Run button, clamped to the viewport. CSS vars (not an
+  // inline style attribute) carry the coordinates into the stylesheet.
+  useEffect(() => {
+    if (!open || !ref.current) return;
+    const el = ref.current;
+    const x = Math.max(8, Math.min(picker.x, window.innerWidth  - el.offsetWidth  - 8));
+    const y = Math.max(8, Math.min(picker.y, window.innerHeight - el.offsetHeight - 8));
+    el.style.setProperty('--rp-x', x + 'px');
+    el.style.setProperty('--rp-y', y + 'px');
+  }, [open, picker, runners]);
+
+  if (!open) return null;
+
+  const entry  = (runners || []).find(r => r.id === runnerId) || null;
+  const models = (entry && entry.models) || [];
+
+  function handleRunnerSelect(id) {
+    setRunnerId(id);
+    setModel(''); // model lists differ per runner — reset to CLI default
+  }
+
+  function handleRun() {
+    const run = picker.run || {};
+    savePref(runnerId, model);
+    closeRunnerPicker();
+    const opts = { runner: runnerId, model };
+    if (run.kind === 'command') {
+      runCommandFromUI(run.cmd, opts);
+    } else {
+      runAndOpenTerm(run.storyId, run.cmd, run.title || run.storyId, opts);
+    }
+  }
+
+  return html`
+    <div class="runner-picker" ref=${ref} role="dialog" aria-label="Choose runner and model"
+      onClick=${e => e.stopPropagation()}>
+      <div class="runner-picker-title">
+        Run ${(picker.run && picker.run.title) || ''}
+      </div>
+      ${runners === null ? html`
+        <div class="runner-picker-hint">Detecting installed CLIs…</div>
+      ` : runners.length === 0 ? html`
+        <div class="runner-picker-hint">Orchestrator unreachable — cannot list runners.</div>
+      ` : html`
+        <div class="runner-picker-field">
+          <span class="runner-picker-label" id="runner-picker-cli-label">Agent CLI</span>
+          <div class="runner-picker-list" role="listbox" aria-labelledby="runner-picker-cli-label">
+            ${runners.map(r => html`
+              <button key=${r.id} type="button" role="option"
+                aria-selected=${r.id === runnerId}
+                class=${'runner-picker-option' + (r.id === runnerId ? ' selected' : '')}
+                disabled=${!r.available}
+                title=${r.available ? r.label : (r.reason || 'not installed')}
+                onClick=${() => handleRunnerSelect(r.id)}>
+                <span class="runner-picker-option-label">${r.label}</span>
+                ${r.beta ? html`<span class="runner-beta-pill">Beta</span>` : null}
+                ${!r.available ? html`
+                  <span class="runner-picker-option-hint">${r.reason || 'not installed'}</span>
+                ` : null}
+              </button>
+            `)}
+          </div>
+        </div>
+        ${models.length ? html`
+          <label class="runner-picker-field">
+            <span class="runner-picker-label">Model</span>
+            <select class="runner-picker-select" value=${model}
+              onChange=${e => setModel(e.target.value)}>
+              <option value="">default</option>
+              ${models.map(m => html`<option key=${m} value=${m}>${m}</option>`)}
+            </select>
+          </label>
+        ` : null}
+      `}
+      <div class="runner-picker-actions">
+        <button class="runner-picker-btn" onClick=${closeRunnerPicker}>Cancel</button>
+        <button class="runner-picker-btn runner-picker-btn--run"
+          disabled=${!runnerId} onClick=${handleRun}>▶ Run</button>
+      </div>
+    </div>
+  `;
+}