@homescriptone/opencode-viewer-extender 1.3.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,7 @@ 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 is grouped into folders, and every item is written in three formats (`.json`, `.xml`, `.html`):
+- **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
@@ -157,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:
 
-## Desktop app
+```bash
+git tag v1.3.0 && git push origin v1.3.0
+```
+
+[`.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.3.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

@@ -26,55 +26,73 @@ OCV.define({
         const seenSessions = new Set();
         const projectsById = new Map(host.getProjects().map((project) => [project.id, project]));
 
-        // Write one folder of json/xml/html for a { session, messages } payload.
-        const addSession = async (sessionId, folder) => {
-          if (seenSessions.has(sessionId)) return;
-          seenSessions.add(sessionId);
+        try {
+          host.setStatus("Preparing export…");
 
-          const detail = await host.api.getSessionDetail(sessionId);
-          const title = detail?.session?.title || sessionId;
-          entries.push({ name: `${folder}/session.json`, data: JSON.stringify(detail, null, 2) });
-          entries.push({ name: `${folder}/session.xml`, data: toXmlDocument("export", detail) });
-          entries.push({ name: `${folder}/session.html`, data: toHtmlDocument(title, detail) });
-        };
+          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}`;
 
-        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) });
 
-          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)}` });
+            }
+          }
 
-          const sessions = await host.api.getProjectSessions(projectId);
-          for (const session of sessions) {
-            await addSession(session.id, `${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)}` });
           }
-        }
 
-        for (const sessionId of sessionIds) {
-          await addSession(sessionId, `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…");
+          }
 
-        entries.push({
-          name: "manifest.json",
-          data: JSON.stringify(
-            {
-              exportedAt: new Date().toISOString(),
-              formats: ["json", "xml", "html"],
-              projectIds,
-              sessionIds,
-              files: entries.length + 1
-            },
-            null,
-            2
-          )
-        });
+          host.setStatus("Building archive…");
+          entries.push({
+            name: "manifest.json",
+            data: JSON.stringify(
+              {
+                exportedAt: new Date().toISOString(),
+                formats: ["json", "xml", "html"],
+                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 (json/xml/html).`);
+          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();
+        }
       }
     });
 
@@ -92,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();

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;