@bakapiano/ccsm 0.6.0 → 0.8.4

package/public/js/api.js

@@ -0,0 +1,103 @@
+// Fetch wrapper + every loader. Loaders push into signals from ./state.js.
+// Cross-origin (hosted frontend → local backend) flows through httpBase().
+
+import * as S from './state.js';
+import { httpBase } from './backend.js';
+
+export async function api(method, url, body) {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } };
+  if (body !== undefined) opts.body = JSON.stringify(body);
+  const r = await fetch(httpBase() + url, opts);
+  const text = await r.text();
+  let json;
+  try { json = text ? JSON.parse(text) : {}; } catch { json = { raw: text }; }
+  if (!r.ok) throw new Error(json.error || `HTTP ${r.status}`);
+  return json;
+}
+
+export async function loadConfig() {
+  const [cfg, terms, caps] = await Promise.all([
+    api('GET', '/api/config'),
+    api('GET', '/api/terminals'),
+    api('GET', '/api/capabilities').catch(() => ({ webTerminal: false })),
+  ]);
+  S.config.value = cfg;
+  S.terminals.value = terms.terminals;
+  S.capabilities.value = caps;
+}
+
+export async function loadWebTerminals() {
+  try {
+    const r = await api('GET', '/api/sessions/web');
+    S.webTerminals.value = r.terminals || [];
+  } catch { /* node-pty might be unavailable */ }
+}
+
+export async function killWebTerminal(id) {
+  await api('DELETE', `/api/sessions/web/${id}`);
+  await loadWebTerminals();
+}
+
+export async function loadSessions() {
+  const r = await api('GET', '/api/sessions');
+  S.sessions.value = r.sessions;
+}
+
+export async function loadRecent() {
+  const r = await api('GET', `/api/sessions/recent?limit=${S.recentLimit.value}&offset=${S.recentOffset.value}`);
+  S.recent.value = r.recent;
+  S.recentTotal.value = r.total || 0;
+  S.recentLimit.value = r.limit || S.recentLimit.value;
+  S.recentOffset.value = r.offset || 0;
+}
+
+export async function loadFavorites() {
+  try {
+    const r = await api('GET', '/api/favorites');
+    const map = {};
+    for (const f of r.favorites || []) map[f.sessionId] = f;
+    S.favorites.value = map;
+  } catch (e) { /* ignore — endpoint may not exist on older servers */ }
+}
+
+export async function loadLabels() {
+  try {
+    const r = await api('GET', '/api/labels');
+    S.labels.value = r.labels || {};
+  } catch (e) { /* ignore */ }
+}
+
+export async function loadSnapshot() {
+  const r = await api('GET', '/api/snapshot');
+  S.snapshot.value = r.snapshot;
+  const h = await api('GET', '/api/snapshot/history');
+  S.history.value = h.history;
+}
+
+export async function loadWorkspaces() {
+  const r = await api('GET', '/api/workspaces');
+  S.workspaces.value = r.workspaces;
+}
+
+export async function refreshAll() {
+  await Promise.all([
+    loadSessions(), loadRecent(), loadSnapshot(),
+    loadWorkspaces(), loadFavorites(), loadLabels(), loadWebTerminals(),
+  ]);
+  S.lastRefreshAt.value = Date.now();
+}
+
+export async function pollHealth() {
+  const ctrl = new AbortController();
+  const t = setTimeout(() => ctrl.abort(), 3000);
+  try {
+    const r = await fetch(httpBase() + '/api/health', { signal: ctrl.signal });
+    if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    const j = await r.json();
+    S.serverHealth.value = { state: 'online', version: j.version, pid: j.pid };
+  } catch (e) {
+    S.serverHealth.value = { state: 'offline', error: String(e.message || e) };
+  } finally {
+    clearTimeout(t);
+  }
+}

package/public/js/backend.js

@@ -0,0 +1,28 @@
+// One source of truth for "where is the ccsm backend reachable".
+//
+//   localhost / 127.0.0.1   →  same-origin (page IS the backend)
+//   everything else         →  http://localhost:7777 (hosted frontend
+//                              talks to the user's local backend via CORS)
+//
+// httpBase is used by fetch(); wsBase is used by WebSocket constructions.
+// Keep both as functions rather than constants so the values reflect
+// `location.*` at call time (matters for tests / route changes).
+
+function isLocal() {
+  return location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+}
+
+export function httpBase() {
+  return isLocal() ? '' : 'http://localhost:7777';
+}
+
+export function wsBase() {
+  if (isLocal()) {
+    return `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}`;
+  }
+  return 'ws://localhost:7777';
+}
+
+export function isHostedFrontend() {
+  return !isLocal();
+}

