@bakapiano/ccsm 0.6.0 → 0.8.3

package/public/js/dialog.js

@@ -0,0 +1,59 @@
+// Promise-based confirm/prompt rendered through DialogHost. The stack
+// signal lets us nest dialogs if ever needed; .close() pops by id.
+
+import { signal } from '@preact/signals';
+import { html } from './html.js';
+
+export const dialogs = signal([]);
+let nextId = 1;
+
+function push(entry) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    const close = (action, host) => {
+      dialogs.value = dialogs.value.filter((d) => d.id !== id);
+      resolve(entry.onResolve(action, host));
+    };
+    dialogs.value = [...dialogs.value, { id, ...entry, close }];
+  });
+}
+
+export function ccsmConfirm(message, opts = {}) {
+  const { title = 'Confirm', okLabel = 'Confirm', cancelLabel = 'Cancel', danger = false } = opts;
+  return push({
+    render: () => html`<div class="modal modal-dialog">
+      <header class="modal-head"><h2>${title}</h2></header>
+      <div class="modal-body"><p class="dialog-msg">${message}</p></div>
+      <footer class="modal-foot">
+        <button class="action" data-action="cancel">${cancelLabel}</button>
+        <button class=${`action ${danger ? 'danger' : 'primary'}`} data-action="ok">${okLabel}</button>
+      </footer>
+    </div>`,
+    onResolve: (action) => action === 'ok' || action === 'enter',
+  });
+}
+
+export function ccsmPrompt(message, defaultValue = '', opts = {}) {
+  const { title, okLabel = 'Save', cancelLabel = 'Cancel', placeholder = '' } = opts;
+  return push({
+    render: () => html`<div class="modal modal-dialog">
+      <header class="modal-head"><h2>${title || message}</h2></header>
+      <div class="modal-body">
+        ${title ? html`<p class="dialog-msg">${message}</p>` : null}
+        <input type="text" class="input" placeholder=${placeholder} value=${defaultValue} />
+      </div>
+      <footer class="modal-foot">
+        <button class="action" data-action="cancel">${cancelLabel}</button>
+        <button class="action primary" data-action="ok">${okLabel}</button>
+      </footer>
+    </div>`,
+    initialFocus: (host) => {
+      const inp = host.querySelector('input');
+      if (inp) { inp.focus(); inp.select(); }
+    },
+    onResolve: (action, host) => {
+      const inp = host?.querySelector('input');
+      return (action === 'ok' || action === 'enter') ? (inp?.value ?? '') : null;
+    },
+  });
+}

package/public/js/html.js

@@ -0,0 +1,6 @@
+// htm bound to preact's h — gives us JSX-like template literals with no build step.
+
+import { h } from 'preact';
+import htm from 'htm';
+
+export const html = htm.bind(h);

package/public/js/icons.js

