granola-toolkit 0.31.0 → 0.32.0

package/README.md

@@ -275,10 +275,13 @@ You can deep-link into a specific meeting with either:
 
 The initial browser client includes:
 
+- a dedicated folder pane with an explicit All meetings scope
 - a searchable meeting list
+- folder-aware meeting browsing with one-click scope changes
 - a fast local-index warm start for meeting browsing before live documents finish loading
 - sort and updated-date filters
 - quick open by meeting id or title
+- browser URL state that preserves the selected folder, meeting, and tab
 - 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

package/dist/cli.js

@@ -4204,10 +4204,13 @@ const workspaceTabs = ["notes", "transcript", "metadata", "raw"];
 const state = {
   appState: null,
   detailError: "",
+  folderError: "",
+  folders: [],
   listError: "",
   meetings: [],
   quickOpen: "",
   search: "",
+  selectedFolderId: null,
   selectedMeeting: null,
   selectedMeetingBundle: null,
   selectedMeetingId: null,
@@ -4225,6 +4228,7 @@ const els = {
   detailBody: document.querySelector("[data-detail-body]"),
   detailMeta: document.querySelector("[data-detail-meta]"),
   empty: document.querySelector("[data-empty]"),
+  folderList: document.querySelector("[data-folder-list]"),
   jobsList: document.querySelector("[data-jobs-list]"),
   list: document.querySelector("[data-meeting-list]"),
   noteButton: document.querySelector("[data-export-notes]"),
@@ -4251,6 +4255,7 @@ function parseWorkspaceTab(value) {
 function startupSelection() {
   const params = new URLSearchParams(window.location.search);
   return {
+    folderId: params.get("folder")?.trim() || "",
     meetingId: params.get("meeting")?.trim() || "",
     workspaceTab: parseWorkspaceTab(params.get("tab")),
   };
@@ -4259,6 +4264,12 @@ function startupSelection() {
 function syncBrowserUrl() {
   const url = new URL(window.location.href);
 
+  if (state.selectedFolderId) {
+    url.searchParams.set("folder", state.selectedFolderId);
+  } else {
+    url.searchParams.delete("folder");
+  }
+
   if (state.selectedMeetingId) {
     url.searchParams.set("meeting", state.selectedMeetingId);
   } else {
@@ -4302,6 +4313,11 @@ function syncFilterInputs() {
 function currentFilterSummary() {
   const parts = [];
 
+  if (state.selectedFolderId) {
+    const folder = state.folders.find((candidate) => candidate.id === state.selectedFolderId);
+    parts.push("folder " + (folder ? '"' + folder.name + '"' : '"' + state.selectedFolderId + '"'));
+  }
+
   if (state.search) {
     parts.push('search "' + state.search + '"');
   }
@@ -4344,6 +4360,9 @@ function renderAppState() {
     : appState.index.available
       ? "available"
       : "not built";
+  const folderStatus = appState.folders.loaded
+    ? appState.folders.count + " folders"
+    : "not loaded";
 
   els.appState.innerHTML = [
     '<div class="status-grid">',
@@ -4351,6 +4370,7 @@ function renderAppState() {
     '<div><span class="status-label">View</span><strong>' + escapeHtml(appState.ui.view) + "</strong></div>",
     '<div><span class="status-label">Auth</span><strong>' + escapeHtml(authMode) + "</strong></div>",
     '<div><span class="status-label">Documents</span><strong>' + escapeHtml(docs) + "</strong></div>",
+    '<div><span class="status-label">Folders</span><strong>' + escapeHtml(folderStatus) + "</strong></div>",
     '<div><span class="status-label">Cache</span><strong>' + escapeHtml(cache) + "</strong></div>",
     '<div><span class="status-label">Index</span><strong>' + escapeHtml(indexStatus) + "</strong></div>",
     "</div>",
@@ -4361,6 +4381,50 @@ function renderAppState() {
   renderExportJobs();
 }
 
+function renderFolderList() {
+  if (state.folderError) {
+    els.folderList.innerHTML =
+      '<div class="folder-empty folder-empty--error">' + escapeHtml(state.folderError) + "</div>";
+    return;
+  }
+
+  const buttons = [
+    [
+      '<button class="folder-row"' +
+        (state.selectedFolderId ? "" : ' data-selected="true"') +
+        ' data-folder-id="">',
+      '<span class="folder-row__title">All meetings</span>',
+      '<span class="folder-row__meta">Browse the full meeting list.</span>',
+      "</button>",
+    ].join(""),
+  ];
+
+  for (const folder of state.folders) {
+    buttons.push(
+      [
+        '<button class="folder-row"' +
+          (folder.id === state.selectedFolderId ? ' data-selected="true"' : "") +
+          ' data-folder-id="' +
+          escapeHtml(folder.id) +
+          '">',
+        '<span class="folder-row__title">' +
+          escapeHtml((folder.isFavourite ? "★ " : "") + (folder.name || folder.id)) +
+          "</span>",
+        '<span class="folder-row__meta">' +
+          escapeHtml(String(folder.documentCount) + " meetings") +
+          "</span>",
+        "</button>",
+      ].join(""),
+    );
+  }
+
+  if (buttons.length === 1) {
+    buttons.push('<div class="folder-empty">No folders found.</div>');
+  }
+
+  els.folderList.innerHTML = buttons.join("");
+}
+
 function renderSecurityPanel() {
   els.securityPanel.hidden = !state.serverLocked;
 }
@@ -4504,6 +4568,7 @@ function renderMeetingDetail() {
     "Title: " + (record.meeting.title || record.meeting.id),
     "Created: " + record.meeting.createdAt,
     "Updated: " + record.meeting.updatedAt,
+    "Folders: " + (record.meeting.folders.length ? record.meeting.folders.map((folder) => folder.name).join(", ") : "none"),
     "Tags: " + (record.meeting.tags.length ? record.meeting.tags.join(", ") : "none"),
     "Transcript loaded: " + (record.meeting.transcriptLoaded ? "yes" : "no"),
   ].join("\n");
@@ -4613,6 +4678,10 @@ function buildMeetingsQuery(limit = 100, refresh = false) {
     params.set("updatedTo", state.updatedTo);
   }
 
+  if (state.selectedFolderId) {
+    params.set("folderId", state.selectedFolderId);
+  }
+
   if (refresh) {
     params.set("refresh", "true");
   }
@@ -4620,6 +4689,39 @@ function buildMeetingsQuery(limit = 100, refresh = false) {
   return "?" + params.toString();
 }
 
+async function loadFolders(options = {}) {
+  const refresh = options.refresh === true;
+
+  try {
+    state.folderError = "";
+    const params = new URLSearchParams();
+    params.set("limit", "100");
+    if (refresh) {
+      params.set("refresh", "true");
+    }
+
+    const payload = await fetchJson("/folders?" + params.toString());
+    state.folders = payload.folders || [];
+    if (
+      state.selectedFolderId &&
+      !state.folders.some((folder) => folder.id === state.selectedFolderId)
+    ) {
+      state.selectedFolderId = null;
+    }
+  } catch (error) {
+    if (error.authRequired) {
+      throw error;
+    }
+
+    state.folderError = error instanceof Error ? error.message : String(error);
+    state.folders = [];
+    state.selectedFolderId = null;
+  }
+
+  renderFolderList();
+  syncBrowserUrl();
+}
+
 async function loadMeetings(options = {}) {
   const preferredMeetingId = options.preferredMeetingId || state.selectedMeetingId;
   const refresh = options.refresh === true;
@@ -4683,10 +4785,12 @@ async function quickOpenMeeting() {
   try {
     state.quickOpen = query;
     const payload = await fetchJson("/meetings/resolve?q=" + encodeURIComponent(query));
+    state.selectedFolderId = payload.meeting?.meeting?.folders?.[0]?.id || null;
     state.search = "";
     state.updatedFrom = "";
     state.updatedTo = "";
     syncFilterInputs();
+    renderFolderList();
     await loadMeetings({
       preferredMeetingId: payload.document.id,
     });
@@ -4701,11 +4805,9 @@ async function quickOpenMeeting() {
 async function refreshAll(forceLiveMeetings = false) {
   setStatus("Refreshing…", "busy");
   try {
-    const [appState, authState] = await Promise.all([
-      fetchJson("/state"),
-      fetchJson("/auth/status"),
-      loadMeetings({ refresh: forceLiveMeetings }),
-    ]);
+    await loadFolders({ refresh: forceLiveMeetings });
+    const [appState, authState] = await Promise.all([fetchJson("/state"), fetchJson("/auth/status")]);
+    await loadMeetings({ refresh: forceLiveMeetings });
     state.serverLocked = false;
     state.appState = {
       ...appState,
@@ -4856,17 +4958,40 @@ async function lockServer() {
 
   state.serverLocked = true;
   state.appState = null;
+  state.folders = [];
   state.meetings = [];
+  state.selectedFolderId = null;
   state.selectedMeeting = null;
   state.selectedMeetingBundle = null;
   state.detailError = "";
+  state.folderError = "";
   els.serverPassword.value = "";
   renderSecurityPanel();
+  renderFolderList();
   renderMeetingList();
   renderMeetingDetail();
   setStatus("Server locked", "error");
 }
 
+els.folderList.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+
+  const button = event.target.closest("[data-folder-id]");
+  if (!button) {
+    return;
+  }
+
+  const nextFolderId = button.dataset.folderId || null;
+  state.selectedFolderId = nextFolderId;
+  state.selectedMeetingId = null;
+  state.selectedMeeting = null;
+  state.selectedMeetingBundle = null;
+  renderFolderList();
+  void loadMeetings();
+});
+
 els.list.addEventListener("click", (event) => {
   if (!(event.target instanceof Element)) {
     return;
@@ -5071,6 +5196,7 @@ document.addEventListener("keydown", (event) => {
 });
 
 const initialSelection = startupSelection();
+state.selectedFolderId = initialSelection.folderId || null;
 state.selectedMeetingId = initialSelection.meetingId || null;
 state.workspaceTab = initialSelection.workspaceTab;
 
@@ -5086,9 +5212,12 @@ events.addEventListener("state.updated", (event) => {
     payload.state.documents?.loadedAt &&
     payload.state.documents.loadedAt !== previousLoadedAt
   ) {
-    void loadMeetings({
-      preferredMeetingId: state.selectedMeetingId,
-    });
+    void (async () => {
+      await loadFolders();
+      await loadMeetings({
+        preferredMeetingId: state.selectedMeetingId,
+      });
+    })();
   }
 });
 events.addEventListener("error", () => {
@@ -5097,6 +5226,7 @@ events.addEventListener("error", () => {
 
 syncFilterInputs();
 renderSecurityPanel();
+renderFolderList();
 
 void refreshAll().catch((error) => {
   setStatus("Error", "error");
@@ -5111,7 +5241,7 @@ const granolaWebMarkup = String.raw`
   <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>
+      <p>Browser workspace for folders, 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>
@@ -5133,6 +5263,13 @@ const granolaWebMarkup = String.raw`
         <input class="field-input" data-updated-to type="date" />
       </label>
     </section>
+    <section class="folder-panel">
+      <div class="folder-panel__head">
+        <h2>Folders</h2>
+        <p>Pick a folder to scope the meeting browser, or stay on All meetings.</p>
+      </div>
+      <div class="folder-list" data-folder-list></div>
+    </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>
@@ -5254,11 +5391,11 @@ body {
 
 .sidebar {
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr;
   overflow: hidden;
 }
 
-.hero, .toolbar, .detail-head {
+.hero, .toolbar, .detail-head, .folder-panel {
   padding: 22px 24px;
   border-bottom: 1px solid var(--line);
 }
@@ -5315,6 +5452,68 @@ body {
   overflow: auto;
 }
 
+.folder-panel {
+  display: grid;
+  gap: 14px;
+}
+
+.folder-panel__head h2 {
+  margin: 0;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.folder-panel__head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.folder-list {
+  display: grid;
+  gap: 10px;
+}
+
+.folder-row {
+  width: 100%;
+  display: grid;
+  gap: 4px;
+  text-align: left;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.72);
+  color: inherit;
+  cursor: pointer;
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+
+.folder-row:hover,
+.folder-row[data-selected="true"] {
+  transform: translateY(-1px);
+  border-color: rgba(163, 79, 47, 0.26);
+  background: var(--panel-strong);
+}
+
+.folder-row__title {
+  font-weight: 700;
+}
+
+.folder-row__meta {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.folder-empty {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.folder-empty--error {
+  color: var(--error);
+}
+
 .meeting-row {
   width: 100%;
   display: grid;
@@ -6174,7 +6373,11 @@ function printWebRoutes() {
 	console.log("  GET  /auth/status");
 	console.log("  GET  /state");
 	console.log("  GET  /events");
+	console.log("  GET  /folders");
+	console.log("  GET  /folders/resolve?q=<query>");
+	console.log("  GET  /folders/:id");
 	console.log("  GET  /meetings");
+	console.log("  GET  /meetings?folderId=<id>");
 	console.log("  GET  /meetings/:id");
 	console.log("  GET  /exports/jobs");
 	console.log("  POST /auth/login");

package/package.json

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