@homescriptone/opencode-viewer-extender 1.2.0 → 1.5.0

package/README.md

@@ -11,7 +11,7 @@ Reads and writes `~/.local/share/opencode/opencode.db`. Everything stays on your
 bunx @homescriptone/opencode-viewer-extender
 ```
 
-> On npm: [`@homescriptone/opencode-viewer-extender`](https://www.npmjs.com/package/@homescriptone/opencode-viewer-extender) · Desktop builds (`.dmg`, Linux, Windows) are published on the [releases page](https://github.com/homescriptone/opencode-viewer-extended/releases).
+> On npm: [`@homescriptone/opencode-viewer-extender`](https://www.npmjs.com/package/@homescriptone/opencode-viewer-extender).
 
 ## Features
 
@@ -25,7 +25,7 @@ bunx @homescriptone/opencode-viewer-extender
 
 ## Requirements
 
-- [Bun](https://bun.sh) runtime (`curl -fsSL https://bun.sh/install | bash`), or a desktop build
+- [Bun](https://bun.sh) runtime (`curl -fsSL https://bun.sh/install | bash`)
 - [OpenCode](https://opencode.ai) installed and used at least once
 
 ## Usage
@@ -58,7 +58,14 @@ The database is opened **read-only** by default. Writes only become available wh
 ## Export
 
 - **Single session** — the **Export ▾** menu in the message header offers Markdown (`.md`) and JSON (`.json`), served by `GET /api/sessions/:id/export?format=md|json`.
-- **Bulk** — turn on **Select**, pick multiple projects/sessions, and choose **Export selected (.zip)**. The archive contains a `project.json` per project, each session as `sessions/<id>.json`, and a `manifest.json`.
+- **Bulk** — turn on **Select**, use **All projects** / **All sessions** (or pick individual items), and choose **Export selected (.zip)**. A progress indicator appears for larger exports. The archive is grouped into folders, and every item is written in three formats (`.json`, `.xml`, `.html`):
+
+  ```
+  manifest.json
+  projects/<project>/project.{json,xml,html}
+  projects/<project>/sessions/<session>/session.{json,xml,html}
+  sessions/<session>/session.{json,xml,html}    # directly-selected sessions
+  ```
 
 ## Plugins
 
@@ -150,11 +157,15 @@ bun run typecheck
 
 ## Releasing
 
-Publishing to npm is automated: pushing to `main`/`master` runs [`.github/workflows/publish.yml`](.github/workflows/publish.yml), which type-checks and publishes the current `package.json` version (skipping if that version already exists). Add an `NPM_TOKEN` repository secret (an npm automation token) for it to publish. Bumping the version is all you need to ship a release.
+Publishing uses npm **trusted publishing (OIDC)** — no tokens or secrets. Push a version tag:
+
+```bash
+git tag v1.3.0 && git push origin v1.3.0
+```
 
-## Desktop app
+[`.github/workflows/publish.yml`](.github/workflows/publish.yml) then type-checks and runs `npm publish` with provenance.
 
-A Tauri wrapper lives in [`src-tauri/`](src-tauri/) and bundles the Bun server as a sidecar; installers are produced by CI and attached to releases.
+One-time setup on [npmjs.com](https://www.npmjs.com): open the package → **Settings** → **Trusted Publisher** → **GitHub Actions**, and set the repository (`homescriptone/opencode-viewer-extended`) and workflow filename (`publish.yml`). No `NPM_TOKEN` secret is required.
 
 ## Credits
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homescriptone/opencode-viewer-extender",
-  "version": "1.2.0",
+  "version": "1.5.0",
   "description": "Local GUI to browse, edit, and export your OpenCode sessions, messages, and tool calls from the SQLite database, with a plugin API",
   "bin": {
     "opencode-viewer": "bin/cli.js"

package/public/index.html

@@ -16,6 +16,7 @@
     <main id="messages-panel" class="panel"></main>
   </div>
   <div id="bulk-bar" class="bulk-bar" hidden></div>
+  <div id="status-toast" class="status-toast" hidden></div>
   <div id="modal-root"></div>
   <script src="plugin-api.js"></script>
   <script src="script.js"></script>

package/public/plugins/bulk-select.js

@@ -1,10 +1,21 @@
 // Bulk select plugin: select multiple projects and sessions, then export them
-// as a single .zip of JSON files or delete them (project deletes cascade).
+// as a single .zip or delete them (project deletes cascade).
+//
+// The archive is grouped into folders and each item is written in three
+// formats: JSON (.json), XML (.xml) and a standalone HTML page (.html).
+//
+//   manifest.json
+//   projects/<project>/
+//     project.json  project.xml  project.html
+//     sessions/<session>/
+//       session.json  session.xml  session.html
+//   sessions/<session>/            (directly-selected sessions)
+//     session.json  session.xml  session.html
 
 OCV.define({
   id: "bulk-select",
   name: "Bulk select · export & delete",
-  description: "Select multiple projects and sessions to export as a .zip or delete.",
+  description: "Select multiple projects and sessions to export as a .zip (json/xml/html) or delete.",
 
   setup(api) {
     api.registerBulkAction({
@@ -15,42 +26,73 @@ OCV.define({
         const seenSessions = new Set();
         const projectsById = new Map(host.getProjects().map((project) => [project.id, project]));
 
-        const addSession = async (sessionId, folder) => {
-          if (seenSessions.has(sessionId)) return;
-          seenSessions.add(sessionId);
-          const detail = await host.api.getSessionDetail(sessionId);
-          entries.push({ name: `${folder}/${sessionId}.json`, data: JSON.stringify(detail, null, 2) });
-        };
+        try {
+          host.setStatus("Preparing export…");
 
-        for (const projectId of projectIds) {
-          const project = projectsById.get(projectId);
-          const folderName = sanitize(`${project?.name || projectId}-${projectId}`);
+          const tasks = [];
+          for (const projectId of projectIds) {
+            const project = projectsById.get(projectId) || { id: projectId };
+            const folderName = sanitize(`${project.name || projectId}-${projectId}`);
+            const base = `projects/${folderName}`;
+
+            entries.push({ name: `${base}/project.json`, data: JSON.stringify(project, null, 2) });
+            entries.push({ name: `${base}/project.xml`, data: toXmlDocument("project", project) });
+            entries.push({ name: `${base}/project.html`, data: toProjectHtml(project) });
+
+            const sessions = await host.api.getProjectSessions(projectId);
+            for (const session of sessions) {
+              if (seenSessions.has(session.id)) continue;
+              seenSessions.add(session.id);
+              tasks.push({ sessionId: session.id, folder: `${base}/sessions/${sanitize(session.id)}` });
+            }
+          }
+
+          for (const sessionId of sessionIds) {
+            if (seenSessions.has(sessionId)) continue;
+            seenSessions.add(sessionId);
+            tasks.push({ sessionId, folder: `sessions/${sanitize(sessionId)}` });
+          }
+
+          const total = tasks.length;
+          let done = 0;
+          if (total === 0) {
+            host.setStatus("Building archive…");
+          } else {
+            host.setProgress(0, total, "Collecting sessions…");
+          }
+
+          for (const task of tasks) {
+            const detail = await host.api.getSessionDetail(task.sessionId);
+            const title = detail?.session?.title || task.sessionId;
+            entries.push({ name: `${task.folder}/session.json`, data: JSON.stringify(detail, null, 2) });
+            entries.push({ name: `${task.folder}/session.xml`, data: toXmlDocument("export", detail) });
+            entries.push({ name: `${task.folder}/session.html`, data: toHtmlDocument(title, detail) });
+            done += 1;
+            host.setProgress(done, total, "Collecting sessions…");
+          }
+
+          host.setStatus("Building archive…");
           entries.push({
-            name: `projects/${folderName}/project.json`,
-            data: JSON.stringify(project ?? { id: projectId }, null, 2)
+            name: "manifest.json",
+            data: JSON.stringify(
+              {
+                exportedAt: new Date().toISOString(),
+                formats: ["json", "xml", "html"],
+                projectIds,
+                sessionIds,
+                files: entries.length + 1
+              },
+              null,
+              2
+            )
           });
-          const sessions = await host.api.getProjectSessions(projectId);
-          for (const session of sessions) {
-            await addSession(session.id, `projects/${folderName}/sessions`);
-          }
-        }
 
-        for (const sessionId of sessionIds) {
-          await addSession(sessionId, "sessions");
+          const blob = host.createZip(entries);
+          host.download(`ocv-export-${Date.now()}.zip`, blob, "application/zip");
+          host.notify(`Exported ${entries.length} files (json/xml/html).`);
+        } finally {
+          host.clearStatus();
         }
-
-        entries.push({
-          name: "manifest.json",
-          data: JSON.stringify(
-            { exportedAt: new Date().toISOString(), projectIds, sessionIds, files: entries.length + 1 },
-            null,
-            2
-          )
-        });
-
-        const blob = host.createZip(entries);
-        host.download(`ocv-export-${Date.now()}.zip`, blob, "application/zip");
-        host.notify(`Exported ${entries.length} files.`);
       }
     });
 
@@ -68,14 +110,22 @@ OCV.define({
         const ok = window.confirm(`Delete ${parts.join(" and ")}? This cannot be undone.`);
         if (!ok) return;
 
+        const total = projectIds.length + sessionIds.length;
         let deleted = 0;
-        for (const projectId of projectIds) {
-          await host.api.deleteProject(projectId);
-          deleted += 1;
-        }
-        for (const sessionId of sessionIds) {
-          await host.api.deleteSession(sessionId);
-          deleted += 1;
+        try {
+          host.setProgress(0, total, "Deleting…");
+          for (const projectId of projectIds) {
+            await host.api.deleteProject(projectId);
+            deleted += 1;
+            host.setProgress(deleted, total, "Deleting…");
+          }
+          for (const sessionId of sessionIds) {
+            await host.api.deleteSession(sessionId);
+            deleted += 1;
+            host.setProgress(deleted, total, "Deleting…");
+          }
+        } finally {
+          host.clearStatus();
         }
 
         host.clearSelection();
@@ -87,9 +137,152 @@ OCV.define({
 });
 
 function sanitize(value) {
-  return String(value ?? "item")
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 60) || "item";
+  return (
+    String(value ?? "item")
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 60) || "item"
+  );
+}
+
+function xmlEscape(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function xmlTag(name) {
+  const clean = String(name).replace(/[^a-zA-Z0-9_.-]/g, "_");
+  return /^[a-zA-Z_]/.test(clean) ? clean : `_${clean}`;
+}
+
+function jsonToXml(name, value, indent) {
+  const pad = `${indent}  `;
+  if (value === null || value === undefined) return `${indent}<${name}/>`;
+  if (Array.isArray(value)) {
+    if (!value.length) return `${indent}<${name}/>`;
+    const inner = value.map((item) => jsonToXml("item", item, pad)).join("\n");
+    return `${indent}<${name}>\n${inner}\n${indent}</${name}>`;
+  }
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    if (!keys.length) return `${indent}<${name}/>`;
+    const inner = keys.map((key) => jsonToXml(xmlTag(key), value[key], pad)).join("\n");
+    return `${indent}<${name}>\n${inner}\n${indent}</${name}>`;
+  }
+  return `${indent}<${name}>${xmlEscape(value)}</${name}>`;
+}
+
+function toXmlDocument(rootName, value) {
+  return `<?xml version="1.0" encoding="UTF-8"?>\n${jsonToXml(rootName, value, "")}\n`;
+}
+
+function htmlEscape(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function stringify(value) {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+const PAGE_CSS = `
+  :root { color-scheme: light; }
+  body { font-family: system-ui, -apple-system, sans-serif; margin: 0 auto; max-width: 900px; padding: 32px 20px; color: #1c1b18; background: #fbfaf7; line-height: 1.55; }
+  h1 { font-size: 1.6rem; margin: 0 0 4px; }
+  h2 { font-size: 1.1rem; margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid #e8e6df; }
+  h3 { font-size: 0.95rem; margin: 16px 0 4px; }
+  .meta { color: #6f6d66; font-size: 0.85rem; margin: 0 0 8px; }
+  .part { margin: 10px 0; }
+  pre { background: #f5f4f0; border: 1px solid #e8e6df; border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
+  details { border: 1px solid #e8e6df; border-radius: 8px; padding: 8px 12px; }
+  summary { cursor: pointer; font-weight: 600; }
+  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .role-user h2 { color: oklch(0.38 0.08 185); }
+`;
+
+function toProjectHtml(project) {
+  const title = project?.name || project?.id || "Project";
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${htmlEscape(title)}</title><style>${PAGE_CSS}</style></head>
+<body>
+<h1>${htmlEscape(title)}</h1>
+<p class="meta">${htmlEscape(project?.worktree || "")}</p>
+<pre>${htmlEscape(JSON.stringify(project, null, 2))}</pre>
+</body></html>
+`;
+}
+
+function renderPartHtml(part) {
+  const type = String(part?.type ?? "text");
+  if (type === "text" || type === "reasoning") {
+    const label = type === "reasoning" ? `<h3>Reasoning</h3>` : "";
+    return `${label}<div class="part"><pre>${htmlEscape(stringify(part.text).trim())}</pre></div>`;
+  }
+  if (type === "tool") {
+    const output = part.state && part.state.output !== undefined ? stringify(part.state.output) : "";
+    return `<div class="part"><details><summary>Tool: ${htmlEscape(String(part.tool ?? "unknown"))}</summary>
+<pre>${htmlEscape(stringify(part.state && part.state.input) || "{}")}</pre>
+${output ? `<pre>${htmlEscape(output)}</pre>` : ""}
+</details></div>`;
+  }
+  if (type === "patch") {
+    return `<div class="part"><h3>Patch <code>${htmlEscape(String(part.hash ?? "").slice(0, 7))}</code></h3></div>`;
+  }
+  if (type === "file") {
+    return `<div class="part"><h3>File: ${htmlEscape(String(part.filename ?? "attachment"))}</h3></div>`;
+  }
+  return "";
+}
+
+function toHtmlDocument(title, detail) {
+  const session = detail?.session ?? {};
+  const messages = Array.isArray(detail?.messages) ? detail.messages : [];
+  const updated = Number(session.time_updated);
+  const meta = [
+    `ID: ${session.id ?? ""}`,
+    session.directory ? `Directory: ${session.directory}` : "",
+    Number.isFinite(updated) && updated > 0 ? `Updated: ${new Date(updated).toISOString()}` : ""
+  ]
+    .filter(Boolean)
+    .map(htmlEscape)
+    .join(" · ");
+
+  const body = messages
+    .map((message) => {
+      if (message._type === "subagent") {
+        return `<h2>Subagent: ${htmlEscape(message.title || message.id)}</h2>`;
+      }
+      const role = String(message.role ?? "unknown");
+      const parts = (message.parts ?? []).map(renderPartHtml).join("\n");
+      const model = message.modelID ? `<div class="meta">model: ${htmlEscape(message.modelID)}</div>` : "";
+      return `<div class="role-${htmlEscape(role)}"><h2>${htmlEscape(role)}</h2>${model}${parts}</div>`;
+    })
+    .join("\n");
+
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${htmlEscape(title)}</title><style>${PAGE_CSS}</style></head>
+<body>
+<h1>${htmlEscape(title)}</h1>
+<p class="meta">${meta}</p>
+${body}
+</body></html>
+`;
 }

package/public/script.js

@@ -28,7 +28,8 @@
       selectedSessionIds: new Set(),
       pluginsOpen: false,
       writeEnabled: false,
-      editMode: false
+      editMode: false,
+      status: null
     };
 
     const el = {
@@ -36,6 +37,7 @@
       sessions: document.getElementById("sessions-panel"),
       messages: document.getElementById("messages-panel"),
       bulkBar: document.getElementById("bulk-bar"),
+      statusToast: document.getElementById("status-toast"),
       modal: document.getElementById("modal-root")
     };
 
@@ -745,15 +747,49 @@
       renderBulkBar();
     }
 
+    function renderStatus() {
+      if (!el.statusToast) return;
+      const status = state.status;
+      if (!status || (!status.label && status.current === undefined)) {
+        el.statusToast.hidden = true;
+        el.statusToast.innerHTML = "";
+        return;
+      }
+
+      const { label = "", current, total } = status;
+      let progressHtml = "";
+      if (typeof current === "number" && typeof total === "number" && total > 0) {
+        const pct = Math.max(0, Math.min(100, Math.round((current / total) * 100)));
+        progressHtml = `
+          <div class="status-progress"><div class="status-progress-fill" style="width:${pct}%"></div></div>
+          <div class="status-count">${current} / ${total}</div>
+        `;
+      }
+
+      el.statusToast.hidden = false;
+      el.statusToast.innerHTML = `
+        <span class="status-spinner" aria-hidden="true"></span>
+        <div class="status-body">
+          <div class="status-label">${escapeHtml(label || "Working…")}</div>
+          ${progressHtml}
+        </div>
+      `;
+    }
+
     function renderBulkBar() {
       if (!el.bulkBar) return;
-      const count = state.selectedProjectIds.size + state.selectedSessionIds.size;
-      if (!state.selectMode || count === 0) {
+      if (!state.selectMode) {
         el.bulkBar.hidden = true;
         el.bulkBar.innerHTML = "";
         return;
       }
 
+      const count = state.selectedProjectIds.size + state.selectedSessionIds.size;
+      const allProjectsSelected =
+        state.projects.length > 0 && state.projects.every((project) => state.selectedProjectIds.has(project.id));
+      const allSessionsSelected =
+        state.sessions.length > 0 && state.sessions.every((session) => state.selectedSessionIds.has(session.id));
+
       const buttons = (window.OCV?.listBulkActions?.() ?? [])
         .filter((action) => !action.write || (state.writeEnabled && state.editMode))
         .map(
@@ -765,8 +801,10 @@
       el.bulkBar.hidden = false;
       el.bulkBar.innerHTML = `
         <span class="bulk-count">${count} selected</span>
-        ${buttons}
-        <button class="bulk-btn ghost" data-action="bulk-clear">Clear</button>
+        <button class="bulk-btn ${allProjectsSelected ? "active" : ""}" data-action="bulk-select-all-projects"${state.projects.length === 0 ? " disabled" : ""}>All projects</button>
+        <button class="bulk-btn ${allSessionsSelected ? "active" : ""}" data-action="bulk-select-all-sessions"${state.sessions.length === 0 ? " disabled" : ""}>All sessions</button>
+        <button class="bulk-btn ghost" data-action="bulk-clear"${count === 0 ? " disabled" : ""}>Clear</button>
+        ${count > 0 ? buttons : ""}
       `;
     }
 
@@ -1114,7 +1152,12 @@
         )
         .join("");
 
-      return `<div class="header-actions">${pluginActions}${exportMenu}</div>`;
+      const editActions =
+        state.writeEnabled && state.editMode
+          ? `<button class="header-btn danger" data-action="delete-session">Delete</button>`
+          : "";
+
+      return `<div class="header-actions">${editActions}${pluginActions}${exportMenu}</div>`;
     }
 
     function renderMessagesPanel() {
@@ -1545,10 +1588,31 @@
         return;
       }
 
+      if (action === "delete-session") {
+        const sessionId = state.selectedSessionId;
+        if (!sessionId) return;
+        const title = state.sessionData?.title || getSelectedSession()?.title || sessionId;
+        const ok = window.confirm(`Delete session "${title}"? This cannot be undone.`);
+        if (!ok) return;
+        try {
+          window.OCV?.host?.setStatus?.("Deleting session…");
+          await window.OCV.host.api.deleteSession(sessionId);
+          clearSelectedSession();
+          await loadSessions({ reset: true });
+        } catch (error) {
+          console.error("Delete session failed:", error);
+          alert(`Delete failed: ${error instanceof Error ? error.message : String(error)}`);
+        } finally {
+          window.OCV?.host?.clearStatus?.();
+        }
+        return;
+      }
+
       if (action === "toggle-edit-mode") {
         state.editMode = !state.editMode;
         renderProjectsPanel();
         renderSessionsPanel();
+        renderMessagesPanel();
         renderBulkBar();
         return;
       }
@@ -1585,6 +1649,32 @@
         return;
       }
 
+      if (action === "bulk-select-all-projects") {
+        const allSelected =
+          state.projects.length > 0 && state.projects.every((project) => state.selectedProjectIds.has(project.id));
+        if (allSelected) {
+          for (const project of state.projects) state.selectedProjectIds.delete(project.id);
+        } else {
+          for (const project of state.projects) state.selectedProjectIds.add(project.id);
+        }
+        renderProjectsPanel();
+        renderBulkBar();
+        return;
+      }
+
+      if (action === "bulk-select-all-sessions") {
+        const allSelected =
+          state.sessions.length > 0 && state.sessions.every((session) => state.selectedSessionIds.has(session.id));
+        if (allSelected) {
+          for (const session of state.sessions) state.selectedSessionIds.delete(session.id);
+        } else {
+          for (const session of state.sessions) state.selectedSessionIds.add(session.id);
+        }
+        renderSessionsPanel();
+        renderBulkBar();
+        return;
+      }
+
       if (action === "bulk-clear") {
         state.selectedProjectIds.clear();
         state.selectedSessionIds.clear();
@@ -1768,6 +1858,7 @@
       renderMessagesPanel();
       renderBulkBar();
       renderPluginsDialog();
+      renderStatus();
     }
 
     if (window.OCV?.host) {
@@ -1788,6 +1879,18 @@
         download: (filename, content, mime) => downloadBlob(content, filename, mime),
         createZip: (entries) => window.OCV.helpers.createZip(entries),
         notify: (message) => console.log("[OCV]", message),
+        setStatus: (label) => {
+          state.status = { label };
+          renderStatus();
+        },
+        setProgress: (current, total, label) => {
+          state.status = { label, current, total };
+          renderStatus();
+        },
+        clearStatus: () => {
+          state.status = null;
+          renderStatus();
+        },
         refresh: () => {
           loadProjects();
           if (state.selectedProjectId) loadSessions({ reset: true });

package/public/styles.css

@@ -995,6 +995,16 @@
       color: var(--accent-ink);
     }
 
+    .header-btn.danger {
+      color: #b23b3b;
+      border-color: #e4bcbc;
+    }
+
+    .header-btn.danger:hover {
+      background: #fbeaea;
+      border-color: #d99a9a;
+    }
+
     .project-row.selectable,
     .session-card.selectable {
       display: flex;
@@ -1083,6 +1093,22 @@
       background: var(--accent-wash);
     }
 
+    .bulk-btn.active {
+      border-color: var(--accent-hair);
+      background: var(--accent-wash);
+      color: var(--accent-ink);
+    }
+
+    .bulk-btn:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    .bulk-btn:disabled:hover {
+      background: none;
+      border-color: var(--hair);
+    }
+
     .bulk-btn.danger {
       color: #b23b3b;
       border-color: #e4bcbc;
@@ -1097,6 +1123,69 @@
       color: var(--muted);
     }
 
+    .status-toast {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      z-index: 450;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 220px;
+      max-width: 340px;
+      padding: 12px 14px;
+      background: var(--surface);
+      border: 1px solid var(--hair-2);
+      border-radius: 12px;
+      box-shadow: 0 10px 30px rgba(20, 20, 20, 0.16);
+    }
+
+    .status-spinner {
+      flex: 0 0 auto;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--hair-2);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: status-spin 0.7s linear infinite;
+    }
+
+    @keyframes status-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .status-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .status-label {
+      font-size: 12.5px;
+      color: var(--ink);
+    }
+
+    .status-progress {
+      margin-top: 8px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--hair);
+      overflow: hidden;
+    }
+
+    .status-progress-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 999px;
+      transition: width 0.2s ease;
+    }
+
+    .status-count {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--muted);
+      font-variant-numeric: tabular-nums;
+    }
+
     .modal-overlay {
       position: fixed;
       inset: 0;