@@ -0,0 +1,114 @@
+// SVG icon components. Each accepts {size, className} but most callers
+// just take the default — sizing happens via CSS.
+
+import { html } from './html.js';
+
+const ic = (vb, body, defaultSize = 16) => ({ size = defaultSize, className = '', stroke = 1.6, fill = 'none' } = {}) =>
+  html`<svg viewBox=${vb} width=${size} height=${size} fill=${fill} stroke="currentColor"
+            stroke-width=${stroke} stroke-linecap="round" stroke-linejoin="round" class=${className} aria-hidden="true">${body}</svg>`;
+
+export const IconSessions = ic('0 0 24 24', html`
+  <line x1="3" y1="6" x2="21" y2="6"/>
+  <line x1="3" y1="12" x2="21" y2="12"/>
+  <line x1="3" y1="18" x2="14" y2="18"/>
+`, 18);
+
+export const IconLaunch = ic('0 0 24 24', html`
+  <path d="M7 17L17 7"/><path d="M9 7h8v8"/>
+`, 18);
+
+export const IconConfigure = ic('0 0 24 24', html`
+  <circle cx="12" cy="12" r="3"/>
+  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+`, 18);
+
+export const IconRefresh = ic('0 0 24 24', html`
+  <polyline points="23 4 23 10 17 10"/>
+  <polyline points="1 20 1 14 7 14"/>
+  <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+`, 16);
+
+export const IconChevronLeft = ic('0 0 24 24', html`<polyline points="15 18 9 12 15 6"/>`, 14);
+export const IconChevronDown = ic('0 0 24 24', html`<polyline points="6 9 12 15 18 9"/>`, 14);
+
+export const IconSearch = ic('0 0 24 24', html`
+  <circle cx="11" cy="11" r="7"/>
+  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+`, 14);
+
+export const IconClose = ic('0 0 24 24', html`
+  <line x1="18" y1="6" x2="6" y2="18"/>
+  <line x1="6" y1="6" x2="18" y2="18"/>
+`, 18);
+
+export const IconPlus = ic('0 0 24 24', html`
+  <line x1="12" y1="5" x2="12" y2="19"/>
+  <line x1="5" y1="12" x2="19" y2="12"/>
+`, 22);
+
+export const IconPencil = ic('0 0 24 24', html`
+  <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"/>
+`, 13);
+
+export const IconInfo = ic('0 0 24 24', html`
+  <circle cx="12" cy="12" r="10"/>
+  <line x1="12" y1="16" x2="12" y2="12"/>
+  <line x1="12" y1="8" x2="12.01" y2="8"/>
+`, 18);
+
+export const IconGithub = ic('0 0 24 24', html`
+  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
+`, 16);
+
+export const IconExternal = ic('0 0 24 24', html`
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+  <polyline points="15 3 21 3 21 9"/>
+  <line x1="10" y1="14" x2="21" y2="3"/>
+`, 13);
+
+// Monitor outline — used on "Focus" buttons since the action raises an
+// existing terminal window. Reads as "go to that window".
+export const IconMonitor = ic('0 0 24 24', html`
+  <rect x="3" y="4" width="18" height="12" rx="2" ry="2"/>
+  <line x1="8" y1="20" x2="16" y2="20"/>
+  <line x1="12" y1="16" x2="12" y2="20"/>
+`, 13);
+
+// "> _" terminal prompt — for the Terminals nav tab
+export const IconTerminal = ic('0 0 24 24', html`
+  <polyline points="4 17 10 11 4 5"/>
+  <line x1="12" y1="19" x2="20" y2="19"/>
+`, 18);
+
+// Two variants used in the StarButton.
+export const StarOutline = ({ size = 15 } = {}) => html`
+  <svg viewBox="0 0 24 24" width=${size} height=${size} fill="none" stroke="currentColor"
+       stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+  </svg>`;
+
+export const StarFilled = ({ size = 15 } = {}) => html`
+  <svg viewBox="0 0 24 24" width=${size} height=${size} fill="currentColor" stroke="currentColor"
+       stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+  </svg>`;
+
+// Used as the favorites card title decoration
+export const StarSmallFilled = ({ size = 14 } = {}) => html`
+  <svg class="title-icon title-icon-after" viewBox="0 0 24 24" width=${size} height=${size} fill="currentColor" stroke="none" aria-hidden="true">
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+  </svg>`;
+
+// brand mark (terminal window + ccsm text — matches /favicon.svg)
+export const BrandMark = () => html`
+  <svg viewBox="0 0 32 32" width="32" height="32">
+    <rect x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
+    <line x1="2" y1="10" x2="30" y2="10" stroke="#faf9f5" stroke-width="0.6" opacity="0.45"/>
+    <circle cx="6"   cy="7" r="1" fill="#faf9f5"/>
+    <circle cx="9.5" cy="7" r="1" fill="#faf9f5" opacity="0.65"/>
+    <circle cx="13"  cy="7" r="1" fill="#faf9f5" opacity="0.4"/>
+    <text x="16" y="19.5" text-anchor="middle" dominant-baseline="central"
+          font-family="'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace"
+          font-weight="700" font-size="10" fill="#faf9f5">ccsm</text>
+  </svg>`;

package/public/js/main.js

