@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/js/components/NewSessionModal.js

@@ -1,153 +0,0 @@
-// FAB-triggered launch modal. Shares ReposEditor + RepoPicker with the
-// inline Launch tab form, but maintains its own selected-repos + workspace
-// state so the two don't clobber each other.
-
-import { html } from '../html.js';
-import { useEffect, useState } from 'preact/hooks';
-import { signal } from '@preact/signals';
-import { modalOpen, config, capabilities, activeTerminalId, selectTab } from '../state.js';
-import { api, loadWorkspaces, loadWebTerminals } from '../api.js';
-import { setToast } from '../toast.js';
-import { streamNewSession, resetProgress } from '../streaming.js';
-import { IconClose } from '../icons.js';
-import { RepoPicker } from './RepoPicker.js';
-import { WorkspacePicker } from './WorkspacePicker.js';
-import { ProgressList } from './ProgressList.js';
-import { ReposEditor, addEmptyRepo } from './ReposEditor.js';
-
-const ROOT_ID = 'modalProgress';
-const modalSelected = signal(new Set());
-
-// Top-level mounts ModalBody only when open. Keeping hooks inside ModalBody
-// means hook count is stable across its lifetime (was previously being
-// declared after a conditional return, which fights Preact's hook contract
-// and makes opening feel laggy).
-export function NewSessionModal() {
-  return modalOpen.value ? html`<${ModalBody} />` : null;
-}
-
-function ModalBody() {
-  const [workspace, setWorkspace] = useState('');
-  const [result, setResult] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [reposSavedAt, setReposSavedAt] = useState('');
-
-  const close = () => {
-    setResult('');
-    setBusy(false);
-    modalOpen.value = false;
-  };
-
-  useEffect(() => {
-    const onKey = (ev) => { if (ev.key === 'Escape') close(); };
-    document.addEventListener('keydown', onKey);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      document.body.style.overflow = prev;
-    };
-  }, []);
-
-  const onLaunch = async () => {
-    const repos = [...modalSelected.value];
-    setBusy(true);
-    setResult('');
-    resetProgress(repos, ROOT_ID);
-    const wantWeb = capabilities.value?.webTerminal
-      && (config.value?.defaultTerminalMode || 'wt') === 'web';
-    const terminal = wantWeb ? 'web' : 'wt';
-    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 ? ' — ' + summary : ''}`);
-        setToast(`launched · ${final.workspace.name}`);
-        if (terminal === 'web' && final.launched?.id) {
-          activeTerminalId.value = final.launched.id;
-          await loadWebTerminals();
-          selectTab('terminals');
-          modalOpen.value = false;
-        } else {
-          setTimeout(close, 1500);
-        }
-      } 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);
-    }
-  };
-
-  const onSaveRepos = async () => {
-    try {
-      const cfg = await api('PUT', '/api/config', config.value);
-      config.value = cfg;
-      setReposSavedAt(`saved · ${new Date().toLocaleTimeString(undefined, { hour12: false })}`);
-      setToast('repos saved');
-    } catch (e) { setToast(e.message, 'error'); }
-  };
-
-  const onBackdropClick = (ev) => { if (ev.currentTarget === ev.target) close(); };
-
-  return html`
-    <div class="modal-backdrop" role="dialog" aria-modal="true" onClick=${onBackdropClick}>
-      <div class="modal">
-        <header class="modal-head">
-          <h2>Launch new session</h2>
-          <button class="modal-close" aria-label="close" onClick=${close}><${IconClose} /></button>
-        </header>
-        <div class="modal-body">
-          <p class="modal-hint">Pick an unused workspace, clone any missing repos, open <code>claude</code> in a fresh terminal.</p>
-
-          <div class="form-row">
-            <span class="form-label">Repos</span>
-            <${RepoPicker} selectedSig=${modalSelected} />
-          </div>
-
-          <details class="repos-inline-config">
-            <summary>Manage repos</summary>
-            <div class="repos-inline-body">
-              <${ReposEditor} />
-              <div class="repos-inline-actions">
-                <button class="action small" onClick=${() => addEmptyRepo()}>+ Add repo</button>
-                <button class="action small primary" onClick=${onSaveRepos}>Save changes</button>
-                <span class="muted-text">${reposSavedAt}</span>
-              </div>
-            </div>
-          </details>
-
-          <div class="form-row">
-            <label class="form-label">Workspace</label>
-            <${WorkspacePicker} value=${workspace} onChange=${setWorkspace} />
-          </div>
-
-          <${ProgressList} rootId=${ROOT_ID} />
-          <div class="post-result">${result}</div>
-        </div>
-        <footer class="modal-foot">
-          <button class="action" onClick=${close}>Cancel</button>
-          <button class="action primary" disabled=${busy} onClick=${onLaunch}>Launch new session</button>
-        </footer>
-      </div>
-    </div>`;
-}

package/public/js/components/PageHead.js

@@ -1,33 +0,0 @@
-import { html } from '../html.js';
-import { activeTab, TAB_HEADINGS, lastRefreshAt, clockTick } from '../state.js';
-import { refreshAll } from '../api.js';
-import { setToast } from '../toast.js';
-import { fmtAgo } from '../util.js';
-import { ServerStatus } from './ServerStatus.js';
-import { IconRefresh } from '../icons.js';
-
-export function PageHead() {
-  const heading = TAB_HEADINGS[activeTab.value] || TAB_HEADINGS.sessions;
-  // subscribe to clockTick so the "Ns ago" relative label updates every second
-  void clockTick.value;
-  const last = lastRefreshAt.value;
-  const lastLabel = last ? `${fmtAgo(last)} ago` : 'never';
-
-  const onRefresh = () =>
-    refreshAll().then(() => setToast('refreshed')).catch((e) => setToast(e.message, 'error'));
-
-  return html`
-    <header class="page-head">
-      <div class="page-head-inner">
-        <h1 class="page-title">${heading.title}</h1>
-        <p class="page-subtitle">${heading.subtitle}</p>
-      </div>
-      <div class="page-head-meta">
-        <${ServerStatus} />
-        <button class="action subtle small" title=${`last refresh: ${lastLabel}`} onClick=${onRefresh}>
-          <${IconRefresh} size=${13} /> Refresh
-          <span class="refresh-ago">${lastLabel}</span>
-        </button>
-      </div>
-    </header>`;
-}

package/public/js/components/Pagination.js

@@ -1,27 +0,0 @@
-// Shared pagination footer. Hidden when total ≤ limit.
-// onChange(nextOffset, nextLimit) is called for both arrow clicks and page-size change.
-
-import { html } from '../html.js';
-
-export function Pagination({ total, offset, limit, onChange }) {
-  if (total <= limit) return null;
-  const pageNum = Math.floor(offset / limit) + 1;
-  const pageTotal = Math.max(1, Math.ceil(total / limit));
-  const prev = () => onChange(Math.max(0, offset - limit), limit);
-  const next = () => onChange(offset + limit, limit);
-  const resize = (e) => onChange(0, Math.max(1, Number(e.target.value) || 10));
-
-  return html`
-    <footer class="pagination">
-      <button class="action subtle small" disabled=${offset === 0} onClick=${prev}>← Prev</button>
-      <span class="pagination-info">
-        Page <strong>${pageNum}</strong> of <strong>${pageTotal}</strong> · <span>${total}</span> total
-      </span>
-      <button class="action subtle small" disabled=${offset + limit >= total} onClick=${next}>Next →</button>
-      <select class="input" style="max-width: 100px;" value=${limit} onChange=${resize}>
-        <option value="10">10 / page</option>
-        <option value="20">20 / page</option>
-        <option value="50">50 / page</option>
-      </select>
-    </footer>`;
-}

package/public/js/components/RecentTable.js

@@ -1,68 +0,0 @@
-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/SessionsTable.js

@@ -1,71 +0,0 @@
-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/SnapshotPanel.js

@@ -1,77 +0,0 @@
-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/TitleCell.js

@@ -1,40 +0,0 @@
-// 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/WorkspacesGrid.js

@@ -1,41 +0,0 @@
-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();
-}

package/public/js/pages/TerminalsPage.js

@@ -1,74 +0,0 @@
-// Left rail · list of active web sessions + right pane with selected one's xterm.
-
-import { html } from '../html.js';
-import { useEffect } from 'preact/hooks';
-import { webTerminals, activeTerminalId, selectTab } from '../state.js';
-import { loadWebTerminals, killWebTerminal } from '../api.js';
-import { setToast } from '../toast.js';
-import { ccsmConfirm } from '../dialog.js';
-import { TerminalView } from '../components/TerminalView.js';
-import { fmtAgo } from '../util.js';
-
-export function TerminalsPage() {
-  const list = webTerminals.value;
-  const activeId = activeTerminalId.value;
-
-  // Auto-select the first available terminal if nothing is active
-  useEffect(() => {
-    if (!activeId && list.length > 0) activeTerminalId.value = list[0].id;
-    if (activeId && !list.find((t) => t.id === activeId)) {
-      activeTerminalId.value = list[0]?.id || null;
-    }
-  }, [list.map((t) => t.id).join('|'), activeId]);
-
-  if (list.length === 0) {
-    return html`
-      <div class="terminal-empty-page">
-        <div class="card">
-          <div class="card-body" style="text-align: center; padding: 60px var(--s-6);">
-            <p style="font-size: 14px; color: var(--ink-mid); margin-bottom: var(--s-4);">
-              No terminals open yet.
-            </p>
-            <button class="action primary" onClick=${() => selectTab('launch')}>
-              + Launch a session
-            </button>
-          </div>
-        </div>
-      </div>`;
-  }
-
-  return html`
-    <div class="terminals-layout">
-      <aside class="terminals-rail">
-        <div class="terminals-rail-head">
-          <span>${list.length} active</span>
-          <button class="action subtle tiny" title="refresh list" onClick=${() => loadWebTerminals()}>↻</button>
-        </div>
-        ${list.map((t) => html`
-          <button key=${t.id} class=${`terminal-row${activeId === t.id ? ' is-active' : ''}`}
-                  onClick=${() => (activeTerminalId.value = t.id)}>
-            <span class=${`status-mark ${t.exitedAt ? 'unknown' : 'busy'}`}></span>
-            <span class="terminal-row-title">${t.meta.title || t.id.slice(0, 12)}</span>
-            <span class="terminal-row-meta">${fmtAgo(t.meta.startedAt)}</span>
-            <span class="terminal-row-actions">
-              <button class="action tiny danger" title="kill this session"
-                      onClick=${(ev) => { ev.stopPropagation(); confirmKill(t); }}>×</button>
-            </span>
-          </button>`)}
-      </aside>
-      <main class="terminals-main">
-        <${TerminalView} terminalId=${activeId} />
-      </main>
-    </div>`;
-}
-
-async function confirmKill(t) {
-  const ok = await ccsmConfirm(`Kill ${t.meta.title || t.id}? The PTY process will be terminated.`, {
-    title: 'Kill session', okLabel: 'Kill', danger: true,
-  });
-  if (!ok) return;
-  try {
-    await killWebTerminal(t.id);
-    setToast(`killed · ${t.id.slice(0, 12)}`);
-  } catch (e) { setToast(e.message, 'error'); }
-}