package/public/js/components/App.js

@@ -0,0 +1,45 @@
+import { html } from '../html.js';
+import { activeTab } from '../state.js';
+import { Sidebar } from './Sidebar.js';
+import { PageHead } from './PageHead.js';
+import { Footer } from './Footer.js';
+import { Toast } from './Toast.js';
+import { Fab } from './Fab.js';
+import { NewSessionModal } from './NewSessionModal.js';
+import { DialogHost } from './DialogHost.js';
+import { OfflineBanner } from './OfflineBanner.js';
+import { SessionsPage } from '../pages/SessionsPage.js';
+import { LaunchPage } from '../pages/LaunchPage.js';
+import { TerminalsPage } from '../pages/TerminalsPage.js';
+import { ConfigurePage } from '../pages/ConfigurePage.js';
+import { AboutPage } from '../pages/AboutPage.js';
+
+function Panel({ name, children }) {
+  const active = activeTab.value === name;
+  return html`<section class="tab-panel" data-panel=${name} data-active=${active || null}>${children}</section>`;
+}
+
+export function App() {
+  const tab = activeTab.value;
+
+  return html`
+    <div class="app">
+      <${Sidebar} />
+      <main class="main">
+        <${PageHead} />
+        <${OfflineBanner} />
+        <div class="content">
+          ${tab === 'sessions'  ? html`<${Panel} name="sessions"><${SessionsPage}   /></${Panel}>` : null}
+          ${tab === 'launch'    ? html`<${Panel} name="launch"><${LaunchPage}     /></${Panel}>` : null}
+          ${tab === 'terminals' ? html`<${Panel} name="terminals"><${TerminalsPage} /></${Panel}>` : null}
+          ${tab === 'configure' ? html`<${Panel} name="configure"><${ConfigurePage} /></${Panel}>` : null}
+          ${tab === 'about'     ? html`<${Panel} name="about"><${AboutPage}     /></${Panel}>` : null}
+        </div>
+        <${Footer} />
+      </main>
+      <${Fab} />
+      <${NewSessionModal} />
+      <${Toast} />
+      <${DialogHost} />
+    </div>`;
+}

package/public/js/components/Card.js

@@ -0,0 +1,24 @@
+// Foldable card. Pass foldKey for fold-state persistence across reloads;
+// omit it for non-foldable cards (Launch tab, etc).
+
+import { html } from '../html.js';
+import { cardFolded, toggleCardFold } from '../state.js';
+import { IconChevronDown } from '../icons.js';
+
+export function Card({ foldKey, title, titleAfter, meta, children, flush }) {
+  const collapsed = foldKey ? !!cardFolded.value[foldKey] : false;
+  const bodyClass = flush ? 'card-body card-body-flush' : 'card-body';
+  const onHeadClick = foldKey ? () => toggleCardFold(foldKey) : undefined;
+
+  return html`
+    <article class="card" data-fold-key=${foldKey || null} data-collapsed=${collapsed || null}>
+      <header class="card-head" onClick=${onHeadClick}>
+        <div class="card-titles">
+          <h2 class="card-title">${title}${titleAfter || null}</h2>
+          ${meta ? html`<p class="card-meta">${meta}</p>` : null}
+        </div>
+        ${foldKey ? html`<button class="card-fold" aria-label="collapse"><${IconChevronDown} /></button>` : null}
+      </header>
+      <div class=${bodyClass}>${children}</div>
+    </article>`;
+}

package/public/js/components/DialogHost.js