@@ -0,0 +1,81 @@
+// Entry. Loads persisted ui state → boots data → mounts App → spins up
+// the 5s auto-refresh + 1s clock tick. No imperative DOM access outside
+// the mount root.
+
+import { render } from 'preact';
+import { html } from './html.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa } from './state.js';
+import { httpBase } from './backend.js';
+import { loadConfig, refreshAll, loadSessions, loadRecent, loadSnapshot, loadWorkspaces, loadWebTerminals, pollHealth } from './api.js';
+import { setToast } from './toast.js';
+import { App } from './components/App.js';
+
+loadPersisted();
+render(html`<${App} />`, document.getElementById('app'));
+
+// PWA install affordance — Chromium fires `beforeinstallprompt` when the
+// manifest meets install criteria (served over localhost / https, has icon,
+// not already installed). We stash the event so the About page can offer
+// a one-click install button that triggers it.
+window.addEventListener('beforeinstallprompt', (ev) => {
+  ev.preventDefault();
+  installPrompt.value = ev;
+});
+window.addEventListener('appinstalled', () => {
+  installPrompt.value = null;
+  isInstalledPwa.value = true;
+});
+// On boot, detect if we're already running as an installed PWA window
+// (display-mode standalone covers both plain PWA + WCO). When true, the
+// "install" affordance hides itself.
+const mq = matchMedia('(display-mode: standalone), (display-mode: window-controls-overlay)');
+isInstalledPwa.value = mq.matches;
+mq.addEventListener('change', () => { isInstalledPwa.value = mq.matches; });
+
+// "is-app" body class · everything that isn't a regular browser tab
+// (display-mode: browser) gets it. Used by wco.css to gate user-select
+// on drag regions so chromeless --app= windows can be dragged by
+// clicking the page title, while normal tabs still allow text select.
+function applyIsAppClass() {
+  const isApp = !matchMedia('(display-mode: browser)').matches;
+  document.body.classList.toggle('is-app', isApp);
+}
+applyIsAppClass();
+matchMedia('(display-mode: browser)').addEventListener('change', applyIsAppClass);
+
+(async () => {
+  try {
+    await loadConfig();
+    await refreshAll();
+    pollHealth();
+  } catch (e) {
+    setToast('initial load failed · ' + e.message, 'error');
+  }
+
+  // 5s data refresh + clock tick (same cadence so fmtAgo "Ns ago" relative
+  // labels naturally track the data refresh; bumping clockTick more
+  // frequently would just cause needless re-renders since fmtAgo's
+  // resolution is coarse — 5s buckets under a minute, then m/h/d).
+  // loadWorkspaces is included because the workspace "in use" flag is
+  // derived from live session cwds server-side — without it, sessions
+  // move in/out of a workspace silently and the grid stays stale.
+  setInterval(async () => {
+    try {
+      await Promise.all([loadSessions(), loadRecent(), loadSnapshot(), loadWorkspaces(), loadWebTerminals()]);
+      lastRefreshAt.value = Date.now();
+    } catch { /* swallow — next tick retries */ }
+    pollHealth();
+    clockTick.value = Date.now();
+  }, 5000);
+
+  // Heartbeat · the server uses this to (a) decide whether to shut down
+  // when its own spawned browser closes (multi-client check), and (b) as
+  // a 90s watchdog backup if the browser-exit signal is missed entirely.
+  // 10s cadence is short enough that any tab open for one full cycle gets
+  // caught by the post-close decision in server.js; long enough not to be
+  // chatty.
+  const ping = () => fetch(httpBase() + '/api/heartbeat', { method: 'POST', keepalive: true }).catch(() => {});
+  ping();
+  setInterval(ping, 10_000);
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) ping(); });
+})();

package/public/js/pages/AboutPage.js

