granola-toolkit 0.18.0 → 0.20.0

package/README.md

@@ -37,6 +37,7 @@ granola meeting --help
 granola notes --help
 granola serve --help
 granola transcripts --help
+granola web --help
 ```
 
 The published package exposes both `granola` and `granola-toolkit` as executable names.
@@ -50,6 +51,7 @@ node dist/cli.js meeting --help
 node dist/cli.js notes --help
 node dist/cli.js serve --help
 node dist/cli.js transcripts --help
+node dist/cli.js web --help
 ```
 
 You can also use the package scripts:
@@ -97,6 +99,9 @@ Run the local API server:
 granola serve
 granola serve --port 4096
 granola serve --hostname 0.0.0.0 --port 4096
+
+granola web
+granola web --open=false --port 4096
 ```
 
 ## How It Works
@@ -187,12 +192,27 @@ The initial server API includes:
 - `GET /state`
 - `GET /events` for server-sent state updates
 - `GET /meetings`
+- `GET /meetings/resolve?q=<query>`
 - `GET /meetings/:id`
 - `POST /exports/notes`
 - `POST /exports/transcripts`
 
 This is the foundation for the future `granola web` client and any attachable TUI flows.
 
+### Web
+
+`web` starts the same local server as `serve`, enables the browser client at `/`, and opens that workspace in your default browser unless you pass `--open=false`.
+
+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
+- 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
+
 ## Auth
 
 If you do not want to keep passing `--supabase`, import the desktop app session once:

package/dist/cli.js

@@ -154,7 +154,7 @@ function transcriptSpeakerLabel(segment) {
 }
 //#endregion
 //#region src/client/auth.ts
-const execFileAsync = promisify(execFile);
+const execFileAsync$1 = promisify(execFile);
 const DEFAULT_CLIENT_ID = "client_GranolaMac";
 const KEYCHAIN_SERVICE_NAME = "com.granola.toolkit";
 const KEYCHAIN_ACCOUNT_NAME = "session";
@@ -244,7 +244,7 @@ var FileSessionStore = class {
 var KeychainSessionStore = class {
 	async clearSession() {
 		try {
-			await execFileAsync("security", [
+			await execFileAsync$1("security", [
 				"delete-generic-password",
 				"-s",
 				KEYCHAIN_SERVICE_NAME,
@@ -255,7 +255,7 @@ var KeychainSessionStore = class {
 	}
 	async readSession() {
 		try {
-			const { stdout } = await execFileAsync("security", [
+			const { stdout } = await execFileAsync$1("security", [
 				"find-generic-password",
 				"-s",
 				KEYCHAIN_SERVICE_NAME,
@@ -270,7 +270,7 @@ var KeychainSessionStore = class {
 		}
 	}
 	async writeSession(session) {
-		await execFileAsync("security", [
+		await execFileAsync$1("security", [
 			"add-generic-password",
 			"-U",
 			"-s",
@@ -1275,6 +1275,17 @@ function compareTimestampsDescending(left, right) {
 function compareMeetingDocuments(left, right) {
 	return compareTimestampsDescending(latestDocumentTimestamp(left), latestDocumentTimestamp(right)) || compareTimestampsDescending(left.createdAt, right.createdAt) || compareStrings(left.title || left.id, right.title || right.id) || compareStrings(left.id, right.id);
 }
+function compareMeetingDocumentsByTitle(left, right) {
+	return compareStrings(left.title || left.id, right.title || right.id) || compareTimestampsDescending(latestDocumentTimestamp(left), latestDocumentTimestamp(right)) || compareStrings(left.id, right.id);
+}
+function compareMeetingDocumentsBySort(left, right, sort) {
+	switch (sort) {
+		case "title-asc": return compareMeetingDocumentsByTitle(left, right);
+		case "title-desc": return -compareMeetingDocumentsByTitle(left, right);
+		case "updated-asc": return -compareMeetingDocuments(left, right);
+		default: return compareMeetingDocuments(left, right);
+	}
+}
 function serialiseNote(note) {
 	return {
 		content: note.content,
@@ -1338,6 +1349,23 @@ function matchesMeetingSearch(document, search) {
 		...document.tags
 	].some((value) => value.toLowerCase().includes(query));
 }
+function parseDateFilter(value, label) {
+	const trimmed = value?.trim();
+	if (!trimmed) return;
+	const candidate = /^\d{4}-\d{2}-\d{2}$/.test(trimmed) ? `${trimmed}T${label === "updatedFrom" ? "00:00:00.000" : "23:59:59.999"}` : trimmed;
+	const timestamp = Date.parse(candidate);
+	if (Number.isNaN(timestamp)) throw new Error(`invalid ${label}: expected ISO timestamp or YYYY-MM-DD`);
+	return timestamp;
+}
+function matchesUpdatedRange(document, updatedFrom, updatedTo) {
+	const from = parseDateFilter(updatedFrom, "updatedFrom");
+	const to = parseDateFilter(updatedTo, "updatedTo");
+	const updatedAt = parseTimestamp(latestDocumentTimestamp(document));
+	if (updatedAt == null) return from == null && to == null;
+	if (from != null && updatedAt < from) return false;
+	if (to != null && updatedAt > to) return false;
+	return true;
+}
 function truncate(value, width) {
 	if (value.length <= width) return value.padEnd(width);
 	return `${value.slice(0, Math.max(0, width - 1))}…`;
@@ -1390,7 +1418,23 @@ function buildMeetingRecord(document, cacheData) {
 }
 function listMeetings(documents, options = {}) {
 	const limit = options.limit ?? 20;
-	return documents.filter((document) => options.search ? matchesMeetingSearch(document, options.search) : true).sort(compareMeetingDocuments).slice(0, limit).map((document) => buildMeetingSummary(document, options.cacheData));
+	const sort = options.sort ?? "updated-desc";
+	return documents.filter((document) => options.search ? matchesMeetingSearch(document, options.search) : true).filter((document) => matchesUpdatedRange(document, options.updatedFrom, options.updatedTo)).sort((left, right) => compareMeetingDocumentsBySort(left, right, sort)).slice(0, limit).map((document) => buildMeetingSummary(document, options.cacheData));
+}
+function resolveMeetingQuery(documents, query) {
+	const trimmed = query.trim();
+	if (!trimmed) throw new Error("meeting query is required");
+	const lower = trimmed.toLowerCase();
+	const exactId = documents.find((document) => document.id === trimmed);
+	if (exactId) return exactId;
+	const exactTitleMatches = documents.filter((document) => document.title.toLowerCase() === lower);
+	if (exactTitleMatches.length === 1) return exactTitleMatches[0];
+	const prefixMatches = documents.filter((document) => document.id.startsWith(trimmed));
+	if (prefixMatches.length === 1) return prefixMatches[0];
+	const titleMatches = documents.filter((document) => document.title.toLowerCase().includes(lower)).sort(compareMeetingDocuments);
+	if (titleMatches.length === 1) return titleMatches[0];
+	if (exactTitleMatches.length > 1 || prefixMatches.length > 1 || titleMatches.length > 1) throw new Error(`ambiguous meeting query: ${trimmed}`);
+	throw new Error(`meeting not found: ${trimmed}`);
 }
 function resolveMeeting(documents, id) {
 	const exactMatch = documents.find((document) => document.id === id);
@@ -1612,10 +1656,16 @@ var GranolaApp = class {
 		const meetings = listMeetings(await this.listDocuments(), {
 			cacheData: await this.loadCache(),
 			limit: options.limit,
-			search: options.search
+			search: options.search,
+			sort: options.sort,
+			updatedFrom: options.updatedFrom,
+			updatedTo: options.updatedTo
 		});
 		this.setUiState({
 			meetingSearch: options.search,
+			meetingSort: options.sort,
+			meetingUpdatedFrom: options.updatedFrom,
+			meetingUpdatedTo: options.updatedTo,
 			selectedMeetingId: void 0,
 			view: "meeting-list"
 		});
@@ -1636,6 +1686,21 @@ var GranolaApp = class {
 			meeting
 		};
 	}
+	async findMeeting(query, options = {}) {
+		const documents = await this.listDocuments();
+		const cacheData = await this.loadCache({ required: options.requireCache });
+		const document = resolveMeetingQuery(documents, query);
+		const meeting = buildMeetingRecord(document, cacheData);
+		this.setUiState({
+			selectedMeetingId: document.id,
+			view: "meeting-detail"
+		});
+		return {
+			cacheData,
+			document,
+			meeting
+		};
+	}
 	async exportNotes(format = "markdown") {
 		const documents = await this.listDocuments();
 		const written = await writeNotes(documents, this.config.notes.output, format);
@@ -1767,6 +1832,41 @@ async function loadConfig(options) {
 function debug(enabled, ...values) {
 	if (enabled) console.error("[debug]", ...values);
 }
+function parsePort(value) {
+	if (value === void 0) return;
+	if (typeof value !== "string" || !/^\d+$/.test(value)) throw new Error("invalid port: expected a non-negative integer");
+	const port = Number(value);
+	if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error("invalid port: expected a value between 0 and 65535");
+	return port;
+}
+function pickHostname(value, fallback = "127.0.0.1") {
+	return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+async function waitForShutdown(close) {
+	await new Promise((resolve, reject) => {
+		let closing = false;
+		const cleanup = () => {
+			process.off("SIGINT", handleSignal);
+			process.off("SIGTERM", handleSignal);
+		};
+		const finish = async () => {
+			if (closing) return;
+			closing = true;
+			cleanup();
+			try {
+				await close();
+				resolve();
+			} catch (error) {
+				reject(error);
+			}
+		};
+		const handleSignal = () => {
+			finish();
+		};
+		process.on("SIGINT", handleSignal);
+		process.on("SIGTERM", handleSignal);
+	});
+}
 //#endregion
 //#region src/commands/meeting.ts
 function meetingHelp() {
@@ -2032,6 +2132,788 @@ 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`
+const state = {
+  appState: null,
+  detailError: "",
+  listError: "",
+  meetings: [],
+  quickOpen: "",
+  search: "",
+  selectedMeeting: null,
+  selectedMeetingId: null,
+  sort: "updated-desc",
+  updatedFrom: "",
+  updatedTo: "",
+};
+
+const els = {
+  appState: document.querySelector("[data-app-state]"),
+  detailBody: document.querySelector("[data-detail-body]"),
+  detailMeta: document.querySelector("[data-detail-meta]"),
+  empty: document.querySelector("[data-empty]"),
+  list: document.querySelector("[data-meeting-list]"),
+  noteButton: document.querySelector("[data-export-notes]"),
+  quickOpen: document.querySelector("[data-quick-open]"),
+  quickOpenButton: document.querySelector("[data-quick-open-button]"),
+  refreshButton: document.querySelector("[data-refresh]"),
+  search: document.querySelector("[data-search]"),
+  sort: document.querySelector("[data-sort]"),
+  stateBadge: document.querySelector("[data-state-badge]"),
+  transcriptButton: document.querySelector("[data-export-transcripts]"),
+  updatedFrom: document.querySelector("[data-updated-from]"),
+  updatedTo: document.querySelector("[data-updated-to]"),
+};
+
+function escapeHtml(value) {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function setStatus(label, tone = "idle") {
+  els.stateBadge.textContent = label;
+  els.stateBadge.dataset.tone = tone;
+}
+
+function syncFilterInputs() {
+  els.quickOpen.value = state.quickOpen;
+  els.search.value = state.search;
+  els.sort.value = state.sort;
+  els.updatedFrom.value = state.updatedFrom;
+  els.updatedTo.value = state.updatedTo;
+}
+
+function currentFilterSummary() {
+  const parts = [];
+
+  if (state.search) {
+    parts.push('search "' + state.search + '"');
+  }
+
+  if (state.updatedFrom) {
+    parts.push("from " + state.updatedFrom);
+  }
+
+  if (state.updatedTo) {
+    parts.push("to " + state.updatedTo);
+  }
+
+  return parts.join(", ");
+}
+
+function renderAppState() {
+  if (!state.appState) {
+    els.appState.innerHTML = "<p>Waiting for server state…</p>";
+    return;
+  }
+
+  const appState = state.appState;
+  const authMode = appState.auth.mode === "stored-session" ? "Stored session" : "supabase.json";
+  const docs = appState.documents.loaded ? String(appState.documents.count) : "not loaded";
+  const cache = appState.cache.loaded
+    ? appState.cache.transcriptCount + " transcript sets"
+    : appState.cache.configured
+      ? "configured"
+      : "not configured";
+
+  els.appState.innerHTML = [
+    '<div class="status-grid">',
+    '<div><span class="status-label">Surface</span><strong>' + escapeHtml(appState.ui.surface) + "</strong></div>",
+    '<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">Cache</span><strong>' + escapeHtml(cache) + "</strong></div>",
+    "</div>",
+  ].join("");
+}
+
+function renderMeetingList() {
+  if (state.listError) {
+    els.list.innerHTML =
+      '<div class="meeting-empty meeting-empty--error">' + escapeHtml(state.listError) + "</div>";
+    return;
+  }
+
+  if (state.meetings.length === 0) {
+    state.selectedMeetingId = null;
+    state.selectedMeeting = null;
+    const filterSummary = currentFilterSummary();
+    const message = filterSummary
+      ? "No meetings match " + filterSummary + "."
+      : "No meetings yet. Try Refresh.";
+    els.list.innerHTML = '<div class="meeting-empty">' + escapeHtml(message) + "</div>";
+    renderMeetingDetail();
+    return;
+  }
+
+  const visibleIds = new Set(state.meetings.map((meeting) => meeting.id));
+  if (!state.selectedMeetingId || !visibleIds.has(state.selectedMeetingId)) {
+    state.selectedMeetingId = state.meetings[0]?.id || null;
+  }
+
+  els.list.innerHTML = state.meetings
+    .map((meeting) => {
+      const selected = meeting.id === state.selectedMeetingId ? ' data-selected="true"' : "";
+      const tags = meeting.tags.length ? meeting.tags.map((tag) => "#" + tag).join(" ") : "untagged";
+      return [
+        '<button class="meeting-row"' + selected + ' data-meeting-id="' + escapeHtml(meeting.id) + '">',
+        '<span class="meeting-row__title">' + escapeHtml(meeting.title || meeting.id) + "</span>",
+        '<span class="meeting-row__meta">' + escapeHtml(tags) + "</span>",
+        '<span class="meeting-row__meta">' + escapeHtml(meeting.updatedAt.slice(0, 10) || "unknown") + "</span>",
+        "</button>",
+      ].join("");
+    })
+    .join("");
+}
+
+function renderMeetingDetail() {
+  if (state.detailError) {
+    els.empty.hidden = false;
+    els.empty.textContent = state.detailError;
+    els.detailMeta.innerHTML = "";
+    els.detailBody.innerHTML = "";
+    return;
+  }
+
+  const record = state.selectedMeeting;
+  if (!record) {
+    els.empty.hidden = false;
+    els.empty.textContent = "Select a meeting to inspect its notes and transcript.";
+    els.detailMeta.innerHTML = "";
+    els.detailBody.innerHTML = "";
+    return;
+  }
+
+  els.empty.hidden = true;
+  els.detailMeta.innerHTML = [
+    '<div class="detail-chip">ID: ' + escapeHtml(record.meeting.id) + "</div>",
+    '<div class="detail-chip">Source: ' + escapeHtml(record.meeting.noteContentSource) + "</div>",
+    '<div class="detail-chip">Transcript: ' + escapeHtml(String(record.meeting.transcriptSegmentCount)) + " segments</div>",
+  ].join("");
+
+  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>",
+    "</section>",
+  ].join("");
+}
+
+async function fetchJson(path, init) {
+  const response = await fetch(path, init);
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    throw new Error(payload.error || response.statusText || "Request failed");
+  }
+  return payload;
+}
+
+function buildMeetingsQuery(limit = 100) {
+  const params = new URLSearchParams();
+  params.set("limit", String(limit));
+  params.set("sort", state.sort);
+
+  if (state.search) {
+    params.set("search", state.search);
+  }
+
+  if (state.updatedFrom) {
+    params.set("updatedFrom", state.updatedFrom);
+  }
+
+  if (state.updatedTo) {
+    params.set("updatedTo", state.updatedTo);
+  }
+
+  return "?" + params.toString();
+}
+
+async function loadMeetings(options = {}) {
+  const preferredMeetingId = options.preferredMeetingId || state.selectedMeetingId;
+
+  try {
+    state.listError = "";
+    const payload = await fetchJson("/meetings" + buildMeetingsQuery());
+    state.meetings = payload.meetings || [];
+
+    if (preferredMeetingId && state.meetings.some((meeting) => meeting.id === preferredMeetingId)) {
+      state.selectedMeetingId = preferredMeetingId;
+    }
+
+    renderMeetingList();
+    if (state.selectedMeetingId) {
+      await loadMeeting(state.selectedMeetingId);
+      return;
+    }
+
+    state.detailError = "";
+    renderMeetingDetail();
+  } catch (error) {
+    state.listError = error instanceof Error ? error.message : String(error);
+    state.selectedMeeting = null;
+    state.detailError = state.listError;
+    renderMeetingList();
+    renderMeetingDetail();
+  }
+}
+
+async function loadMeeting(id) {
+  state.selectedMeetingId = id;
+  renderMeetingList();
+
+  try {
+    state.detailError = "";
+    const payload = await fetchJson("/meetings/" + encodeURIComponent(id));
+    state.selectedMeeting = payload.meeting || null;
+    renderMeetingDetail();
+  } catch (error) {
+    state.selectedMeeting = null;
+    state.detailError = error instanceof Error ? error.message : String(error);
+    renderMeetingDetail();
+  }
+}
+
+async function quickOpenMeeting() {
+  const query = els.quickOpen.value.trim();
+  if (!query) {
+    setStatus("Enter a title or id", "error");
+    return;
+  }
+
+  setStatus("Opening meeting…", "busy");
+
+  try {
+    state.quickOpen = query;
+    const payload = await fetchJson("/meetings/resolve?q=" + encodeURIComponent(query));
+    state.search = "";
+    state.updatedFrom = "";
+    state.updatedTo = "";
+    syncFilterInputs();
+    await loadMeetings({
+      preferredMeetingId: payload.document.id,
+    });
+    setStatus("Connected", "ok");
+  } catch (error) {
+    state.detailError = error instanceof Error ? error.message : String(error);
+    renderMeetingDetail();
+    setStatus("Quick open failed", "error");
+  }
+}
+
+async function refreshAll() {
+  setStatus("Refreshing…", "busy");
+  const [appState] = await Promise.all([fetchJson("/state"), loadMeetings()]);
+  state.appState = appState;
+  renderAppState();
+  setStatus("Connected", "ok");
+}
+
+async function exportNotes() {
+  setStatus("Exporting notes…", "busy");
+  await fetchJson("/exports/notes", {
+    body: JSON.stringify({ format: "markdown" }),
+    headers: { "content-type": "application/json" },
+    method: "POST",
+  });
+  await refreshAll();
+}
+
+async function exportTranscripts() {
+  setStatus("Exporting transcripts…", "busy");
+  await fetchJson("/exports/transcripts", {
+    body: JSON.stringify({ format: "text" }),
+    headers: { "content-type": "application/json" },
+    method: "POST",
+  });
+  await refreshAll();
+}
+
+els.list.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+
+  const button = event.target.closest("[data-meeting-id]");
+  if (!button) return;
+  void loadMeeting(button.dataset.meetingId);
+});
+
+els.refreshButton.addEventListener("click", () => {
+  void refreshAll();
+});
+
+els.noteButton.addEventListener("click", () => {
+  void exportNotes();
+});
+
+els.transcriptButton.addEventListener("click", () => {
+  void exportTranscripts();
+});
+
+els.search.addEventListener("input", (event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return;
+  }
+
+  state.search = event.target.value.trim();
+  void loadMeetings();
+});
+
+els.sort.addEventListener("change", (event) => {
+  if (!(event.target instanceof HTMLSelectElement)) {
+    return;
+  }
+
+  state.sort = event.target.value;
+  void loadMeetings();
+});
+
+els.updatedFrom.addEventListener("change", (event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return;
+  }
+
+  state.updatedFrom = event.target.value;
+  void loadMeetings();
+});
+
+els.updatedTo.addEventListener("change", (event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return;
+  }
+
+  state.updatedTo = event.target.value;
+  void loadMeetings();
+});
+
+els.quickOpen.addEventListener("input", (event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return;
+  }
+
+  state.quickOpen = event.target.value;
+});
+
+els.quickOpen.addEventListener("keydown", (event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return;
+  }
+
+  if (event.key === "Enter") {
+    event.preventDefault();
+    void quickOpenMeeting();
+  }
+});
+
+els.quickOpenButton.addEventListener("click", () => {
+  void quickOpenMeeting();
+});
+
+const events = new EventSource("/events");
+events.addEventListener("state.updated", (event) => {
+  const payload = JSON.parse(event.data);
+  state.appState = payload.state;
+  renderAppState();
+});
+events.addEventListener("error", () => {
+  setStatus("Disconnected", "error");
+});
+
+syncFilterInputs();
+
+void refreshAll().catch((error) => {
+  setStatus("Error", "error");
+  els.empty.hidden = false;
+  els.empty.textContent = error.message;
+});
+`}
+    <\/script>
+  </body>
+</html>`;
+}
+//#endregion
 //#region src/server/http.ts
 function parseInteger(value) {
 	if (!value?.trim()) return;
@@ -2040,6 +2922,17 @@ function parseInteger(value) {
 	if (!Number.isInteger(parsed) || parsed < 1) throw new Error("invalid limit: expected a positive integer");
 	return parsed;
 }
+function parseMeetingSort(value) {
+	switch (value) {
+		case null:
+		case "": return;
+		case "title-asc":
+		case "title-desc":
+		case "updated-asc":
+		case "updated-desc": return value;
+		default: throw new Error("invalid sort: expected updated-desc, updated-asc, title-asc, or title-desc");
+	}
+}
 function sendJson(response, body, init = {}) {
 	const payload = `${JSON.stringify(body, null, 2)}\n`;
 	response.writeHead(init.status ?? 200, {
@@ -2055,6 +2948,13 @@ function sendText(response, body, status = 200) {
 	});
 	response.end(body);
 }
+function sendHtml(response, body, status = 200) {
+	response.writeHead(status, {
+		"content-length": Buffer.byteLength(body),
+		"content-type": "text/html; charset=utf-8"
+	});
+	response.end(body);
+}
 async function readJsonBody(request) {
 	const chunks = [];
 	for await (const chunk of request) chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
@@ -2091,6 +2991,7 @@ function transcriptFormatFromBody(value) {
 	}
 }
 async function startGranolaServer(app, options = {}) {
+	const enableWebClient = options.enableWebClient ?? false;
 	const hostname = options.hostname ?? "127.0.0.1";
 	const port = options.port ?? 0;
 	const server = createServer(async (request, response) => {
@@ -2098,6 +2999,10 @@ async function startGranolaServer(app, options = {}) {
 		const url = new URL(request.url ?? "/", `http://${hostname}`);
 		const path = url.pathname;
 		try {
+			if (method === "GET" && path === "/" && enableWebClient) {
+				sendHtml(response, renderGranolaWebPage());
+				return;
+			}
 			if (method === "GET" && path === "/health") {
 				sendJson(response, {
 					ok: true,
@@ -2133,15 +3038,30 @@ async function startGranolaServer(app, options = {}) {
 			if (method === "GET" && path === "/meetings") {
 				const limit = parseInteger(url.searchParams.get("limit"));
 				const search = url.searchParams.get("search")?.trim() || void 0;
+				const sort = parseMeetingSort(url.searchParams.get("sort"));
+				const updatedFrom = url.searchParams.get("updatedFrom")?.trim() || void 0;
+				const updatedTo = url.searchParams.get("updatedTo")?.trim() || void 0;
 				sendJson(response, {
 					meetings: await app.listMeetings({
 						limit,
-						search
+						search,
+						sort,
+						updatedFrom,
+						updatedTo
 					}),
-					search
+					search,
+					sort,
+					updatedFrom,
+					updatedTo
 				});
 				return;
 			}
+			if (method === "GET" && path === "/meetings/resolve") {
+				const query = url.searchParams.get("q")?.trim();
+				if (!query) throw new Error("meeting query is required");
+				sendJson(response, await app.findMeeting(query, { requireCache: url.searchParams.get("includeTranscript") === "true" }));
+				return;
+			}
 			if (method === "GET" && path.startsWith("/meetings/")) {
 				const id = decodeURIComponent(path.slice(10));
 				if (!id) throw new Error("meeting id is required");
@@ -2212,13 +3132,6 @@ Options:
   -h, --help          Show help
 `;
 }
-function parsePort(value) {
-	if (value === void 0) return;
-	if (typeof value !== "string" || !/^\d+$/.test(value)) throw new Error("invalid port: expected a non-negative integer");
-	const port = Number(value);
-	if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error("invalid port: expected a value between 0 and 65535");
-	return port;
-}
 const serveCommand = {
 	description: "Start a local Granola API server",
 	flags: {
@@ -2240,7 +3153,7 @@ const serveCommand = {
 		debug(config.debug, "cacheFile", config.transcripts.cacheFile || "(none)");
 		debug(config.debug, "timeoutMs", config.notes.timeoutMs);
 		const server = await startGranolaServer(await createGranolaApp(config, { surface: "server" }), {
-			hostname: typeof commandFlags.hostname === "string" && commandFlags.hostname.trim() ? commandFlags.hostname.trim() : "127.0.0.1",
+			hostname: pickHostname(commandFlags.hostname),
 			port: parsePort(commandFlags.port)
 		});
 		console.log(`Granola server listening on ${server.url.href}`);
@@ -2252,26 +3165,7 @@ const serveCommand = {
 		console.log("  GET  /meetings/:id");
 		console.log("  POST /exports/notes");
 		console.log("  POST /exports/transcripts");
-		await new Promise((resolve, reject) => {
-			let closing = false;
-			const close = async () => {
-				if (closing) return;
-				closing = true;
-				process.off("SIGINT", handleSignal);
-				process.off("SIGTERM", handleSignal);
-				try {
-					await server.close();
-					resolve();
-				} catch (error) {
-					reject(error);
-				}
-			};
-			const handleSignal = () => {
-				close();
-			};
-			process.on("SIGINT", handleSignal);
-			process.on("SIGTERM", handleSignal);
-		});
+		await waitForShutdown(async () => await server.close());
 		return 0;
 	}
 };
@@ -2331,13 +3225,115 @@ function resolveTranscriptFormat(value) {
 	}
 }
 //#endregion
+//#region src/browser.ts
+const execFileAsync = promisify(execFile);
+function getBrowserOpenCommand(url, platform = process.platform) {
+	const href = String(url);
+	switch (platform) {
+		case "darwin": return {
+			args: [href],
+			file: "open"
+		};
+		case "win32": return {
+			args: [
+				"/c",
+				"start",
+				"",
+				href
+			],
+			file: "cmd"
+		};
+		default: return {
+			args: [href],
+			file: "xdg-open"
+		};
+	}
+}
+async function openExternalUrl(url, options = {}) {
+	const command = getBrowserOpenCommand(url, options.platform);
+	await (options.run ?? (async (file, args) => {
+		await execFileAsync(file, args);
+	}))(command.file, command.args);
+}
+//#endregion
+//#region src/commands/web.ts
+function webHelp() {
+	return `Granola web
+
+Usage:
+  granola web [options]
+
+Options:
+  --hostname <value>      Hostname to bind (default: 127.0.0.1)
+  --port <value>          Port to bind (default: 0 for any available port)
+  --cache <path>          Path to Granola cache JSON
+  --timeout <value>       Request timeout, e.g. 2m, 30s, 120000 (default: 2m)
+  --supabase <path>       Path to supabase.json
+  --open[=true|false]     Open the browser automatically (default: true)
+  --debug                 Enable debug logging
+  --config <path>         Path to .granola.toml
+  -h, --help              Show help
+`;
+}
+//#endregion
 //#region src/commands/index.ts
 const commands = [
 	authCommand,
 	meetingCommand,
 	notesCommand,
 	serveCommand,
-	transcriptsCommand
+	transcriptsCommand,
+	{
+		description: "Start the Granola Toolkit web workspace",
+		flags: {
+			cache: { type: "string" },
+			help: { type: "boolean" },
+			hostname: { type: "string" },
+			open: { type: "boolean" },
+			port: { type: "string" },
+			timeout: { type: "string" }
+		},
+		help: webHelp,
+		name: "web",
+		async run({ commandFlags, globalFlags }) {
+			const config = await loadConfig({
+				globalFlags,
+				subcommandFlags: commandFlags
+			});
+			debug(config.debug, "using config", config.configFileUsed ?? "(none)");
+			debug(config.debug, "supabase", config.supabase);
+			debug(config.debug, "cacheFile", config.transcripts.cacheFile || "(none)");
+			debug(config.debug, "timeoutMs", config.notes.timeoutMs);
+			const app = await createGranolaApp(config, { surface: "web" });
+			const hostname = pickHostname(commandFlags.hostname);
+			const port = parsePort(commandFlags.port);
+			const openBrowser = commandFlags.open !== false;
+			const server = await startGranolaServer(app, {
+				enableWebClient: true,
+				hostname,
+				port
+			});
+			console.log(`Granola Toolkit web workspace listening on ${server.url.href}`);
+			console.log("Routes:");
+			console.log("  GET  /");
+			console.log("  GET  /health");
+			console.log("  GET  /state");
+			console.log("  GET  /events");
+			console.log("  GET  /meetings");
+			console.log("  GET  /meetings/:id");
+			console.log("  POST /exports/notes");
+			console.log("  POST /exports/transcripts");
+			if (openBrowser) try {
+				await openExternalUrl(server.url);
+			} catch (error) {
+				const message = error instanceof Error ? error.message : String(error);
+				console.error(`failed to open browser automatically: ${message}`);
+				console.error(`open ${server.url.href} manually`);
+			}
+			await waitForShutdown(async () => await server.close());
+			return 0;
+		}
+	}
 ];
 const commandMap = new Map(commands.map((command) => [command.name, command]));
 //#endregion

package/package.json

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