@bakapiano/ccsm 0.20.1 → 0.21.0

package/public/js/components/AdoptModal.js

@@ -1,20 +1,13 @@
-// "Import existing session" modal. Browses sessions discovered on disk
-// for claude / codex / copilot, lets the user pick one, choose which
-// configured CLI it should be tied to, and adopts it — a ccsm
-// persistedSessions record is created with the upstream session id
-// pre-filled so clicking it later runs `<cli> --resume <id>` (via
-// cli.resumeIdArgs).
+// "Import existing session" modal. Browses sessions discovered on disk for
+// claude / codex / copilot, lets the user pick one, choose which configured
+// CLI it should be tied to, and adopts it — a ccsm persistedSessions record
+// is created with the upstream session id pre-filled so clicking it later
+// runs `<cli> --resume <id>` (via cli.resumeIdArgs).
 //
-// Props:
-//   onClose()                    — close request
-//   onAdopted(sessionId)         — fires after a successful adopt with
-//                                  the new (or pre-existing) record id
-//
-// Tabs across the top switch the upstream type. Below the tabs, an
-// "Adopt as <CLI ▾>" chip filters the configured CLIs by matching
-// `type` and reuses the global PickerPanel popover. A search box
-// filters rows by title + cwd. Each row is a card with the prompt
-// summary, cwd, age, and an Import button.
+// Layout (matches the app's modal pattern): pinned head (tabs + "import as"
+// CLI pill + search), a scrolling list of session cards, and a pinned footer
+// with ‹ Prev · X–Y of Z · Next › pagination. Each tab paginates server-side
+// (PAGE_SIZE per page); typing a query loads the whole tab and filters it.
 
 import { html } from '../html.js';
 import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