@@ -0,0 +1,45 @@
+// Renders the dialog stack at the end of the App tree. Each entry handles
+// its own keyboard + click dismissal lifecycle.
+
+import { html } from '../html.js';
+import { useEffect, useRef } from 'preact/hooks';
+import { dialogs } from '../dialog.js';
+
+export function DialogHost() {
+  const list = dialogs.value;
+  if (list.length === 0) return null;
+  return html`${list.map((d) => html`<${DialogShell} key=${d.id} dialog=${d} />`)}`;
+}
+
+function DialogShell({ dialog }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const onKey = (ev) => {
+      if (ev.key === 'Escape') { ev.preventDefault(); dialog.close('escape', ref.current); }
+      else if (ev.key === 'Enter') { ev.preventDefault(); dialog.close('enter', ref.current); }
+    };
+    document.addEventListener('keydown', onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    // initial focus next tick — element must already be in DOM
+    setTimeout(() => {
+      if (dialog.initialFocus) dialog.initialFocus(ref.current);
+      else ref.current?.querySelector('[data-action="ok"]')?.focus();
+    }, 50);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [dialog.id]);
+
+  const onClick = (ev) => {
+    if (ev.target === ref.current) return dialog.close('cancel', ref.current);
+    const btn = ev.target.closest('button[data-action]');
+    if (btn) dialog.close(btn.dataset.action, ref.current);
+  };
+
+  return html`
+    <div ref=${ref} class="modal-backdrop" role="dialog" aria-modal="true" onClick=${onClick}>
+      ${dialog.render()}
+    </div>`;
+}

package/public/js/components/Fab.js

@@ -0,0 +1,11 @@
+import { html } from '../html.js';
+import { modalOpen } from '../state.js';
+import { IconPlus } from '../icons.js';
+
+export function Fab() {
+  return html`
+    <button class="fab" title="Launch new session" aria-label="Launch new session"
+            onClick=${() => (modalOpen.value = true)}>
+      <${IconPlus} />
+    </button>`;
+}

package/public/js/components/FavoritesTable.js

@@ -0,0 +1,81 @@
+import { html } from '../html.js';
+import {
+  favoritesList, favoritesOffset, favoritesLimit,
+  sessions, clockTick,
+} from '../state.js';
+import { fmtAgo, fmtTime } from '../util.js';
+import { focusSession, resumeSession } from '../actions.js';
+import { TitleCell } from './TitleCell.js';
+import { Pagination } from './Pagination.js';
+import { IconMonitor, IconExternal } from '../icons.js';
+
+export function FavoritesTable() {
+  void clockTick.value;
+  const full = favoritesList.value;
+  if (favoritesOffset.value >= full.length) {
+    favoritesOffset.value = Math.max(0, Math.floor((full.length - 1) / favoritesLimit.value) * favoritesLimit.value);
+  }
+  const slice = full.slice(favoritesOffset.value, favoritesOffset.value + favoritesLimit.value);
+
+  if (full.length === 0) {
+    return html`<div class="empty" id="favoritesEmpty">No favorites yet. Star a session row to pin it here.</div>`;
+  }
+
+  return html`
+    <div class="table-scroll">
+      <table class="data">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Working directory</th>
+            <th>Branch</th>
+            <th class="num">Pinned</th>
+            <th class="col-actions"></th>
+          </tr>
+        </thead>
+        <tbody>${slice.map((f) => html`<${Row} key=${f.sessionId} fav=${f} />`)}</tbody>
+      </table>
+    </div>
+    <${Pagination}
+      total=${full.length}
+      offset=${favoritesOffset.value}
+      limit=${favoritesLimit.value}
+      onChange=${(off, lim) => { favoritesOffset.value = off; favoritesLimit.value = lim; }} />`;
+}
+
+function Row({ fav: f }) {
+  const live = sessions.value.find((s) => s.sessionId === f.sessionId);
+  const title = live?.title || f.title;
+  const cwd   = live?.cwd   || f.cwd;
+  const branch = f.gitBranch;
+  const liveExtra = live ? html` · <span style="color:var(--green);">live</span>` : null;
+  const actions = live
+    ? html`
+        <button class="action small" title="raise the wt window"
+                onClick=${() => focusSession(f.sessionId)}>
+          <${IconMonitor} /> Focus
+        </button>`
+    : html`
+        <button class="action small" title="claude --resume in a fresh wt window"
+                disabled=${!cwd}
+                onClick=${() => resumeSession(f.sessionId, cwd, { kind: 'continue' })}>
+          <${IconExternal} /> Continue
+        </button>`;
+
+  return html`
+    <tr>
+      <td>
+        <${TitleCell}
+          sessionId=${f.sessionId}
+          title=${title}
+          secondaryExtra=${liveExtra}
+          snapshotData=${{ cwd: cwd || '', title, gitBranch: branch || '' }} />
+      </td>
+      <td><div class="path-cell" title=${cwd || ''}>${cwd || ''}</div></td>
+      <td>
+        ${branch ? html`<span class="branch-tag">${branch}</span>` : html`<span class="muted-text">—</span>`}
+      </td>
+      <td class="num" title=${fmtTime(f.addedAt)}>${fmtAgo(f.addedAt)}</td>
+      <td><div class="row-actions">${actions}</div></td>
+    </tr>`;
+}

