@bakapiano/ccsm 0.6.0 → 0.8.4

package/public/js/components/RecentTable.js

@@ -0,0 +1,68 @@
+import { html } from '../html.js';
+import {
+  recent, recentTotal, recentOffset, recentLimit, clockTick,
+} from '../state.js';
+import { loadRecent } from '../api.js';
+import { fmtAgo, fmtTime } from '../util.js';
+import { resumeSession } from '../actions.js';
+import { TitleCell } from './TitleCell.js';
+import { Pagination } from './Pagination.js';
+import { IconExternal } from '../icons.js';
+
+export function RecentTable() {
+  void clockTick.value;
+  const list = recent.value;
+
+  return html`
+    <div class="table-scroll">
+      <table class="data">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Working directory</th>
+            <th>Branch</th>
+            <th class="num">Last activity</th>
+            <th class="num">Started</th>
+            <th class="col-actions"></th>
+          </tr>
+        </thead>
+        <tbody>${list.map((s) => html`<${Row} key=${s.sessionId} session=${s} />`)}</tbody>
+      </table>
+    </div>
+    ${list.length === 0 ? html`<div class="empty">Nothing in <code>~/.claude/projects/</code>.</div>` : null}
+    <${Pagination}
+      total=${recentTotal.value}
+      offset=${recentOffset.value}
+      limit=${recentLimit.value}
+      onChange=${(off, lim) => {
+        recentOffset.value = off;
+        recentLimit.value = lim;
+        loadRecent().catch(() => {});
+      }} />`;
+}
+
+function Row({ session: s }) {
+  return html`
+    <tr>
+      <td>
+        <${TitleCell}
+          sessionId=${s.sessionId}
+          title=${s.title}
+          snapshotData=${{ cwd: s.cwd || '', title: s.title, gitBranch: s.gitBranch || '' }} />
+      </td>
+      <td><div class="path-cell" title=${s.cwd || ''}>${s.cwd || ''}</div></td>
+      <td>
+        ${s.gitBranch ? html`<span class="branch-tag">${s.gitBranch}</span>` : html`<span class="muted-text">—</span>`}
+      </td>
+      <td class="num" title=${fmtTime(s.updatedAt)}>${fmtAgo(s.updatedAt)}</td>
+      <td class="num" title=${fmtTime(s.startedAt)}>${fmtAgo(s.startedAt)}</td>
+      <td>
+        <div class="row-actions">
+          <button class="action small" title="claude --resume in a fresh wt window"
+                  onClick=${() => resumeSession(s.sessionId, s.cwd, { kind: 'continue' })}>
+            <${IconExternal} /> Continue
+          </button>
+        </div>
+      </td>
+    </tr>`;
+}

package/public/js/components/RepoPicker.js

