@hanzlaa/rcode 3.4.33 → 3.6.0

package/server/lib/html/client/views/MemoryView.js

@@ -0,0 +1,157 @@
+/**
+ * MemoryView — Preact port of renderMemory() from client-main.js.
+ *
+ * On mount, fetches /api/memory. Handles three cases:
+ *   !exists       — not initialised empty state
+ *   !initialised  — directory exists but INDEX.md missing
+ *   populated     — sections map + distillates / change records / archive / post-mortems
+ *
+ * Command hints accordion mirrors the legacy cmdAccordion() output.
+ */
+
+import { html, useState, useEffect } from '../preact.js';
+
+// ---- Command hints accordion ----
+const MEMORY_HINTS = [
+  ['/rcode:memory-init',    'Bootstrap the Memory Bank'],
+  ['/rcode:memory-update',  'Append a decision, issue, or stakeholder entry'],
+  ['/rcode:memory-distill', 'Regenerate fast-load distillates'],
+  ['/rcode:memory-audit',   'Find stale entries and gaps'],
+];
+
+function CmdAccordion({ hints }) {
+  const [open, setOpen] = useState(false);
+  return html`
+    <details open=${open} onToggle=${e => setOpen(e.target.open)} style="margin-top:var(--space-4);">
+      <summary style="cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);padding:var(--space-2) 0;">
+        Useful commands
+      </summary>
+      <div class="decision-list" style="margin-top:var(--space-2);">
+        ${hints.map(([cmd, desc]) => html`
+          <div class="item" key=${cmd}>
+            <div class="item-title"><code>${cmd}</code></div>
+            <div class="item-meta">${desc}</div>
+          </div>
+        `)}
+      </div>
+    </details>
+  `;
+}
+
+// ---- Section file list ----
+function SectionGroup({ section, files }) {
+  return html`
+    <div>
+      <div class="memory-group-header">${section}</div>
+      <div class="decision-list">
+        ${files.map(f => {
+          const status = f.exists ? (f.populated ? '✓' : '○') : '✗';
+          const meta   = f.exists ? (f.populated ? 'populated' : 'template only') : 'missing';
+          return html`
+            <div class="item" key=${f.name}>
+              <div class="item-title">${status} ${f.name}</div>
+              <div class="item-meta">${meta} · ${f.bytes || 0} bytes</div>
+            </div>
+          `;
+        })}
+      </div>
+    </div>
+  `;
+}
+
+// ---- Generic list group (distillates, change records, etc.) ----
+function ListGroup({ label, items }) {
+  if (!items || !items.length) return null;
+  return html`
+    <div>
+      <div class="memory-group-header">${label} (${items.length})</div>
+      <div class="decision-list">
+        ${items.map(f => html`
+          <div class="item" key=${f.name}>
+            <div class="item-title">${f.name}</div>
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+
+// ---- Root MemoryView ----
+export function MemoryView() {
+  const [memory, setMemory]   = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError]     = useState(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    fetch('/api/memory')
+      .then(r => r.json())
+      .then(data => { setMemory(data); })
+      .catch(err => setError(String(err)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return html`
+      <div class="view active" id="view-memory">
+        <div class="view-title">Memory Bank</div>
+        <div class="empty">Loading…</div>
+      </div>
+    `;
+  }
+
+  if (error) {
+    return html`
+      <div class="view active" id="view-memory">
+        <div class="view-title">Memory Bank</div>
+        <div class="empty">Failed to load /api/memory: ${error}</div>
+      </div>
+    `;
+  }
+
+  if (!memory || !memory.exists) {
+    return html`
+      <div class="view active" id="view-memory">
+        <div class="view-title">Memory Bank</div>
+        <div class="empty">
+          <h3 style="color:var(--rihal-gold);">Not initialised</h3>
+          <p>The Memory Bank is rcode's structured project context.</p>
+          <div class="empty-action">Run <code>/rcode:memory-init</code> to bootstrap</div>
+        </div>
+      </div>
+    `;
+  }
+
+  if (!memory.initialised) {
+    return html`
+      <div class="view active" id="view-memory">
+        <div class="view-title">Memory Bank</div>
+        <div class="empty">
+          <p>Directory exists but INDEX.md is missing — re-run <code>/rcode:memory-init</code></p>
+        </div>
+      </div>
+    `;
+  }
+
+  const sections = memory.sections || {};
+
+  return html`
+    <div class="view active" id="view-memory">
+      <div class="view-title">Memory Bank</div>
+      <div class="filter-bar">
+        <span style="color:var(--text-muted);font-size:var(--text-sm);">Last scanned: ${memory.lastScanned || '—'}</span>
+      </div>
+      <div id="memory-sections">
+        ${Object.entries(sections).map(([section, files]) => html`
+          <${SectionGroup} key=${section} section=${section} files=${files} />
+        `)}
+        <${ListGroup} label="Distillates" items=${memory.distillates} />
+        <${ListGroup} label="Change Records" items=${memory.changeRecords} />
+        <${ListGroup} label="Milestone Archive" items=${memory.archive} />
+        <${ListGroup} label="Post-mortems" items=${memory.postMortems} />
+      </div>
+      <${CmdAccordion} hints=${MEMORY_HINTS} />
+    </div>
+  `;
+}

package/server/lib/html/client/views/MilestonesView.js

@@ -0,0 +1,136 @@
+/**
+ * MilestonesView — Preact component.
+ *
+ * Ports renderMilestones(subId) from client-render.js.
+ * List mode: single M1 card with completion ring + summary tags.
+ * Detail mode (subId = 'M1'): velocity bars, phase timeline, ring,
+ *   attr grid, and phase cards.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { pct, humanDate, allSprints, allTasks } from '../util.js';
+import { CompletionRing, Breadcrumb, Tag, PhaseCard } from '../components/shared.js';
+import { runningTotal } from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+function AttrItem({ label, value }) {
+  return html`
+    <div class="attr-item">
+      <span class="attr-label">${label}</span>
+      <span class="attr-value">${value}</span>
+    </div>
+  `;
+}
+
+function VelocityBars({ sprints }) {
+  if (!sprints.length) return null;
+  const maxV = Math.max(...sprints.map(s => Math.max(s.velocity_actual || 0, s.velocity_target || 0)), 1);
+  return html`
+    <div>
+      <div class="view-title" style="margin-top:var(--space-6)">Velocity History</div>
+      <div style="max-width:600px;">
+        ${sprints.map(s => html`
+          <div key=${s.id} class="velocity-bar">
+            <div class="velocity-bar-label">S${s.id}</div>
+            <div class="velocity-bar-track">
+              <div class="velocity-bar-fill" style=${'width:' + ((s.velocity_actual || 0) / maxV * 100) + '%;background:var(--accent-blue);'}></div>
+            </div>
+            <div class="velocity-bar-val">${s.velocity_actual || 0}/${s.velocity_target || '—'}</div>
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+
+function PhaseTimeline({ phases }) {
+  const phasesWithDates = phases.filter(p => (p.sprints || []).some(s => s.started_at));
+  if (!phasesWithDates.length) return null;
+  return html`
+    <div>
+      <div class="view-title" style="margin-top:var(--space-6)">Phase Timeline</div>
+      <div class="phase-list">
+        ${phasesWithDates.map(p => {
+          const sps = p.sprints || [];
+          const startDates = sps.map(s => s.started_at).filter(Boolean).sort();
+          const endDates = sps.map(s => s.completed_at).filter(Boolean).sort().reverse();
+          return html`
+            <div key=${p.id} class="item">
+              <div class="item-title">P${p.id} — ${p.name}</div>
+              <div class="item-meta">
+                ${startDates[0] ? humanDate(startDates[0]) : '?'} → ${endDates[0] ? humanDate(endDates[0]) : 'ongoing'}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    </div>
+  `;
+}
+
+export function MilestonesView({ subId }) {
+  const S = useStore();
+  const phases = S.phases || [];
+  const ms = S.milestone || 'M1';
+  const total = allTasks(phases);
+  const done = total.filter(t => t.status === 'done' || t.status === 'completed');
+
+  if (subId) {
+    const doneP = phases.filter(p => p.status === 'complete' || p.status === 'completed').length;
+    const sprints = allSprints(phases).filter(s => s.velocity_actual != null);
+    const runningNow = runningTotal();
+
+    return html`
+      <div id="view-milestones" class="view active">
+        <${Breadcrumb} items=${[{ label: 'Milestones', hash: 'milestones' }]}/>
+        <div class="entity-header">
+          <div style="display:flex;align-items:center;gap:var(--space-6);">
+            <div>
+              <div class="entity-title"><${Icon} name="flag" size=${18}/> ${ms}</div>
+            </div>
+            <${CompletionRing} done=${done.length} total=${total.length}/>
+          </div>
+          <div class="attr-grid">
+            <${AttrItem} label="Total Phases" value=${phases.length}/>
+            <${AttrItem} label="Completed Phases" value=${doneP}/>
+            <${AttrItem} label="Current Phase" value=${S.currentPhase || '—'}/>
+            <${AttrItem} label="Current Sprint" value=${S.currentSprint || '—'}/>
+            <${AttrItem} label="Tasks Done" value=${done.length + '/' + total.length}/>
+            <${AttrItem} label="Progress" value=${pct(done.length, total.length)}/>
+            <${AttrItem} label="Running now" value=${runningNow}/>
+          </div>
+        </div>
+        <${VelocityBars} sprints=${sprints}/>
+        <${PhaseTimeline} phases=${phases}/>
+        <div class="view-title" style="margin-top:var(--space-6)">Phases under this milestone</div>
+        <div class="phase-list">
+          ${phases.map(p => html`<${PhaseCard} key=${p.id} phase=${p} S=${S}/>`)}
+        </div>
+      </div>
+    `;
+  }
+
+  // List mode
+  return html`
+    <div id="view-milestones" class="view active">
+      <div class="view-title">Milestones</div>
+      <div class="phase-list">
+        <div class="item item-clickable" onClick=${() => { location.hash = 'milestones/M1'; }}>
+          <div style="display:flex;align-items:center;gap:var(--space-4);">
+            <${CompletionRing} done=${done.length} total=${total.length}/>
+            <div>
+              <div class="item-title"><${Icon} name="flag" size=${18}/> ${ms}</div>
+              <div class="item-meta">
+                <${Tag}>${phases.length} phases</${Tag}>
+                <${Tag}>${allSprints(phases).length} sprints</${Tag}>
+                <${Tag}>${done.length}/${total.length} tasks done</${Tag}>
+                <${Tag}>${pct(done.length, total.length)} complete</${Tag}>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/server/lib/html/client/views/OrchestrationView.js

@@ -0,0 +1,167 @@
+/**
+ * OrchestrationView — Preact port of renderOrchestration() + _orchCard().
+ *
+ * Reads activeSessions from the store (kept fresh by startSessionsPoll in
+ * orchestrator.js at 4 s intervals). Terminal button sets store.terminal so
+ * XtermPanel opens. Stop calls orchestrator.stopSession.
+ *
+ * No separate poll timer — if a tighter cadence is needed while this view is
+ * open, a local useEffect interval can be added. For now the 4 s global poll
+ * is sufficient.
+ */
+
+import { html, useState, useEffect } from '../preact.js';
+import { useStore } from '../store.js';
+import { stopSession, openTermPanel, runCommandFromUI, ALLOWED_COMMANDS, isSessionRunning } from '../orchestrator.js';
+import { orchElapsed } from '../util.js';
+import { Icon } from '../icons-client.js';
+
+// ── Session card ──────────────────────────────────────────────────────────────
+
+function OrchCard({ session: s }) {
+  const running = s.status === 'running';
+  const waiting = !!s.waiting;
+  const cardCls = 'orch-card orch-' + s.status + (waiting ? ' orch-waiting' : '');
+  const badge   = waiting ? html`<${Icon} name="hourglass" size=${12}/> waiting for input` : s.status;
+  const dotCls  = 'term-status-dot ' + (waiting ? 'waiting' : s.status);
+
+  function handleTerminal(e) {
+    e.stopPropagation();
+    openTermPanel(s.storyId, s.storyId);
+  }
+
+  function handleStop(e) {
+    e.stopPropagation();
+    stopSession(s.storyId);
+  }
+
+  return html`
+    <div class=${cardCls}>
+      <div class="orch-card-head">
+        <span class=${dotCls}></span>
+        <span class="orch-card-id">${s.storyId}</span>
+        <span class="orch-card-badge">${badge}</span>
+      </div>
+      <div class="orch-card-cmd">${s.cmd || ''}</div>
+      <div class="orch-card-meta">
+        <${Icon} name="clock" size=${12}/> ${orchElapsed(s.startTime)}
+        ${' · '}<${Icon} name="edit-3" size=${12}/> ${s.filesChanged || 0} file${s.filesChanged === 1 ? '' : 's'}
+        ${' · '}<${Icon} name="eye" size=${12}/> ${s.clients || 0}
+        ${s.pid ? html` · pid ${s.pid}` : null}
+      </div>
+      <div class="orch-card-actions">
+        <button class="term-run-btn outline" onClick=${handleTerminal}>
+          <${Icon} name="monitor" size=${14}/> Terminal
+        </button>
+        ${running ? html`
+          <button class="term-run-btn danger" onClick=${handleStop}>■ Stop</button>
+        ` : null}
+      </div>
+    </div>
+  `;
+}
+
+// ── Sorted session list ───────────────────────────────────────────────────────
+
+function sortSessions(sessions) {
+  return [...sessions].sort((a, b) => {
+    // Waiting-for-input first (needs attention)
+    if (!!a.waiting !== !!b.waiting) return a.waiting ? -1 : 1;
+    // Then running
+    if ((a.status === 'running') !== (b.status === 'running')) {
+      return a.status === 'running' ? -1 : 1;
+    }
+    // Then most-recent first
+    return String(b.startTime || '').localeCompare(String(a.startTime || ''));
+  });
+}
+
+// ── Command runner ────────────────────────────────────────────────────────────
+
+/**
+ * CommandRunner — dropdown + Run button for launching allowlisted rihal commands.
+ * State is local (useState) — no store changes needed; runCommandFromUI handles
+ * all session and terminal state via runCommandFromUI → runSession.
+ */
+function CommandRunner() {
+  useStore(); // subscribe to store updates so isSessionRunning() re-evaluates on each poll
+  const [selected, setSelected] = useState(ALLOWED_COMMANDS[0]?.cmd || '');
+  const [busy, setBusy] = useState(false);
+
+  const slug      = selected ? selected.replace(/^\//, '').replace(/\//g, '-') : '';
+  const sessionId = slug ? 'cmd-' + slug : '';
+  const isRunning = sessionId ? isSessionRunning(sessionId) : false;
+  const disabled  = busy || isRunning;
+
+  // Reset busy 2 s after a Run click — the terminal panel is now open and the
+  // session is streaming. Managed via useEffect so the timer is cancelled if
+  // CommandRunner unmounts before it fires.
+  useEffect(() => {
+    if (!busy) return;
+    const t = setTimeout(() => setBusy(false), 2000);
+    return () => clearTimeout(t);
+  }, [busy]);
+
+  function handleRun() {
+    if (!selected || disabled) return;
+    setBusy(true);
+    runCommandFromUI(selected);
+  }
+
+  return html`
+    <div class="cmd-runner">
+      <div class="cmd-runner-title">
+        <${Icon} name="terminal" size=${14}/> Command Runner
+      </div>
+      <div class="cmd-runner-row">
+        <select class="cmd-runner-select"
+          value=${selected}
+          onChange=${e => setSelected(e.target.value)}>
+          ${ALLOWED_COMMANDS.map(({ cmd, label }) => html`
+            <option key=${cmd} value=${cmd}>${label}</option>
+          `)}
+        </select>
+        <button class=${'cmd-runner-btn' + (disabled ? ' cmd-runner-btn--busy' : '')}
+          onClick=${handleRun}
+          disabled=${disabled}>
+          ${isRunning
+            ? html`<${Icon} name="hourglass" size=${14}/> Running…`
+            : busy
+              ? html`<${Icon} name="hourglass" size=${14}/> Starting…`
+              : html`<${Icon} name="play" size=${14}/> Run`}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+// ── Root view ─────────────────────────────────────────────────────────────────
+
+export function OrchestrationView() {
+  const { activeSessions } = useStore();
+  const sessions = sortSessions(activeSessions || []);
+
+  return html`
+    <div class="view active" id="view-orchestration">
+      <div class="view-title section-icon"><${Icon} name="activity" size=${18}/> Orchestration</div>
+      <div class="orch-subtitle">
+        Live agent sessions — run, watch, communicate, stop.
+      </div>
+
+      <${CommandRunner}/>
+
+      ${sessions.length === 0 ? html`
+        <div class="empty">
+          No agent sessions yet.
+          <div class="empty-action">Run a phase or sprint to start one</div>
+        </div>
+      ` : html`
+        <div class="orch-grid">
+          ${sessions.map(s => html`
+            <${OrchCard} key=${s.storyId} session=${s} />
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}

package/server/lib/html/client/views/OverviewView.js

@@ -0,0 +1,221 @@
+/**
+ * OverviewView — Preact component.
+ *
+ * Ports renderOverview() from client-render.js to a component tree.
+ * Reads state via useStore(). Keeps every existing CSS class.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { pct, humanDate, allSprints, chip, sprintHints as getSprintHints } from '../util.js';
+import { ProgressBar, CmdHints } from '../components/shared.js';
+import { Icon } from '../icons-client.js';
+
+// ---- OverviewView ----
+
+export function OverviewView() {
+  const S = useStore();
+  const sprints = allSprints(S.phases);
+  const curSprint = sprints.find(s => s.id === S.currentSprint) || null;
+
+  // Velocity sparkline data
+  const completedSprints = sprints.filter(s => s.velocity_actual != null);
+  const showVelocity = completedSprints.length > 1;
+
+  // Chains & workstreams
+  const chains = S.chains || [];
+  const workstreams = S.workstreams || [];
+
+  // Cmd hints
+  const baseHints = [
+    ['/rihal-next',   'What should I do next?'],
+    ['/rihal-status', 'Quick project status'],
+    ['/rihal-council','Ask the team a question'],
+  ];
+  const sprintHints = getSprintHints(curSprint);
+  let hints = [...sprintHints, ...baseHints];
+  if (S.pendingHandoff) {
+    hints = [['/rihal-resume-work','Resume from the pending handoff'], ...hints];
+  }
+
+  // Current sprint progress
+  function SprintProgress() {
+    if (!curSprint) return null;
+    const sts = curSprint.stories || [];
+    const d = sts.filter(t => t.status === 'done' || t.status === 'completed').length;
+    return html`
+      <section>
+        <h2 class="section-icon"><${Icon} name="zap" size=${16}/> Current Sprint — ${curSprint.id}</h2>
+        <div class="body">
+          <div style="margin-bottom:8px;font-size:var(--text-sm);color:var(--text-secondary);">
+            ${curSprint.goal || ''}
+          </div>
+          <div style="display:flex;align-items:center;gap:var(--space-3);">
+            <div style="flex:1;"><${ProgressBar} done=${d} total=${sts.length}/></div>
+            <span style="font-size:var(--text-sm);font-weight:600;">
+              ${d}/${sts.length} (${pct(d, sts.length)})
+            </span>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  // Velocity sparkline (inline SVG, same as client-render.js:267-272)
+  function VelocitySpark() {
+    if (!showVelocity) return null;
+    const vals = completedSprints.map(s => s.velocity_actual);
+    const max = Math.max(...vals, 1);
+    const w = 200, h = 40, step = w / (vals.length - 1);
+    const points = vals.map((v, i) => (i * step) + ',' + (h - (v / max) * h)).join(' ');
+    return html`
+      <div class="stat">
+        <div class="label">Sprint Velocity</div>
+        <svg width=${w} height=${h + 4} style="margin-top:8px;">
+          <polyline points=${points} fill="none" stroke="var(--accent-blue)" stroke-width="2"/>
+        </svg>
+        <div class="sub">Last ${vals.length} sprints</div>
+      </div>
+    `;
+  }
+
+  // Council sessions
+  function CouncilSessions() {
+    if (!Array.isArray(S.council_sessions) || !S.council_sessions.length) return null;
+    return html`
+      <section>
+        <h2 class="section-icon"><${Icon} name="building" size=${16}/> Council Sessions</h2>
+        <div class="body">
+          <div class="phase-list">
+            ${S.council_sessions.slice(-5).reverse().map((cs, i) => html`
+              <div key=${i} class="item">
+                <div class="item-title">${cs.topic || cs.title || 'Session'}</div>
+                <div class="item-meta">
+                  ${cs.date ? humanDate(cs.date) : ''}
+                  ${cs.participants ? ' · ' + cs.participants.join(', ') : ''}
+                </div>
+              </div>
+            `)}
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  // Chains & workstreams
+  function ChainsSection() {
+    if (!chains.length && !workstreams.length) return null;
+    const { cls, label } = chip('active');
+    return html`
+      <section>
+        <h2 class="section-icon"><${Icon} name="link" size=${16}/> Chains &amp; Workstreams</h2>
+        <div class="body">
+          ${chains.length ? html`
+            <div style="margin-bottom:var(--space-4);">
+              <strong>Chains</strong>
+              <div class="phase-list" style="margin-top:var(--space-2);">
+                ${chains.map((c, i) => html`
+                  <div key=${i} class="item">
+                    <div class="item-title">${c.name || c.id || 'Chain'}</div>
+                  </div>
+                `)}
+              </div>
+            </div>
+          ` : null}
+          ${workstreams.length ? html`
+            <div>
+              <strong>Workstreams</strong>
+              <div class="phase-list" style="margin-top:var(--space-2);">
+                ${workstreams.map((w, i) => {
+                  const wChip = chip(w.status || 'active');
+                  return html`
+                    <div key=${i} class="item">
+                      <div class="item-title">
+                        ${w.name || w.id || 'Workstream'}
+                        ${' '}<span class=${'status-chip ' + wChip.cls}>● ${wChip.label}</span>
+                      </div>
+                    </div>
+                  `;
+                })}
+              </div>
+            </div>
+          ` : null}
+        </div>
+      </section>
+    `;
+  }
+
+  // Pending handoff banner
+  function HandoffBanner() {
+    if (!S.pendingHandoff) return null;
+    const ho = S.pendingHandoff;
+    const when = ho.ts ? humanDate(ho.ts) : '';
+    const summary = ho.summary ? ' — ' + String(ho.summary).slice(0, 120) : '';
+    const where = ho.sprint ? ' [sprint ' + ho.sprint + ']' : ho.phase ? ' [phase ' + ho.phase + ']' : '';
+    return html`
+      <section style="border-left:4px solid var(--accent-orange,#f59e0b);padding-left:var(--space-3);">
+        <h2 class="section-icon"><${Icon} name="alert-triangle" size=${16}/> Pending Handoff</h2>
+        <div class="body">
+          <div>${when}${where}${summary}</div>
+          ${ho.resume_hint ? html`
+            <div style="margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);">
+              ${ho.resume_hint}
+            </div>
+          ` : null}
+          <div style="margin-top:var(--space-3);font-size:var(--text-sm);">
+            <code>/rihal-resume-work</code>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  // Memory bank summary
+  function MemorySection() {
+    if (!S.memoryBank || !S.memoryBank.active) return null;
+    const m = S.memoryBank.active;
+    return html`
+      <section>
+        <h2 class="section-icon"><${Icon} name="brain" size=${16}/> Memory Bank</h2>
+        <div class="body">
+          <div class="attr-grid">
+            <div class="attr-item">
+              <span class="attr-label">active.md</span>
+              <span class="attr-value">${m.lines} lines · ${Math.round(m.bytes / 1024 * 10) / 10} KB</span>
+            </div>
+            <div class="attr-item">
+              <span class="attr-label">Updated</span>
+              <span class="attr-value">${humanDate(m.updated)}</span>
+            </div>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  // Last session line
+  function LastSession() {
+    if (!S.last_session) return null;
+    const ls = S.last_session;
+    return html`
+      <span style="color:var(--text-muted);font-size:var(--text-xs);margin-left:var(--space-3);">
+        Last session: ${humanDate(ls.date || ls.timestamp) || '—'}
+      </span>
+    `;
+  }
+
+  return html`
+    <div id="view-overview" class="view active">
+      <div class="stats">
+        <${VelocitySpark}/>
+      </div>
+      <${HandoffBanner}/>
+      <${SprintProgress}/>
+      <${MemorySection}/>
+      <${CouncilSessions}/>
+      <${ChainsSection}/>
+      <${LastSession}/>
+      <${CmdHints} hints=${hints}/>
+    </div>
+  `;
+}