granola-toolkit 0.20.0 → 0.21.0

package/README.md

@@ -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

@@ -2346,6 +2346,37 @@ function renderGranolaWebPage() {
         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;
@@ -2402,6 +2433,17 @@ function renderGranolaWebPage() {
         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;
@@ -2440,9 +2482,14 @@ function renderGranolaWebPage() {
         }
 
         .field-row--inline,
-        .toolbar-form {
+        .toolbar-form,
+        .workspace-grid {
           grid-template-columns: 1fr;
         }
+
+        .workspace-hint {
+          margin-left: 0;
+        }
       }
     </style>
   </head>
@@ -2500,6 +2547,13 @@ function renderGranolaWebPage() {
           </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>
@@ -2516,10 +2570,12 @@ const state = {
   quickOpen: "",
   search: "",
   selectedMeeting: null,
+  selectedMeetingBundle: null,
   selectedMeetingId: null,
   sort: "updated-desc",
   updatedFrom: "",
   updatedTo: "",
+  workspaceTab: "notes",
 };
 
 const els = {
@@ -2538,6 +2594,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 +2636,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 +2678,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 +2709,8 @@ function renderMeetingList() {
 }
 
 function renderMeetingDetail() {
+  renderWorkspaceTabs();
+
   if (state.detailError) {
     els.empty.hidden = false;
     els.empty.textContent = state.detailError;
@@ -2669,15 +2735,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 +2830,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 +2844,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 +2991,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);

package/package.json

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