@@ -0,0 +1,40 @@
+// Chip multi-select. Selected names are tracked locally per-instance
+// because the inline form and the modal can have different selections.
+
+import { html } from '../html.js';
+import { config } from '../state.js';
+import { useEffect, useState } from 'preact/hooks';
+
+export function RepoPicker({ selectedSig }) {
+  const repos = config.value?.repos || [];
+
+  useEffect(() => {
+    // initialise to default-selected repos on first mount + whenever the set
+    // of available repos changes (so a newly-added default flips on)
+    const want = new Set(repos.filter((r) => r.defaultSelected).map((r) => r.name));
+    selectedSig.value = want;
+    // we only want to re-init when the repo NAMES change, not on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [repos.map((r) => r.name + ':' + r.defaultSelected).join('|')]);
+
+  if (repos.length === 0) {
+    return html`<span class="muted-text">no repos configured · use <strong>+ Add repo</strong> below</span>`;
+  }
+
+  const toggle = (name, on) => {
+    const next = new Set(selectedSig.value);
+    if (on) next.add(name);
+    else next.delete(name);
+    selectedSig.value = next;
+  };
+
+  return html`<div class="chip-row">${repos.map((r) => {
+    const checked = selectedSig.value.has(r.name);
+    return html`
+      <label class=${`chip${checked ? ' checked' : ''}`} key=${r.name}>
+        <input type="checkbox" checked=${checked}
+               onChange=${(e) => toggle(r.name, e.target.checked)} />
+        ${r.name}
+      </label>`;
+  })}</div>`;
+}

package/public/js/components/ReposEditor.js

@@ -0,0 +1,74 @@
+// Inline editable repos table — used in two places (Configure tab inline,
+// and inside the new-session modal's "Manage repos" disclosure).
+//
+// Row inputs are locally controlled (useState) and only flush to the
+// config signal on blur. Without this, every keystroke would mutate
+// config.value and cascade a re-render through every config consumer
+// (Footer, RepoPicker, WorkspacesHeader, the other ReposEditor instance),
+// which made typing feel laggy.
+
+import { html } from '../html.js';
+import { useState, useEffect } from 'preact/hooks';
+import { config } from '../state.js';
+
+export function ReposEditor({ onChange }) {
+  const repos = config.value?.repos || [];
+
+  const commit = (idx, patch) => {
+    const next = (config.value?.repos || []).map((r, i) => i === idx ? { ...r, ...patch } : r);
+    config.value = { ...config.value, repos: next };
+    onChange?.(next);
+  };
+  const remove = (idx) => {
+    const next = (config.value?.repos || []).filter((_, i) => i !== idx);
+    config.value = { ...config.value, repos: next };
+    onChange?.(next);
+  };
+
+  return html`
+    <table class="data repos-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>URL</th>
+          <th class="num">Default</th>
+          <th class="col-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        ${repos.map((r, idx) => html`
+          <${Row} key=${idx} idx=${idx} repo=${r} commit=${commit} remove=${remove} />`)}
+      </tbody>
+    </table>`;
+}
+
+function Row({ idx, repo, commit, remove }) {
+  const [name, setName] = useState(repo.name);
+  const [url, setUrl]   = useState(repo.url);
+  // Keep local state in sync when the underlying repo changes from
+  // outside (e.g. a fresh /api/config GET after Save). We compare against
+  // the prop so unrelated cascades don't clobber in-progress edits.
+  useEffect(() => { setName(repo.name); }, [repo.name]);
+  useEffect(() => { setUrl(repo.url);   }, [repo.url]);
+
+  return html`
+    <tr>
+      <td><input type="text" value=${name}
+                 onInput=${(e) => setName(e.target.value)}
+                 onBlur=${() => name !== repo.name && commit(idx, { name })} /></td>
+      <td><input type="text" value=${url}
+                 onInput=${(e) => setUrl(e.target.value)}
+                 onBlur=${() => url !== repo.url && commit(idx, { url })} /></td>
+      <td class="num"><input type="checkbox" checked=${!!repo.defaultSelected}
+                             onChange=${(e) => commit(idx, { defaultSelected: e.target.checked })} /></td>
+      <td><div class="row-actions">
+        <button class="action tiny danger" onClick=${() => remove(idx)}>Remove</button>
+      </div></td>
+    </tr>`;
+}
+
+export function addEmptyRepo(onChange) {
+  const repos = [...(config.value?.repos || []), { name: '', url: '', defaultSelected: false }];
+  config.value = { ...config.value, repos };
+  onChange?.(repos);
+}

package/public/js/components/ServerStatus.js

@@ -0,0 +1,18 @@
+import { html } from '../html.js';
+import { serverHealth } from '../state.js';
+
+export function ServerStatus() {
+  const h = serverHealth.value;
+  const view = {
+    online:     { text: h.version ? `online · v${h.version}` : 'online',
+                  title: `backend ok · pid ${h.pid} · v${h.version}` },
+    offline:    { text: 'offline', title: `backend unreachable — ${h.error || ''}` },
+    connecting: { text: 'connecting…', title: 'checking backend status' },
+  }[h.state] || { text: h.state, title: h.state };
+
+  return html`
+    <span class="server-status" data-state=${h.state} title=${view.title}>
+      <span class="status-pulse" aria-hidden="true"></span>
+      <span class="server-status-label">${view.text}</span>
+    </span>`;
+}

package/public/js/components/SessionsTable.js

@@ -0,0 +1,71 @@
+import { html } from '../html.js';
+import {
+  sessions, sessionsOffset, sessionsLimit, clockTick,
+} from '../state.js';
+import { fmtAgo, fmtTime } from '../util.js';
+import { focusSession } from '../actions.js';
+import { TitleCell } from './TitleCell.js';
+import { Pagination } from './Pagination.js';
+import { IconMonitor } from '../icons.js';
+
+export function SessionsTable() {
+  // touch clockTick so fmtAgo refreshes each second
+  void clockTick.value;
+
+  const all = sessions.value;
+  if (sessionsOffset.value >= all.length) {
+    sessionsOffset.value = Math.max(0, Math.floor((all.length - 1) / sessionsLimit.value) * sessionsLimit.value);
+  }
+  const slice = all.slice(sessionsOffset.value, sessionsOffset.value + sessionsLimit.value);
+
+  return html`
+    <div class="table-scroll">
+      <table class="data">
+        <thead>
+          <tr>
+            <th class="col-mark"></th>
+            <th>Title</th>
+            <th>Working directory</th>
+            <th class="num">Updated</th>
+            <th class="num">Started</th>
+            <th class="num">PID</th>
+            <th class="col-actions"></th>
+          </tr>
+        </thead>
+        <tbody>${slice.map((s) => html`<${Row} key=${s.sessionId} session=${s} />`)}</tbody>
+      </table>
+    </div>
+    ${all.length === 0 ? html`<div class="empty">No live sessions detected.</div>` : null}
+    <${Pagination}
+      total=${all.length}
+      offset=${sessionsOffset.value}
+      limit=${sessionsLimit.value}
+      onChange=${(off, lim) => { sessionsOffset.value = off; sessionsLimit.value = lim; }} />`;
+}
+
+function Row({ session: s }) {
+  const versionExtra = s.version ? html` · ${s.version}` : null;
+  return html`
+    <tr>
+      <td><span class=${`status-mark ${s.status}`} title=${s.status}></span></td>
+      <td>
+        <${TitleCell}
+          sessionId=${s.sessionId}
+          title=${s.title}
+          secondaryExtra=${versionExtra}
+          snapshotData=${{ cwd: s.cwd, title: s.title, gitBranch: s.gitBranch || '' }} />
+      </td>
+      <td><div class="path-cell" title=${s.cwd}>${s.cwd}</div></td>
+      <td class="num" title=${fmtTime(s.updatedAt)}>${fmtAgo(s.updatedAt)}</td>
+      <td class="num" title=${fmtTime(s.startedAt)}>${fmtAgo(s.startedAt)}</td>
+      <td class="num">${s.pid}</td>
+      <td>
+        <div class="row-actions">
+          <button class="action small" title="raise the wt window already running this session"
+                  onClick=${() => focusSession(s.sessionId)}>
+            <${IconMonitor} /> Focus
+          </button>
+        </div>
+      </td>
+    </tr>`;
+}

package/public/js/components/Sidebar.js

@@ -0,0 +1,52 @@
+import { html } from '../html.js';
+import {
+  activeTab, sidebarCollapsed, configDirty, sessions, webTerminals, capabilities,
+  selectTab, toggleSidebar,
+} from '../state.js';
+import {
+  IconSessions, IconLaunch, IconTerminal, IconConfigure, IconInfo,
+  IconChevronLeft, BrandMark,
+} from '../icons.js';
+
+function NavItem({ tab, icon, label, badge, dirty }) {
+  const selected = activeTab.value === tab;
+  const cls = `nav-item${dirty ? ' has-changes' : ''}`;
+  return html`
+    <button class=${cls} role="tab" aria-selected=${selected ? 'true' : 'false'}
+            onClick=${() => selectTab(tab)}>
+      <span class="nav-icon">${icon}</span>
+      <span class="nav-label">${label}</span>
+      ${badge != null ? html`<span class="nav-badge">${badge}</span>` : null}
+    </button>`;
+}
+
+export function Sidebar() {
+  const collapsed = sidebarCollapsed.value;
+
+  return html`
+    <aside class="sidebar" data-collapsed=${collapsed ? 'true' : 'false'}>
+      <div class="sidebar-brand">
+        <span class="brand-mark"><${BrandMark} /></span>
+        <span class="brand-name">CCSM<span class="brand-dot">.</span></span>
+      </div>
+
+      <nav class="sidebar-nav" role="tablist" aria-label="Sections">
+        <${NavItem} tab="sessions"  icon=${html`<${IconSessions} />`}  label="Sessions"  badge=${sessions.value.length} />
+        <${NavItem} tab="launch"    icon=${html`<${IconLaunch} />`}    label="Launch" />
+        ${capabilities.value.webTerminal ? html`
+          <${NavItem} tab="terminals" icon=${html`<${IconTerminal} />`} label="Terminals" badge=${webTerminals.value.length || null} />
+        ` : null}
+        <${NavItem} tab="configure" icon=${html`<${IconConfigure} />`} label="Configure" dirty=${configDirty.value} />
+        <${NavItem} tab="about"     icon=${html`<${IconInfo} />`}      label="About" />
+      </nav>
+
+      <div class="sidebar-foot">
+        <button class="util-item collapse-toggle" aria-label="collapse sidebar"
+                title=${collapsed ? 'expand sidebar' : 'collapse sidebar'}
+                onClick=${toggleSidebar}>
+          <span class="nav-icon"><${IconChevronLeft} /></span>
+          <span class="nav-label">Collapse</span>
+        </button>
+      </div>
+    </aside>`;
+}

package/public/js/components/SnapshotPanel.js

@@ -0,0 +1,77 @@
+import { html } from '../html.js';
+import { useState } from 'preact/hooks';
+import { snapshot, history, clockTick } from '../state.js';
+import { api, loadSnapshot } from '../api.js';
+import { fmtAgo, fmtTime } from '../util.js';
+import { setToast } from '../toast.js';
+import { ccsmConfirm } from '../dialog.js';
+
+export function SnapshotMeta() {
+  void clockTick.value;
+  const snap = snapshot.value;
+  const text = snap
+    ? `${snap.sessions.length} session(s) · taken ${fmtAgo(snap.takenAt)} ago (${fmtTime(snap.takenAt)})`
+    : 'no snapshot saved yet';
+  return html`${text}`;
+}
+
+export function SnapshotPanel() {
+  const [selectedHistory, setSelectedHistory] = useState('');
+  const snap = snapshot.value;
+  const hist = history.value;
+
+  const preview = snap
+    ? snap.sessions.map((s) =>
+        `${(s.title || s.sessionId.slice(0, 8)).padEnd(44).slice(0, 44)}  ${s.cwd}`
+      ).join('\n')
+    : '';
+
+  const onSave = async () => {
+    try {
+      const r = await api('POST', '/api/snapshot');
+      snapshot.value = r.snapshot;
+      const h = await api('GET', '/api/snapshot/history');
+      history.value = h.history;
+      setToast(`saved · ${r.snapshot.sessions.length} session(s)`);
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+  const onRestoreLatest = async () => {
+    if (!snap || !snap.sessions.length) return setToast('no sessions in snapshot', 'error');
+    const ok = await ccsmConfirm(
+      `Restore ${snap.sessions.length} session(s)? Each opens a new wt window.`,
+      { title: 'Restore latest snapshot', okLabel: `Restore ${snap.sessions.length}` },
+    );
+    if (!ok) return;
+    try {
+      const r = await api('POST', '/api/snapshot/restore');
+      setToast(`launched ${r.restored.launched.length} / ${r.count}`);
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+  const onRestoreHistory = async () => {
+    if (!selectedHistory) return setToast('pick a history snapshot first', 'error');
+    const ok = await ccsmConfirm(`Restore from ${selectedHistory}?`, {
+      title: 'Restore from history', okLabel: 'Restore',
+    });
+    if (!ok) return;
+    try {
+      const r = await api('POST', '/api/snapshot/restore', { file: selectedHistory });
+      setToast(`launched ${r.restored.launched.length} / ${r.count}`);
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+
+  return html`
+    <div class="row gap-row">
+      <button class="action" onClick=${onSave}>Save snapshot now</button>
+      <button class="action primary" onClick=${onRestoreLatest}>Restore latest</button>
+      <span class="divider-dot">·</span>
+      <select class="input narrow" value=${selectedHistory} onChange=${(e) => setSelectedHistory(e.target.value)}>
+        <option value="">history…</option>
+        ${hist.map((h) => html`<option key=${h.file} value=${h.file}>${h.file.replace('.json', '')}</option>`)}
+      </select>
+      <button class="action" onClick=${onRestoreHistory}>Restore selected</button>
+    </div>
+    <details class="snapshot-detail">
+      <summary>View snapshot contents</summary>
+      <pre class="preview">${preview}</pre>
+    </details>`;
+}

package/public/js/components/TerminalView.js

@@ -0,0 +1,108 @@
+// xterm.js wrapper. Mounts a terminal into a ref'd div, opens a WebSocket
+// to /ws/terminal/<id>, forwards keystrokes/resize as JSON frames, renders
+// output frames into xterm. Disposes everything on unmount or id change.
+
+import { html } from '../html.js';
+import { useEffect, useRef } from 'preact/hooks';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { wsBase } from '../backend.js';
+
+// Dark xterm theme. We give the terminal a near-black ink background to
+// match what claude code's TUI assumes (it paints its own input box +
+// prompt with hardcoded dark backgrounds — a light terminal makes those
+// regions look like black blocks). Cursor uses the favorite-star gold so
+// it pops against the ink without dragging brand orange back in.
+const THEME = {
+  background: '#1a1815',
+  foreground: '#e8e3d5',
+  cursor:     '#e3b341',
+  cursorAccent: '#1a1815',
+  selectionBackground: '#3a3530',
+  black:   '#1a1815', brightBlack:   '#534e44',
+  red:     '#e07b6e', brightRed:     '#f0a098',
+  green:   '#7fb670', brightGreen:   '#a0d28f',
+  yellow:  '#e3b341', brightYellow:  '#f0c860',
+  blue:    '#7d9fc4', brightBlue:    '#9bb8d8',
+  magenta: '#c08fd0', brightMagenta: '#d8aae2',
+  cyan:    '#6fb0b0', brightCyan:    '#90c8c8',
+  white:   '#e8e3d5', brightWhite:   '#faf9f5',
+};
+
+export function TerminalView({ terminalId }) {
+  const hostRef = useRef(null);
+  const termRef = useRef(null);
+  const wsRef = useRef(null);
+
+  useEffect(() => {
+    if (!terminalId || !hostRef.current) return;
+
+    const term = new Terminal({
+      fontFamily: '"JetBrains Mono", "Cascadia Mono", Consolas, monospace',
+      fontSize: 13,
+      lineHeight: 1.2,
+      cursorBlink: true,
+      cursorStyle: 'bar',
+      scrollback: 5000,
+      allowProposedApi: true,
+      theme: THEME,
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.loadAddon(new WebLinksAddon());
+    term.open(hostRef.current);
+    // Defer fit one tick so the container has measured layout
+    requestAnimationFrame(() => { try { fit.fit(); } catch {} });
+    termRef.current = term;
+
+    const ws = new WebSocket(`${wsBase()}/ws/terminal/${encodeURIComponent(terminalId)}`);
+    ws.binaryType = 'arraybuffer';
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      // tell server the initial size (cols/rows after fit)
+      ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+    };
+    ws.onmessage = (ev) => {
+      let frame;
+      try { frame = JSON.parse(ev.data); } catch { return; }
+      if (frame.type === 'output') {
+        term.write(frame.data);
+      } else if (frame.type === 'exit') {
+        term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
+      }
+    };
+    ws.onclose = () => {
+      term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
+    };
+
+    const onData = (data) => {
+      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
+    };
+    const onResize = ({ cols, rows }) => {
+      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+    };
+    term.onData(onData);
+    term.onResize(onResize);
+
+    const ro = new ResizeObserver(() => { try { fit.fit(); } catch {} });
+    ro.observe(hostRef.current);
+
+    // give focus to terminal so user can type immediately
+    term.focus();
+
+    return () => {
+      ro.disconnect();
+      try { ws.close(); } catch {}
+      try { term.dispose(); } catch {}
+      termRef.current = null;
+      wsRef.current = null;
+    };
+  }, [terminalId]);
+
+  if (!terminalId) {
+    return html`<div class="terminal-empty">Select a terminal on the left, or launch a new one.</div>`;
+  }
+  return html`<div ref=${hostRef} class="terminal-host"></div>`;
+}

package/public/js/components/TitleCell.js

@@ -0,0 +1,40 @@
+// Title cell shared by the three row types: shown text + rename + star.
+// Includes the session-id secondary line and the row hover-only icon set.
+
+import { html } from '../html.js';
+import { labels, favorites } from '../state.js';
+import { displayTitle } from '../util.js';
+import { toggleFavorite, renameSession } from '../actions.js';
+import { StarFilled, StarOutline, IconPencil } from '../icons.js';
+
+export function TitleCell({ sessionId, title, secondaryExtra, snapshotData }) {
+  const label = labels.value[sessionId];
+  const hasLabel = !!label;
+  const isFav = !!favorites.value[sessionId];
+  const shown = displayTitle(label, title);
+  const tooltip = hasLabel ? `${shown}\n(original: ${title || '—'})` : shown;
+
+  const onRename = (ev) => { ev.stopPropagation(); renameSession(sessionId, label || ''); };
+  const onStar   = (ev) => { ev.stopPropagation(); toggleFavorite(sessionId, snapshotData); };
+
+  return html`
+    <div class="title-cell">
+      <div class="title-row">
+        <span class="primary" title=${tooltip}>${shown}</span>
+        <button class=${`rename-btn${hasLabel ? ' has-label' : ''}`}
+                title=${hasLabel ? 'rename · custom label set' : 'rename'}
+                aria-label="rename" onClick=${onRename}>
+          <${IconPencil} />
+        </button>
+        <button class=${`star-btn${isFav ? ' is-fav' : ''}`}
+                title=${isFav ? 'remove favorite' : 'add favorite'}
+                aria-label=${isFav ? 'remove favorite' : 'add favorite'}
+                onClick=${onStar}>
+          ${isFav ? html`<${StarFilled} />` : html`<${StarOutline} />`}
+        </button>
+      </div>
+      <div class="secondary" title=${sessionId}>
+        ${sessionId.slice(0, 8)}${secondaryExtra || null}
+      </div>
+    </div>`;
+}

package/public/js/components/Toast.js

@@ -0,0 +1,8 @@
+import { html } from '../html.js';
+import { toastState } from '../toast.js';
+
+export function Toast() {
+  const t = toastState.value;
+  const cls = `toast ${t.visible ? 'show' : ''} ${t.kind}`;
+  return html`<div class=${cls} role="status" aria-live="polite">${t.msg}</div>`;
+}

package/public/js/components/WorkspacePicker.js

@@ -0,0 +1,19 @@
+// "auto" + every workspace. We deliberately don't filter by inUse —
+// frontend's view can be stale and the server validates the chosen name
+// on the request anyway. inUse is only used as a visual marker on the
+// option label so the user has the info.
+
+import { html } from '../html.js';
+import { workspaces } from '../state.js';
+
+export function WorkspacePicker({ value, onChange }) {
+  const all = workspaces.value;
+  return html`
+    <select class="input narrow" value=${value} onChange=${(e) => onChange(e.target.value)}>
+      <option value="">auto — find or create unused</option>
+      ${all.map((w) => html`
+        <option key=${w.name} value=${w.name}>
+          ${w.name}${w.inUse ? ' · in use' : ''}
+        </option>`)}
+    </select>`;
+}

package/public/js/components/WorkspacesGrid.js

@@ -0,0 +1,41 @@
+import { html } from '../html.js';
+import { workspaces, config } from '../state.js';
+
+export function WorkspacesGrid() {
+  const list = workspaces.value;
+  if (list.length === 0) {
+    return html`<div class="empty">No workspaces yet — the first launch will create one.</div>`;
+  }
+  return html`
+    <div class="workspace-grid">
+      ${list.map((w) => html`<${Card} key=${w.name} ws=${w} />`)}
+    </div>`;
+}
+
+function Card({ ws }) {
+  const cls = 'workspace-card' + (ws.inUse ? ' in-use' : '');
+  const tag = ws.inUse ? `in use × ${ws.sessionsHere.length}` : 'free';
+  return html`
+    <div class=${cls}>
+      <div class="ws-head">
+        <div class="ws-name">${ws.name}</div>
+        <span class="ws-tag">${tag}</span>
+      </div>
+      <div class="ws-path">${ws.path}</div>
+      <div class="ws-repos">
+        ${ws.repos.map((r) => html`
+          <span class=${`ws-repo${r.cloned ? ' cloned' : ''}`} title=${r.url} key=${r.name}>
+            ${r.name}${r.cloned ? ' ✓' : ''}
+          </span>`)}
+      </div>
+    </div>`;
+}
+
+export function WorkspacesHeader() {
+  return html`Under <code>${config.value?.workDir || '…'}</code>`;
+}
+
+// Wrapping component so the meta updates when config changes
+export function WorkspacesHeaderInline() {
+  return WorkspacesHeader();
+}