@@ -26,7 +19,7 @@ import { listLocalCliSessions, adoptSession } from '../api.js';
 import { setToast } from '../toast.js';
 import {
   IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor,
-  IconSearch, IconClose, IconChevronDown, IconBranch,
+  IconSearch, IconClose, IconChevronDown, IconChevronLeft, IconChevronRight, IconRefresh,
 } from '../icons.js';
 
 const TABS = [
@@ -35,157 +28,90 @@ const TABS = [
   { type: 'copilot', label: 'Copilot', Icon: IconCopilotColor },
 ];
 
-const PAGE_SIZE = 30;
+const PAGE_SIZE = 20;
+const SEARCH_LIMIT = 1000;   // typing a query loads the whole tab to filter
 
 export function AdoptModal({ onClose, onAdopted }) {
   const [tab, setTab] = useState('claude');
-  // cache shape per tab: { loading, loadingMore, error, items, offset,
-  //                       hasMore, totalActive, totalNonActive }
-  const [cache, setCache] = useState({});
-  const [adopting, setAdopting] = useState(null);
+  const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
+  const [view, setView] = useState({ loading: true, error: null, sessions: [], total: 0 });
+  const [totals, setTotals] = useState({});       // per-tab total → tab badges
+  const [adopting, setAdopting] = useState(null);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [cliOverride, setCliOverride] = useState({});
+  const [reloadTick, setReloadTick] = useState(0); // Rescan bumps this
   const cliAnchorRef = useRef(null);
 
-  const load = async (type, { force = false } = {}) => {
-    const existing = cache[type];
-    if (!force && existing && !existing.error && existing.items.length) return;
-    setCache((c) => ({
-      ...c,
-      [type]: { loading: true, loadingMore: false, items: [], error: null,
-                offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0 },
-    }));
-    try {
-      const r = await listLocalCliSessions(type, { offset: 0, limit: PAGE_SIZE });
-      setCache((c) => ({
-        ...c,
-        [type]: {
-          loading: false, loadingMore: false, error: null,
-          items: r.sessions,
-          offset: r.offset + r.sessions.filter((s) => !s.active).length, // advance past hydrated non-active
-          hasMore: r.hasMore,
-          totalActive: r.totalActive,
-          totalNonActive: r.totalNonActive,
-        },
-      }));
-    } catch (e) {
-      setCache((c) => ({
-        ...c,
-        [type]: { loading: false, loadingMore: false, items: [], error: e.message,
-                  offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0 },
-      }));
-    }
-  };
+  const searching = !!query.trim();
 
-  const loadMore = async () => {
-    const cur = cache[tab];
-    if (!cur || cur.loadingMore || !cur.hasMore) return;
-    setCache((c) => ({ ...c, [tab]: { ...c[tab], loadingMore: true } }));
-    try {
-      const r = await listLocalCliSessions(tab, { offset: cur.offset, limit: PAGE_SIZE });
-      setCache((c) => {
-        const entry = c[tab];
-        const existingIds = new Set(entry.items.map((x) => x.cliSessionId));
-        const additions = r.sessions.filter((s) => !existingIds.has(s.cliSessionId));
-        return {
-          ...c,
-          [tab]: {
-            ...entry,
-            loadingMore: false,
-            items: [...entry.items, ...additions],
-            offset: cur.offset + additions.filter((s) => !s.active).length,
-            hasMore: r.hasMore,
-          },
-        };
-      });
-    } catch (e) {
-      setCache((c) => ({ ...c, [tab]: { ...c[tab], loadingMore: false, error: e.message } }));
-    }
-  };
+  // Fetch the active view (tab × page × query). When searching we pull the
+  // whole tab and filter client-side; otherwise just the requested page.
+  useEffect(() => {
+    let cancelled = false;
+    setView((v) => ({ ...v, loading: true, error: null }));
+    (async () => {
+      try {
+        const offset = searching ? 0 : page * PAGE_SIZE;
+        const limit  = searching ? SEARCH_LIMIT : PAGE_SIZE;
+        const r = await listLocalCliSessions(tab, { offset, limit });
+        if (cancelled) return;
+        const total = r.total ?? ((r.totalActive || 0) + (r.totalNonActive || 0));
+        setView({ loading: false, error: null, sessions: r.sessions || [], total });
+        setTotals((t) => (t[tab] === total ? t : { ...t, [tab]: total }));
+      } catch (e) {
+        if (!cancelled) setView({ loading: false, error: e.message, sessions: [], total: 0 });
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [tab, page, searching, reloadTick]);
 
-  useEffect(() => { load(tab); /* eslint-disable-next-line */ }, [tab]);
-  // Clear search when switching tabs
-  useEffect(() => { setQuery(''); }, [tab]);
+  // Snap back to page 0 when the tab changes or search toggles on/off.
+  useEffect(() => { setPage(0); }, [tab]);
+  useEffect(() => { setPage(0); }, [searching]);
 
   const cfg = config.value || {};
   const clis = cfg.clis || [];
-  // CLIs of the same upstream `type` as the active tab — these are the
-  // ones the row's `--resume <id>` template will actually work with.
-  const matchingClis = useMemo(
-    () => clis.filter((c) => c.type === tab),
-    [clis, tab],
-  );
-
-  // Effective CLI for the current tab: user override → first matching
-  // → configured default → first cli.
+  // CLIs of the same upstream type as the active tab — the ones whose
+  // `--resume <id>` template will actually work with these sessions.
+  const matchingClis = useMemo(() => clis.filter((c) => c.type === tab), [clis, tab]);
   const effectiveCliId =
-    cliOverride[tab]
-    || matchingClis[0]?.id
-    || cfg.defaultCliId
-    || clis[0]?.id
-    || '';
+    cliOverride[tab] || matchingClis[0]?.id || cfg.defaultCliId || clis[0]?.id || '';
   const effectiveCli = clis.find((c) => c.id === effectiveCliId) || null;
 
-  // Items the picker shows — prefer same-type CLIs at top, then dim others.
   const pickerItems = useMemo(() => {
     const Icon = IconForCliType(tab);
-    const top = matchingClis.map((c) => ({
-      id: c.id,
-      icon: html`<${Icon} />`,
-      label: c.name,
-      meta: c.command,
-    }));
-    const others = clis
-      .filter((c) => c.type !== tab)
-      .map((c) => {
-        const I = IconForCliType(c.type);
-        return {
-          id: c.id,
-          icon: html`<${I} />`,
-          label: c.name,
-          meta: `(non-${tab})`,
-        };
-      });
+    const top = matchingClis.map((c) => ({ id: c.id, icon: html`<${Icon} />`, label: c.name, meta: c.command }));
+    const others = clis.filter((c) => c.type !== tab).map((c) => {
+      const I = IconForCliType(c.type);
+      return { id: c.id, icon: html`<${I} />`, label: c.name, meta: `(non-${tab})` };
+    });
     return [...top, ...others];
   }, [clis, matchingClis, tab]);
 
-  const state = cache[tab] || {
-    loading: true, loadingMore: false, items: [], error: null,
-    offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0,
-  };
-  const items = useMemo(() => {
+  // Search filters the loaded set (the whole tab while searching, else the page).
+  const rows = useMemo(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return state.items;
-    return state.items.filter((it) => {
-      const hay = `${it.summary || ''} ${it.cwd || ''} ${it.cliSessionId}`.toLowerCase();
-      return hay.includes(q);
-    });
-  }, [state.items, query]);
-
-  const totalKnown = state.totalActive + state.totalNonActive;
-  const unimportedCount = state.items.filter((it) => !it.adopted).length;
+    if (!q) return view.sessions;
+    return view.sessions.filter((it) =>
+      `${it.summary || ''} ${it.cwd || ''} ${it.cliSessionId}`.toLowerCase().includes(q));
+  }, [view.sessions, query]);
 
   const adopt = async (item) => {
-    const cliId = effectiveCliId;
-    if (!cliId) { setToast('configure a CLI first', 'error'); return; }
+    if (!effectiveCliId) { setToast('configure a CLI first', 'error'); return; }
     setAdopting(item.cliSessionId);
     try {
       const r = await adoptSession({
-        cliId,
+        cliId: effectiveCliId,
         cliSessionId: item.cliSessionId,
         cwd: item.cwd,
         title: item.summary || '',
       });
       if (r.alreadyAdopted) setToast('already in ccsm — opened existing record');
       else setToast(`imported · ${item.cliSessionId.slice(0, 8)}…`);
-      setCache((c) => ({
-        ...c,
-        [tab]: c[tab] ? {
-          ...c[tab],
-          items: c[tab].items.map((x) => x.cliSessionId === item.cliSessionId
-            ? { ...x, adopted: true } : x),
-        } : c[tab],
+      setView((v) => ({
+        ...v,
+        sessions: v.sessions.map((x) => x.cliSessionId === item.cliSessionId ? { ...x, adopted: true } : x),
       }));
       onAdopted?.(r.session?.id);
     } catch (e) {
@@ -195,135 +121,129 @@ export function AdoptModal({ onClose, onAdopted }) {
     }
   };
 
+  // ── pagination footer ──
+  const pageCount = Math.max(1, Math.ceil(view.total / PAGE_SIZE));
+  const from = view.total === 0 ? 0 : page * PAGE_SIZE + 1;
+  const to = Math.min(view.total, page * PAGE_SIZE + view.sessions.length);
+  const footer = searching
+    ? html`<span class="adopt-pager-info">
+        ${rows.length} match${rows.length === 1 ? '' : 'es'} · clear search to browse all
+      </span>`
+    : html`
+      <button type="button" class="action subtle small adopt-pager-btn"
+              disabled=${page === 0 || view.loading}
+              onClick=${() => setPage((p) => Math.max(0, p - 1))}>
+        <${IconChevronLeft} /> Prev
+      </button>
+      <span class="adopt-pager-info">
+        ${view.total === 0 ? 'No sessions' : `${from}–${to} of ${view.total}`}
+      </span>
+      <button type="button" class="action subtle small adopt-pager-btn"
+              disabled=${(page + 1) >= pageCount || view.loading}
+              onClick=${() => setPage((p) => p + 1)}>
+        Next <${IconChevronRight} />
+      </button>`;
+
   return html`
-    <${Modal} title="Import existing session" onClose=${onClose} width=${680}>
+    <${Modal} title="Import existing session" onClose=${onClose} width=${680} footer=${footer}>
       <div class="adopt">
-        <!-- Tabs row -->
-        <div class="adopt-tabs">
-          ${TABS.map((t) => {
-            const cnt = cache[t.type]?.items?.filter((x) => !x.adopted).length;
-            return html`
+        <div class="adopt-head">
+          <div class="adopt-tabs">
+            ${TABS.map((t) => html`
               <button type="button" key=${t.type}
                       class=${`adopt-tab${tab === t.type ? ' is-active' : ''}`}
                       onClick=${() => setTab(t.type)}>
                 <span class="adopt-tab-icon"><${t.Icon} /></span>
-                <span>${t.label}</span>
-                ${typeof cnt === 'number' && cnt > 0 ? html`
-                  <span class="adopt-tab-count">${cnt}</span>
-                ` : null}
-              </button>`;
-          })}
-          <button type="button" class="adopt-icon-btn" title="Rescan"
-                  onClick=${() => load(tab, { force: true })}>
-            <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">
-              <path d="M2 8a6 6 0 0 1 10.3-4.2L14 2v4h-4l1.5-1.5A4.5 4.5 0 1 0 12.5 8H14a6 6 0 1 1-12 0z"
-                    fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
-            </svg>
-          </button>
-        </div>
+                <span class="adopt-tab-label">${t.label}</span>
+                ${typeof totals[t.type] === 'number' && totals[t.type] > 0 ? html`
+                  <span class="adopt-tab-count">${totals[t.type]}</span>` : null}
+              </button>`)}
+            <button type="button" class="adopt-rescan" title="Rescan disk"
+                    onClick=${() => setReloadTick((n) => n + 1)}>
+              <${IconRefresh} />
+            </button>
+          </div>
 
-        <!-- Tools row: CLI picker + search -->
-        <div class="adopt-tools">
-          <button type="button" ref=${cliAnchorRef}
-                  class=${`adopt-cli-pill${pickerOpen ? ' is-open' : ''}`}
-                  onClick=${() => setPickerOpen((v) => !v)}>
-            <span class="adopt-cli-pill-prefix">Adopt as</span>
-            <span class="adopt-cli-pill-icon">
-              ${effectiveCli ? html`${(() => {
-                const I = IconForCliType(effectiveCli.type);
-                return html`<${I} />`;
-              })()}` : null}
-            </span>
-            <span class="adopt-cli-pill-name">${effectiveCli?.name || 'choose CLI'}</span>
-            <${IconChevronDown} />
-          </button>
-          ${pickerOpen ? html`
-            <${Popover} anchor=${cliAnchorRef} onClose=${() => setPickerOpen(false)} width=${300}>
-              <${PickerPanel}
-                title=${`CLI for ${tab} sessions`}
-                items=${pickerItems}
-                selectedId=${effectiveCliId}
-                showSearch=${pickerItems.length > 6}
-                emptyHint=${`No configured CLIs match ${tab}.`}
-                onSelect=${(id) => { setCliOverride((m) => ({ ...m, [tab]: id })); }}
-                onClose=${() => setPickerOpen(false)} />
-            </${Popover}>` : null}
+          <div class="adopt-tools">
+            <button type="button" ref=${cliAnchorRef}
+                    class=${`adopt-cli-pill${pickerOpen ? ' is-open' : ''}`}
+                    onClick=${() => setPickerOpen((v) => !v)}>
+              <span class="adopt-cli-pill-prefix">Import as</span>
+              <span class="adopt-cli-pill-icon">
+                ${effectiveCli ? html`${(() => { const I = IconForCliType(effectiveCli.type); return html`<${I} />`; })()}` : null}
+              </span>
+              <span class="adopt-cli-pill-name">${effectiveCli?.name || 'choose CLI'}</span>
+              <${IconChevronDown} />
+            </button>
+            ${pickerOpen ? html`
+              <${Popover} anchor=${cliAnchorRef} onClose=${() => setPickerOpen(false)} width=${300}>
+                <${PickerPanel}
+                  title=${`CLI for ${tab} sessions`}
+                  items=${pickerItems}
+                  selectedId=${effectiveCliId}
+                  showSearch=${pickerItems.length > 6}
+                  emptyHint=${`No configured CLIs match ${tab}.`}
+                  onSelect=${(id) => { setCliOverride((m) => ({ ...m, [tab]: id })); }}
+                  onClose=${() => setPickerOpen(false)} />
+              </${Popover}>` : null}
 
-          <div class="adopt-search">
-            <span class="adopt-search-icon"><${IconSearch} /></span>
-            <input class="adopt-search-input"
-                   placeholder=${state.loading ? 'Loading…' : `Search ${unimportedCount} sessions…`}
-                   value=${query} disabled=${state.loading}
-                   onInput=${(e) => setQuery(e.target.value)} />
-            ${query ? html`
-              <button class="adopt-search-clear" type="button"
-                      onClick=${() => setQuery('')} title="Clear">
-                <${IconClose} />
-              </button>` : null}
+            <div class="adopt-search">
+              <span class="adopt-search-icon"><${IconSearch} /></span>
+              <input class="adopt-search-input"
+                     placeholder=${`Search ${tab} sessions…`}
+                     value=${query}
+                     onInput=${(e) => setQuery(e.target.value)} />
+              ${query ? html`
+                <button class="adopt-search-clear" type="button" title="Clear"
+                        onClick=${() => setQuery('')}><${IconClose} /></button>` : null}
+            </div>
           </div>
         </div>
 
-        <!-- List body -->
-        <div class="adopt-body">
-          ${state.loading ? html`
+        <div class="adopt-list">
+          ${view.loading ? html`
             <div class="adopt-empty"><span class="adopt-empty-spinner"></span> Scanning…</div>
-          ` : state.error ? html`
-            <div class="adopt-empty adopt-error">${state.error}</div>
-          ` : state.items.length === 0 ? html`
+          ` : view.error ? html`
+            <div class="adopt-empty adopt-error">${view.error}</div>
+          ` : rows.length === 0 ? html`
             <div class="adopt-empty">
               <div class="adopt-empty-mark">∅</div>
-              No ${tab} sessions found on this machine.
+              ${searching ? html`No matches for "${query}".` : html`No ${tab} sessions found on this machine.`}
             </div>
-          ` : items.length === 0 ? html`
-            <div class="adopt-empty">No matches for "${query}".</div>
           ` : html`
-            <ul class="adopt-list" data-shown=${items.length} data-total=${totalKnown}>
-              ${items.map((it) => html`
-                <li class=${`adopt-row${it.adopted ? ' is-adopted' : ''}${it.active ? ' is-active' : ''}`}
-                    key=${it.cliSessionId}>
-                  <div class="adopt-row-main">
-                    <div class="adopt-row-title">
-                      ${it.active ? html`<span class="adopt-row-live" title="A CLI process has this session open right now">● live</span>` : null}
-                      ${it.summary || html`<span class="adopt-row-untitled">untitled session</span>`}
+            <ul class="adopt-rows">
+              ${rows.map((it) => {
+                const Icon = IconForCliType(tab);
+                return html`
+                  <li class=${`adopt-row${it.adopted ? ' is-adopted' : ''}${it.active ? ' is-active' : ''}`}
+                      key=${it.cliSessionId}>
+                    <span class="adopt-row-icon"><${Icon} /></span>
+                    <div class="adopt-row-main">
+                      <div class="adopt-row-title">
+                        ${it.active ? html`<span class="adopt-row-live" title="A CLI process has this session open right now">live</span>` : null}
+                        ${it.summary || html`<span class="adopt-row-untitled">untitled session</span>`}
+                      </div>
+                      <div class="adopt-row-meta">
+                        <span class="adopt-row-path mono" title=${it.cwd || ''}>${it.cwd || '—'}</span>
+                        <span class="adopt-row-dot">·</span>
+                        <span>${relTime(it.mtime)}</span>
+                        <span class="adopt-row-dot">·</span>
+                        <span class="adopt-row-id mono">${it.cliSessionId.slice(0, 8)}</span>
+                      </div>
                     </div>
-                    <div class="adopt-row-meta">
-                      <span class="adopt-row-path mono" title=${it.cwd || ''}>${it.cwd || '—'}</span>
-                      <span class="adopt-row-dot">·</span>
-                      <span>${relTime(it.mtime)}</span>
-                      <span class="adopt-row-dot">·</span>
-                      <span class="adopt-row-id mono">${it.cliSessionId.slice(0, 8)}</span>
+                    <div class="adopt-row-actions">
+                      ${it.adopted ? html`
+                        <span class="adopt-row-badge">Imported</span>
+                      ` : html`
+                        <button type="button" class="action primary small adopt-row-btn"
+                                disabled=${adopting === it.cliSessionId || !effectiveCliId}
+                                onClick=${() => adopt(it)}>
+                          ${adopting === it.cliSessionId ? 'Importing…' : 'Import'}
+                        </button>`}
                     </div>
-                  </div>
-                  <div class="adopt-row-actions">
-                    ${it.adopted ? html`
-                      <span class="adopt-row-badge">Imported</span>
-                    ` : html`
-                      <button type="button" class="action primary adopt-row-btn"
-                              disabled=${adopting === it.cliSessionId || !effectiveCliId}
-                              onClick=${() => adopt(it)}>
-                        ${adopting === it.cliSessionId ? 'Importing…' : 'Import'}
-                      </button>
-                    `}
-                  </div>
-                </li>`)}
-            </ul>
-            ${state.hasMore && !query ? html`
-              <div class="adopt-loadmore">
-                <button type="button" class="action subtle"
-                        disabled=${state.loadingMore}
-                        onClick=${loadMore}>
-                  ${state.loadingMore ? 'Loading…'
-                    : `Load ${Math.min(PAGE_SIZE, state.totalNonActive - state.offset)} more · ${state.items.length} / ${totalKnown}`}
-                </button>
-              </div>` : !query && state.items.length > 0 ? html`
-              <div class="adopt-loadmore adopt-loadmore-done">
-                All ${totalKnown} sessions loaded
-              </div>` : null}
-            ${query && state.hasMore ? html`
-              <div class="adopt-loadmore adopt-loadmore-hint">
-                Searching ${state.items.length} loaded · clear search and Load more to see older sessions
-              </div>` : null}
-          `}
+                  </li>`;
+              })}
+            </ul>`}
         </div>
       </div>
     </${Modal}>`;
@@ -331,13 +251,11 @@ export function AdoptModal({ onClose, onAdopted }) {
 
 function relTime(ms) {
   if (!ms) return '';
-  const d = Date.now() - ms;
-  const s = Math.round(d / 1000);
+  const s = Math.round((Date.now() - ms) / 1000);
   if (s < 60) return `${s}s ago`;
   const m = Math.round(s / 60);
   if (m < 60) return `${m}m ago`;
   const h = Math.round(m / 60);
   if (h < 48) return `${h}h ago`;
-  const days = Math.round(h / 24);
-  return `${days}d ago`;
+  return `${Math.round(h / 24)}d ago`;
 }

package/public/js/components/EntityFormModal.js

@@ -65,9 +65,21 @@ export function EntityFormModal({
     }
   };
 
+  const footer = html`
+    ${onTest ? html`
+      <button type="button" class="action small subtle entity-test-button"
+              disabled=${testing} onClick=${runTest}>
+        ${testing ? 'Testing…' : testLabel}
+      </button>` : null}
+    <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
+    <button type="submit" form="entity-form-modal" class=${`action small ${danger ? 'danger' : 'primary'}`}
+            disabled=${saving}>
+      ${saving ? 'Saving…' : submitLabel}
+    </button>`;
+
   return html`
-    <${Modal} title=${title} onClose=${onClose} width=${440}>
-      <form class="entity-form" onSubmit=${submit}>
+    <${Modal} title=${title} onClose=${onClose} width=${440} footer=${footer}>
+      <form id="entity-form-modal" class="entity-form" onSubmit=${submit}>
         ${fields.map((f) => html`
           <label class="entity-field" key=${f.key}>
             <span class="entity-field-label">${f.label}</span>
@@ -130,18 +142,6 @@ export function EntityFormModal({
             ${testResult.stdout ? html`<pre class="entity-test-out">${testResult.stdout}</pre>` : null}
             ${testResult.stderr ? html`<pre class="entity-test-out is-stderr">${testResult.stderr}</pre>` : null}
           </div>` : null}
-        <div class="entity-form-actions">
-          ${onTest ? html`
-            <button type="button" class="action small subtle entity-test-button"
-                    disabled=${testing} onClick=${runTest}>
-              ${testing ? 'Testing…' : testLabel}
-            </button>` : null}
-          <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
-          <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
-                  disabled=${saving}>
-            ${saving ? 'Saving…' : submitLabel}
-          </button>
-        </div>
       </form>
     </${Modal}>`;
 }

package/public/js/components/Modal.js

@@ -1,15 +1,20 @@
 // Centered modal dialog with backdrop. Closes via Esc, the corner X,
 // or a click on the backdrop.
 //
-//   <${Modal} onClose=${close} title="Choose CLI" width=${440}>
-//     ...body...
+//   <${Modal} onClose=${close} title="Choose CLI" width=${440}
+//             footer=${html`<button ...>Cancel</button> ...`}>
+//     ...body (scrolls)...
 //   </${Modal}>
+//
+// When `footer` is given it renders in a fixed .modal-foot below the
+// scrollable body — the body grows/scrolls between a pinned head and a
+// pinned footer (the .modal is a flex column capped at 90vh).
 
 import { html } from '../html.js';
 import { useEffect, useRef } from 'preact/hooks';
 import { createPortal } from 'preact/compat';
 
-export function Modal({ title, width = 440, onClose, children }) {
+export function Modal({ title, width = 440, onClose, children, footer }) {
   const panelRef = useRef(null);
 
   useEffect(() => {
@@ -44,6 +49,7 @@ export function Modal({ title, width = 440, onClose, children }) {
             </button>
           </div>` : null}
         <div class="modal-body">${children}</div>
+        ${footer ? html`<div class="modal-foot">${footer}</div>` : null}
       </div>
     </div>`,
     document.body