@@ -0,0 +1,85 @@
+import { html } from '../html.js';
+import { serverHealth, installPrompt, isInstalledPwa } from '../state.js';
+import { setToast } from '../toast.js';
+import { Card } from '../components/Card.js';
+import { BrandMark, IconGithub, IconExternal } from '../icons.js';
+
+const REPO_URL = 'https://github.com/bakapiano/cssm';
+const NPM_URL  = 'https://www.npmjs.com/package/@bakapiano/ccsm';
+
+async function onInstall() {
+  const ev = installPrompt.value;
+  if (!ev) return setToast('install prompt not available right now · try opening this URL in a regular Edge tab', 'error');
+  ev.prompt();
+  const { outcome } = await ev.userChoice;
+  installPrompt.value = null;
+  if (outcome === 'accepted') {
+    setToast('installed · close + relaunch via npx ccsm to enable Window Controls Overlay');
+  }
+}
+
+function InstallCard() {
+  if (isInstalledPwa.value) return null;
+  const canPrompt = !!installPrompt.value;
+  return html`
+    <${Card} title="Install as app">
+      <p class="about-copy" style="margin-bottom: var(--s-3);">
+        ccsm runs best as a Chromium PWA — title bar collapses into the page (Window Controls Overlay),
+        and the launch shortcut becomes a standalone app. One-click install on supported browsers below.
+      </p>
+      <div class="about-links">
+        <button class="action ${canPrompt ? 'primary' : 'subtle'}" onClick=${onInstall} disabled=${!canPrompt}>
+          ${canPrompt ? 'Install ccsm' : 'Install not available'}
+        </button>
+      </div>
+      ${!canPrompt ? html`
+        <p class="muted-text" style="margin-top: var(--s-3);">
+          If the button stays disabled: open <code>http://localhost:7777</code> in a regular Edge tab,
+          click the address-bar install icon (⊕), then re-launch via <code>npx ccsm</code>.
+        </p>` : null}
+    </${Card}>`;
+}
+
+export function AboutPage() {
+  const version = serverHealth.value.version;
+
+  return html`
+    <${InstallCard} />
+    <${Card} title="ccsm">
+      <div class="about-block">
+        <div class="about-hero">
+          <span class="about-mark"><${BrandMark} /></span>
+          <div>
+            <div class="about-name">ccsm <span class="about-version">${version ? `v${version}` : ''}</span></div>
+            <div class="about-tagline">Claude Code Session Manager · a single pane over every live <code>claude</code> session on this box.</div>
+          </div>
+        </div>
+
+        <p class="about-copy">
+          Lists live and recently-closed sessions, snapshots them every minute, restores them through Windows Terminal,
+          and launches fresh sessions inside isolated workspaces. Designed for running 8–10 concurrent sessions across
+          ad-hoc repo clones.
+        </p>
+
+        <div class="about-links">
+          <a class="action" href=${REPO_URL} target="_blank" rel="noopener">
+            <${IconGithub} /> GitHub <${IconExternal} />
+          </a>
+          <a class="action subtle" href=${NPM_URL} target="_blank" rel="noopener">
+            npm <${IconExternal} />
+          </a>
+        </div>
+
+        <dl class="about-meta">
+          <dt>Install</dt>
+          <dd><code>npx @bakapiano/ccsm</code></dd>
+          <dt>Data directory</dt>
+          <dd><code>~/.ccsm/</code> (override with <code>CCSM_HOME</code>)</dd>
+          <dt>Platform</dt>
+          <dd>Windows · Node 18+</dd>
+          <dt>License</dt>
+          <dd>MIT</dd>
+        </dl>
+      </div>
+    </${Card}>`;
+}

package/public/js/pages/ConfigurePage.js

