@bakapiano/ccsm 0.8.4 → 0.10.0

package/public/js/pages/LaunchPage.js

@@ -1,117 +1,369 @@
+// Launch page. ChatGPT-style centered composer with custom popover
+// pickers for CLI / Folder / Repos. Each picker shares the unified
+// PickerPanel component and can inline-create new entries.
+
 import { html } from '../html.js';
-import { useState } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import { signal } from '@preact/signals';
-import { capabilities, activeTerminalId, selectTab } from '../state.js';
-import { loadWorkspaces, loadWebTerminals } from '../api.js';
+import { config, folders, selectSession, selectTab } from '../state.js';
+import { createCli, createFolder, createRepo, reorderFolders, refreshAll } 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 { PageTitleBar } from '../components/PageTitleBar.js';
 import { ProgressList } from '../components/ProgressList.js';
-import { WorkspacesGrid, WorkspacesHeader } from '../components/WorkspacesGrid.js';
-import { SnapshotPanel, SnapshotMeta } from '../components/SnapshotPanel.js';
+import { Modal } from '../components/Modal.js';
+import { PickerPanel } from '../components/Picker.js';
+import { DirectoryPicker } from '../components/DirectoryPicker.js';
+import { AdoptModal } from '../components/AdoptModal.js';
+import { useDragSort } from '../components/useDragSort.js';
+import { BrandMark, IconTerminal, IconFolder, IconFolderOpen, IconBranch, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor, IconSparkle, IconWorkspace, IconArrowRight } from '../icons.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 selectedRepos = signal(new Set());
+
+function initRepoSelection(repos) {
+  const want = new Set(repos.filter((r) => r.defaultSelected).map((r) => r.name));
+  selectedRepos.value = want;
+}
+
+function LaunchHero() {
+  const cfg = config.value || {};
+  const clis = cfg.clis || [];
+  const repos = cfg.repos || [];
+  const defaultCli = cfg.defaultCliId || clis[0]?.id || '';
+
+  const [cliId, setCliId] = useState(defaultCli);
+  const [folderId, setFolderId] = useState('');
+  const [mode, setMode] = useState('auto'); // 'auto' = workspace + repos, 'cwd' = pick existing dir
+  const [cwd, setCwd] = useState(''); // only used when mode === 'cwd'
   const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState('');
+  const [openPicker, setOpenPicker] = useState(null); // 'cli' | 'folder' | 'workdir' | null
+  const [adoptOpen, setAdoptOpen] = useState(false);
+
+  // If config arrives after first render (cliId === '') OR the saved
+  // cli was removed, snap to the current default.
+  useEffect(() => {
+    if (!clis.length) return;
+    if (!cliId || !clis.find((c) => c.id === cliId)) {
+      setCliId(defaultCli);
+    }
+  }, [defaultCli, clis.length]);
+
+  const folderDnd = useDragSort(
+    folders.value.map((f) => f.id),
+    async (nextIds) => {
+      try { await reorderFolders(nextIds); }
+      catch (e) { setToast(e.message, 'error'); }
+    },
+  );
+
+  const sig = repos.map((r) => r.name + ':' + r.defaultSelected).join('|');
+  useStateOnce(sig, () => initRepoSelection(repos));
+
+  const cli = clis.find((c) => c.id === cliId) || clis[0];
+  const folder = folders.value.find((f) => f.id === folderId);
+
+  const toggleRepo = (name, on) => {
+    const next = new Set(selectedRepos.value);
+    if (on) next.add(name); else next.delete(name);
+    selectedRepos.value = next;
+  };
 
   const onLaunch = async () => {
-    const repos = [...inlineSelected.value];
-    if (repos.length === 0) return setToast('select at least one repo', 'error');
+    const useCwd = mode === 'cwd' && cwd;
+    const chosen = useCwd ? [] : [...selectedRepos.value];
     setBusy(true);
     setResult('');
-    resetProgress(repos, ROOT_ID);
+    resetProgress(chosen, ROOT_ID);
     try {
       const final = await streamNewSession(
-        { repos, workspace: workspace || undefined, terminal },
+        {
+          repos: chosen,
+          cwd: useCwd ? cwd : undefined,
+          cliId: cliId || undefined,
+          folderId: folderId || undefined,
+        },
         {
           progressRootId: ROOT_ID,
           onMeta: (ev) => {
             if (ev.type === 'workspace') {
-              setResult(`workspace: ${ev.workspace.path}${ev.created ? ' · newly created' : ''}`);
+              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}`);
-              }
+              setResult(`launched · session ${ev.launched.id}`);
             }
           },
         },
       );
-      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}`);
+      if (final.success && final.launched) {
         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 refreshAll();
+        selectSession(final.launched.id);
+        selectTab('sessions');
+      } else if (!final.success) {
+        setResult(`error · ${final.error}`);
+        setToast(final.error || 'launch failed', 'error');
       }
-      await loadWorkspaces();
     } catch (e) {
-      setResult(`error: ${e.message}`);
+      setResult(`error · ${e.message}`);
       setToast(e.message, 'error');
     } finally {
       setBusy(false);
     }
   };
 
+  const close = () => setOpenPicker(null);
+
+  // --- CLI picker config -----------------------------------------------
+  const cliItems = clis.map((c) => {
+    const Icon = IconForCliType(c.type);
+    return {
+      id: c.id,
+      icon: html`<${Icon} />`,
+      label: c.name,
+      meta: `${c.command}${c.shell && c.shell !== 'direct' ? ' · ' + c.shell : ''}`,
+    };
+  });
+  const cliCreateFields = [
+    { key: 'type', label: 'Type', type: 'iconRadio', default: 'other', options: [
+      { value: 'claude',  label: 'Claude CLI',     icon: html`<${IconClaudeColor} />` },
+      { value: 'codex',   label: 'Codex CLI',      icon: html`<${IconCodexColor} />` },
+      { value: 'copilot', label: 'GitHub Copilot', icon: html`<${IconCopilotColor} />` },
+      { value: 'other',   label: 'Other',          icon: html`<${IconTerminal} />` },
+    ],
+      onChange: (v, next) => {
+        const presets = { claude:  { command: 'claude',  resumeArgs: '--continue',    resumeIdArgs: '--resume <id>', name: 'Claude Code' },
+                          codex:   { command: 'codex',   resumeArgs: 'resume --last', resumeIdArgs: 'resume <id>',   name: 'OpenAI Codex' },
+                          copilot: { command: 'copilot', resumeArgs: '--continue',    resumeIdArgs: '--resume <id>', name: 'GitHub Copilot' },
+                          other:   {} }[v] || {};
+        const patch = {};
+        if (presets.resumeArgs != null) patch.resumeArgs = presets.resumeArgs;
+        if (presets.resumeIdArgs != null) patch.resumeIdArgs = presets.resumeIdArgs;
+        if (!next.command || !next.command.trim()) patch.command = presets.command || '';
+        if (!next.name || !next.name.trim()) patch.name = presets.name || '';
+        return patch;
+      },
+    },
+    { key: 'name', label: 'Name', placeholder: 'My CLI', required: true },
+    { key: 'command', label: 'Command', mono: true, placeholder: 'ccp / claude / ...', required: true },
+    { key: 'args', label: 'Args (space-separated)', mono: true, placeholder: '' },
+    { key: 'resumeArgs', label: 'Resume args (fallback)', mono: true, placeholder: '--continue',
+      hint: 'Used when ccsm has no captured upstream session id.' },
+    { key: 'resumeIdArgs', label: 'Resume by id args', mono: true, placeholder: '--resume <id>',
+      hint: 'Use <id> as the placeholder for the captured upstream session UUID.' },
+    { key: 'shell', label: 'Shell', type: 'select', default: 'direct', options: [
+      { value: 'direct', label: 'direct (real .exe / .cmd)' },
+      { value: 'pwsh', label: 'pwsh (PowerShell aliases & functions)' },
+      { value: 'cmd', label: 'cmd (doskey)' },
+    ] },
+  ];
+
+  // --- Folder picker config --------------------------------------------
+  const folderItems = [
+    { id: '', label: 'Unsorted', meta: 'no folder', undraggable: true },
+    ...folders.value.map((f) => ({ id: f.id, label: f.name })),
+  ];
+  const folderCreateFields = [
+    { key: 'name', label: 'Folder name', placeholder: 'Work / Personal / ...', autoFocus: true, required: true },
+  ];
+
+  // --- Repo picker config ----------------------------------------------
+  const repoItems = repos.map((r) => ({
+    id: r.name,
+    label: r.name,
+    meta: r.url,
+  }));
+  const repoCreateFields = [
+    { key: 'name', label: 'Name', placeholder: 'my-repo', autoFocus: true, required: true },
+    { key: 'url', label: 'URL', mono: true, placeholder: 'https://github.com/me/foo.git', required: true },
+  ];
+
+  const selectedRepoCount = selectedRepos.value.size;
+
+  // Label + title for the unified workdir/repos pill.
+  const workdirLabel = (() => {
+    if (mode === 'cwd') return cwd ? shortenPath(cwd) : 'Pick folder…';
+    if (selectedRepoCount === 0) return 'Auto workspace';
+    if (selectedRepoCount === 1) return [...selectedRepos.value][0];
+    return `Auto · ${selectedRepoCount} repos`;
+  })();
+  const workdirTitle = mode === 'cwd'
+    ? (cwd ? `Working dir · ${cwd}` : 'Pick an existing folder')
+    : (selectedRepoCount === 0
+        ? 'Auto: a fresh workspace under workDir (no repos)'
+        : `Auto workspace · clone ${selectedRepoCount} repo(s)`);
+
   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 class="launch-hero">
+      <div class="launch-brand">
+        <span class="launch-brand-mark"><${BrandMark} /></span>
       </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>
+      <h1 class="launch-tagline">
+        One shell. <em>Every CLI.</em>
+      </h1>
+
+      <div class="launch-toolbar">
+        <button type="button"
+                class=${`pill${openPicker === 'cli' ? ' is-open' : ''}`}
+                title="Choose CLI"
+                onClick=${() => setOpenPicker(openPicker === 'cli' ? null : 'cli')}>
+          <span class="pill-icon">${(() => { const I = IconForCliType(cli?.type); return html`<${I} />`; })()}</span>
+          <span class="pill-label">${cli ? cli.name : 'Choose CLI'}</span>
+          <span class="pill-chev"><${IconChevronDown} /></span>
+        </button>
+        ${openPicker === 'cli' ? html`
+          <${Modal} title="Choose CLI" onClose=${close} width=${440}>
+            <${PickerPanel} items=${cliItems} selectedId=${cliId}
+                            showSearch=${false}
+                            onSelect=${(id) => setCliId(id)}
+                            onCreate=${async (v) => {
+                              try {
+                                const id = await createCli(v);
+                                setToast(`created CLI · ${v.name}`);
+                                return id;
+                              } catch (e) { setToast(e.message, 'error'); throw e; }
+                            }}
+                            createLabel="New CLI" createFields=${cliCreateFields}
+                            onClose=${close} />
+          </${Modal}>` : null}
+
+        <button type="button"
+                class=${`pill${openPicker === 'workdir' ? ' is-open' : ''}${(mode === 'cwd' && cwd) ? ' is-set' : ''}`}
+                title=${workdirTitle}
+                onClick=${() => setOpenPicker(openPicker === 'workdir' ? null : 'workdir')}>
+          <span class="pill-icon"><${IconWorkspace} /></span>
+          <span class="pill-label">${workdirLabel}</span>
+          <span class="pill-chev"><${IconChevronDown} /></span>
+        </button>
+        ${openPicker === 'workdir' ? html`
+          <${Modal} title="Working directory" onClose=${close} width=${640}>
+            <div class="workdir-modal">
+              <div class="workdir-mode-grid">
+                <button type="button"
+                        class=${`workdir-mode-opt${mode === 'auto' ? ' is-active' : ''}`}
+                        onClick=${() => setMode('auto')}>
+                  <span class="workdir-mode-icon"><${IconSparkle} /></span>
+                  <span class="workdir-mode-name">Auto workspace</span>
+                  <span class="workdir-mode-sub">Fresh <span class="mono">ws-N</span> + clone repos</span>
+                </button>
+                <button type="button"
+                        class=${`workdir-mode-opt${mode === 'cwd' ? ' is-active' : ''}`}
+                        onClick=${() => setMode('cwd')}>
+                  <span class="workdir-mode-icon"><${IconFolderOpen} /></span>
+                  <span class="workdir-mode-name">Existing folder</span>
+                  <span class="workdir-mode-sub">Launch directly · no clone</span>
+                </button>
+              </div>
+              <div class="workdir-detail">
+                ${mode === 'auto' ? html`
+                  <${PickerPanel} items=${repoItems} multi
+                                  showSearch=${false}
+                                  selectedIds=${selectedRepos.value}
+                                  onToggle=${toggleRepo}
+                                  title="Repos to clone"
+                                  emptyHint="No repos configured. Add one below to clone it into the workspace."
+                                  onCreate=${async (v) => {
+                                    try {
+                                      const name = await createRepo(v);
+                                      setToast(`added repo · ${name}`);
+                                      return name;
+                                    } catch (e) { setToast(e.message, 'error'); throw e; }
+                                  }}
+                                  createLabel="New repo" createFields=${repoCreateFields}
+                                  onClose=${close} />
+                ` : html`
+                  <${DirectoryPicker} initialPath=${cwd || ''}
+                                      onPick=${(p) => { setCwd(p); }} />
+                `}
+              </div>
+              <div class="workdir-foot">
+                <button type="button" class="action subtle" onClick=${close}>Cancel</button>
+                <button type="button" class="action primary"
+                        disabled=${mode === 'cwd' && !cwd}
+                        onClick=${close}>
+                  ${mode === 'cwd' ? 'Use folder' : 'Done'}
+                </button>
+              </div>
+            </div>
+          </${Modal}>` : null}
+
+        <button type="button"
+                class=${`pill${openPicker === 'folder' ? ' is-open' : ''}`}
+                title="Choose folder"
+                onClick=${() => setOpenPicker(openPicker === 'folder' ? null : 'folder')}>
+          <span class="pill-icon"><${IconFolder} /></span>
+          <span class="pill-label">${folder ? folder.name : 'Unsorted'}</span>
+          <span class="pill-chev"><${IconChevronDown} /></span>
+        </button>
+        ${openPicker === 'folder' ? html`
+          <${Modal} title="Choose folder" onClose=${close} width=${400}>
+            <${PickerPanel} items=${folderItems} selectedId=${folderId}
+                            showSearch=${false}
+                            dnd=${folderDnd}
+                            onSelect=${(id) => setFolderId(id)}
+                            onCreate=${async (v) => {
+                              try {
+                                const f = await createFolder(v.name);
+                                setToast(`created folder · ${v.name}`);
+                                return f?.id;
+                              } catch (e) { setToast(e.message, 'error'); throw e; }
+                            }}
+                            createLabel="New folder" createFields=${folderCreateFields}
+                            onClose=${close} />
+          </${Modal}>` : null}
       </div>
+
+      <button class="action primary launch-cta"
+              disabled=${busy || !cliId || (mode === 'cwd' && !cwd)}
+              onClick=${onLaunch}>
+        ${busy ? 'Launching…' : html`Launch <span class="launch-cta-plane" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M22 2 11 13"/>
+            <path d="M22 2 15 22l-4-9-9-4Z"/>
+          </svg>
+        </span>`}
+      </button>
+
+      <button type="button" class="launch-import-link"
+              onClick=${() => setAdoptOpen(true)}>
+        or import existing<span class="launch-import-arrow" aria-hidden="true"><${IconArrowRight} /></span>
+      </button>
+
+      ${adoptOpen ? html`
+        <${AdoptModal} onClose=${() => setAdoptOpen(false)}
+                       onAdopted=${async (id) => {
+                         setAdoptOpen(false);
+                         await refreshAll();
+                         if (id) selectSession(id);
+                         selectTab('sessions');
+                       }} />` : null}
+
       <${ProgressList} rootId=${ROOT_ID} />
-      <div class="post-result">${result}</div>
-    </${Card}>`;
+      ${result ? html`<div class="launch-status mono">${result}</div>` : null}
+    </div>`;
+}
+
+let lastKey = null;
+function useStateOnce(key, init) {
+  if (key !== lastKey) {
+    lastKey = key;
+    init();
+  }
+}
+
+// Truncate a long path so it fits the pill nicely.
+//   C:\Users\admin\proj\foo\bar  →  …\foo\bar
+function shortenPath(p) {
+  if (!p) return '';
+  if (p.length <= 28) return p;
+  const sep = p.includes('\\') ? '\\' : '/';
+  const parts = p.split(sep).filter(Boolean);
+  if (parts.length <= 2) return p;
+  return '…' + sep + parts.slice(-2).join(sep);
 }
 
 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}>`;
+    <${PageTitleBar} title="New session" />
+    <${LaunchHero} />`;
 }

