@homescriptone/opencode-viewer-extender 1.2.0 → 1.3.0

package/README.md

@@ -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**, 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`):
+
+  ```
+  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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homescriptone/opencode-viewer-extender",
-  "version": "1.2.0",
+  "version": "1.3.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/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,34 +26,47 @@ 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);
+
           const detail = await host.api.getSessionDetail(sessionId);
-          entries.push({ name: `${folder}/${sessionId}.json`, data: JSON.stringify(detail, null, 2) });
+          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) });
         };
 
         for (const projectId of projectIds) {
-          const project = projectsById.get(projectId);
-          const folderName = sanitize(`${project?.name || projectId}-${projectId}`);
-          entries.push({
-            name: `projects/${folderName}/project.json`,
-            data: JSON.stringify(project ?? { id: projectId }, null, 2)
-          });
+          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) {
-            await addSession(session.id, `projects/${folderName}/sessions`);
+            await addSession(session.id, `${base}/sessions/${sanitize(session.id)}`);
           }
         }
 
         for (const sessionId of sessionIds) {
-          await addSession(sessionId, "sessions");
+          await addSession(sessionId, `sessions/${sanitize(sessionId)}`);
         }
 
         entries.push({
           name: "manifest.json",
           data: JSON.stringify(
-            { exportedAt: new Date().toISOString(), projectIds, sessionIds, files: entries.length + 1 },
+            {
+              exportedAt: new Date().toISOString(),
+              formats: ["json", "xml", "html"],
+              projectIds,
+              sessionIds,
+              files: entries.length + 1
+            },
             null,
             2
           )
@@ -50,7 +74,7 @@ OCV.define({
 
         const blob = host.createZip(entries);
         host.download(`ocv-export-${Date.now()}.zip`, blob, "application/zip");
-        host.notify(`Exported ${entries.length} files.`);
+        host.notify(`Exported ${entries.length} files (json/xml/html).`);
       }
     });
 
@@ -87,9 +111,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>
+`;
 }