@@ -0,0 +1,194 @@
+// Settings form. Edits to inputs mark configDirty until Save / Discard.
+// We write to a draft signal to avoid clobbering server-side state mid-edit;
+// the draft initialises from config.value the first time configure tab mounts
+// and after each successful save.
+
+import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
+import { config, terminals, configDirty } from '../state.js';
+import { api, loadWorkspaces } from '../api.js';
+import { setToast } from '../toast.js';
+import { ccsmConfirm } from '../dialog.js';
+import { Card } from '../components/Card.js';
+import { ReposEditor, addEmptyRepo } from '../components/ReposEditor.js';
+
+function defaultsFrom(cfg) {
+  if (!cfg) return null;
+  return {
+    port: cfg.port,
+    workDir: cfg.workDir,
+    snapshotIntervalMs: cfg.snapshotIntervalMs,
+    snapshotHistoryKeep: cfg.snapshotHistoryKeep,
+    claudeCommand: cfg.claudeCommand || 'claude',
+    terminal: cfg.terminal,
+    commandShell: cfg.commandShell || 'pwsh',
+    autoFocusOnLaunch: cfg.autoFocusOnLaunch !== false,
+    focusMovesToCenter: cfg.focusMovesToCenter === true,
+    browserMode: cfg.browserMode || (cfg.autoOpenBrowser === false ? 'none' : 'app'),
+    finderPrompt: cfg.finderPrompt || '',
+  };
+}
+
+export function ConfigurePage() {
+  const cfg = config.value;
+  const [draft, setDraft] = useState(() => defaultsFrom(cfg));
+  const [savedAt, setSavedAt] = useState('');
+
+  // re-init from config whenever a fresh load lands (rare — typically only at boot,
+  // after Save, or after Discard). We compare a stringified snapshot so re-renders
+  // from unrelated signals don't reset our in-progress edits.
+  useEffect(() => {
+    if (!cfg) return;
+    if (!draft) { setDraft(defaultsFrom(cfg)); return; }
+  }, [cfg]);
+
+  if (!cfg || !draft) return null;
+
+  const update = (patch) => {
+    setDraft({ ...draft, ...patch });
+    configDirty.value = true;
+  };
+
+  const reposChanged = () => {
+    configDirty.value = true;
+  };
+
+  const onSave = async () => {
+    const next = {
+      ...draft,
+      port: Number(draft.port) || 7777,
+      snapshotIntervalMs: Math.max(5000, Number(draft.snapshotIntervalMs) || 60000),
+      snapshotHistoryKeep: Math.max(1, Number(draft.snapshotHistoryKeep) || 30),
+      claudeCommand: (draft.claudeCommand || 'claude').trim(),
+      terminal: draft.terminal || 'wt',
+      commandShell: draft.commandShell || 'pwsh',
+      browserMode: draft.browserMode || 'app',
+      workDir: (draft.workDir || '').trim(),
+      repos: (cfg.repos || []).filter((r) => r.name && r.url),
+    };
+    try {
+      const saved = await api('PUT', '/api/config', next);
+      config.value = saved;
+      setDraft(defaultsFrom(saved));
+      setSavedAt(`saved · ${new Date().toLocaleTimeString(undefined, { hour12: false })}`);
+      configDirty.value = false;
+      setToast('config saved');
+      await loadWorkspaces();
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+
+  const onDiscard = async () => {
+    const ok = await ccsmConfirm('Discard your unsaved changes?', {
+      title: 'Discard changes', okLabel: 'Discard', danger: true,
+    });
+    if (!ok) return;
+    const fresh = await api('GET', '/api/config');
+    config.value = fresh;
+    setDraft(defaultsFrom(fresh));
+    configDirty.value = false;
+    setToast('changes discarded');
+  };
+
+  return html`
+    ${configDirty.value ? html`
+      <div class="dirty-banner">
+        <span class="dirty-dot"></span>
+        <span class="dirty-text">You have unsaved changes</span>
+        <button class="action small primary" onClick=${onSave}>Save now</button>
+        <button class="action small subtle" onClick=${onDiscard}>Discard</button>
+      </div>` : null}
+
+    <${Card} title="Settings" meta=${html`Persisted to <code>~/.ccsm/config.json</code>`}>
+      <div class="config-grid">
+        <label class="field">
+          <span class="label">Port</span>
+          <input type="number" value=${draft.port}
+                 onInput=${(e) => update({ port: e.target.value })} />
+          <span class="hint">restart server to apply</span>
+        </label>
+        <label class="field">
+          <span class="label">Work directory</span>
+          <input type="text" value=${draft.workDir}
+                 onInput=${(e) => update({ workDir: e.target.value })} />
+        </label>
+        <label class="field">
+          <span class="label">Snapshot interval (ms)</span>
+          <input type="number" min="5000" value=${draft.snapshotIntervalMs}
+                 onInput=${(e) => update({ snapshotIntervalMs: e.target.value })} />
+        </label>
+        <label class="field">
+          <span class="label">History kept</span>
+          <input type="number" min="1" value=${draft.snapshotHistoryKeep}
+                 onInput=${(e) => update({ snapshotHistoryKeep: e.target.value })} />
+        </label>
+        <label class="field">
+          <span class="label">Claude command</span>
+          <input type="text" placeholder="claude" value=${draft.claudeCommand}
+                 onInput=${(e) => update({ claudeCommand: e.target.value })} />
+          <span class="hint">alias / function / exe name</span>
+        </label>
+        <label class="field">
+          <span class="label">Terminal</span>
+          <select class="input" value=${draft.terminal}
+                  onChange=${(e) => update({ terminal: e.target.value })}>
+            ${(terminals.value || []).map((t) => html`
+              <option key=${t.name} value=${t.name}>${t.name} · ${t.processName}</option>`)}
+          </select>
+        </label>
+        <label class="field">
+          <span class="label">Command shell <span class="hint inline">(wt only)</span></span>
+          <select class="input" value=${draft.commandShell}
+                  onChange=${(e) => update({ commandShell: e.target.value })}>
+            <option value="pwsh">pwsh · PowerShell 7</option>
+            <option value="powershell">powershell · Windows PowerShell 5.1</option>
+            <option value="none">none · run command directly</option>
+          </select>
+        </label>
+        <label class="field">
+          <span class="label">Browser open mode</span>
+          <select class="input" value=${draft.browserMode}
+                  onChange=${(e) => update({ browserMode: e.target.value })}>
+            <option value="app">app · Edge/Chrome chromeless</option>
+            <option value="tab">tab · default browser</option>
+            <option value="none">off · don't open</option>
+          </select>
+        </label>
+        <label class="field toggle">
+          <input type="checkbox" checked=${draft.autoFocusOnLaunch}
+                 onChange=${(e) => update({ autoFocusOnLaunch: e.target.checked })} />
+          <span class="toggle-text">
+            <span class="label">Auto-focus on launch</span>
+            <span class="hint">raise newly-launched terminal window</span>
+          </span>
+        </label>
+        <label class="field toggle">
+          <input type="checkbox" checked=${draft.focusMovesToCenter}
+                 onChange=${(e) => update({ focusMovesToCenter: e.target.checked })} />
+          <span class="toggle-text">
+            <span class="label">Move focused window to screen center</span>
+            <span class="hint">centers the focused window on whichever monitor the cursor is on</span>
+          </span>
+        </label>
+        <label class="field full">
+          <span class="label">Finder prompt</span>
+          <textarea rows="3" value=${draft.finderPrompt}
+                    onInput=${(e) => update({ finderPrompt: e.target.value })}></textarea>
+          <span class="hint">passed as initial prompt to the finder session</span>
+        </label>
+
+        <div class="field full">
+          <div class="repos-head">
+            <span class="label">Repositories</span>
+            <button class="action small" onClick=${() => { addEmptyRepo(reposChanged); }}>+ Add repo</button>
+          </div>
+          <${ReposEditor} onChange=${reposChanged} />
+        </div>
+
+        <div class="form-actions full">
+          <button class=${`action primary${configDirty.value ? ' is-dirty' : ''}`}
+                  onClick=${onSave}>Save configuration</button>
+          <span class="muted-text">${savedAt}</span>
+        </div>
+      </div>
+    </${Card}>`;
+}

package/public/js/pages/LaunchPage.js

@@ -0,0 +1,117 @@
+import { html } from '../html.js';
+import { useState } from 'preact/hooks';
+import { signal } from '@preact/signals';
+import { capabilities, activeTerminalId, selectTab } from '../state.js';
+import { loadWorkspaces, loadWebTerminals } from '../api.js';
+import { setToast } from '../toast.js';
+import { streamNewSession, resetProgress } from '../streaming.js';
+import { Card } from '../components/Card.js';
+import { RepoPicker } from '../components/RepoPicker.js';
+import { WorkspacePicker } from '../components/WorkspacePicker.js';
+import { ProgressList } from '../components/ProgressList.js';
+import { WorkspacesGrid, WorkspacesHeader } from '../components/WorkspacesGrid.js';
+import { SnapshotPanel, SnapshotMeta } from '../components/SnapshotPanel.js';
+
+const ROOT_ID = 'newSessionProgress';
+const inlineSelected = signal(new Set());
+
+function NewSessionCard() {
+  const [workspace, setWorkspace] = useState('');
+  // 'web' = run inside this page (in-process PTY · bridges to xterm.js)
+  // 'wt'  = open a new Windows Terminal window
+  const initialMode = capabilities.value.webTerminal ? 'web' : 'wt';
+  const [terminal, setTerminal] = useState(initialMode);
+  const [result, setResult] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const onLaunch = async () => {
+    const repos = [...inlineSelected.value];
+    if (repos.length === 0) return setToast('select at least one repo', 'error');
+    setBusy(true);
+    setResult('');
+    resetProgress(repos, ROOT_ID);
+    try {
+      const final = await streamNewSession(
+        { repos, workspace: workspace || undefined, terminal },
+        {
+          progressRootId: ROOT_ID,
+          onMeta: (ev) => {
+            if (ev.type === 'workspace') {
+              setResult(`workspace: ${ev.workspace.path}${ev.created ? ' · newly created' : ''}`);
+            } else if (ev.type === 'launched') {
+              const l = ev.launched || {};
+              if (l.mode === 'web') {
+                setResult(`web terminal launched · pid ${l.pid} · id ${l.id}`);
+              } else {
+                setResult(`terminal launching · pid ${l.pid} · ${l.terminal}`);
+              }
+            }
+          },
+        },
+      );
+      if (final.success) {
+        const summary = (final.cloneResults || []).map((c) => `${c.repo}: ${c.action || c.error}`).join(' · ');
+        setResult(`launched in ${final.workspace.path}${final.created ? ' · newly created' : ''} — ${summary}`);
+        setToast(`launched · ${final.workspace.name}`);
+        // For web mode, hop to the Terminals tab and open the new session.
+        if (terminal === 'web' && final.launched?.id) {
+          activeTerminalId.value = final.launched.id;
+          await loadWebTerminals();
+          selectTab('terminals');
+        }
+      } else {
+        setResult(`error: ${final.error}`);
+        setToast(final.error || 'new session failed', 'error');
+      }
+      await loadWorkspaces();
+    } catch (e) {
+      setResult(`error: ${e.message}`);
+      setToast(e.message, 'error');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return html`
+    <${Card} title="New session"
+             meta=${html`Picks an unused workspace, clones missing repos, opens <code>claude</code> in a fresh terminal.`}>
+      <div class="form-row">
+        <span class="form-label">Repos</span>
+        <${RepoPicker} selectedSig=${inlineSelected} />
+      </div>
+      ${capabilities.value.webTerminal ? html`
+        <div class="form-row">
+          <span class="form-label">Open in</span>
+          <div class="radio-row">
+            <label class=${`radio${terminal === 'web' ? ' is-checked' : ''}`}>
+              <input type="radio" name="terminal" value="web"
+                     checked=${terminal === 'web'} onChange=${() => setTerminal('web')} />
+              this page
+            </label>
+            <label class=${`radio${terminal === 'wt' ? ' is-checked' : ''}`}>
+              <input type="radio" name="terminal" value="wt"
+                     checked=${terminal === 'wt'} onChange=${() => setTerminal('wt')} />
+              wt window
+            </label>
+          </div>
+        </div>` : null}
+      <div class="form-row">
+        <label class="form-label">Workspace</label>
+        <${WorkspacePicker} value=${workspace} onChange=${setWorkspace} />
+        <button class="action primary" disabled=${busy} onClick=${onLaunch}>Launch new session</button>
+      </div>
+      <${ProgressList} rootId=${ROOT_ID} />
+      <div class="post-result">${result}</div>
+    </${Card}>`;
+}
+
+export function LaunchPage() {
+  return html`
+    <${NewSessionCard} />
+    <${Card} title="Snapshot & restore" meta=${html`<${SnapshotMeta} />`}>
+      <${SnapshotPanel} />
+    </${Card}>
+    <${Card} title="Workspaces on disk" meta=${html`<${WorkspacesHeader} />`}>
+      <${WorkspacesGrid} />
+    </${Card}>`;
+}