npm - granola-toolkit - Versions diffs - 0.20.0 → 0.21.1 - Mend

granola-toolkit 0.20.0 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -208,7 +208,8 @@ The initial browser client includes:
 - a searchable meeting list
 - sort and updated-date filters
 - quick open by meeting id or title
-- a meeting detail view with notes and transcript panes
+- a focused meeting workspace with notes, transcript, metadata, and raw tabs
+- keyboard-first workspace switching with `1`-`4`, `[` and `]`
 - app-state status from the shared core
 - note and transcript export actions backed by the same local API
 - stronger empty and error states for list/detail failures

package/dist/cli.js CHANGED Viewed

@@ -2132,382 +2132,8 @@ function resolveNoteFormat(value) {
 	}
 }
 //#endregion
-//#region src/server/web.ts
-function renderGranolaWebPage() {
-	return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Granola Toolkit</title>
-    <style>
-      :root {
-        --bg: #f2ede2;
-        --panel: rgba(255, 252, 247, 0.86);
-        --panel-strong: #fffaf2;
-        --line: rgba(36, 39, 44, 0.12);
-        --ink: #1d242c;
-        --muted: #5d6b77;
-        --accent: #0d6a6d;
-        --accent-soft: rgba(13, 106, 109, 0.12);
-        --warm: #a34f2f;
-        --ok: #246b4f;
-        --error: #9d2c2c;
-        --shadow: 0 24px 80px rgba(40, 32, 16, 0.12);
-        --radius: 24px;
-        --mono: "SF Mono", "IBM Plex Mono", "Cascadia Code", monospace;
-        --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
-        --sans: "Avenir Next", "Segoe UI", sans-serif;
-      }
-      * { box-sizing: border-box; }
-      body {
-        margin: 0;
-        min-height: 100vh;
-        font-family: var(--sans);
-        color: var(--ink);
-        background:
-          radial-gradient(circle at top left, rgba(163, 79, 47, 0.18), transparent 32%),
-          radial-gradient(circle at right 12%, rgba(13, 106, 109, 0.16), transparent 28%),
-          linear-gradient(180deg, #f8f2e8 0%, var(--bg) 100%);
-      }
-      .shell {
-        display: grid;
-        grid-template-columns: 320px minmax(0, 1fr);
-        gap: 18px;
-        min-height: 100vh;
-        padding: 24px;
-      }
-      .pane {
-        background: var(--panel);
-        backdrop-filter: blur(18px);
-        border: 1px solid var(--line);
-        border-radius: var(--radius);
-        box-shadow: var(--shadow);
-      }
-      .sidebar {
-        display: grid;
-        grid-template-rows: auto auto 1fr;
-        overflow: hidden;
-      }
-      .hero, .toolbar, .detail-head {
-        padding: 22px 24px;
-        border-bottom: 1px solid var(--line);
-      }
-      .hero h1 {
-        margin: 0;
-        font-family: var(--serif);
-        font-size: clamp(2rem, 3vw, 2.8rem);
-        font-weight: 600;
-        letter-spacing: -0.04em;
-      }
-      .hero p, .toolbar p {
-        margin: 8px 0 0;
-        color: var(--muted);
-        line-height: 1.5;
-      }
-      .search,
-      .select,
-      .field-input {
-        width: 100%;
-        margin-top: 16px;
-        padding: 12px 14px;
-        border: 1px solid var(--line);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.7);
-        color: var(--ink);
-        font: inherit;
-      }
-      .field-row {
-        display: grid;
-        gap: 10px;
-        margin-top: 12px;
-      }
-      .field-row--inline {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-      .field-label {
-        display: block;
-        margin-bottom: 6px;
-        color: var(--muted);
-        font-size: 0.78rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .meeting-list {
-        padding: 14px;
-        overflow: auto;
-      }
-      .meeting-row {
-        width: 100%;
-        display: grid;
-        gap: 4px;
-        text-align: left;
-        margin: 0 0 10px;
-        padding: 14px 16px;
-        border: 1px solid transparent;
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.72);
-        color: inherit;
-        cursor: pointer;
-        transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
-      }
-      .meeting-row:hover,
-      .meeting-row[data-selected="true"] {
-        transform: translateY(-1px);
-        border-color: rgba(13, 106, 109, 0.25);
-        background: var(--panel-strong);
-      }
-      .meeting-row__title {
-        font-weight: 600;
-      }
-      .meeting-row__meta {
-        color: var(--muted);
-        font-size: 0.92rem;
-      }
-      .meeting-empty {
-        padding: 18px;
-        color: var(--muted);
-      }
-      .meeting-empty--error {
-        color: var(--error);
-      }
-      .detail {
-        display: grid;
-        grid-template-rows: auto auto 1fr;
-        min-width: 0;
-      }
-      .detail-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 18px;
-      }
-      .detail-head h2 {
-        margin: 0;
-        font-family: var(--serif);
-        font-size: clamp(1.8rem, 2.4vw, 2.4rem);
-        font-weight: 600;
-      }
-      .state-badge {
-        padding: 10px 14px;
-        border-radius: 999px;
-        background: var(--accent-soft);
-        color: var(--accent);
-        font-size: 0.92rem;
-        font-weight: 700;
-      }
-      .state-badge[data-tone="busy"] { color: var(--warm); background: rgba(163, 79, 47, 0.12); }
-      .state-badge[data-tone="error"] { color: var(--error); background: rgba(157, 44, 44, 0.12); }
-      .state-badge[data-tone="ok"] { color: var(--ok); background: rgba(36, 107, 79, 0.12); }
-      .toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        gap: 14px;
-      }
-      .toolbar-actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-      .toolbar-form {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        gap: 10px;
-        width: min(440px, 100%);
-      }
-      .button {
-        border: 0;
-        border-radius: 999px;
-        padding: 12px 16px;
-        font: inherit;
-        font-weight: 700;
-        cursor: pointer;
-      }
-      .button--primary {
-        background: var(--ink);
-        color: white;
-      }
-      .button--secondary {
-        background: rgba(255, 255, 255, 0.72);
-        color: var(--ink);
-        border: 1px solid var(--line);
-      }
-      .status-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-        gap: 14px;
-      }
-      .status-label {
-        display: block;
-        margin-bottom: 6px;
-        color: var(--muted);
-        font-size: 0.78rem;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .detail-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        padding: 0 24px 18px;
-      }
-      .detail-chip {
-        padding: 10px 12px;
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.72);
-        border: 1px solid var(--line);
-        color: var(--muted);
-        font-size: 0.88rem;
-      }
-      .detail-body {
-        padding: 0 24px 24px;
-        overflow: auto;
-      }
-      .detail-section {
-        margin-bottom: 20px;
-        padding: 20px;
-        background: rgba(255, 255, 255, 0.72);
-        border: 1px solid var(--line);
-        border-radius: 20px;
-      }
-      .detail-section h2 {
-        margin: 0 0 14px;
-        font-size: 1rem;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .detail-pre {
-        margin: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        font-family: var(--mono);
-        line-height: 1.55;
-      }
-      .empty {
-        margin: 24px;
-        padding: 24px;
-        border-radius: 20px;
-        background: rgba(255, 255, 255, 0.72);
-        border: 1px dashed rgba(36, 39, 44, 0.2);
-        color: var(--muted);
-      }
-      @media (max-width: 900px) {
-        .shell {
-          grid-template-columns: 1fr;
-        }
-        .field-row--inline,
-        .toolbar-form {
-          grid-template-columns: 1fr;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="shell">
-      <aside class="pane sidebar">
-        <section class="hero">
-          <h1>Granola Toolkit</h1>
-          <p>Browser workspace for meetings, notes, transcripts, and export flows on top of one local server instance.</p>
-          <input class="search" data-search placeholder="Search meetings, ids, or tags" />
-          <div class="field-row field-row--inline">
-            <label>
-              <span class="field-label">Sort</span>
-              <select class="select" data-sort>
-                <option value="updated-desc">Newest first</option>
-                <option value="updated-asc">Oldest first</option>
-                <option value="title-asc">Title A-Z</option>
-                <option value="title-desc">Title Z-A</option>
-              </select>
-            </label>
-            <label>
-              <span class="field-label">Updated From</span>
-              <input class="field-input" data-updated-from type="date" />
-            </label>
-          </div>
-          <label class="field-row">
-            <span class="field-label">Updated To</span>
-            <input class="field-input" data-updated-to type="date" />
-          </label>
-        </section>
-        <section class="toolbar">
-          <div>
-            <p>Meetings are loaded from the shared server state so this view can later coexist with the terminal UI.</p>
-          </div>
-          <div class="toolbar-form">
-            <input class="field-input" data-quick-open placeholder="Quick open by id or title" />
-            <button class="button button--secondary" data-quick-open-button>Open</button>
-          </div>
-        </section>
-        <section class="meeting-list" data-meeting-list></section>
-      </aside>
-      <main class="pane detail">
-        <section class="detail-head">
-          <div>
-            <h2>Meeting Workspace</h2>
-            <div data-app-state></div>
-          </div>
-          <div class="state-badge" data-state-badge data-tone="idle">Connecting…</div>
-        </section>
-        <section class="toolbar">
-          <div class="toolbar-actions">
-            <button class="button button--primary" data-refresh>Refresh</button>
-            <button class="button button--secondary" data-export-notes>Export Notes</button>
-            <button class="button button--secondary" data-export-transcripts>Export Transcripts</button>
-          </div>
-          <p>Initial beta web client. It speaks to the same local API that future TUI and attach flows will use.</p>
-        </section>
-        <div class="detail-meta" data-detail-meta></div>
-        <div class="detail-body" data-detail-body>
-          <div class="empty" data-empty>Select a meeting to inspect its notes and transcript.</div>
-        </div>
-      </main>
-    </div>
-    <script type="module">
-${String.raw`
+//#region src/web/client-script.ts
+const granolaWebClientScript = String.raw`
 const state = {
   appState: null,
   detailError: "",
@@ -2516,10 +2142,12 @@ const state = {
   quickOpen: "",
   search: "",
   selectedMeeting: null,
+  selectedMeetingBundle: null,
   selectedMeetingId: null,
   sort: "updated-desc",
   updatedFrom: "",
   updatedTo: "",
+  workspaceTab: "notes",
 };
 const els = {
@@ -2538,6 +2166,7 @@ const els = {
   transcriptButton: document.querySelector("[data-export-transcripts]"),
   updatedFrom: document.querySelector("[data-updated-from]"),
   updatedTo: document.querySelector("[data-updated-to]"),
+  workspaceTabs: document.querySelectorAll("[data-workspace-tab]"),
 };
 function escapeHtml(value) {
@@ -2579,6 +2208,12 @@ function currentFilterSummary() {
   return parts.join(", ");
 }
+function renderWorkspaceTabs() {
+  for (const button of els.workspaceTabs) {
+    button.dataset.selected = button.dataset.workspaceTab === state.workspaceTab ? "true" : "false";
+  }
+}
 function renderAppState() {
   if (!state.appState) {
     els.appState.innerHTML = "<p>Waiting for server state…</p>";
@@ -2615,6 +2250,7 @@ function renderMeetingList() {
   if (state.meetings.length === 0) {
     state.selectedMeetingId = null;
     state.selectedMeeting = null;
+    state.selectedMeetingBundle = null;
     const filterSummary = currentFilterSummary();
     const message = filterSummary
       ? "No meetings match " + filterSummary + "."
@@ -2645,6 +2281,8 @@ function renderMeetingList() {
 }
 function renderMeetingDetail() {
+  renderWorkspaceTabs();
   if (state.detailError) {
     els.empty.hidden = false;
     els.empty.textContent = state.detailError;
@@ -2669,15 +2307,46 @@ function renderMeetingDetail() {
     '<div class="detail-chip">Transcript: ' + escapeHtml(String(record.meeting.transcriptSegmentCount)) + " segments</div>",
   ].join("");
+  const bundle = state.selectedMeetingBundle;
+  const metadataLines = [
+    "Title: " + (record.meeting.title || record.meeting.id),
+    "Created: " + record.meeting.createdAt,
+    "Updated: " + record.meeting.updatedAt,
+    "Tags: " + (record.meeting.tags.length ? record.meeting.tags.join(", ") : "none"),
+    "Transcript loaded: " + (record.meeting.transcriptLoaded ? "yes" : "no"),
+  ].join("\n");
+  let mainTitle = "Notes";
+  let mainBody = record.noteMarkdown || "";
+  switch (state.workspaceTab) {
+    case "transcript":
+      mainTitle = "Transcript";
+      mainBody = record.transcriptText || "(Transcript unavailable)";
+      break;
+    case "metadata":
+      mainTitle = "Metadata";
+      mainBody = metadataLines;
+      break;
+    case "raw":
+      mainTitle = "Raw Bundle";
+      mainBody = JSON.stringify(bundle || record, null, 2);
+      break;
+    default:
+      break;
+  }
   els.detailBody.innerHTML = [
-    '<section class="detail-section">',
-    "<h2>Notes</h2>",
-    '<pre class="detail-pre">' + escapeHtml(record.noteMarkdown || "") + "</pre>",
-    "</section>",
-    '<section class="detail-section">',
-    "<h2>Transcript</h2>",
-    '<pre class="detail-pre">' + escapeHtml(record.transcriptText || "(Transcript unavailable)") + "</pre>",
+    '<div class="workspace-grid">',
+    '<aside class="detail-section workspace-sidebar">',
+    "<h2>Meeting Metadata</h2>",
+    '<pre class="detail-pre">' + escapeHtml(metadataLines) + "</pre>",
+    "</aside>",
+    '<section class="detail-section workspace-main">',
+    "<h2>" + escapeHtml(mainTitle) + "</h2>",
+    '<pre class="detail-pre">' + escapeHtml(mainBody) + "</pre>",
     "</section>",
+    "</div>",
   ].join("");
 }
@@ -2733,6 +2402,7 @@ async function loadMeetings(options = {}) {
   } catch (error) {
     state.listError = error instanceof Error ? error.message : String(error);
     state.selectedMeeting = null;
+    state.selectedMeetingBundle = null;
     state.detailError = state.listError;
     renderMeetingList();
     renderMeetingDetail();
@@ -2746,10 +2416,12 @@ async function loadMeeting(id) {
   try {
     state.detailError = "";
     const payload = await fetchJson("/meetings/" + encodeURIComponent(id));
+    state.selectedMeetingBundle = payload;
     state.selectedMeeting = payload.meeting || null;
     renderMeetingDetail();
   } catch (error) {
     state.selectedMeeting = null;
+    state.selectedMeetingBundle = null;
     state.detailError = error instanceof Error ? error.message : String(error);
     renderMeetingDetail();
   }
@@ -2891,6 +2563,59 @@ els.quickOpenButton.addEventListener("click", () => {
   void quickOpenMeeting();
 });
+els.workspaceTabs.forEach((button) => {
+  button.addEventListener("click", () => {
+    state.workspaceTab = button.dataset.workspaceTab || "notes";
+    renderMeetingDetail();
+  });
+});
+document.addEventListener("keydown", (event) => {
+  if (
+    event.target instanceof HTMLInputElement ||
+    event.target instanceof HTMLSelectElement ||
+    event.target instanceof HTMLTextAreaElement
+  ) {
+    return;
+  }
+  const tabs = ["notes", "transcript", "metadata", "raw"];
+  if (event.key === "1") {
+    state.workspaceTab = "notes";
+    renderMeetingDetail();
+    return;
+  }
+  if (event.key === "2") {
+    state.workspaceTab = "transcript";
+    renderMeetingDetail();
+    return;
+  }
+  if (event.key === "3") {
+    state.workspaceTab = "metadata";
+    renderMeetingDetail();
+    return;
+  }
+  if (event.key === "4") {
+    state.workspaceTab = "raw";
+    renderMeetingDetail();
+    return;
+  }
+  const currentIndex = tabs.indexOf(state.workspaceTab);
+  if (event.key === "]") {
+    state.workspaceTab = tabs[(currentIndex + 1) % tabs.length];
+    renderMeetingDetail();
+  }
+  if (event.key === "[") {
+    state.workspaceTab = tabs[(currentIndex + tabs.length - 1) % tabs.length];
+    renderMeetingDetail();
+  }
+});
 const events = new EventSource("/events");
 events.addEventListener("state.updated", (event) => {
   const payload = JSON.parse(event.data);
@@ -2908,7 +2633,448 @@ void refreshAll().catch((error) => {
   els.empty.hidden = false;
   els.empty.textContent = error.message;
 });
-`}
+`;
+//#endregion
+//#region src/web/markup.ts
+const granolaWebMarkup = String.raw`
+<div class="shell">
+  <aside class="pane sidebar">
+    <section class="hero">
+      <h1>Granola Toolkit</h1>
+      <p>Browser workspace for meetings, notes, transcripts, and export flows on top of one local server instance.</p>
+      <input class="search" data-search placeholder="Search meetings, ids, or tags" />
+      <div class="field-row field-row--inline">
+        <label>
+          <span class="field-label">Sort</span>
+          <select class="select" data-sort>
+            <option value="updated-desc">Newest first</option>
+            <option value="updated-asc">Oldest first</option>
+            <option value="title-asc">Title A-Z</option>
+            <option value="title-desc">Title Z-A</option>
+          </select>
+        </label>
+        <label>
+          <span class="field-label">Updated From</span>
+          <input class="field-input" data-updated-from type="date" />
+        </label>
+      </div>
+      <label class="field-row">
+        <span class="field-label">Updated To</span>
+        <input class="field-input" data-updated-to type="date" />
+      </label>
+    </section>
+    <section class="toolbar">
+      <div>
+        <p>Meetings are loaded from the shared server state so this view can later coexist with the terminal UI.</p>
+      </div>
+      <div class="toolbar-form">
+        <input class="field-input" data-quick-open placeholder="Quick open by id or title" />
+        <button class="button button--secondary" data-quick-open-button>Open</button>
+      </div>
+    </section>
+    <section class="meeting-list" data-meeting-list></section>
+  </aside>
+  <main class="pane detail">
+    <section class="detail-head">
+      <div>
+        <h2>Meeting Workspace</h2>
+        <div data-app-state></div>
+      </div>
+      <div class="state-badge" data-state-badge data-tone="idle">Connecting…</div>
+    </section>
+    <section class="toolbar">
+      <div class="toolbar-actions">
+        <button class="button button--primary" data-refresh>Refresh</button>
+        <button class="button button--secondary" data-export-notes>Export Notes</button>
+        <button class="button button--secondary" data-export-transcripts>Export Transcripts</button>
+      </div>
+      <p>Initial beta web client. It speaks to the same local API that future TUI and attach flows will use.</p>
+    </section>
+    <nav class="workspace-tabs">
+      <button class="workspace-tab" data-workspace-tab="notes">Notes</button>
+      <button class="workspace-tab" data-workspace-tab="transcript">Transcript</button>
+      <button class="workspace-tab" data-workspace-tab="metadata">Metadata</button>
+      <button class="workspace-tab" data-workspace-tab="raw">Raw</button>
+      <span class="workspace-hint">1-4 switch tabs, [ and ] cycle</span>
+    </nav>
+    <div class="detail-meta" data-detail-meta></div>
+    <div class="detail-body" data-detail-body>
+      <div class="empty" data-empty>Select a meeting to inspect its notes and transcript.</div>
+    </div>
+  </main>
+</div>
+`;
+//#endregion
+//#region src/web/styles.ts
+const granolaWebStyles = String.raw`
+:root {
+  --bg: #f2ede2;
+  --panel: rgba(255, 252, 247, 0.86);
+  --panel-strong: #fffaf2;
+  --line: rgba(36, 39, 44, 0.12);
+  --ink: #1d242c;
+  --muted: #5d6b77;
+  --accent: #0d6a6d;
+  --accent-soft: rgba(13, 106, 109, 0.12);
+  --warm: #a34f2f;
+  --ok: #246b4f;
+  --error: #9d2c2c;
+  --shadow: 0 24px 80px rgba(40, 32, 16, 0.12);
+  --radius: 24px;
+  --mono: "SF Mono", "IBM Plex Mono", "Cascadia Code", monospace;
+  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+  --sans: "Avenir Next", "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--sans);
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(163, 79, 47, 0.18), transparent 32%),
+    radial-gradient(circle at right 12%, rgba(13, 106, 109, 0.16), transparent 28%),
+    linear-gradient(180deg, #f8f2e8 0%, var(--bg) 100%);
+}
+.shell {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 18px;
+  min-height: 100vh;
+  padding: 24px;
+}
+.pane {
+  background: var(--panel);
+  backdrop-filter: blur(18px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.sidebar {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  overflow: hidden;
+}
+.hero, .toolbar, .detail-head {
+  padding: 22px 24px;
+  border-bottom: 1px solid var(--line);
+}
+.hero h1 {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: clamp(2rem, 3vw, 2.8rem);
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+.hero p, .toolbar p {
+  margin: 8px 0 0;
+  color: var(--muted);
+  line-height: 1.5;
+}
+.search,
+.select,
+.field-input {
+  width: 100%;
+  margin-top: 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--ink);
+  font: inherit;
+}
+.field-row {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+.field-row--inline {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.field-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.meeting-list {
+  padding: 14px;
+  overflow: auto;
+}
+.meeting-row {
+  width: 100%;
+  display: grid;
+  gap: 4px;
+  text-align: left;
+  margin: 0 0 10px;
+  padding: 14px 16px;
+  border: 1px solid transparent;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.72);
+  color: inherit;
+  cursor: pointer;
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+.meeting-row:hover,
+.meeting-row[data-selected="true"] {
+  transform: translateY(-1px);
+  border-color: rgba(13, 106, 109, 0.25);
+  background: var(--panel-strong);
+}
+.meeting-row__title {
+  font-weight: 600;
+}
+.meeting-row__meta {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+.meeting-empty {
+  padding: 18px;
+  color: var(--muted);
+}
+.meeting-empty--error {
+  color: var(--error);
+}
+.detail {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  min-width: 0;
+}
+.detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+.detail-head h2 {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
+  font-weight: 600;
+}
+.state-badge {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+.state-badge[data-tone="busy"] { color: var(--warm); background: rgba(163, 79, 47, 0.12); }
+.state-badge[data-tone="error"] { color: var(--error); background: rgba(157, 44, 44, 0.12); }
+.state-badge[data-tone="ok"] { color: var(--ok); background: rgba(36, 107, 79, 0.12); }
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.toolbar-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  width: min(440px, 100%);
+}
+.workspace-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 0 24px 18px;
+}
+.workspace-tab {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+}
+.workspace-tab[data-selected="true"] {
+  background: var(--ink);
+  color: white;
+  border-color: var(--ink);
+}
+.workspace-hint {
+  color: var(--muted);
+  font-size: 0.86rem;
+  margin-left: auto;
+}
+.button {
+  border: 0;
+  border-radius: 999px;
+  padding: 12px 16px;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+.button--primary {
+  background: var(--ink);
+  color: white;
+}
+.button--secondary {
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--ink);
+  border: 1px solid var(--line);
+}
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 14px;
+}
+.status-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 24px 18px;
+}
+.detail-chip {
+  padding: 10px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+.detail-body {
+  padding: 0 24px 24px;
+  overflow: auto;
+}
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
+  gap: 18px;
+}
+.workspace-sidebar,
+.workspace-main {
+  margin-bottom: 0;
+}
+.detail-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+}
+.detail-section h2 {
+  margin: 0 0 14px;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.detail-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--mono);
+  line-height: 1.55;
+}
+.empty {
+  margin: 24px;
+  padding: 24px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px dashed rgba(36, 39, 44, 0.2);
+  color: var(--muted);
+}
+@media (max-width: 900px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+  .field-row--inline,
+  .toolbar-form,
+  .workspace-grid {
+    grid-template-columns: 1fr;
+  }
+  .workspace-hint {
+    margin-left: 0;
+  }
+}
+`;
+//#endregion
+//#region src/server/web.ts
+function renderGranolaWebPage() {
+	return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Granola Toolkit</title>
+    <style>
+${granolaWebStyles}
+    </style>
+  </head>
+  <body>
+${granolaWebMarkup}
+    <script type="module">
+${granolaWebClientScript}
     <\/script>
   </body>
 </html>`;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "granola-toolkit",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "description": "Toolkit for exporting and working with Granola meetings, notes, and transcripts",
   "keywords": [
     "cli",