package/public/js/components/Footer.js

@@ -0,0 +1,12 @@
+import { html } from '../html.js';
+import { config } from '../state.js';
+
+export function Footer() {
+  const cfg = config.value;
+  return html`
+    <footer class="footer-status">
+      <span class="fs-key">Data</span> <span class="fs-val">~/.ccsm</span>
+      <span class="fs-divider">·</span>
+      <span class="fs-key">Workspaces</span> <span class="fs-val">${cfg?.workDir ?? '—'}</span>
+    </footer>`;
+}

package/public/js/components/NewSessionModal.js

@@ -0,0 +1,142 @@
+// 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 } from '../state.js';
+import { api, loadWorkspaces } 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];
+    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 },
+        {
+          progressRootId: ROOT_ID,
+          onMeta: (ev) => {
+            if (ev.type === 'workspace') {
+              setResult(`workspace: ${ev.workspace.path}${ev.created ? ' · newly created' : ''}`);
+            } else if (ev.type === 'launched') {
+              setResult(`terminal launching · pid ${ev.launched.pid} · ${ev.launched.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}`);
+        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/OfflineBanner.js

@@ -0,0 +1,52 @@
+// Shown when the backend probe fails. The hosted frontend (running at
+// https://bakapiano.github.io/cssm/v1/) can't spawn processes directly,
+// so we surface a ccsm://start link instead. Windows / OS will hand that
+// off to the registered protocol handler (ccsm.cmd), which spawns the
+// backend silently. Our health probe picks it up on the next tick and
+// the banner auto-hides.
+//
+// First click triggers a Windows confirmation dialog ("Open ccsm.cmd?").
+// User can check "Always allow" to suppress future prompts.
+
+import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
+import { serverHealth } from '../state.js';
+import { refreshAll } from '../api.js';
+
+export function OfflineBanner() {
+  const h = serverHealth.value;
+  // "connecting" is the initial transient state — don't flash the banner
+  // until we've actually seen offline.
+  const offline = h.state === 'offline';
+  const [clicked, setClicked] = useState(false);
+
+  // When backend comes back online after the user tried to launch it,
+  // kick refreshAll so the page state catches up faster than the next
+  // 5s tick.
+  useEffect(() => {
+    if (h.state === 'online' && clicked) {
+      refreshAll().catch(() => {});
+      setClicked(false);
+    }
+  }, [h.state, clicked]);
+
+  if (!offline) return null;
+
+  return html`
+    <div class="offline-banner">
+      <div class="offline-banner-inner">
+        <span class="offline-dot" aria-hidden="true"></span>
+        <div class="offline-banner-text">
+          <strong>Backend not running.</strong>
+          <span class="muted-text">
+            Click Start to launch · Windows will ask once
+            (check "Always allow" to silence future prompts).
+          </span>
+        </div>
+        <div class="offline-banner-actions">
+          <a class="action primary" href="ccsm://start"
+             onClick=${() => setClicked(true)}>Start ccsm</a>
+        </div>
+      </div>
+    </div>`;
+}

package/public/js/components/PageHead.js

@@ -0,0 +1,33 @@
+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

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

@@ -0,0 +1,32 @@
+// One repo per row — driven by the streaming.js progress signal.
+
+import { html } from '../html.js';
+import { progressByContext } from '../streaming.js';
+
+export function ProgressList({ rootId }) {
+  const map = progressByContext.value[rootId] || {};
+  const items = Object.values(map);
+  if (items.length === 0) return null;
+
+  return html`
+    <div class="progress-list">
+      ${items.map((it) => html`<${Item} key=${it.name} item=${it} />`)}
+    </div>`;
+}
+
+function Item({ item }) {
+  const cls = `progress-item${item.state ? ' ' + item.state : ''}`;
+  const fillCls = `fill${item.indeterminate ? ' indeterminate' : ''}`;
+  const fillStyle = item.percent != null ? `width: ${item.percent}%` : '';
+  const pct = item.percent != null ? `${item.percent}%` : '';
+  return html`
+    <div class=${cls}>
+      <div class="head">
+        <span class="name">${item.name}</span>
+        <span class="phase">${item.phase}</span>
+        <span class="pct">${pct}</span>
+      </div>
+      <div class="progress-bar"><div class=${fillCls} style=${fillStyle}></div></div>
+      <div class="detail">${item.detail || ''}</div>
+    </div>`;
+}