package/public/js/pages/SessionsPage.js

@@ -1,47 +1,97 @@
+// Sessions page · the main pane. Shows the terminal for the currently
+// selected session (activeSessionId), with a thin header providing
+// session metadata + rename/delete actions. When a session is selected
+// but not running we auto-resume it — no manual button.
+
 import { html } from '../html.js';
-import { sessions, recentTotal, favoritesList, clockTick } from '../state.js';
-import { Card } from '../components/Card.js';
-import { SessionsTable } from '../components/SessionsTable.js';
-import { RecentTable } from '../components/RecentTable.js';
-import { FavoritesTable } from '../components/FavoritesTable.js';
-import { runFinder } from '../actions.js';
-import { IconSearch, StarSmallFilled } from '../icons.js';
-import { nowClock } from '../util.js';
+import { useEffect, useState } from 'preact/hooks';
+import { activeSessionId, sessions, config, selectTab, selectSession, clockTick } from '../state.js';
+import { resumeSession, deleteSession, setSessionTitle } from '../api.js';
+import { setToast } from '../toast.js';
+import { ccsmConfirm, ccsmPrompt } from '../dialog.js';
+import { TerminalView } from '../components/TerminalView.js';
+import { PageTitleBar } from '../components/PageTitleBar.js';
+import { IconPencil, IconClose } from '../icons.js';
+import { fmtAgo } from '../util.js';
 
 export function SessionsPage() {
-  void clockTick.value;
-  const sessCount = sessions.value.length;
-  const favCount = favoritesList.value.length;
-
-  const sessionsMeta = sessCount
-    ? `${sessCount} live · refreshed ${nowClock()}`
-    : 'no live sessions';
-  const recentMeta = recentTotal.value
-    ? `${recentTotal.value} total · sorted by jsonl mtime, excluding live`
-    : 'no recent sessions';
-  const favMeta = favCount ? `${favCount} pinned` : 'click ☆ on any row to pin sessions here';
+  clockTick.value; // resubscribe fmtAgo
+  const id = activeSessionId.value;
+  const list = sessions.value;
+  const session = id ? list.find((s) => s.id === id) : null;
+  const [resumeError, setResumeError] = useState(null);
+  // Bumps to force the auto-resume effect to re-run on Retry without
+  // mutating any signal. Primitive in the dep array → identity changes.
+  const [retryNonce, setRetryNonce] = useState(0);
+
+  // No session selected → bounce to the Launch page. Done in an effect so
+  // we don't mutate signals during render. Returning null while the bounce
+  // is in flight avoids a flash of empty content.
+  useEffect(() => {
+    if (!session) selectTab('launch');
+  }, [session]);
+
+  // Auto-resume when the active session is exited. resumeSession() in
+  // api.js dedups in-flight calls per session id, so simultaneous fires
+  // from here and from Sidebar.onClick collapse into one request.
+  useEffect(() => {
+    if (!session) return;
+    if (session.status === 'running') { setResumeError(null); return; }
+    setResumeError(null);
+    resumeSession(session.id)
+      .then((launched) => { if (launched?.id) selectSession(launched.id); })
+      .catch((e) => { setResumeError(e.message); setToast(e.message, 'error'); });
+  }, [session?.id, session?.status, retryNonce]);
+
+  if (!session) return null;
+
+  const cli = (config.value?.clis || []).find((c) => c.id === session.cliId);
+  const running = session.status === 'running';
+  const title = session.title || session.workspace || session.id.slice(0, 12);
+
+  const onRename = async () => {
+    const next = await ccsmPrompt('Rename session', title, { okLabel: 'Save' });
+    if (next === null) return;
+    try { await setSessionTitle(session.id, next.trim()); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+  const onDelete = async () => {
+    const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
+      title: 'Delete session', okLabel: 'Delete', danger: true });
+    if (!ok) return;
+    try {
+      await deleteSession(session.id);
+      activeSessionId.value = null;
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+  const onRetry = () => setRetryNonce((n) => n + 1);
 
   return html`
-    <div class="page-actions">
-      <span class="page-actions-hint">Looking through your past conversations?</span>
-      <button class="action primary" onClick=${runFinder}
-              title="open a Claude session with context on the ccsm data dir">
-        <${IconSearch} stroke=${2} /> Ask Claude to find a session
-      </button>
-    </div>
-
-    <${Card} foldKey="favorites"
-             title=${html`Favorites <${StarSmallFilled} />`}
-             meta=${favMeta}
-             flush=${true}>
-      <${FavoritesTable} />
-    </${Card}>
-
-    <${Card} foldKey="sessions" title="Live sessions" meta=${sessionsMeta} flush=${true}>
-      <${SessionsTable} />
-    </${Card}>
-
-    <${Card} foldKey="recent" title="Recently closed" meta=${recentMeta} flush=${true}>
-      <${RecentTable} />
-    </${Card}>`;
+    <${PageTitleBar} title=${html`
+        <span class="session-title-text">${title}</span>
+        <span class="session-title-meta">
+          <span class="mono">${session.cwd}</span>
+          <span>·</span>
+          <span>${cli ? cli.name : session.cliId}</span>
+          ${session.repos.length ? html`<span>·</span><span>${session.repos.join(', ')}</span>` : null}
+          <span>·</span>
+          <span>${running ? 'running' : (resumeError ? 'resume failed' : 'resuming…')}</span>
+        </span>
+      `}>
+    </${PageTitleBar}>
+    <div class="session-pane">
+      <div class="session-pane-body">
+        ${running
+          ? html`<${TerminalView} terminalId=${session.id} />`
+          : html`
+            <div class="terminal-empty">
+              ${resumeError ? html`
+                <div>Failed to resume: <span class="mono">${resumeError}</span></div>
+                <button class="action primary" onClick=${onRetry}>Retry</button>
+              ` : html`
+                <div>Resuming session…</div>
+              `}
+            </div>`}
+      </div>
+    </div>`;
 }