granola-toolkit 0.38.0 → 0.40.0

package/dist/cli.js

@@ -5115,1757 +5115,3105 @@ async function openExternalUrl(url, options = {}) {
 	}))(command.file, command.args);
 }
 //#endregion
-//#region src/web/client-state.ts
-function parseWorkspaceTab(value) {
-	switch (value) {
-		case "metadata":
-		case "raw":
-		case "transcript": return value;
-		default: return "notes";
-	}
-}
-function startupSelectionFromSearch(search) {
-	const params = new URLSearchParams(search);
-	return {
-		folderId: params.get("folder")?.trim() || "",
-		meetingId: params.get("meeting")?.trim() || "",
-		workspaceTab: parseWorkspaceTab(params.get("tab"))
-	};
-}
-function buildBrowserUrlPath(currentHref, selection) {
-	const url = new URL(currentHref);
-	if (selection.selectedFolderId) url.searchParams.set("folder", selection.selectedFolderId);
-	else url.searchParams.delete("folder");
-	if (selection.selectedMeetingId) url.searchParams.set("meeting", selection.selectedMeetingId);
-	else url.searchParams.delete("meeting");
-	if (parseWorkspaceTab(selection.workspaceTab) !== "notes") url.searchParams.set("tab", parseWorkspaceTab(selection.workspaceTab));
-	else url.searchParams.delete("tab");
-	return `${url.pathname}${url.search}${url.hash}`;
-}
-function exportScopeLabel(scope) {
-	return scope && scope.mode === "folder" ? `Folder: ${scope.folderName || scope.folderId}` : "Scope: All meetings";
-}
-function currentFilterSummary(filters) {
-	const parts = [];
-	if (filters.selectedFolderId) {
-		const folder = filters.folders.find((candidate) => candidate.id === filters.selectedFolderId);
-		parts.push(`folder "${folder ? folder.name : filters.selectedFolderId}"`);
-	}
-	if (filters.search) parts.push(`search "${filters.search}"`);
-	if (filters.updatedFrom) parts.push(`from ${filters.updatedFrom}`);
-	if (filters.updatedTo) parts.push(`to ${filters.updatedTo}`);
-	return parts.join(", ");
-}
-function selectMeetingId(meetings, selectedMeetingId) {
-	if (selectedMeetingId && meetings.some((meeting) => meeting.id === selectedMeetingId)) return selectedMeetingId;
-	return meetings[0]?.id ?? null;
-}
-function buildMeetingsQuery(filters, options = {}) {
-	const params = new URLSearchParams();
-	params.set("limit", String(options.limit ?? 100));
-	params.set("sort", filters.sort || "updated-desc");
-	if (filters.search) params.set("search", filters.search);
-	if (filters.updatedFrom) params.set("updatedFrom", filters.updatedFrom);
-	if (filters.updatedTo) params.set("updatedTo", filters.updatedTo);
-	if (filters.selectedFolderId) params.set("folderId", filters.selectedFolderId);
-	if (options.refresh) params.set("refresh", "true");
-	return `?${params.toString()}`;
-}
-function buildNotesExportRequest(selectedFolderId) {
-	return {
-		folderId: selectedFolderId || void 0,
-		format: "markdown"
-	};
-}
-function buildTranscriptsExportRequest(selectedFolderId) {
-	return {
-		folderId: selectedFolderId || void 0,
-		format: "text"
-	};
-}
-function nextWorkspaceTab(currentTab, key) {
-	const current = parseWorkspaceTab(currentTab);
-	switch (key) {
-		case "1": return "notes";
-		case "2": return "transcript";
-		case "3": return "metadata";
-		case "4": return "raw";
-		case "]":
-			switch (current) {
-				case "notes": return "transcript";
-				case "transcript": return "metadata";
-				case "metadata": return "raw";
-				case "raw": return "notes";
-			}
-			break;
-		case "[":
-			switch (current) {
-				case "notes": return "raw";
-				case "transcript": return "notes";
-				case "metadata": return "transcript";
-				case "raw": return "metadata";
-			}
-			break;
-		default: return;
-	}
+//#region src/web/generated.ts
+const granolaWebClientCss = 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;
 }
-//#endregion
-//#region src/web/client-script.ts
-const granolaWebClientScript = String.raw`
-const serverConfig = window.__GRANOLA_SERVER__ || { passwordRequired: false };
-const workspaceTabs = ["notes", "transcript", "metadata", "raw"];
-${parseWorkspaceTab.toString()}
-${startupSelectionFromSearch.toString()}
-${buildBrowserUrlPath.toString()}
-${exportScopeLabel.toString()}
-${currentFilterSummary.toString()}
-${selectMeetingId.toString()}
-${buildMeetingsQuery.toString()}
-${buildNotesExportRequest.toString()}
-${buildTranscriptsExportRequest.toString()}
-${nextWorkspaceTab.toString()}
-
-const state = {
-  appState: null,
-  detailError: "",
-  folderError: "",
-  folders: [],
-  listError: "",
-  meetings: [],
-  quickOpen: "",
-  search: "",
-  selectedFolderId: null,
-  selectedMeeting: null,
-  selectedMeetingBundle: null,
-  selectedMeetingId: null,
-  meetingSource: "live",
-  serverLocked: Boolean(serverConfig.passwordRequired),
-  sort: "updated-desc",
-  updatedFrom: "",
-  updatedTo: "",
-  workspaceTab: "notes",
-};
-
-const els = {
-  appState: document.querySelector("[data-app-state]"),
-  authPanel: document.querySelector("[data-auth-panel]"),
-  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]"),
-  quickOpen: document.querySelector("[data-quick-open]"),
-  quickOpenButton: document.querySelector("[data-quick-open-button]"),
-  refreshButton: document.querySelector("[data-refresh]"),
-  search: document.querySelector("[data-search]"),
-  securityPanel: document.querySelector("[data-security-panel]"),
-  serverPassword: document.querySelector("[data-server-password]"),
-  lockServerButton: document.querySelector("[data-lock-server]"),
-  sort: document.querySelector("[data-sort]"),
-  stateBadge: document.querySelector("[data-state-badge]"),
-  transcriptButton: document.querySelector("[data-export-transcripts]"),
-  unlockServerButton: document.querySelector("[data-unlock-server]"),
-  updatedFrom: document.querySelector("[data-updated-from]"),
-  updatedTo: document.querySelector("[data-updated-to]"),
-  workspaceTabs: document.querySelectorAll("[data-workspace-tab]"),
-};
 
-function syncBrowserUrl() {
-  const nextPath = buildBrowserUrlPath(window.location.href, {
-    selectedFolderId: state.selectedFolderId,
-    selectedMeetingId: state.selectedMeetingId,
-    workspaceTab: state.workspaceTab,
-  });
-  const currentPath = window.location.pathname + window.location.search + window.location.hash;
-  if (nextPath !== currentPath) {
-    history.replaceState(null, "", nextPath);
-  }
+* {
+  box-sizing: border-box;
 }
 
-function escapeHtml(value) {
-  return value
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
+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%);
 }
 
-function setStatus(label, tone = "idle") {
-  els.stateBadge.textContent = label;
-  els.stateBadge.dataset.tone = tone;
+button,
+input,
+select {
+  font: inherit;
 }
 
-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;
+#granola-web-root {
+  min-height: 100vh;
 }
 
-function renderWorkspaceTabs() {
-  for (const button of els.workspaceTabs) {
-    button.dataset.selected = button.dataset.workspaceTab === state.workspaceTab ? "true" : "false";
-  }
+.shell {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 18px;
+  min-height: 100vh;
+  padding: 24px;
 }
 
-function renderAppState() {
-  if (!state.appState) {
-    els.appState.innerHTML = "<p>Waiting for server state…</p>";
-    els.authPanel.innerHTML = "<p>Waiting for auth state…</p>";
-    renderSecurityPanel();
-    return;
-  }
-
-  const appState = state.appState;
-  const authMode =
-    appState.auth.mode === "api-key"
-      ? "API key"
-      : 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";
-  const indexStatus = appState.index.loaded
-    ? appState.index.meetingCount + " meetings"
-    : appState.index.available
-      ? "available"
-      : "not built";
-  const folderStatus = appState.folders.loaded
-    ? appState.folders.count + " folders"
-    : "not loaded";
-  const syncStatus = appState.sync.running
-    ? "running"
-    : appState.sync.lastError
-      ? "error"
-      : appState.sync.lastCompletedAt
-        ? "last " + appState.sync.lastCompletedAt.slice(11, 19)
-        : "idle";
-
-  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">Sync</span><strong>' + escapeHtml(syncStatus) + "</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>",
-  ].join("");
-
-  renderSecurityPanel();
-  renderAuthPanel();
-  renderExportJobs();
+.pane {
+  background: var(--panel);
+  backdrop-filter: blur(18px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
 }
 
-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("");
+.sidebar {
+  display: grid;
+  grid-template-rows: auto auto auto 1fr;
+  overflow: hidden;
 }
 
-function renderSecurityPanel() {
-  els.securityPanel.hidden = !state.serverLocked;
+.hero,
+.toolbar,
+.detail-head,
+.folder-panel {
+  padding: 22px 24px;
+  border-bottom: 1px solid var(--line);
 }
 
-function authActionButton(label, action, disabled) {
-  return (
-    '<button class="button button--secondary" data-auth-action="' +
-    escapeHtml(action) +
-    '"' +
-    (disabled ? " disabled" : "") +
-    ">" +
-    escapeHtml(label) +
-    "</button>"
-  );
+.hero h1 {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: clamp(2rem, 3vw, 2.8rem);
+  font-weight: 600;
+  letter-spacing: -0.04em;
 }
 
-function authModeButton(label, mode, disabled) {
-  return (
-    '<button class="button button--secondary" data-auth-mode="' +
-    escapeHtml(mode) +
-    '"' +
-    (disabled ? " disabled" : "") +
-    ">" +
-    escapeHtml(label) +
-    "</button>"
-  );
+.hero p,
+.toolbar p {
+  margin: 8px 0 0;
+  color: var(--muted);
+  line-height: 1.5;
 }
 
-function renderAuthPanel() {
-  const auth = state.appState?.auth;
-  if (!auth) {
-    els.authPanel.innerHTML = '<div class="auth-card"><div class="auth-card__meta">Auth state unavailable.</div></div>';
-    return;
-  }
-
-  const activeSource =
-    auth.mode === "api-key"
-      ? "API key"
-      : auth.mode === "stored-session"
-        ? "Stored session"
-        : "supabase.json";
-  const lastError = auth.lastError
-    ? '<div class="auth-card__meta auth-card__error">' + escapeHtml(auth.lastError) + "</div>"
-    : "";
-
-  els.authPanel.innerHTML = [
-    '<div class="auth-card">',
-    '<div class="status-grid">',
-    '<div><span class="status-label">Active</span><strong>' + escapeHtml(activeSource) + "</strong></div>",
-    '<div><span class="status-label">API key</span><strong>' + escapeHtml(auth.apiKeyAvailable ? "available" : "missing") + "</strong></div>",
-    '<div><span class="status-label">Stored</span><strong>' + escapeHtml(auth.storedSessionAvailable ? "available" : "missing") + "</strong></div>",
-    '<div><span class="status-label">supabase.json</span><strong>' + escapeHtml(auth.supabaseAvailable ? "available" : "missing") + "</strong></div>",
-    '<div><span class="status-label">Refresh</span><strong>' + escapeHtml(auth.refreshAvailable ? "available" : "missing") + "</strong></div>",
-    "</div>",
-    auth.clientId
-      ? '<div class="auth-card__meta">Client ID: ' + escapeHtml(auth.clientId) + "</div>"
-      : "",
-    auth.signInMethod
-      ? '<div class="auth-card__meta">Sign-in method: ' + escapeHtml(auth.signInMethod) + "</div>"
-      : "",
-    auth.supabasePath
-      ? '<div class="auth-card__meta">supabase path: ' + escapeHtml(auth.supabasePath) + "</div>"
-      : "",
-    lastError,
-    '<div class="auth-card__meta">Store a Granola Personal API key here or use <code>granola auth login --api-key &lt;token&gt;</code>.</div>',
-    '<div class="auth-card__actions">',
-    '<input class="input" type="password" placeholder="grn_..." data-auth-api-key />',
-    authActionButton("Save API key", "login-api-key", false),
-    authActionButton("Import desktop session", "login", !auth.supabaseAvailable),
-    authActionButton("Refresh stored session", "refresh", !auth.storedSessionAvailable || !auth.refreshAvailable),
-    authModeButton("Use API key", "api-key", !auth.apiKeyAvailable || auth.mode === "api-key"),
-    authModeButton("Use stored session", "stored-session", !auth.storedSessionAvailable || auth.mode === "stored-session"),
-    authModeButton("Use supabase.json", "supabase-file", !auth.supabaseAvailable || auth.mode === "supabase-file"),
-    authActionButton("Sign out", "logout", !auth.apiKeyAvailable && !auth.storedSessionAvailable),
-    "</div>",
-    "</div>",
-  ].join("");
+.search,
+.select,
+.field-input,
+.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);
 }
 
-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;
-    state.selectedMeetingBundle = null;
-    syncBrowserUrl();
-    const filterSummary = currentFilterSummary({
-      folders: state.folders,
-      search: state.search,
-      selectedFolderId: state.selectedFolderId,
-      updatedFrom: state.updatedFrom,
-      updatedTo: state.updatedTo,
-    });
-    const message = filterSummary
-      ? "No meetings match " + filterSummary + "."
-      : "No meetings yet. Try Sync now.";
-    els.list.innerHTML = '<div class="meeting-empty">' + escapeHtml(message) + "</div>";
-    renderMeetingDetail();
-    return;
-  }
-
-  state.selectedMeetingId = selectMeetingId(state.meetings, state.selectedMeetingId);
-  syncBrowserUrl();
-
-  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("");
+.field-row {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
 }
 
-function renderMeetingDetail() {
-  renderWorkspaceTabs();
-
-  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("");
-
-  const bundle = state.selectedMeetingBundle;
-  const metadataLines = [
-    "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");
-
-  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 = [
-    '<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("");
+.field-row--inline {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-function renderExportJobs() {
-  const jobs = state.appState?.exports?.jobs || [];
-  if (jobs.length === 0) {
-    els.jobsList.innerHTML = '<div class="job-empty">No export jobs yet.</div>';
-    return;
-  }
-
-  els.jobsList.innerHTML = jobs
-    .slice(0, 6)
-    .map((job) => {
-      const progress = job.itemCount > 0
-        ? job.completedCount + "/" + job.itemCount + " items"
-        : "0 items";
-      const error = job.error ? '<div class="job-card__meta">' + escapeHtml(job.error) + "</div>" : "";
-      const rerunButton =
-        job.status === "running"
-          ? ""
-          : '<button class="button button--secondary" data-rerun-job-id="' + escapeHtml(job.id) + '">Rerun</button>';
-
-      return [
-        '<article class="job-card">',
-        '<div class="job-card__head">',
-        '<div>',
-        '<div class="job-card__title">' + escapeHtml(job.kind) + " export</div>",
-        '<div class="job-card__meta">' + escapeHtml(job.id) + "</div>",
-        "</div>",
-        '<div class="job-card__status" data-status="' + escapeHtml(job.status) + '">' + escapeHtml(job.status) + "</div>",
-        "</div>",
-        '<div class="job-card__meta">Format: ' + escapeHtml(job.format) + " • " + escapeHtml(exportScopeLabel(job.scope)) + " • " + escapeHtml(progress) + " • Written: " + escapeHtml(String(job.written)) + "</div>",
-        '<div class="job-card__meta">Started: ' + escapeHtml(job.startedAt.slice(0, 19)) + "</div>",
-        '<div class="job-card__meta">Output: ' + escapeHtml(job.outputDir) + "</div>",
-        error,
-        '<div class="job-card__actions">' + rerunButton + "</div>",
-        "</article>",
-      ].join("");
-    })
-    .join("");
+.field-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-async function fetchJson(path, init) {
-  const response = await fetch(path, init);
-  const payload = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    if (payload.authRequired) {
-      state.serverLocked = true;
-      renderSecurityPanel();
-    }
-
-    const error = new Error(payload.error || response.statusText || "Request failed");
-    error.authRequired = Boolean(payload.authRequired);
-    throw error;
-  }
-  return payload;
+.folder-panel {
+  display: grid;
+  gap: 14px;
 }
 
-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();
+.folder-panel__head h2 {
+  margin: 0;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-async function loadMeetings(options = {}) {
-  const preferredMeetingId = options.preferredMeetingId || state.selectedMeetingId;
-  const refresh = options.refresh === true;
-
-  try {
-    state.listError = "";
-    const payload = await fetchJson(
-      "/meetings" +
-        buildMeetingsQuery(
-          {
-            search: state.search,
-            selectedFolderId: state.selectedFolderId,
-            sort: state.sort,
-            updatedFrom: state.updatedFrom,
-            updatedTo: state.updatedTo,
-          },
-          {
-            limit: 100,
-            refresh,
-          },
-        ),
-    );
-    state.meetings = payload.meetings || [];
-    state.meetingSource = payload.source || "live";
-
-    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.selectedMeetingBundle = null;
-    state.detailError = state.listError;
-    renderMeetingList();
-    renderMeetingDetail();
-  }
+.folder-panel__head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
 }
 
-async function loadMeeting(id) {
-  state.selectedMeetingId = id;
-  syncBrowserUrl();
-  renderMeetingList();
-
-  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();
-  }
+.folder-list,
+.jobs-list {
+  display: grid;
+  gap: 10px;
 }
 
-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.selectedFolderId = payload.meeting?.meeting?.folders?.[0]?.id || null;
-    state.search = "";
-    state.updatedFrom = "";
-    state.updatedTo = "";
-    syncFilterInputs();
-    renderFolderList();
-    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");
-  }
+.folder-row,
+.meeting-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;
 }
 
-async function refreshAll(forceLiveMeetings = false) {
-  setStatus(forceLiveMeetings ? "Syncing…" : "Refreshing…", "busy");
-  try {
-    if (forceLiveMeetings) {
-      await fetchJson("/sync", {
-        body: JSON.stringify({ forceRefresh: true }),
-        headers: { "content-type": "application/json" },
-        method: "POST",
-      });
-    }
-
-    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,
-      auth: authState,
-    };
-    renderAppState();
-    setStatus(
-      forceLiveMeetings
-        ? "Sync complete"
-        : state.meetingSource === "index"
-          ? "Loaded from index"
-          : "Connected",
-      "ok",
-    );
-  } catch (error) {
-    if (error.authRequired) {
-      setStatus("Server locked", "error");
-      renderSecurityPanel();
-      return;
-    }
+.meeting-row {
+  margin: 0 0 10px;
+  padding: 14px 16px;
+  border-radius: 18px;
+}
 
-    throw error;
-  }
+.folder-row:hover,
+.folder-row[data-selected="true"] {
+  transform: translateY(-1px);
+  border-color: rgba(163, 79, 47, 0.26);
+  background: var(--panel-strong);
 }
 
-async function syncAuthState() {
-  const [appState, authState] = await Promise.all([fetchJson("/state"), fetchJson("/auth/status")]);
-  state.appState = {
-    ...appState,
-    auth: authState,
-  };
-  renderAppState();
+.meeting-row:hover,
+.meeting-row[data-selected="true"] {
+  transform: translateY(-1px);
+  border-color: rgba(13, 106, 109, 0.25);
+  background: var(--panel-strong);
 }
 
-async function exportNotes() {
-  setStatus(state.selectedFolderId ? "Exporting folder notes…" : "Exporting notes…", "busy");
-  await fetchJson("/exports/notes", {
-    body: JSON.stringify(buildNotesExportRequest(state.selectedFolderId)),
-    headers: { "content-type": "application/json" },
-    method: "POST",
-  });
-  await refreshAll();
+.folder-row__title,
+.job-card__title {
+  font-weight: 700;
 }
 
-async function exportTranscripts() {
-  setStatus(
-    state.selectedFolderId ? "Exporting folder transcripts…" : "Exporting transcripts…",
-    "busy",
-  );
-  await fetchJson("/exports/transcripts", {
-    body: JSON.stringify(buildTranscriptsExportRequest(state.selectedFolderId)),
-    headers: { "content-type": "application/json" },
-    method: "POST",
-  });
-  await refreshAll();
+.meeting-row__title {
+  font-weight: 600;
 }
 
-async function rerunJob(id) {
-  setStatus("Rerunning export…", "busy");
-  try {
-    await fetchJson("/exports/jobs/" + encodeURIComponent(id) + "/rerun", {
-      method: "POST",
-    });
-    await refreshAll();
-  } catch (error) {
-    setStatus("Rerun failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.folder-row__meta,
+.meeting-row__meta,
+.auth-card__meta,
+.job-card__meta,
+.folder-empty,
+.job-empty,
+.meeting-empty {
+  color: var(--muted);
+  font-size: 0.9rem;
 }
 
-async function loginAuth(apiKey) {
-  setStatus(apiKey ? "Saving API key…" : "Importing desktop session…", "busy");
-  try {
-    const body = apiKey ? { apiKey } : undefined;
-    await fetchJson("/auth/login", {
-      body: body ? JSON.stringify(body) : undefined,
-      headers: body ? { "content-type": "application/json" } : undefined,
-      method: "POST",
-    });
-    await refreshAll();
-  } catch (error) {
-    await syncAuthState();
-    setStatus(apiKey ? "API key save failed" : "Auth import failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.folder-empty--error,
+.meeting-empty--error,
+.auth-card__error {
+  color: var(--error);
 }
 
-async function logoutAuth() {
-  setStatus("Signing out…", "busy");
-  try {
-    await fetchJson("/auth/logout", { method: "POST" });
-    await refreshAll();
-  } catch (error) {
-    await syncAuthState();
-    setStatus("Sign out failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.meeting-list {
+  padding: 14px;
+  overflow: auto;
 }
 
-async function refreshAuth() {
-  setStatus("Refreshing session…", "busy");
-  try {
-    await fetchJson("/auth/refresh", { method: "POST" });
-    await refreshAll();
-  } catch (error) {
-    await syncAuthState();
-    setStatus("Refresh failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.detail {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  min-width: 0;
 }
 
-async function switchAuthMode(mode) {
-  setStatus("Switching auth source…", "busy");
-  try {
-    await fetchJson("/auth/mode", {
-      body: JSON.stringify({ mode }),
-      headers: { "content-type": "application/json" },
-      method: "POST",
-    });
-    await refreshAll();
-  } catch (error) {
-    await syncAuthState();
-    setStatus("Switch failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
 }
 
-async function unlockServer() {
-  const password = els.serverPassword.value;
-  if (!password.trim()) {
-    setStatus("Enter the server password", "error");
-    return;
-  }
-
-  setStatus("Unlocking server…", "busy");
-  try {
-    await fetchJson("/auth/unlock", {
-      body: JSON.stringify({ password }),
-      headers: { "content-type": "application/json" },
-      method: "POST",
-    });
-    els.serverPassword.value = "";
-    state.serverLocked = false;
-    await refreshAll(true);
-  } catch (error) {
-    setStatus("Unlock failed", "error");
-    state.detailError = error instanceof Error ? error.message : String(error);
-    renderMeetingDetail();
-  }
+.detail-head h2 {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
+  font-weight: 600;
 }
 
-async function lockServer() {
-  try {
-    await fetchJson("/auth/lock", {
-      method: "POST",
-    });
-  } catch {}
-
-  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");
+.state-badge {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 0.92rem;
+  font-weight: 700;
 }
 
-els.folderList.addEventListener("click", (event) => {
-  if (!(event.target instanceof Element)) {
-    return;
-  }
+.state-badge[data-tone="busy"] {
+  background: rgba(163, 79, 47, 0.12);
+  color: var(--warm);
+}
 
-  const button = event.target.closest("[data-folder-id]");
-  if (!button) {
-    return;
-  }
+.state-badge[data-tone="error"] {
+  background: rgba(157, 44, 44, 0.12);
+  color: var(--error);
+}
 
-  const nextFolderId = button.dataset.folderId || null;
-  state.selectedFolderId = nextFolderId;
-  state.selectedMeetingId = null;
-  state.selectedMeeting = null;
-  state.selectedMeetingBundle = null;
-  renderFolderList();
-  void loadMeetings();
-});
+.state-badge[data-tone="ok"] {
+  background: rgba(36, 107, 79, 0.12);
+  color: var(--ok);
+}
 
-els.list.addEventListener("click", (event) => {
-  if (!(event.target instanceof Element)) {
-    return;
-  }
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
 
-  const button = event.target.closest("[data-meeting-id]");
-  if (!button) return;
-  void loadMeeting(button.dataset.meetingId);
-});
+.toolbar-actions,
+.auth-card__actions,
+.job-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
 
-els.jobsList.addEventListener("click", (event) => {
-  if (!(event.target instanceof Element)) {
-    return;
-  }
+.toolbar-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  width: min(440px, 100%);
+}
 
-  const button = event.target.closest("[data-rerun-job-id]");
-  if (!button) {
-    return;
-  }
+.security-panel,
+.auth-panel,
+.jobs-panel {
+  padding: 0 24px 18px;
+}
 
-  void rerunJob(button.dataset.rerunJobId);
-});
+.security-panel__head h3,
+.auth-panel__head h3,
+.jobs-panel__head h3 {
+  margin: 0;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
 
-els.authPanel.addEventListener("click", (event) => {
-  if (!(event.target instanceof Element)) {
-    return;
-  }
+.security-panel__head p,
+.auth-panel__head p,
+.jobs-panel__head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
 
-  const actionButton = event.target.closest("[data-auth-action]");
-  if (actionButton) {
-    switch (actionButton.dataset.authAction) {
-      case "login-api-key": {
-        const apiKeyInput = els.authPanel.querySelector("[data-auth-api-key]");
-        const apiKey =
-          apiKeyInput && "value" in apiKeyInput ? String(apiKeyInput.value || "").trim() : "";
-        if (!apiKey) {
-          setStatus("Enter a Granola API key", "error");
-          return;
-        }
-        void loginAuth(apiKey);
-        return;
-      }
-      case "login":
-        void loginAuth();
-        return;
-      case "logout":
-        void logoutAuth();
-        return;
-      case "refresh":
-        void refreshAuth();
-        return;
-      default:
-        return;
-    }
-  }
+.security-panel__body,
+.auth-panel__body {
+  display: grid;
+  gap: 12px;
+  margin-top: 14px;
+}
 
-  const modeButton = event.target.closest("[data-auth-mode]");
-  if (!modeButton) {
-    return;
-  }
+.auth-card,
+.job-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.72);
+}
 
-  void switchAuthMode(modeButton.dataset.authMode);
-});
+.job-card__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
 
-els.unlockServerButton.addEventListener("click", () => {
-  void unlockServer();
-});
+.job-card__status {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
 
-els.lockServerButton.addEventListener("click", () => {
-  void lockServer();
-});
+.job-card__status[data-status="running"] {
+  background: rgba(163, 79, 47, 0.12);
+  color: var(--warm);
+}
 
-els.serverPassword.addEventListener("keydown", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.job-card__status[data-status="failed"] {
+  background: rgba(157, 44, 44, 0.12);
+  color: var(--error);
+}
 
-  if (event.key === "Enter") {
-    event.preventDefault();
-    void unlockServer();
-  }
-});
+.job-card__status[data-status="completed"] {
+  background: rgba(36, 107, 79, 0.12);
+  color: var(--ok);
+}
 
-els.refreshButton.addEventListener("click", () => {
-  void refreshAll(true);
-});
+.workspace-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 0 24px 18px;
+}
 
-els.noteButton.addEventListener("click", () => {
-  void exportNotes();
-});
+.workspace-tab,
+.button {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--ink);
+  cursor: pointer;
+  font-weight: 700;
+}
 
-els.transcriptButton.addEventListener("click", () => {
-  void exportTranscripts();
-});
+.button {
+  padding: 12px 16px;
+}
 
-els.search.addEventListener("input", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.workspace-tab[data-selected="true"],
+.button--primary {
+  background: var(--ink);
+  color: #fff;
+  border-color: var(--ink);
+}
 
-  state.search = event.target.value.trim();
-  void loadMeetings();
-});
+.button--secondary {
+  background: rgba(255, 255, 255, 0.72);
+}
 
-els.sort.addEventListener("change", (event) => {
-  if (!(event.target instanceof HTMLSelectElement)) {
-    return;
-  }
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
 
-  state.sort = event.target.value;
-  void loadMeetings();
-});
+.workspace-hint {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 0.86rem;
+}
 
-els.updatedFrom.addEventListener("change", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 14px;
+}
 
-  state.updatedFrom = event.target.value;
-  void loadMeetings();
-});
+.status-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
 
-els.updatedTo.addEventListener("change", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 24px 18px;
+}
 
-  state.updatedTo = event.target.value;
-  void loadMeetings();
-});
+.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;
+}
 
-els.quickOpen.addEventListener("input", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.detail-body {
+  padding: 0 24px 24px;
+  overflow: auto;
+}
 
-  state.quickOpen = event.target.value;
-});
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
+  gap: 18px;
+}
 
-els.quickOpen.addEventListener("keydown", (event) => {
-  if (!(event.target instanceof HTMLInputElement)) {
-    return;
-  }
+.detail-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+}
 
-  if (event.key === "Enter") {
-    event.preventDefault();
-    void quickOpenMeeting();
-  }
-});
+.detail-section h2 {
+  margin: 0 0 14px;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
 
-els.quickOpenButton.addEventListener("click", () => {
-  void quickOpenMeeting();
-});
+.detail-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--mono);
+  line-height: 1.55;
+}
 
-els.workspaceTabs.forEach((button) => {
-  button.addEventListener("click", () => {
-    state.workspaceTab = button.dataset.workspaceTab || "notes";
-    syncBrowserUrl();
-    renderMeetingDetail();
-  });
-});
+.empty {
+  margin: 24px;
+  padding: 24px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--muted);
+}
 
-document.addEventListener("keydown", (event) => {
-  if (
-    event.target instanceof HTMLInputElement ||
-    event.target instanceof HTMLSelectElement ||
-    event.target instanceof HTMLTextAreaElement
-  ) {
-    return;
-  }
-
-  const nextTab = nextWorkspaceTab(state.workspaceTab, event.key);
-  if (nextTab) {
-    state.workspaceTab = nextTab;
-    syncBrowserUrl();
-    renderMeetingDetail();
-  }
-});
-
-const initialSelection = startupSelectionFromSearch(window.location.search);
-state.selectedFolderId = initialSelection.folderId || null;
-state.selectedMeetingId = initialSelection.meetingId || null;
-state.workspaceTab = initialSelection.workspaceTab;
-
-const events = new EventSource("/events");
-events.addEventListener("state.updated", (event) => {
-  const previousLoadedAt = state.appState?.documents?.loadedAt;
-  const payload = JSON.parse(event.data);
-  state.appState = payload.state;
-  renderAppState();
-
-  if (
-    state.meetingSource === "index" &&
-    payload.state.documents?.loadedAt &&
-    payload.state.documents.loadedAt !== previousLoadedAt
-  ) {
-    void (async () => {
-      await loadFolders();
-      await loadMeetings({
-        preferredMeetingId: state.selectedMeetingId,
-      });
-    })();
+@media (max-width: 1024px) {
+  .shell,
+  .workspace-grid {
+    grid-template-columns: 1fr;
   }
-});
-events.addEventListener("error", () => {
-  setStatus("Disconnected", "error");
-});
-
-syncFilterInputs();
-renderSecurityPanel();
-renderFolderList();
-
-void refreshAll().catch((error) => {
-  setStatus("Error", "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 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>
-          <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="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>
-      </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>Sync now</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>
-    <section class="security-panel" data-security-panel hidden>
-      <div class="security-panel__head">
-        <h3>Server Access</h3>
-        <p>This server is locked with a password. Unlock it to load meetings and live state.</p>
-      </div>
-      <div class="security-panel__body">
-        <input class="field-input" data-server-password type="password" placeholder="Server password" />
-        <div class="toolbar-actions">
-          <button class="button button--primary" data-unlock-server>Unlock</button>
-          <button class="button button--secondary" data-lock-server>Lock</button>
-        </div>
-      </div>
-    </section>
-    <section class="auth-panel">
-      <div class="auth-panel__head">
-        <h3>Auth Session</h3>
-        <p>Inspect, refresh, and switch between stored session and <code>supabase.json</code>.</p>
-      </div>
-      <div class="auth-panel__body" data-auth-panel></div>
-    </section>
-    <section class="jobs-panel">
-      <div class="jobs-panel__head">
-        <h3>Recent Export Jobs</h3>
-        <p>Tracked across CLI and web runs.</p>
-      </div>
-      <div class="jobs-list" data-jobs-list></div>
-    </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 auto 1fr;
-  overflow: hidden;
 }
-
-.hero, .toolbar, .detail-head, .folder-panel {
-  padding: 22px 24px;
-  border-bottom: 1px solid var(--line);
+/*$vite$:1*/`;
+const granolaWebClientJs = String.raw`//#region node_modules/solid-js/dist/solid.js
+var sharedConfig = {
+	context: void 0,
+	registry: void 0,
+	effects: void 0,
+	done: false,
+	getContextId() {
+		return getContextId(this.context.count);
+	},
+	getNextContextId() {
+		return getContextId(this.context.count++);
+	}
+};
+function getContextId(count) {
+	const num = String(count), len = num.length - 1;
+	return sharedConfig.context.id + (len ? String.fromCharCode(96 + len) : "") + num;
 }
-
-.hero h1 {
-  margin: 0;
-  font-family: var(--serif);
-  font-size: clamp(2rem, 3vw, 2.8rem);
-  font-weight: 600;
-  letter-spacing: -0.04em;
+function setHydrateContext(context) {
+	sharedConfig.context = context;
 }
-
-.hero p, .toolbar p {
-  margin: 8px 0 0;
-  color: var(--muted);
-  line-height: 1.5;
+function nextHydrateContext() {
+	return {
+		...sharedConfig.context,
+		id: sharedConfig.getNextContextId(),
+		count: 0
+	};
 }
-
-.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;
+var equalFn = (a, b) => a === b;
+var $PROXY = Symbol("solid-proxy");
+var $TRACK = Symbol("solid-track");
+var signalOptions = { equals: equalFn };
+var ERROR = null;
+var runEffects = runQueue;
+var STALE = 1;
+var PENDING = 2;
+var UNOWNED = {
+	owned: null,
+	cleanups: null,
+	context: null,
+	owner: null
+};
+var Owner = null;
+var Transition = null;
+var Scheduler = null;
+var ExternalSourceConfig = null;
+var Listener = null;
+var Updates = null;
+var Effects = null;
+var ExecCount = 0;
+function createRoot(fn, detachedOwner) {
+	const listener = Listener, owner = Owner, unowned = fn.length === 0, current = detachedOwner === void 0 ? owner : detachedOwner, root = unowned ? UNOWNED : {
+		owned: null,
+		cleanups: null,
+		context: current ? current.context : null,
+		owner: current
+	}, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
+	Owner = root;
+	Listener = null;
+	try {
+		return runUpdates(updateFn, true);
+	} finally {
+		Listener = listener;
+		Owner = owner;
+	}
+}
+function createSignal(value, options) {
+	options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+	const s = {
+		value,
+		observers: null,
+		observerSlots: null,
+		comparator: options.equals || void 0
+	};
+	const setter = (value) => {
+		if (typeof value === "function") if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue);
+		else value = value(s.value);
+		return writeSignal(s, value);
+	};
+	return [readSignal.bind(s), setter];
+}
+function createRenderEffect(fn, value, options) {
+	const c = createComputation(fn, value, false, STALE);
+	if (Scheduler && Transition && Transition.running) Updates.push(c);
+	else updateComputation(c);
+}
+function createEffect(fn, value, options) {
+	runEffects = runUserEffects;
+	const c = createComputation(fn, value, false, STALE), s = SuspenseContext && useContext(SuspenseContext);
+	if (s) c.suspense = s;
+	if (!options || !options.render) c.user = true;
+	Effects ? Effects.push(c) : updateComputation(c);
+}
+function createMemo(fn, value, options) {
+	options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+	const c = createComputation(fn, value, true, 0);
+	c.observers = null;
+	c.observerSlots = null;
+	c.comparator = options.equals || void 0;
+	if (Scheduler && Transition && Transition.running) {
+		c.tState = STALE;
+		Updates.push(c);
+	} else updateComputation(c);
+	return readSignal.bind(c);
+}
+function batch(fn) {
+	return runUpdates(fn, false);
+}
+function untrack(fn) {
+	if (!ExternalSourceConfig && Listener === null) return fn();
+	const listener = Listener;
+	Listener = null;
+	try {
+		if (ExternalSourceConfig) return ExternalSourceConfig.untrack(fn);
+		return fn();
+	} finally {
+		Listener = listener;
+	}
+}
+function onMount(fn) {
+	createEffect(() => untrack(fn));
+}
+function onCleanup(fn) {
+	if (Owner === null);
+	else if (Owner.cleanups === null) Owner.cleanups = [fn];
+	else Owner.cleanups.push(fn);
+	return fn;
+}
+function getListener() {
+	return Listener;
+}
+function startTransition(fn) {
+	if (Transition && Transition.running) {
+		fn();
+		return Transition.done;
+	}
+	const l = Listener;
+	const o = Owner;
+	return Promise.resolve().then(() => {
+		Listener = l;
+		Owner = o;
+		let t;
+		if (Scheduler || SuspenseContext) {
+			t = Transition || (Transition = {
+				sources: /* @__PURE__ */ new Set(),
+				effects: [],
+				promises: /* @__PURE__ */ new Set(),
+				disposed: /* @__PURE__ */ new Set(),
+				queue: /* @__PURE__ */ new Set(),
+				running: true
+			});
+			t.done || (t.done = new Promise((res) => t.resolve = res));
+			t.running = true;
+		}
+		runUpdates(fn, false);
+		Listener = Owner = null;
+		return t ? t.done : void 0;
+	});
 }
-
-.field-row {
-  display: grid;
-  gap: 10px;
-  margin-top: 12px;
+var [transPending, setTransPending] = /* @__PURE__ */ createSignal(false);
+function useContext(context) {
+	let value;
+	return Owner && Owner.context && (value = Owner.context[context.id]) !== void 0 ? value : context.defaultValue;
+}
+var SuspenseContext;
+function readSignal() {
+	const runningTransition = Transition && Transition.running;
+	if (this.sources && (runningTransition ? this.tState : this.state)) if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);
+	else {
+		const updates = Updates;
+		Updates = null;
+		runUpdates(() => lookUpstream(this), false);
+		Updates = updates;
+	}
+	if (Listener) {
+		const sSlot = this.observers ? this.observers.length : 0;
+		if (!Listener.sources) {
+			Listener.sources = [this];
+			Listener.sourceSlots = [sSlot];
+		} else {
+			Listener.sources.push(this);
+			Listener.sourceSlots.push(sSlot);
+		}
+		if (!this.observers) {
+			this.observers = [Listener];
+			this.observerSlots = [Listener.sources.length - 1];
+		} else {
+			this.observers.push(Listener);
+			this.observerSlots.push(Listener.sources.length - 1);
+		}
+	}
+	if (runningTransition && Transition.sources.has(this)) return this.tValue;
+	return this.value;
+}
+function writeSignal(node, value, isComp) {
+	let current = Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value;
+	if (!node.comparator || !node.comparator(current, value)) {
+		if (Transition) {
+			const TransitionRunning = Transition.running;
+			if (TransitionRunning || !isComp && Transition.sources.has(node)) {
+				Transition.sources.add(node);
+				node.tValue = value;
+			}
+			if (!TransitionRunning) node.value = value;
+		} else node.value = value;
+		if (node.observers && node.observers.length) runUpdates(() => {
+			for (let i = 0; i < node.observers.length; i += 1) {
+				const o = node.observers[i];
+				const TransitionRunning = Transition && Transition.running;
+				if (TransitionRunning && Transition.disposed.has(o)) continue;
+				if (TransitionRunning ? !o.tState : !o.state) {
+					if (o.pure) Updates.push(o);
+					else Effects.push(o);
+					if (o.observers) markDownstream(o);
+				}
+				if (!TransitionRunning) o.state = STALE;
+				else o.tState = STALE;
+			}
+			if (Updates.length > 1e6) {
+				Updates = [];
+				throw new Error();
+			}
+		}, false);
+	}
+	return value;
 }
-
-.field-row--inline {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+function updateComputation(node) {
+	if (!node.fn) return;
+	cleanNode(node);
+	const time = ExecCount;
+	runComputation(node, Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value, time);
+	if (Transition && !Transition.running && Transition.sources.has(node)) queueMicrotask(() => {
+		runUpdates(() => {
+			Transition && (Transition.running = true);
+			Listener = Owner = node;
+			runComputation(node, node.tValue, time);
+			Listener = Owner = null;
+		}, false);
+	});
 }
-
-.field-label {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+function runComputation(node, value, time) {
+	let nextValue;
+	const owner = Owner, listener = Listener;
+	Listener = Owner = node;
+	try {
+		nextValue = node.fn(value);
+	} catch (err) {
+		if (node.pure) if (Transition && Transition.running) {
+			node.tState = STALE;
+			node.tOwned && node.tOwned.forEach(cleanNode);
+			node.tOwned = void 0;
+		} else {
+			node.state = STALE;
+			node.owned && node.owned.forEach(cleanNode);
+			node.owned = null;
+		}
+		node.updatedAt = time + 1;
+		return handleError(err);
+	} finally {
+		Listener = listener;
+		Owner = owner;
+	}
+	if (!node.updatedAt || node.updatedAt <= time) {
+		if (node.updatedAt != null && "observers" in node) writeSignal(node, nextValue, true);
+		else if (Transition && Transition.running && node.pure) {
+			if (!Transition.sources.has(node)) node.value = nextValue;
+			Transition.sources.add(node);
+			node.tValue = nextValue;
+		} else node.value = nextValue;
+		node.updatedAt = time;
+	}
+}
+function createComputation(fn, init, pure, state = STALE, options) {
+	const c = {
+		fn,
+		state,
+		updatedAt: null,
+		owned: null,
+		sources: null,
+		sourceSlots: null,
+		cleanups: null,
+		value: init,
+		owner: Owner,
+		context: Owner ? Owner.context : null,
+		pure
+	};
+	if (Transition && Transition.running) {
+		c.state = 0;
+		c.tState = state;
+	}
+	if (Owner === null);
+	else if (Owner !== UNOWNED) if (Transition && Transition.running && Owner.pure) if (!Owner.tOwned) Owner.tOwned = [c];
+	else Owner.tOwned.push(c);
+	else if (!Owner.owned) Owner.owned = [c];
+	else Owner.owned.push(c);
+	if (ExternalSourceConfig && c.fn) {
+		const sourceFn = c.fn;
+		const [track, trigger] = createSignal(void 0, { equals: false });
+		const ordinary = ExternalSourceConfig.factory(sourceFn, trigger);
+		onCleanup(() => ordinary.dispose());
+		let inTransition;
+		const triggerInTransition = () => startTransition(trigger).then(() => {
+			if (inTransition) {
+				inTransition.dispose();
+				inTransition = void 0;
+			}
+		});
+		c.fn = (x) => {
+			track();
+			if (Transition && Transition.running) {
+				if (!inTransition) inTransition = ExternalSourceConfig.factory(sourceFn, triggerInTransition);
+				return inTransition.track(x);
+			}
+			return ordinary.track(x);
+		};
+	}
+	return c;
+}
+function runTop(node) {
+	const runningTransition = Transition && Transition.running;
+	if ((runningTransition ? node.tState : node.state) === 0) return;
+	if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
+	if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
+	const ancestors = [node];
+	while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
+		if (runningTransition && Transition.disposed.has(node)) return;
+		if (runningTransition ? node.tState : node.state) ancestors.push(node);
+	}
+	for (let i = ancestors.length - 1; i >= 0; i--) {
+		node = ancestors[i];
+		if (runningTransition) {
+			let top = node, prev = ancestors[i + 1];
+			while ((top = top.owner) && top !== prev) if (Transition.disposed.has(top)) return;
+		}
+		if ((runningTransition ? node.tState : node.state) === STALE) updateComputation(node);
+		else if ((runningTransition ? node.tState : node.state) === PENDING) {
+			const updates = Updates;
+			Updates = null;
+			runUpdates(() => lookUpstream(node, ancestors[0]), false);
+			Updates = updates;
+		}
+	}
 }
-
-.meeting-list {
-  padding: 14px;
-  overflow: auto;
+function runUpdates(fn, init) {
+	if (Updates) return fn();
+	let wait = false;
+	if (!init) Updates = [];
+	if (Effects) wait = true;
+	else Effects = [];
+	ExecCount++;
+	try {
+		const res = fn();
+		completeUpdates(wait);
+		return res;
+	} catch (err) {
+		if (!wait) Effects = null;
+		Updates = null;
+		handleError(err);
+	}
+}
+function completeUpdates(wait) {
+	if (Updates) {
+		if (Scheduler && Transition && Transition.running) scheduleQueue(Updates);
+		else runQueue(Updates);
+		Updates = null;
+	}
+	if (wait) return;
+	let res;
+	if (Transition) {
+		if (!Transition.promises.size && !Transition.queue.size) {
+			const sources = Transition.sources;
+			const disposed = Transition.disposed;
+			Effects.push.apply(Effects, Transition.effects);
+			res = Transition.resolve;
+			for (const e of Effects) {
+				"tState" in e && (e.state = e.tState);
+				delete e.tState;
+			}
+			Transition = null;
+			runUpdates(() => {
+				for (const d of disposed) cleanNode(d);
+				for (const v of sources) {
+					v.value = v.tValue;
+					if (v.owned) for (let i = 0, len = v.owned.length; i < len; i++) cleanNode(v.owned[i]);
+					if (v.tOwned) v.owned = v.tOwned;
+					delete v.tValue;
+					delete v.tOwned;
+					v.tState = 0;
+				}
+				setTransPending(false);
+			}, false);
+		} else if (Transition.running) {
+			Transition.running = false;
+			Transition.effects.push.apply(Transition.effects, Effects);
+			Effects = null;
+			setTransPending(true);
+			return;
+		}
+	}
+	const e = Effects;
+	Effects = null;
+	if (e.length) runUpdates(() => runEffects(e), false);
+	if (res) res();
+}
+function runQueue(queue) {
+	for (let i = 0; i < queue.length; i++) runTop(queue[i]);
+}
+function scheduleQueue(queue) {
+	for (let i = 0; i < queue.length; i++) {
+		const item = queue[i];
+		const tasks = Transition.queue;
+		if (!tasks.has(item)) {
+			tasks.add(item);
+			Scheduler(() => {
+				tasks.delete(item);
+				runUpdates(() => {
+					Transition.running = true;
+					runTop(item);
+				}, false);
+				Transition && (Transition.running = false);
+			});
+		}
+	}
 }
-
-.folder-panel {
-  display: grid;
-  gap: 14px;
+function runUserEffects(queue) {
+	let i, userLength = 0;
+	for (i = 0; i < queue.length; i++) {
+		const e = queue[i];
+		if (!e.user) runTop(e);
+		else queue[userLength++] = e;
+	}
+	if (sharedConfig.context) {
+		if (sharedConfig.count) {
+			sharedConfig.effects || (sharedConfig.effects = []);
+			sharedConfig.effects.push(...queue.slice(0, userLength));
+			return;
+		}
+		setHydrateContext();
+	}
+	if (sharedConfig.effects && (sharedConfig.done || !sharedConfig.count)) {
+		queue = [...sharedConfig.effects, ...queue];
+		userLength += sharedConfig.effects.length;
+		delete sharedConfig.effects;
+	}
+	for (i = 0; i < userLength; i++) runTop(queue[i]);
+}
+function lookUpstream(node, ignore) {
+	const runningTransition = Transition && Transition.running;
+	if (runningTransition) node.tState = 0;
+	else node.state = 0;
+	for (let i = 0; i < node.sources.length; i += 1) {
+		const source = node.sources[i];
+		if (source.sources) {
+			const state = runningTransition ? source.tState : source.state;
+			if (state === STALE) {
+				if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
+			} else if (state === PENDING) lookUpstream(source, ignore);
+		}
+	}
 }
-
-.folder-panel__head h2 {
-  margin: 0;
-  font-size: 0.92rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+function markDownstream(node) {
+	const runningTransition = Transition && Transition.running;
+	for (let i = 0; i < node.observers.length; i += 1) {
+		const o = node.observers[i];
+		if (runningTransition ? !o.tState : !o.state) {
+			if (runningTransition) o.tState = PENDING;
+			else o.state = PENDING;
+			if (o.pure) Updates.push(o);
+			else Effects.push(o);
+			o.observers && markDownstream(o);
+		}
+	}
 }
-
-.folder-panel__head p {
-  margin: 6px 0 0;
-  color: var(--muted);
-  font-size: 0.9rem;
+function cleanNode(node) {
+	let i;
+	if (node.sources) while (node.sources.length) {
+		const source = node.sources.pop(), index = node.sourceSlots.pop(), obs = source.observers;
+		if (obs && obs.length) {
+			const n = obs.pop(), s = source.observerSlots.pop();
+			if (index < obs.length) {
+				n.sourceSlots[s] = index;
+				obs[index] = n;
+				source.observerSlots[index] = s;
+			}
+		}
+	}
+	if (node.tOwned) {
+		for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
+		delete node.tOwned;
+	}
+	if (Transition && Transition.running && node.pure) reset(node, true);
+	else if (node.owned) {
+		for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
+		node.owned = null;
+	}
+	if (node.cleanups) {
+		for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
+		node.cleanups = null;
+	}
+	if (Transition && Transition.running) node.tState = 0;
+	else node.state = 0;
 }
-
-.folder-list {
-  display: grid;
-  gap: 10px;
+function reset(node, top) {
+	if (!top) {
+		node.tState = 0;
+		Transition.disposed.add(node);
+	}
+	if (node.owned) for (let i = 0; i < node.owned.length; i++) reset(node.owned[i]);
 }
-
-.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;
+function castError(err) {
+	if (err instanceof Error) return err;
+	return new Error(typeof err === "string" ? err : "Unknown error", { cause: err });
 }
-
-.folder-row:hover,
-.folder-row[data-selected="true"] {
-  transform: translateY(-1px);
-  border-color: rgba(163, 79, 47, 0.26);
-  background: var(--panel-strong);
+function runErrors(err, fns, owner) {
+	try {
+		for (const f of fns) f(err);
+	} catch (e) {
+		handleError(e, owner && owner.owner || null);
+	}
+}
+function handleError(err, owner = Owner) {
+	const fns = ERROR && owner && owner.context && owner.context[ERROR];
+	const error = castError(err);
+	if (!fns) throw error;
+	if (Effects) Effects.push({
+		fn() {
+			runErrors(error, fns, owner);
+		},
+		state: STALE
+	});
+	else runErrors(error, fns, owner);
+}
+var FALLBACK = Symbol("fallback");
+function dispose(d) {
+	for (let i = 0; i < d.length; i++) d[i]();
+}
+function mapArray(list, mapFn, options = {}) {
+	let items = [], mapped = [], disposers = [], len = 0, indexes = mapFn.length > 1 ? [] : null;
+	onCleanup(() => dispose(disposers));
+	return () => {
+		let newItems = list() || [], newLen = newItems.length, i, j;
+		newItems[$TRACK];
+		return untrack(() => {
+			let newIndices, newIndicesNext, temp, tempdisposers, tempIndexes, start, end, newEnd, item;
+			if (newLen === 0) {
+				if (len !== 0) {
+					dispose(disposers);
+					disposers = [];
+					items = [];
+					mapped = [];
+					len = 0;
+					indexes && (indexes = []);
+				}
+				if (options.fallback) {
+					items = [FALLBACK];
+					mapped[0] = createRoot((disposer) => {
+						disposers[0] = disposer;
+						return options.fallback();
+					});
+					len = 1;
+				}
+			} else if (len === 0) {
+				mapped = new Array(newLen);
+				for (j = 0; j < newLen; j++) {
+					items[j] = newItems[j];
+					mapped[j] = createRoot(mapper);
+				}
+				len = newLen;
+			} else {
+				temp = new Array(newLen);
+				tempdisposers = new Array(newLen);
+				indexes && (tempIndexes = new Array(newLen));
+				for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++);
+				for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) {
+					temp[newEnd] = mapped[end];
+					tempdisposers[newEnd] = disposers[end];
+					indexes && (tempIndexes[newEnd] = indexes[end]);
+				}
+				newIndices = /* @__PURE__ */ new Map();
+				newIndicesNext = new Array(newEnd + 1);
+				for (j = newEnd; j >= start; j--) {
+					item = newItems[j];
+					i = newIndices.get(item);
+					newIndicesNext[j] = i === void 0 ? -1 : i;
+					newIndices.set(item, j);
+				}
+				for (i = start; i <= end; i++) {
+					item = items[i];
+					j = newIndices.get(item);
+					if (j !== void 0 && j !== -1) {
+						temp[j] = mapped[i];
+						tempdisposers[j] = disposers[i];
+						indexes && (tempIndexes[j] = indexes[i]);
+						j = newIndicesNext[j];
+						newIndices.set(item, j);
+					} else disposers[i]();
+				}
+				for (j = start; j < newLen; j++) if (j in temp) {
+					mapped[j] = temp[j];
+					disposers[j] = tempdisposers[j];
+					if (indexes) {
+						indexes[j] = tempIndexes[j];
+						indexes[j](j);
+					}
+				} else mapped[j] = createRoot(mapper);
+				mapped = mapped.slice(0, len = newLen);
+				items = newItems.slice(0);
+			}
+			return mapped;
+		});
+		function mapper(disposer) {
+			disposers[j] = disposer;
+			if (indexes) {
+				const [s, set] = createSignal(j);
+				indexes[j] = set;
+				return mapFn(newItems[j], s);
+			}
+			return mapFn(newItems[j]);
+		}
+	};
 }
-
-.folder-row__title {
-  font-weight: 700;
+var hydrationEnabled = false;
+function createComponent(Comp, props) {
+	if (hydrationEnabled) {
+		if (sharedConfig.context) {
+			const c = sharedConfig.context;
+			setHydrateContext(nextHydrateContext());
+			const r = untrack(() => Comp(props || {}));
+			setHydrateContext(c);
+			return r;
+		}
+	}
+	return untrack(() => Comp(props || {}));
+}
+var narrowedError = (name) => \`Stale read from <\${name}>.\`;
+function For(props) {
+	const fallback = "fallback" in props && { fallback: () => props.fallback };
+	return createMemo(mapArray(() => props.each, props.children, fallback || void 0));
+}
+function Show(props) {
+	const keyed = props.keyed;
+	const conditionValue = createMemo(() => props.when, void 0, void 0);
+	const condition = keyed ? conditionValue : createMemo(conditionValue, void 0, { equals: (a, b) => !a === !b });
+	return createMemo(() => {
+		const c = condition();
+		if (c) {
+			const child = props.children;
+			return typeof child === "function" && child.length > 0 ? untrack(() => child(keyed ? c : () => {
+				if (!untrack(condition)) throw narrowedError("Show");
+				return conditionValue();
+			})) : child;
+		}
+		return props.fallback;
+	}, void 0, void 0);
 }
-
-.folder-row__meta {
-  color: var(--muted);
-  font-size: 0.88rem;
+//#endregion
+//#region node_modules/solid-js/web/dist/web.js
+var memo = (fn) => createMemo(() => fn());
+function reconcileArrays(parentNode, a, b) {
+	let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
+	while (aStart < aEnd || bStart < bEnd) {
+		if (a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
+			continue;
+		}
+		while (a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+		if (aEnd === aStart) {
+			const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+			while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+		} else if (bEnd === bStart) while (aStart < aEnd) {
+			if (!map || !map.has(a[aStart])) a[aStart].remove();
+			aStart++;
+		}
+		else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+			const node = a[--aEnd].nextSibling;
+			parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+			parentNode.insertBefore(b[--bEnd], node);
+			a[aEnd] = b[bEnd];
+		} else {
+			if (!map) {
+				map = /* @__PURE__ */ new Map();
+				let i = bStart;
+				while (i < bEnd) map.set(b[i], i++);
+			}
+			const index = map.get(a[aStart]);
+			if (index != null) if (bStart < index && index < bEnd) {
+				let i = aStart, sequence = 1, t;
+				while (++i < aEnd && i < bEnd) {
+					if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+					sequence++;
+				}
+				if (sequence > index - bStart) {
+					const node = a[aStart];
+					while (bStart < index) parentNode.insertBefore(b[bStart++], node);
+				} else parentNode.replaceChild(b[bStart++], a[aStart++]);
+			} else aStart++;
+			else a[aStart++].remove();
+		}
+	}
 }
-
-.folder-empty {
-  color: var(--muted);
-  font-size: 0.92rem;
+var $$EVENTS = "_$DX_DELEGATE";
+function render(code, element, init, options = {}) {
+	let disposer;
+	createRoot((dispose) => {
+		disposer = dispose;
+		element === document ? code() : insert(element, code(), element.firstChild ? null : void 0, init);
+	}, options.owner);
+	return () => {
+		disposer();
+		element.textContent = "";
+	};
 }
-
-.folder-empty--error {
-  color: var(--error);
+function template(html, isImportNode, isSVG, isMathML) {
+	let node;
+	const create = () => {
+		const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
+		t.innerHTML = html;
+		return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
+	};
+	const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+	fn.cloneNode = fn;
+	return fn;
+}
+function delegateEvents(eventNames, document = window.document) {
+	const e = document[$$EVENTS] || (document[$$EVENTS] = /* @__PURE__ */ new Set());
+	for (let i = 0, l = eventNames.length; i < l; i++) {
+		const name = eventNames[i];
+		if (!e.has(name)) {
+			e.add(name);
+			document.addEventListener(name, eventHandler);
+		}
+	}
 }
-
-.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;
+function setAttribute(node, name, value) {
+	if (isHydrating(node)) return;
+	if (value == null) node.removeAttribute(name);
+	else node.setAttribute(name, value);
+}
+function addEventListener(node, name, handler, delegate) {
+	if (delegate) if (Array.isArray(handler)) {
+		node[\`$$\${name}\`] = handler[0];
+		node[\`$$\${name}Data\`] = handler[1];
+	} else node[\`$$\${name}\`] = handler;
+	else if (Array.isArray(handler)) {
+		const handlerFn = handler[0];
+		node.addEventListener(name, handler[0] = (e) => handlerFn.call(node, handler[1], e));
+	} else node.addEventListener(name, handler, typeof handler !== "function" && handler);
+}
+function insert(parent, accessor, marker, initial) {
+	if (marker !== void 0 && !initial) initial = [];
+	if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+	createRenderEffect((current) => insertExpression(parent, accessor(), current, marker), initial);
+}
+function isHydrating(node) {
+	return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
+}
+function eventHandler(e) {
+	if (sharedConfig.registry && sharedConfig.events) {
+		if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
+	}
+	let node = e.target;
+	const key = \`$$\${e.type}\`;
+	const oriTarget = e.target;
+	const oriCurrentTarget = e.currentTarget;
+	const retarget = (value) => Object.defineProperty(e, "target", {
+		configurable: true,
+		value
+	});
+	const handleNode = () => {
+		const handler = node[key];
+		if (handler && !node.disabled) {
+			const data = node[\`\${key}Data\`];
+			data !== void 0 ? handler.call(node, data, e) : handler.call(node, e);
+			if (e.cancelBubble) return;
+		}
+		node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
+		return true;
+	};
+	const walkUpTree = () => {
+		while (handleNode() && (node = node._$host || node.parentNode || node.host));
+	};
+	Object.defineProperty(e, "currentTarget", {
+		configurable: true,
+		get() {
+			return node || document;
+		}
+	});
+	if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
+	if (e.composedPath) {
+		const path = e.composedPath();
+		retarget(path[0]);
+		for (let i = 0; i < path.length - 2; i++) {
+			node = path[i];
+			if (!handleNode()) break;
+			if (node._$host) {
+				node = node._$host;
+				walkUpTree();
+				break;
+			}
+			if (node.parentNode === oriCurrentTarget) break;
+		}
+	} else walkUpTree();
+	retarget(oriTarget);
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+	const hydrating = isHydrating(parent);
+	if (hydrating) {
+		!current && (current = [...parent.childNodes]);
+		let cleaned = [];
+		for (let i = 0; i < current.length; i++) {
+			const node = current[i];
+			if (node.nodeType === 8 && node.data.slice(0, 2) === "!$") node.remove();
+			else cleaned.push(node);
+		}
+		current = cleaned;
+	}
+	while (typeof current === "function") current = current();
+	if (value === current) return current;
+	const t = typeof value, multi = marker !== void 0;
+	parent = multi && current[0] && current[0].parentNode || parent;
+	if (t === "string" || t === "number") {
+		if (hydrating) return current;
+		if (t === "number") {
+			value = value.toString();
+			if (value === current) return current;
+		}
+		if (multi) {
+			let node = current[0];
+			if (node && node.nodeType === 3) node.data !== value && (node.data = value);
+			else node = document.createTextNode(value);
+			current = cleanChildren(parent, current, marker, node);
+		} else if (current !== "" && typeof current === "string") current = parent.firstChild.data = value;
+		else current = parent.textContent = value;
+	} else if (value == null || t === "boolean") {
+		if (hydrating) return current;
+		current = cleanChildren(parent, current, marker);
+	} else if (t === "function") {
+		createRenderEffect(() => {
+			let v = value();
+			while (typeof v === "function") v = v();
+			current = insertExpression(parent, v, current, marker);
+		});
+		return () => current;
+	} else if (Array.isArray(value)) {
+		const array = [];
+		const currentArray = current && Array.isArray(current);
+		if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+			createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+			return () => current;
+		}
+		if (hydrating) {
+			if (!array.length) return current;
+			if (marker === void 0) return current = [...parent.childNodes];
+			let node = array[0];
+			if (node.parentNode !== parent) return current;
+			const nodes = [node];
+			while ((node = node.nextSibling) !== marker) nodes.push(node);
+			return current = nodes;
+		}
+		if (array.length === 0) {
+			current = cleanChildren(parent, current, marker);
+			if (multi) return current;
+		} else if (currentArray) if (current.length === 0) appendNodes(parent, array, marker);
+		else reconcileArrays(parent, current, array);
+		else {
+			current && cleanChildren(parent);
+			appendNodes(parent, array);
+		}
+		current = array;
+	} else if (value.nodeType) {
+		if (hydrating && value.parentNode) return current = multi ? [value] : value;
+		if (Array.isArray(current)) {
+			if (multi) return current = cleanChildren(parent, current, marker, value);
+			cleanChildren(parent, current, null, value);
+		} else if (current == null || current === "" || !parent.firstChild) parent.appendChild(value);
+		else parent.replaceChild(value, parent.firstChild);
+		current = value;
+	}
+	return current;
+}
+function normalizeIncomingArray(normalized, array, current, unwrap) {
+	let dynamic = false;
+	for (let i = 0, len = array.length; i < len; i++) {
+		let item = array[i], prev = current && current[normalized.length], t;
+		if (item == null || item === true || item === false);
+		else if ((t = typeof item) === "object" && item.nodeType) normalized.push(item);
+		else if (Array.isArray(item)) dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+		else if (t === "function") if (unwrap) {
+			while (typeof item === "function") item = item();
+			dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+		} else {
+			normalized.push(item);
+			dynamic = true;
+		}
+		else {
+			const value = String(item);
+			if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);
+			else normalized.push(document.createTextNode(value));
+		}
+	}
+	return dynamic;
+}
+function appendNodes(parent, array, marker = null) {
+	for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+}
+function cleanChildren(parent, current, marker, replacement) {
+	if (marker === void 0) return parent.textContent = "";
+	const node = replacement || document.createTextNode("");
+	if (current.length) {
+		let inserted = false;
+		for (let i = current.length - 1; i >= 0; i--) {
+			const el = current[i];
+			if (node !== el) {
+				const isParent = el.parentNode === parent;
+				if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+				else isParent && el.remove();
+			} else inserted = true;
+		}
+	} else parent.insertBefore(node, marker);
+	return [node];
 }
-
-.meeting-row__meta {
-  color: var(--muted);
-  font-size: 0.92rem;
+//#endregion
+//#region node_modules/solid-js/store/dist/store.js
+var $RAW = Symbol("store-raw"), $NODE = Symbol("store-node"), $HAS = Symbol("store-has"), $SELF = Symbol("store-self");
+function wrap$1(value) {
+	let p = value[$PROXY];
+	if (!p) {
+		Object.defineProperty(value, $PROXY, { value: p = new Proxy(value, proxyTraps$1) });
+		if (!Array.isArray(value)) {
+			const keys = Object.keys(value), desc = Object.getOwnPropertyDescriptors(value);
+			for (let i = 0, l = keys.length; i < l; i++) {
+				const prop = keys[i];
+				if (desc[prop].get) Object.defineProperty(value, prop, {
+					enumerable: desc[prop].enumerable,
+					get: desc[prop].get.bind(p)
+				});
+			}
+		}
+	}
+	return p;
+}
+function isWrappable(obj) {
+	let proto;
+	return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
+}
+function unwrap(item, set = /* @__PURE__ */ new Set()) {
+	let result, unwrapped, v, prop;
+	if (result = item != null && item[$RAW]) return result;
+	if (!isWrappable(item) || set.has(item)) return item;
+	if (Array.isArray(item)) {
+		if (Object.isFrozen(item)) item = item.slice(0);
+		else set.add(item);
+		for (let i = 0, l = item.length; i < l; i++) {
+			v = item[i];
+			if ((unwrapped = unwrap(v, set)) !== v) item[i] = unwrapped;
+		}
+	} else {
+		if (Object.isFrozen(item)) item = Object.assign({}, item);
+		else set.add(item);
+		const keys = Object.keys(item), desc = Object.getOwnPropertyDescriptors(item);
+		for (let i = 0, l = keys.length; i < l; i++) {
+			prop = keys[i];
+			if (desc[prop].get) continue;
+			v = item[prop];
+			if ((unwrapped = unwrap(v, set)) !== v) item[prop] = unwrapped;
+		}
+	}
+	return item;
 }
-
-.meeting-empty {
-  padding: 18px;
-  color: var(--muted);
+function getNodes(target, symbol) {
+	let nodes = target[symbol];
+	if (!nodes) Object.defineProperty(target, symbol, { value: nodes = Object.create(null) });
+	return nodes;
 }
-
-.meeting-empty--error {
-  color: var(--error);
+function getNode(nodes, property, value) {
+	if (nodes[property]) return nodes[property];
+	const [s, set] = createSignal(value, {
+		equals: false,
+		internal: true
+	});
+	s.$ = set;
+	return nodes[property] = s;
+}
+function proxyDescriptor$1(target, property) {
+	const desc = Reflect.getOwnPropertyDescriptor(target, property);
+	if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE) return desc;
+	delete desc.value;
+	delete desc.writable;
+	desc.get = () => target[$PROXY][property];
+	return desc;
+}
+function trackSelf(target) {
+	getListener() && getNode(getNodes(target, $NODE), $SELF)();
+}
+function ownKeys(target) {
+	trackSelf(target);
+	return Reflect.ownKeys(target);
+}
+var proxyTraps$1 = {
+	get(target, property, receiver) {
+		if (property === $RAW) return target;
+		if (property === $PROXY) return receiver;
+		if (property === $TRACK) {
+			trackSelf(target);
+			return receiver;
+		}
+		const nodes = getNodes(target, $NODE);
+		const tracked = nodes[property];
+		let value = tracked ? tracked() : target[property];
+		if (property === $NODE || property === $HAS || property === "__proto__") return value;
+		if (!tracked) {
+			const desc = Object.getOwnPropertyDescriptor(target, property);
+			if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get)) value = getNode(nodes, property, value)();
+		}
+		return isWrappable(value) ? wrap$1(value) : value;
+	},
+	has(target, property) {
+		if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === $HAS || property === "__proto__") return true;
+		getListener() && getNode(getNodes(target, $HAS), property)();
+		return property in target;
+	},
+	set() {
+		return true;
+	},
+	deleteProperty() {
+		return true;
+	},
+	ownKeys,
+	getOwnPropertyDescriptor: proxyDescriptor$1
+};
+function setProperty(state, property, value, deleting = false) {
+	if (!deleting && state[property] === value) return;
+	const prev = state[property], len = state.length;
+	if (value === void 0) {
+		delete state[property];
+		if (state[$HAS] && state[$HAS][property] && prev !== void 0) state[$HAS][property].$();
+	} else {
+		state[property] = value;
+		if (state[$HAS] && state[$HAS][property] && prev === void 0) state[$HAS][property].$();
+	}
+	let nodes = getNodes(state, $NODE), node;
+	if (node = getNode(nodes, property, prev)) node.$(() => value);
+	if (Array.isArray(state) && state.length !== len) {
+		for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
+		(node = getNode(nodes, "length", len)) && node.$(state.length);
+	}
+	(node = nodes[$SELF]) && node.$();
+}
+function mergeStoreNode(state, value) {
+	const keys = Object.keys(value);
+	for (let i = 0; i < keys.length; i += 1) {
+		const key = keys[i];
+		setProperty(state, key, value[key]);
+	}
+}
+function updateArray(current, next) {
+	if (typeof next === "function") next = next(current);
+	next = unwrap(next);
+	if (Array.isArray(next)) {
+		if (current === next) return;
+		let i = 0, len = next.length;
+		for (; i < len; i++) {
+			const value = next[i];
+			if (current[i] !== value) setProperty(current, i, value);
+		}
+		setProperty(current, "length", len);
+	} else mergeStoreNode(current, next);
+}
+function updatePath(current, path, traversed = []) {
+	let part, prev = current;
+	if (path.length > 1) {
+		part = path.shift();
+		const partType = typeof part, isArray = Array.isArray(current);
+		if (Array.isArray(part)) {
+			for (let i = 0; i < part.length; i++) updatePath(current, [part[i]].concat(path), traversed);
+			return;
+		} else if (isArray && partType === "function") {
+			for (let i = 0; i < current.length; i++) if (part(current[i], i)) updatePath(current, [i].concat(path), traversed);
+			return;
+		} else if (isArray && partType === "object") {
+			const { from = 0, to = current.length - 1, by = 1 } = part;
+			for (let i = from; i <= to; i += by) updatePath(current, [i].concat(path), traversed);
+			return;
+		} else if (path.length > 1) {
+			updatePath(current[part], path, [part].concat(traversed));
+			return;
+		}
+		prev = current[part];
+		traversed = [part].concat(traversed);
+	}
+	let value = path[0];
+	if (typeof value === "function") {
+		value = value(prev, traversed);
+		if (value === prev) return;
+	}
+	if (part === void 0 && value == void 0) return;
+	value = unwrap(value);
+	if (part === void 0 || isWrappable(prev) && isWrappable(value) && !Array.isArray(value)) mergeStoreNode(prev, value);
+	else setProperty(current, part, value);
+}
+function createStore(...[store, options]) {
+	const unwrappedStore = unwrap(store || {});
+	const isArray = Array.isArray(unwrappedStore);
+	const wrappedStore = wrap$1(unwrappedStore);
+	function setStore(...args) {
+		batch(() => {
+			isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+		});
+	}
+	return [wrappedStore, setStore];
 }
-
-.detail {
-  display: grid;
-  grid-template-rows: auto auto 1fr;
-  min-width: 0;
+//#endregion
+//#region src/transport.ts
+var granolaTransportPaths = {
+	authLock: "/auth/lock",
+	authLogin: "/auth/login",
+	authLogout: "/auth/logout",
+	authMode: "/auth/mode",
+	authRefresh: "/auth/refresh",
+	authStatus: "/auth/status",
+	authUnlock: "/auth/unlock",
+	events: "/events",
+	exportJobs: "/exports/jobs",
+	exportNotes: "/exports/notes",
+	exportTranscripts: "/exports/transcripts",
+	folderResolve: "/folders/resolve",
+	folders: "/folders",
+	health: "/health",
+	meetingResolve: "/meetings/resolve",
+	meetings: "/meetings",
+	root: "/",
+	serverInfo: "/server/info",
+	syncRun: "/sync",
+	syncEvents: "/sync/events",
+	state: "/state"
+};
+function appendSearchParams(path, params) {
+	const url = new URL(path, "http://localhost");
+	for (const [key, value] of Object.entries(params)) {
+		if (value === void 0 || value === false || value === "") continue;
+		url.searchParams.set(key, String(value));
+	}
+	return \`\${url.pathname}\${url.search}\`;
 }
-
-.detail-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
+function granolaMeetingPath(id) {
+	return \`\${granolaTransportPaths.meetings}/\${encodeURIComponent(id)}\`;
 }
-
-.detail-head h2 {
-  margin: 0;
-  font-family: var(--serif);
-  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
-  font-weight: 600;
+function granolaMeetingResolvePath(query, options = {}) {
+	return appendSearchParams(granolaTransportPaths.meetingResolve, {
+		includeTranscript: options.includeTranscript ? "true" : void 0,
+		q: query
+	});
 }
-
-.state-badge {
-  padding: 10px 14px;
-  border-radius: 999px;
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-size: 0.92rem;
-  font-weight: 700;
+function granolaMeetingsPath(options = {}) {
+	return appendSearchParams(granolaTransportPaths.meetings, {
+		folderId: options.folderId,
+		limit: options.limit,
+		refresh: options.forceRefresh ? "true" : void 0,
+		search: options.search,
+		sort: options.sort,
+		updatedFrom: options.updatedFrom,
+		updatedTo: options.updatedTo
+	});
 }
-
-.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;
+function granolaFolderPath(id) {
+	return \`\${granolaTransportPaths.folders}/\${encodeURIComponent(id)}\`;
 }
-
-.toolbar-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+function granolaFolderResolvePath(query) {
+	return appendSearchParams(granolaTransportPaths.folderResolve, { q: query });
 }
-
-.toolbar-form {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
-  width: min(440px, 100%);
+function granolaFoldersPath(options = {}) {
+	return appendSearchParams(granolaTransportPaths.folders, {
+		limit: options.limit,
+		refresh: options.forceRefresh ? "true" : void 0,
+		search: options.search
+	});
 }
-
-.auth-panel,
-.security-panel,
-.jobs-panel {
-  padding: 0 24px 18px;
+function granolaExportJobsPath(options = {}) {
+	return appendSearchParams(granolaTransportPaths.exportJobs, { limit: options.limit });
 }
-
-.security-panel__head h3,
-.auth-panel__head h3,
-.jobs-panel__head h3 {
-  margin: 0;
-  font-size: 0.92rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+function granolaExportJobRerunPath(id) {
+	return \`\${granolaTransportPaths.exportJobs}/\${encodeURIComponent(id)}/rerun\`;
 }
-
-.security-panel__head p,
-.auth-panel__head p,
-.jobs-panel__head p {
-  margin: 6px 0 0;
-  color: var(--muted);
-  font-size: 0.9rem;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/checkPrivateRedeclaration.js
+function _checkPrivateRedeclaration(e, t) {
+	if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
 }
-
-.security-panel__body,
-.auth-panel__body {
-  display: grid;
-  gap: 12px;
-  margin-top: 14px;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/classPrivateFieldInitSpec.js
+function _classPrivateFieldInitSpec(e, t, a) {
+	_checkPrivateRedeclaration(e, t), t.set(e, a);
 }
-
-.auth-card {
-  display: grid;
-  gap: 12px;
-  padding: 14px 16px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.72);
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
 }
-
-.auth-card__meta {
-  color: var(--muted);
-  font-size: 0.9rem;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
 }
-
-.auth-card__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
 }
-
-.auth-card__error {
-  color: var(--error);
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
 }
-
-.jobs-list {
-  display: grid;
-  gap: 10px;
-  margin-top: 14px;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/assertClassBrand.js
+function _assertClassBrand(e, t, n) {
+	if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+	throw new TypeError("Private element is not present on this object");
 }
-
-.job-card {
-  display: grid;
-  gap: 10px;
-  padding: 14px 16px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.72);
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/classPrivateFieldSet2.js
+function _classPrivateFieldSet2(s, a, r) {
+	return s.set(_assertClassBrand(s, a), r), r;
 }
-
-.job-card__head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/classPrivateFieldGet2.js
+function _classPrivateFieldGet2(s, a) {
+	return s.get(_assertClassBrand(s, a));
 }
-
-.job-card__title {
-  font-weight: 700;
+//#endregion
+//#region src/server/client.ts
+function cloneValue(value) {
+	return structuredClone(value);
 }
-
-.job-card__meta {
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-.job-card__status {
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-size: 0.82rem;
-  font-weight: 700;
-}
-
-.job-card__status[data-status="running"] {
-  background: rgba(163, 79, 47, 0.12);
-  color: var(--warm);
-}
-
-.job-card__status[data-status="failed"] {
-  background: rgba(157, 44, 44, 0.12);
-  color: var(--error);
-}
-
-.job-card__status[data-status="completed"] {
-  background: rgba(36, 107, 79, 0.12);
-  color: var(--ok);
-}
-
-.job-card__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.job-empty {
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
-.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);
+function normaliseServerUrl(serverUrl) {
+	const raw = serverUrl instanceof URL ? serverUrl.href : serverUrl.trim();
+	if (!raw) throw new Error("server URL is required");
+	const withProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(raw) ? raw : \`http://\${raw}\`;
+	const parsed = new URL(withProtocol);
+	if (parsed.protocol !== "http:" && parsed.protocol !== "https:") throw new Error("server URL must use http or https");
+	parsed.pathname = "/";
+	parsed.search = "";
+	parsed.hash = "";
+	return parsed;
 }
-
-.workspace-hint {
-  color: var(--muted);
-  font-size: 0.86rem;
-  margin-left: auto;
+function mergeHeaders(...values) {
+	const headers = new Headers();
+	for (const value of values) {
+		if (!value) continue;
+		new Headers(value).forEach((headerValue, headerName) => {
+			headers.set(headerName, headerValue);
+		});
+	}
+	return headers;
 }
-
-.button {
-  border: 0;
-  border-radius: 999px;
-  padding: 12px 16px;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
+async function responseError(response) {
+	let message = \`\${response.status} \${response.statusText}\`.trim();
+	try {
+		const payload = await response.json();
+		if (typeof payload.error === "string" && payload.error.trim()) message = payload.error;
+		else if (typeof payload.message === "string" && payload.message.trim()) message = payload.message;
+	} catch {
+		const text = (await response.text()).trim();
+		if (text) message = text;
+	}
+	return new Error(message);
 }
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.56;
+function parseSseEvent(payload) {
+	const data = payload.replaceAll("\r\n", "\n").split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trimStart()).join("\n");
+	if (!data) return;
+	return JSON.parse(data);
 }
-
-.button--primary {
-  background: var(--ink);
-  color: white;
+var _closed = /* @__PURE__ */ new WeakMap();
+var _eventLoop = /* @__PURE__ */ new WeakMap();
+var _listeners = /* @__PURE__ */ new WeakMap();
+var _fetchImpl = /* @__PURE__ */ new WeakMap();
+var _password = /* @__PURE__ */ new WeakMap();
+var _reconnectDelayMs = /* @__PURE__ */ new WeakMap();
+var _streamAbortController = /* @__PURE__ */ new WeakMap();
+var _state = /* @__PURE__ */ new WeakMap();
+var GranolaServerClient = class GranolaServerClient {
+	constructor(info, url, initialState, options = {}) {
+		_classPrivateFieldInitSpec(this, _closed, false);
+		_classPrivateFieldInitSpec(this, _eventLoop, void 0);
+		_classPrivateFieldInitSpec(this, _listeners, /* @__PURE__ */ new Set());
+		_classPrivateFieldInitSpec(this, _fetchImpl, void 0);
+		_classPrivateFieldInitSpec(this, _password, void 0);
+		_classPrivateFieldInitSpec(this, _reconnectDelayMs, void 0);
+		_defineProperty(this, "info", void 0);
+		_classPrivateFieldInitSpec(this, _streamAbortController, void 0);
+		_classPrivateFieldInitSpec(this, _state, void 0);
+		this.url = url;
+		_classPrivateFieldSet2(_fetchImpl, this, options.fetchImpl ?? fetch);
+		this.info = cloneValue(info);
+		_classPrivateFieldSet2(_password, this, options.password?.trim() || void 0);
+		_classPrivateFieldSet2(_reconnectDelayMs, this, options.reconnectDelayMs ?? 1e3);
+		_classPrivateFieldSet2(_state, this, cloneValue(initialState));
+	}
+	static async connect(serverUrl, options = {}) {
+		const url = normaliseServerUrl(serverUrl);
+		const fetchImpl = options.fetchImpl ?? fetch;
+		const infoResponse = await fetchImpl(new URL(granolaTransportPaths.serverInfo, url), { headers: mergeHeaders({
+			...options.password?.trim() ? { "x-granola-password": options.password.trim() } : {},
+			accept: "application/json"
+		}) });
+		if (!infoResponse.ok) throw await responseError(infoResponse);
+		const info = await infoResponse.json();
+		if (info.protocolVersion !== 2) throw new Error(\`unsupported Granola transport protocol: expected 2, got \${info.protocolVersion}\`);
+		const response = await fetchImpl(new URL(granolaTransportPaths.state, url), { headers: mergeHeaders({
+			...options.password?.trim() ? { "x-granola-password": options.password.trim() } : {},
+			accept: "application/json"
+		}) });
+		if (!response.ok) throw await responseError(response);
+		const client = new GranolaServerClient(info, url, await response.json(), options);
+		client.startEvents();
+		return client;
+	}
+	async close() {
+		_classPrivateFieldSet2(_closed, this, true);
+		_classPrivateFieldGet2(_streamAbortController, this)?.abort();
+		try {
+			await _classPrivateFieldGet2(_eventLoop, this);
+		} catch {}
+	}
+	getState() {
+		return cloneValue(_classPrivateFieldGet2(_state, this));
+	}
+	subscribe(listener) {
+		_classPrivateFieldGet2(_listeners, this).add(listener);
+		return () => {
+			_classPrivateFieldGet2(_listeners, this).delete(listener);
+		};
+	}
+	async inspectAuth() {
+		return await this.requestJson(granolaTransportPaths.authStatus);
+	}
+	async inspectSync() {
+		return cloneValue(_classPrivateFieldGet2(_state, this).sync);
+	}
+	async listSyncEvents(options = {}) {
+		const path = options.limit ? \`\${granolaTransportPaths.syncEvents}?limit=\${encodeURIComponent(String(options.limit))}\` : granolaTransportPaths.syncEvents;
+		return await this.requestJson(path);
+	}
+	async loginAuth(options = {}) {
+		return await this.requestJson(granolaTransportPaths.authLogin, {
+			body: JSON.stringify(options),
+			headers: { "content-type": "application/json" },
+			method: "POST"
+		});
+	}
+	async logoutAuth() {
+		return await this.requestJson(granolaTransportPaths.authLogout, { method: "POST" });
+	}
+	async refreshAuth() {
+		return await this.requestJson(granolaTransportPaths.authRefresh, { method: "POST" });
+	}
+	async switchAuthMode(mode) {
+		return await this.requestJson(granolaTransportPaths.authMode, {
+			body: JSON.stringify({ mode }),
+			headers: { "content-type": "application/json" },
+			method: "POST"
+		});
+	}
+	async sync(options = {}) {
+		return await this.requestJson(granolaTransportPaths.syncRun, {
+			body: JSON.stringify(options),
+			headers: { "content-type": "application/json" },
+			method: "POST"
+		});
+	}
+	async listFolders(options = {}) {
+		return await this.requestJson(granolaFoldersPath(options));
+	}
+	async getFolder(id) {
+		return await this.requestJson(granolaFolderPath(id));
+	}
+	async findFolder(query) {
+		return await this.requestJson(granolaFolderResolvePath(query));
+	}
+	async listMeetings(options = {}) {
+		return await this.requestJson(granolaMeetingsPath(options));
+	}
+	async getMeeting(id, options = {}) {
+		return await this.requestJson(\`\${granolaMeetingPath(id)}\${options.requireCache ? "?includeTranscript=true" : ""}\`);
+	}
+	async findMeeting(query, options = {}) {
+		return await this.requestJson(granolaMeetingResolvePath(query, { includeTranscript: options.requireCache }));
+	}
+	async listExportJobs(options = {}) {
+		return await this.requestJson(granolaExportJobsPath(options));
+	}
+	async exportNotes(format = "markdown", options = {}) {
+		return await this.requestJson(granolaTransportPaths.exportNotes, {
+			body: JSON.stringify({
+				folderId: options.folderId,
+				format
+			}),
+			headers: { "content-type": "application/json" },
+			method: "POST"
+		});
+	}
+	async exportTranscripts(format = "text", options = {}) {
+		return await this.requestJson(granolaTransportPaths.exportTranscripts, {
+			body: JSON.stringify({
+				folderId: options.folderId,
+				format
+			}),
+			headers: { "content-type": "application/json" },
+			method: "POST"
+		});
+	}
+	async rerunExportJob(id) {
+		return await this.requestJson(granolaExportJobRerunPath(id), { method: "POST" });
+	}
+	async request(path, init = {}) {
+		const response = await _classPrivateFieldGet2(_fetchImpl, this).call(this, new URL(path, this.url), {
+			...init,
+			headers: mergeHeaders({
+				..._classPrivateFieldGet2(_password, this) ? { "x-granola-password": _classPrivateFieldGet2(_password, this) } : {},
+				accept: "application/json"
+			}, init.headers)
+		});
+		if (!response.ok) throw await responseError(response);
+		return response;
+	}
+	async requestJson(path, init = {}) {
+		return cloneValue(await (await this.request(path, init)).json());
+	}
+	emit(event) {
+		_classPrivateFieldSet2(_state, this, cloneValue(event.state));
+		const nextEvent = cloneValue(event);
+		for (const listener of _classPrivateFieldGet2(_listeners, this)) listener(nextEvent);
+	}
+	startEvents() {
+		if (_classPrivateFieldGet2(_eventLoop, this)) return;
+		_classPrivateFieldSet2(_eventLoop, this, this.runEventsLoop());
+	}
+	async runEventsLoop() {
+		while (!_classPrivateFieldGet2(_closed, this)) {
+			const controller = new AbortController();
+			_classPrivateFieldSet2(_streamAbortController, this, controller);
+			try {
+				const response = await this.request(granolaTransportPaths.events, {
+					headers: { accept: "text/event-stream" },
+					signal: controller.signal
+				});
+				await this.consumeEventStream(response);
+			} catch {
+				if (_classPrivateFieldGet2(_closed, this) || controller.signal.aborted) break;
+				await new Promise((resolve) => {
+					setTimeout(resolve, _classPrivateFieldGet2(_reconnectDelayMs, this));
+				});
+			}
+		}
+	}
+	async consumeEventStream(response) {
+		const reader = response.body?.getReader();
+		if (!reader) throw new Error("server did not provide an event stream");
+		const decoder = new TextDecoder();
+		let buffer = "";
+		while (!_classPrivateFieldGet2(_closed, this)) {
+			const { done, value } = await reader.read();
+			if (done) return;
+			buffer += decoder.decode(value, { stream: true });
+			buffer = buffer.replaceAll("\r\n", "\n");
+			while (true) {
+				const boundary = buffer.indexOf("\n\n");
+				if (boundary < 0) break;
+				const chunk = buffer.slice(0, boundary);
+				buffer = buffer.slice(boundary + 2);
+				const event = parseSseEvent(chunk);
+				if (event) this.emit(event);
+			}
+		}
+	}
+};
+async function createGranolaServerClient(serverUrl, options = {}) {
+	return await GranolaServerClient.connect(serverUrl, options);
 }
-
-.button--secondary {
-  background: rgba(255, 255, 255, 0.72);
-  color: var(--ink);
-  border: 1px solid var(--line);
+//#endregion
+//#region src/web/client-state.ts
+function parseWorkspaceTab(value) {
+	switch (value) {
+		case "metadata":
+		case "raw":
+		case "transcript": return value;
+		default: return "notes";
+	}
 }
-
-.status-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 14px;
+function startupSelectionFromSearch(search) {
+	const params = new URLSearchParams(search);
+	return {
+		folderId: params.get("folder")?.trim() || "",
+		meetingId: params.get("meeting")?.trim() || "",
+		workspaceTab: parseWorkspaceTab(params.get("tab"))
+	};
 }
-
-.status-label {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--muted);
-  font-size: 0.78rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+function buildBrowserUrlPath(currentHref, selection) {
+	const url = new URL(currentHref);
+	if (selection.selectedFolderId) url.searchParams.set("folder", selection.selectedFolderId);
+	else url.searchParams.delete("folder");
+	if (selection.selectedMeetingId) url.searchParams.set("meeting", selection.selectedMeetingId);
+	else url.searchParams.delete("meeting");
+	if (parseWorkspaceTab(selection.workspaceTab) !== "notes") url.searchParams.set("tab", parseWorkspaceTab(selection.workspaceTab));
+	else url.searchParams.delete("tab");
+	return \`\${url.pathname}\${url.search}\${url.hash}\`;
 }
-
-.detail-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  padding: 0 24px 18px;
+function exportScopeLabel(scope) {
+	return scope && scope.mode === "folder" ? \`Folder: \${scope.folderName || scope.folderId}\` : "Scope: All meetings";
 }
-
-.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;
+function currentFilterSummary(filters) {
+	const parts = [];
+	if (filters.selectedFolderId) {
+		const folder = filters.folders.find((candidate) => candidate.id === filters.selectedFolderId);
+		parts.push(\`folder "\${folder ? folder.name : filters.selectedFolderId}"\`);
+	}
+	if (filters.search) parts.push(\`search "\${filters.search}"\`);
+	if (filters.updatedFrom) parts.push(\`from \${filters.updatedFrom}\`);
+	if (filters.updatedTo) parts.push(\`to \${filters.updatedTo}\`);
+	return parts.join(", ");
 }
-
-.detail-body {
-  padding: 0 24px 24px;
-  overflow: auto;
+function selectMeetingId(meetings, selectedMeetingId) {
+	if (selectedMeetingId && meetings.some((meeting) => meeting.id === selectedMeetingId)) return selectedMeetingId;
+	return meetings[0]?.id ?? null;
 }
-
-.workspace-grid {
-  display: grid;
-  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
-  gap: 18px;
+function nextWorkspaceTab(currentTab, key) {
+	const current = parseWorkspaceTab(currentTab);
+	switch (key) {
+		case "1": return "notes";
+		case "2": return "transcript";
+		case "3": return "metadata";
+		case "4": return "raw";
+		case "]":
+			switch (current) {
+				case "notes": return "transcript";
+				case "transcript": return "metadata";
+				case "metadata": return "raw";
+				case "raw": return "notes";
+			}
+			break;
+		case "[":
+			switch (current) {
+				case "notes": return "raw";
+				case "transcript": return "notes";
+				case "metadata": return "transcript";
+				case "raw": return "metadata";
+			}
+			break;
+		default: return;
+	}
 }
-
-.workspace-sidebar,
-.workspace-main {
-  margin-bottom: 0;
+//#endregion
+//#region src/web-app/components.tsx
+/** @jsxImportSource solid-js */
+var _tmpl$$1 = /* @__PURE__ */ template(\`<section class=hero><h1>Granola Toolkit</h1><p>Browser workspace for folders, meetings, notes, transcripts, and export flows on top of one local server instance.</p><input class=search placeholder="Search meetings, ids, or tags"><div class="field-row field-row--inline"><label><span class=field-label>Sort</span><select class=select><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 type=date></label></div><label class=field-row><span class=field-label>Updated To</span><input class=field-input type=date>\`), _tmpl$2 = /* @__PURE__ */ template(\`<section class=toolbar><div><p>Meetings are loaded from the shared server state so this view can stay aligned with the terminal UI and sync loop.</p></div><div class=toolbar-form><input class=field-input placeholder="Quick open by id or title"><button class="button button--secondary"type=button>Open\`), _tmpl$3 = /* @__PURE__ */ template(\`<div class="folder-empty folder-empty--error">\`), _tmpl$4 = /* @__PURE__ */ template(\`<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>\`), _tmpl$5 = /* @__PURE__ */ template(\`<button class=folder-row type=button><span class=folder-row__title>All meetings</span><span class=folder-row__meta>Browse the full meeting list.\`), _tmpl$6 = /* @__PURE__ */ template(\`<div class=folder-empty>No folders found.\`), _tmpl$7 = /* @__PURE__ */ template(\`<button class=folder-row type=button><span class=folder-row__title></span><span class=folder-row__meta>\`), _tmpl$8 = /* @__PURE__ */ template(\`<div class="meeting-empty meeting-empty--error">\`), _tmpl$9 = /* @__PURE__ */ template(\`<section class=meeting-list>\`), _tmpl$0 = /* @__PURE__ */ template(\`<div class=meeting-empty>\`), _tmpl$1 = /* @__PURE__ */ template(\`<button class=meeting-row type=button><span class=meeting-row__title></span><span class=meeting-row__meta></span><span class=meeting-row__meta>\`), _tmpl$10 = /* @__PURE__ */ template(\`<section class=detail-head><div><h2>Meeting Workspace</h2></div><div class=state-badge>\`), _tmpl$11 = /* @__PURE__ */ template(\`<p>Waiting for server state…\`), _tmpl$12 = /* @__PURE__ */ template(\`<div class=status-grid><div><span class=status-label>Surface</span><strong></strong></div><div><span class=status-label>View</span><strong></strong></div><div><span class=status-label>Auth</span><strong></strong></div><div><span class=status-label>Sync</span><strong></strong></div><div><span class=status-label>Documents</span><strong></strong></div><div><span class=status-label>Folders</span><strong></strong></div><div><span class=status-label>Cache</span><strong></strong></div><div><span class=status-label>Index</span><strong>\`), _tmpl$13 = /* @__PURE__ */ template(\`<section class=security-panel><div class=security-panel__head><h3>Server Access</h3><p>This server is locked with a password. Unlock it to load meetings and live state.</p></div><div class=security-panel__body><input class=field-input placeholder="Server password"type=password><div class=toolbar-actions><button class="button button--primary"type=button>Unlock</button><button class="button button--secondary"type=button>Lock\`), _tmpl$14 = /* @__PURE__ */ template(\`<section class=auth-panel><div class=auth-panel__head><h3>Auth Session</h3><p>Inspect, refresh, and switch between API key, stored session, and <code>supabase.json</code>.</p></div><div class=auth-panel__body>\`), _tmpl$15 = /* @__PURE__ */ template(\`<div class=auth-card><div class=auth-card__meta>Auth state unavailable.\`), _tmpl$16 = /* @__PURE__ */ template(\`<div class=auth-card__meta>Client ID: \`), _tmpl$17 = /* @__PURE__ */ template(\`<div class=auth-card__meta>Sign-in method: \`), _tmpl$18 = /* @__PURE__ */ template(\`<div class=auth-card__meta>supabase path: \`), _tmpl$19 = /* @__PURE__ */ template(\`<div class="auth-card__meta auth-card__error">\`), _tmpl$20 = /* @__PURE__ */ template(\`<div class=auth-card><div class=status-grid><div><span class=status-label>Active</span><strong></strong></div><div><span class=status-label>API key</span><strong></strong></div><div><span class=status-label>Stored</span><strong></strong></div><div><span class=status-label>supabase.json</span><strong></strong></div><div><span class=status-label>Refresh</span><strong></strong></div></div><div class=auth-card__meta>Store a Granola Personal API key here or use <code>granola auth login --api-key &lt;token&gt;</code>.</div><div class=auth-card__actions><input class=input placeholder=grn_... type=password><button class="button button--secondary"type=button>Save API key</button><button class="button button--secondary"type=button>Import desktop session</button><button class="button button--secondary"type=button>Refresh stored session</button><button class="button button--secondary"type=button>Use API key</button><button class="button button--secondary"type=button>Use stored session</button><button class="button button--secondary"type=button>Use supabase.json</button><button class="button button--secondary"type=button>Sign out\`), _tmpl$21 = /* @__PURE__ */ template(\`<section class=jobs-panel><div class=jobs-panel__head><h3>Recent Export Jobs</h3><p>Tracked across CLI and web runs.</p></div><div class=jobs-list>\`), _tmpl$22 = /* @__PURE__ */ template(\`<div class=job-empty>No export jobs yet.\`), _tmpl$23 = /* @__PURE__ */ template(\`<div class=job-card__meta>\`), _tmpl$24 = /* @__PURE__ */ template(\`<button class="button button--secondary"type=button>Rerun\`), _tmpl$25 = /* @__PURE__ */ template(\`<article class=job-card><div class=job-card__head><div><div class=job-card__title> export</div><div class=job-card__meta></div></div><div class=job-card__status></div></div><div class=job-card__meta></div><div class=job-card__meta>Started: </div><div class=job-card__meta>Output: </div><div class=job-card__actions>\`), _tmpl$26 = /* @__PURE__ */ template(\`<nav class=workspace-tabs><span class=workspace-hint>1-4 switch tabs, [ and ] cycle\`), _tmpl$27 = /* @__PURE__ */ template(\`<button class=workspace-tab type=button>\`), _tmpl$28 = /* @__PURE__ */ template(\`<div class=empty>\`), _tmpl$29 = /* @__PURE__ */ template(\`<div class=detail-meta><div class=detail-chip></div><div class=detail-chip></div><div class=detail-chip>\`), _tmpl$30 = /* @__PURE__ */ template(\`<div class=detail-body><div class=workspace-grid><aside class="detail-section workspace-sidebar"><h2>Meeting Metadata</h2><pre class=detail-pre></pre></aside><section class="detail-section workspace-main"><h2></h2><pre class=detail-pre>\`);
+function authModeLabel(mode) {
+	switch (mode) {
+		case "api-key": return "API key";
+		case "stored-session": return "Stored session";
+		default: return "supabase.json";
+	}
 }
-
-.detail-section {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid var(--line);
-  border-radius: 20px;
+function metadataLines(record) {
+	return [
+		\`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");
+}
+function workspaceBody(bundle, record, tab) {
+	switch (tab) {
+		case "transcript": return {
+			body: record.transcriptText || "(Transcript unavailable)",
+			title: "Transcript"
+		};
+		case "metadata": return {
+			body: metadataLines(record),
+			title: "Metadata"
+		};
+		case "raw": return {
+			body: JSON.stringify(bundle || record, null, 2),
+			title: "Raw Bundle"
+		};
+		default: return {
+			body: record.noteMarkdown || "(No notes available)",
+			title: "Notes"
+		};
+	}
 }
-
-.detail-section h2 {
-  margin: 0 0 14px;
-  font-size: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+function scopeLabel(scope) {
+	return exportScopeLabel(scope);
 }
-
-.detail-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--mono);
-  line-height: 1.55;
+function ToolbarFilters(props) {
+	return [(() => {
+		var _el$ = _tmpl$$1(), _el$4 = _el$.firstChild.nextSibling.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.firstChild.nextSibling, _el$1 = _el$6.nextSibling.firstChild.nextSibling, _el$12 = _el$5.nextSibling.firstChild.nextSibling;
+		_el$4.$$input = (event) => {
+			props.onSearchInput(event.currentTarget.value);
+		};
+		_el$8.addEventListener("change", (event) => {
+			props.onSortChange(event.currentTarget.value);
+		});
+		_el$1.addEventListener("change", (event) => {
+			props.onUpdatedFromChange(event.currentTarget.value);
+		});
+		_el$12.addEventListener("change", (event) => {
+			props.onUpdatedToChange(event.currentTarget.value);
+		});
+		createRenderEffect(() => _el$4.value = props.search);
+		createRenderEffect(() => _el$8.value = props.sort);
+		createRenderEffect(() => _el$1.value = props.updatedFrom);
+		createRenderEffect(() => _el$12.value = props.updatedTo);
+		return _el$;
+	})(), (() => {
+		var _el$13 = _tmpl$2(), _el$16 = _el$13.firstChild.nextSibling.firstChild, _el$17 = _el$16.nextSibling;
+		_el$16.$$keydown = (event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				props.onQuickOpen();
+			}
+		};
+		_el$16.$$input = (event) => {
+			props.onQuickOpenInput(event.currentTarget.value);
+		};
+		addEventListener(_el$17, "click", props.onQuickOpen, true);
+		createRenderEffect(() => _el$16.value = props.quickOpen);
+		return _el$13;
+	})()];
+}
+function FolderList(props) {
+	return (() => {
+		var _el$18 = _tmpl$4(), _el$20 = _el$18.firstChild.nextSibling;
+		insert(_el$20, createComponent(Show, {
+			get fallback() {
+				return [
+					(() => {
+						var _el$22 = _tmpl$5();
+						_el$22.$$click = () => {
+							props.onSelect(null);
+						};
+						createRenderEffect(() => setAttribute(_el$22, "data-selected", !props.selectedFolderId ? "true" : void 0));
+						return _el$22;
+					})(),
+					createComponent(For, {
+						get each() {
+							return props.folders;
+						},
+						children: (folder) => (() => {
+							var _el$24 = _tmpl$7(), _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling;
+							_el$24.$$click = () => {
+								props.onSelect(folder.id);
+							};
+							insert(_el$25, () => (folder.isFavourite ? "★ " : "") + (folder.name || folder.id));
+							insert(_el$26, () => \`\${folder.documentCount} meetings\`);
+							createRenderEffect(() => setAttribute(_el$24, "data-selected", folder.id === props.selectedFolderId ? "true" : void 0));
+							return _el$24;
+						})()
+					}),
+					createComponent(Show, {
+						get when() {
+							return props.folders.length === 0;
+						},
+						get children() {
+							return _tmpl$6();
+						}
+					})
+				];
+			},
+			get when() {
+				return !props.error;
+			},
+			get children() {
+				var _el$21 = _tmpl$3();
+				insert(_el$21, () => props.error);
+				return _el$21;
+			}
+		}));
+		return _el$18;
+	})();
+}
+function MeetingList(props) {
+	const summary = () => currentFilterSummary({
+		folders: props.folders,
+		search: props.search,
+		selectedFolderId: props.selectedFolderId,
+		updatedFrom: props.updatedFrom,
+		updatedTo: props.updatedTo
+	});
+	return (() => {
+		var _el$27 = _tmpl$9();
+		insert(_el$27, createComponent(Show, {
+			get fallback() {
+				return createComponent(Show, {
+					get fallback() {
+						return (() => {
+							var _el$29 = _tmpl$0();
+							insert(_el$29, (() => {
+								var _c$ = memo(() => !!summary());
+								return () => _c$() ? \`No meetings match \${summary()}.\` : "No meetings yet. Try Sync now.";
+							})());
+							return _el$29;
+						})();
+					},
+					get when() {
+						return props.meetings.length > 0;
+					},
+					get children() {
+						return createComponent(For, {
+							get each() {
+								return props.meetings;
+							},
+							children: (meeting) => (() => {
+								var _el$30 = _tmpl$1(), _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$32.nextSibling;
+								_el$30.$$click = () => {
+									props.onSelect(meeting.id);
+								};
+								insert(_el$31, () => meeting.title || meeting.id);
+								insert(_el$32, (() => {
+									var _c$2 = memo(() => !!meeting.tags.length);
+									return () => _c$2() ? meeting.tags.map((tag) => \`#\${tag}\`).join(" ") : "untagged";
+								})());
+								insert(_el$33, (() => {
+									var _c$3 = memo(() => !!meeting.updatedAt);
+									return () => _c$3() ? meeting.updatedAt.slice(0, 10) : "unknown";
+								})());
+								createRenderEffect(() => setAttribute(_el$30, "data-selected", meeting.id === props.selectedMeetingId ? "true" : void 0));
+								return _el$30;
+							})()
+						});
+					}
+				});
+			},
+			get when() {
+				return props.error;
+			},
+			get children() {
+				var _el$28 = _tmpl$8();
+				insert(_el$28, () => props.error);
+				return _el$28;
+			}
+		}));
+		return _el$27;
+	})();
+}
+function AppStatePanel(props) {
+	const syncStatus = () => {
+		const sync = props.appState?.sync;
+		if (!sync) return "idle";
+		if (sync.running) return "running";
+		if (sync.lastError) return "error";
+		if (sync.lastCompletedAt) return \`last \${sync.lastCompletedAt.slice(11, 19)}\`;
+		return "idle";
+	};
+	const authStatus = () => {
+		if (!props.appState) return "Waiting for auth state…";
+		return authModeLabel(props.appState.auth.mode);
+	};
+	return (() => {
+		var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
+		_el$35.firstChild;
+		var _el$37 = _el$35.nextSibling;
+		insert(_el$35, createComponent(Show, {
+			get fallback() {
+				return _tmpl$11();
+			},
+			get when() {
+				return props.appState;
+			},
+			children: (appState) => (() => {
+				var _el$39 = _tmpl$12(), _el$40 = _el$39.firstChild, _el$42 = _el$40.firstChild.nextSibling, _el$43 = _el$40.nextSibling, _el$45 = _el$43.firstChild.nextSibling, _el$46 = _el$43.nextSibling, _el$48 = _el$46.firstChild.nextSibling, _el$49 = _el$46.nextSibling, _el$51 = _el$49.firstChild.nextSibling, _el$52 = _el$49.nextSibling, _el$54 = _el$52.firstChild.nextSibling, _el$55 = _el$52.nextSibling, _el$57 = _el$55.firstChild.nextSibling, _el$58 = _el$55.nextSibling, _el$60 = _el$58.firstChild.nextSibling, _el$63 = _el$58.nextSibling.firstChild.nextSibling;
+				insert(_el$42, () => appState().ui.surface);
+				insert(_el$45, () => appState().ui.view);
+				insert(_el$48, authStatus);
+				insert(_el$51, syncStatus);
+				insert(_el$54, (() => {
+					var _c$4 = memo(() => !!appState().documents.loaded);
+					return () => _c$4() ? String(appState().documents.count) : "not loaded";
+				})());
+				insert(_el$57, (() => {
+					var _c$5 = memo(() => !!appState().folders.loaded);
+					return () => _c$5() ? String(appState().folders.count) : "not loaded";
+				})());
+				insert(_el$60, (() => {
+					var _c$6 = memo(() => !!appState().cache.loaded);
+					return () => _c$6() ? \`\${appState().cache.transcriptCount} transcript sets\` : appState().cache.configured ? "configured" : "not configured";
+				})());
+				insert(_el$63, (() => {
+					var _c$7 = memo(() => !!appState().index.loaded);
+					return () => _c$7() ? \`\${appState().index.meetingCount} meetings\` : appState().index.available ? "available" : "not built";
+				})());
+				return _el$39;
+			})()
+		}), null);
+		insert(_el$37, () => props.statusLabel);
+		createRenderEffect(() => setAttribute(_el$37, "data-tone", props.statusTone));
+		return _el$34;
+	})();
+}
+function SecurityPanel(props) {
+	return createComponent(Show, {
+		get when() {
+			return props.visible;
+		},
+		get children() {
+			var _el$64 = _tmpl$13(), _el$67 = _el$64.firstChild.nextSibling.firstChild, _el$69 = _el$67.nextSibling.firstChild, _el$70 = _el$69.nextSibling;
+			_el$67.$$keydown = (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					props.onUnlock();
+				}
+			};
+			_el$67.$$input = (event) => {
+				props.onPasswordChange(event.currentTarget.value);
+			};
+			addEventListener(_el$69, "click", props.onUnlock, true);
+			addEventListener(_el$70, "click", props.onLock, true);
+			createRenderEffect(() => _el$67.value = props.password);
+			return _el$64;
+		}
+	});
 }
-
-.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);
+function AuthPanel(props) {
+	return (() => {
+		var _el$71 = _tmpl$14(), _el$73 = _el$71.firstChild.nextSibling;
+		insert(_el$73, createComponent(Show, {
+			get fallback() {
+				return _tmpl$15();
+			},
+			get when() {
+				return props.auth;
+			},
+			children: (auth) => (() => {
+				var _el$75 = _tmpl$20(), _el$76 = _el$75.firstChild, _el$77 = _el$76.firstChild, _el$79 = _el$77.firstChild.nextSibling, _el$80 = _el$77.nextSibling, _el$82 = _el$80.firstChild.nextSibling, _el$83 = _el$80.nextSibling, _el$85 = _el$83.firstChild.nextSibling, _el$86 = _el$83.nextSibling, _el$88 = _el$86.firstChild.nextSibling, _el$91 = _el$86.nextSibling.firstChild.nextSibling, _el$99 = _el$76.nextSibling, _el$101 = _el$99.nextSibling.firstChild, _el$102 = _el$101.nextSibling, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling, _el$106 = _el$105.nextSibling, _el$107 = _el$106.nextSibling, _el$108 = _el$107.nextSibling;
+				insert(_el$79, () => authModeLabel(auth().mode));
+				insert(_el$82, () => auth().apiKeyAvailable ? "available" : "missing");
+				insert(_el$85, () => auth().storedSessionAvailable ? "available" : "missing");
+				insert(_el$88, () => auth().supabaseAvailable ? "available" : "missing");
+				insert(_el$91, () => auth().refreshAvailable ? "available" : "missing");
+				insert(_el$75, createComponent(Show, {
+					get when() {
+						return auth().clientId;
+					},
+					get children() {
+						var _el$92 = _tmpl$16();
+						_el$92.firstChild;
+						insert(_el$92, () => auth().clientId, null);
+						return _el$92;
+					}
+				}), _el$99);
+				insert(_el$75, createComponent(Show, {
+					get when() {
+						return auth().signInMethod;
+					},
+					get children() {
+						var _el$94 = _tmpl$17();
+						_el$94.firstChild;
+						insert(_el$94, () => auth().signInMethod, null);
+						return _el$94;
+					}
+				}), _el$99);
+				insert(_el$75, createComponent(Show, {
+					get when() {
+						return auth().supabasePath;
+					},
+					get children() {
+						var _el$96 = _tmpl$18();
+						_el$96.firstChild;
+						insert(_el$96, () => auth().supabasePath, null);
+						return _el$96;
+					}
+				}), _el$99);
+				insert(_el$75, createComponent(Show, {
+					get when() {
+						return auth().lastError;
+					},
+					get children() {
+						var _el$98 = _tmpl$19();
+						insert(_el$98, () => auth().lastError);
+						return _el$98;
+					}
+				}), _el$99);
+				_el$101.$$input = (event) => {
+					props.onApiKeyDraftChange(event.currentTarget.value);
+				};
+				addEventListener(_el$102, "click", props.onSaveApiKey, true);
+				addEventListener(_el$103, "click", props.onImportDesktopSession, true);
+				addEventListener(_el$104, "click", props.onRefresh, true);
+				_el$105.$$click = () => {
+					props.onSwitchMode("api-key");
+				};
+				_el$106.$$click = () => {
+					props.onSwitchMode("stored-session");
+				};
+				_el$107.$$click = () => {
+					props.onSwitchMode("supabase-file");
+				};
+				addEventListener(_el$108, "click", props.onLogout, true);
+				createRenderEffect((_p$) => {
+					var _v$ = !auth().supabaseAvailable, _v$2 = !auth().storedSessionAvailable || !auth().refreshAvailable, _v$3 = !auth().apiKeyAvailable || auth().mode === "api-key", _v$4 = !auth().storedSessionAvailable || auth().mode === "stored-session", _v$5 = !auth().supabaseAvailable || auth().mode === "supabase-file", _v$6 = !auth().apiKeyAvailable && !auth().storedSessionAvailable;
+					_v$ !== _p$.e && (_el$103.disabled = _p$.e = _v$);
+					_v$2 !== _p$.t && (_el$104.disabled = _p$.t = _v$2);
+					_v$3 !== _p$.a && (_el$105.disabled = _p$.a = _v$3);
+					_v$4 !== _p$.o && (_el$106.disabled = _p$.o = _v$4);
+					_v$5 !== _p$.i && (_el$107.disabled = _p$.i = _v$5);
+					_v$6 !== _p$.n && (_el$108.disabled = _p$.n = _v$6);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0
+				});
+				createRenderEffect(() => _el$101.value = props.apiKeyDraft);
+				return _el$75;
+			})()
+		}));
+		return _el$71;
+	})();
+}
+function ExportJobsPanel(props) {
+	return (() => {
+		var _el$109 = _tmpl$21(), _el$111 = _el$109.firstChild.nextSibling;
+		insert(_el$111, createComponent(Show, {
+			get when() {
+				return props.jobs.length > 0;
+			},
+			get fallback() {
+				return _tmpl$22();
+			},
+			get children() {
+				return createComponent(For, {
+					get each() {
+						return props.jobs.slice(0, 6);
+					},
+					children: (job) => (() => {
+						var _el$113 = _tmpl$25(), _el$114 = _el$113.firstChild, _el$115 = _el$114.firstChild, _el$116 = _el$115.firstChild, _el$117 = _el$116.firstChild, _el$118 = _el$116.nextSibling, _el$119 = _el$115.nextSibling, _el$120 = _el$114.nextSibling, _el$121 = _el$120.nextSibling;
+						_el$121.firstChild;
+						var _el$123 = _el$121.nextSibling;
+						_el$123.firstChild;
+						var _el$126 = _el$123.nextSibling;
+						insert(_el$116, () => job.kind, _el$117);
+						insert(_el$118, () => job.id);
+						insert(_el$119, () => job.status);
+						insert(_el$120, () => \`Format: \${job.format} • \${scopeLabel(job.scope)} • \${job.itemCount > 0 ? \`\${job.completedCount}/\${job.itemCount} items\` : "0 items"} • Written: \${job.written}\`);
+						insert(_el$121, () => job.startedAt.slice(0, 19), null);
+						insert(_el$123, () => job.outputDir, null);
+						insert(_el$113, createComponent(Show, {
+							get when() {
+								return job.error;
+							},
+							get children() {
+								var _el$125 = _tmpl$23();
+								insert(_el$125, () => job.error);
+								return _el$125;
+							}
+						}), _el$126);
+						insert(_el$126, createComponent(Show, {
+							get when() {
+								return job.status !== "running";
+							},
+							get children() {
+								var _el$127 = _tmpl$24();
+								_el$127.$$click = () => {
+									props.onRerun(job.id);
+								};
+								return _el$127;
+							}
+						}));
+						createRenderEffect(() => setAttribute(_el$119, "data-status", job.status));
+						return _el$113;
+					})()
+				});
+			}
+		}));
+		return _el$109;
+	})();
+}
+function Workspace(props) {
+	const parsedTab = () => parseWorkspaceTab(props.tab);
+	const details = () => {
+		if (!props.selectedMeeting) return null;
+		return workspaceBody(props.bundle, props.selectedMeeting, parsedTab());
+	};
+	return [(() => {
+		var _el$128 = _tmpl$26(), _el$129 = _el$128.firstChild;
+		insert(_el$128, createComponent(For, {
+			each: [
+				"notes",
+				"transcript",
+				"metadata",
+				"raw"
+			],
+			children: (tab) => (() => {
+				var _el$130 = _tmpl$27();
+				_el$130.$$click = () => {
+					props.onSelectTab(tab);
+				};
+				insert(_el$130, tab === "notes" ? "Notes" : tab === "transcript" ? "Transcript" : tab === "metadata" ? "Metadata" : "Raw");
+				createRenderEffect(() => setAttribute(_el$130, "data-selected", parsedTab() === tab ? "true" : void 0));
+				return _el$130;
+			})()
+		}), _el$129);
+		return _el$128;
+	})(), createComponent(Show, {
+		get when() {
+			return props.selectedMeeting;
+		},
+		get fallback() {
+			return (() => {
+				var _el$131 = _tmpl$28();
+				insert(_el$131, () => props.detailError || "Select a meeting to inspect its notes and transcript.");
+				return _el$131;
+			})();
+		},
+		children: (meeting) => [(() => {
+			var _el$132 = _tmpl$29(), _el$133 = _el$132.firstChild, _el$134 = _el$133.nextSibling, _el$135 = _el$134.nextSibling;
+			insert(_el$133, () => \`ID: \${meeting().meeting.id}\`);
+			insert(_el$134, () => \`Source: \${meeting().meeting.noteContentSource}\`);
+			insert(_el$135, () => \`Transcript: \${meeting().meeting.transcriptSegmentCount} segments\`);
+			return _el$132;
+		})(), createComponent(Show, {
+			get when() {
+				return !props.detailError;
+			},
+			get fallback() {
+				return (() => {
+					var _el$144 = _tmpl$28();
+					insert(_el$144, () => props.detailError);
+					return _el$144;
+				})();
+			},
+			get children() {
+				var _el$136 = _tmpl$30(), _el$138 = _el$136.firstChild.firstChild, _el$140 = _el$138.firstChild.nextSibling, _el$142 = _el$138.nextSibling.firstChild, _el$143 = _el$142.nextSibling;
+				insert(_el$140, () => metadataLines(meeting()));
+				insert(_el$142, () => details()?.title);
+				insert(_el$143, () => details()?.body);
+				return _el$136;
+			}
+		})]
+	})];
 }
-
-@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;
-  }
+delegateEvents([
+	"input",
+	"keydown",
+	"click"
+]);
+//#endregion
+//#region src/web-app/App.tsx
+/** @jsxImportSource solid-js */
+var _tmpl$ = /* @__PURE__ */ template(\`<div class=shell><aside class="pane sidebar"></aside><main class="pane detail"><section class=toolbar><div class=toolbar-actions><button class="button button--primary"type=button>Sync now</button><button class="button button--secondary"type=button>Export Notes</button><button class="button button--secondary"type=button>Export Transcripts</button></div><p>Solid-powered web workspace on top of the same local server, sync loop, and shared app contracts.\`);
+function browserConfig() {
+	return { passwordRequired: Boolean(window.__GRANOLA_SERVER__?.passwordRequired) };
+}
+async function requestJson(path, init) {
+	const response = await fetch(path, init);
+	const payload = await response.json().catch(() => ({}));
+	if (!response.ok) {
+		const error = typeof payload.error === "string" && payload.error.trim() ? payload.error : response.statusText || "Request failed";
+		throw new Error(error);
+	}
+	return payload;
+}
+function App() {
+	const startup = startupSelectionFromSearch(window.location.search);
+	const [state, setState] = createStore({
+		apiKeyDraft: "",
+		appState: null,
+		detailError: "",
+		folderError: "",
+		folders: [],
+		listError: "",
+		meetingSource: "live",
+		meetings: [],
+		quickOpen: "",
+		search: "",
+		selectedFolderId: startup.folderId || null,
+		selectedMeetingBundle: null,
+		selectedMeetingId: startup.meetingId || null,
+		selectedMeeting: null,
+		serverLocked: browserConfig().passwordRequired,
+		serverPassword: "",
+		sort: "updated-desc",
+		statusLabel: browserConfig().passwordRequired ? "Server locked" : "Connecting…",
+		statusTone: browserConfig().passwordRequired ? "error" : "idle",
+		updatedFrom: "",
+		updatedTo: "",
+		workspaceTab: parseWorkspaceTab(startup.workspaceTab)
+	});
+	let client = null;
+	let unsubscribe;
+	const setStatus = (label, tone = "idle") => {
+		setState({
+			statusLabel: label,
+			statusTone: tone
+		});
+	};
+	const mergeAuthState = async (authState) => {
+		if (!client) return;
+		setState("appState", {
+			...client.getState(),
+			auth: authState ?? await client.inspectAuth()
+		});
+	};
+	const detachClient = async () => {
+		unsubscribe?.();
+		unsubscribe = void 0;
+		if (client) {
+			await client.close().catch(() => void 0);
+			client = null;
+		}
+	};
+	const attachClient = async () => {
+		await detachClient();
+		client = await createGranolaServerClient(window.location.origin);
+		unsubscribe = client.subscribe((event) => {
+			setState("appState", event.state);
+		});
+		await mergeAuthState();
+	};
+	const loadFolders = async (refresh = false) => {
+		if (!client) return;
+		try {
+			setState("folderError", "");
+			const result = await client.listFolders({
+				forceRefresh: refresh,
+				limit: 100
+			});
+			setState("folders", result.folders);
+			if (state.selectedFolderId && !result.folders.some((folder) => folder.id === state.selectedFolderId)) setState("selectedFolderId", null);
+		} catch (error) {
+			setState("folderError", error instanceof Error ? error.message : String(error));
+			setState("folders", []);
+			setState("selectedFolderId", null);
+		}
+	};
+	const loadMeeting = async (meetingId) => {
+		if (!client) return;
+		setState("selectedMeetingId", meetingId);
+		try {
+			setState("detailError", "");
+			const bundle = await client.getMeeting(meetingId);
+			setState("selectedMeetingBundle", bundle);
+			setState("selectedMeeting", bundle.meeting);
+		} catch (error) {
+			setState("selectedMeetingBundle", null);
+			setState("selectedMeeting", null);
+			setState("detailError", error instanceof Error ? error.message : String(error));
+		}
+	};
+	const loadMeetings = async (options = {}) => {
+		if (!client) return;
+		try {
+			setState("listError", "");
+			const result = await client.listMeetings({
+				folderId: state.selectedFolderId || void 0,
+				forceRefresh: options.refresh,
+				limit: 100,
+				search: state.search || void 0,
+				sort: state.sort,
+				updatedFrom: state.updatedFrom || void 0,
+				updatedTo: state.updatedTo || void 0
+			});
+			const preferredMeetingId = options.preferredMeetingId ?? state.selectedMeetingId;
+			const nextMeetingId = selectMeetingId(result.meetings, preferredMeetingId);
+			setState("meetings", result.meetings);
+			setState("meetingSource", result.source);
+			setState("selectedMeetingId", nextMeetingId);
+			if (nextMeetingId) await loadMeeting(nextMeetingId);
+			else {
+				setState("selectedMeeting", null);
+				setState("selectedMeetingBundle", null);
+				setState("detailError", "");
+			}
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setState("listError", message);
+			setState("selectedMeeting", null);
+			setState("selectedMeetingBundle", null);
+			setState("detailError", message);
+		}
+	};
+	const refreshAll = async (forceRefresh = false) => {
+		if (!client) await attachClient();
+		setStatus(forceRefresh ? "Syncing…" : "Refreshing…", "busy");
+		if (forceRefresh) await client?.sync({
+			forceRefresh: true,
+			foreground: true
+		});
+		await Promise.all([loadFolders(forceRefresh), mergeAuthState()]);
+		await loadMeetings({ refresh: forceRefresh });
+		setState("serverLocked", false);
+		setStatus(forceRefresh ? "Sync complete" : state.meetingSource === "index" ? "Loaded from index" : "Connected", "ok");
+	};
+	const connectAndRefresh = async (forceRefresh = false) => {
+		try {
+			await refreshAll(forceRefresh);
+		} catch (error) {
+			setStatus("Connection failed", "error");
+			setState("detailError", error instanceof Error ? error.message : String(error));
+		}
+	};
+	const quickOpenMeeting = async () => {
+		if (!client) return;
+		const query = state.quickOpen.trim();
+		if (!query) {
+			setStatus("Enter a title or id", "error");
+			return;
+		}
+		setStatus("Opening meeting…", "busy");
+		try {
+			const bundle = await client.findMeeting(query);
+			setState("selectedFolderId", bundle.meeting.meeting.folders[0]?.id || null);
+			setState("search", "");
+			setState("updatedFrom", "");
+			setState("updatedTo", "");
+			await loadMeetings({ preferredMeetingId: bundle.document.id });
+			setStatus("Connected", "ok");
+		} catch (error) {
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Quick open failed", "error");
+		}
+	};
+	const saveApiKey = async () => {
+		if (!client) return;
+		if (!state.apiKeyDraft.trim()) {
+			setStatus("Enter a Granola API key", "error");
+			return;
+		}
+		setStatus("Saving API key…", "busy");
+		try {
+			const auth = await client.loginAuth({ apiKey: state.apiKeyDraft.trim() });
+			setState("apiKeyDraft", "");
+			await mergeAuthState(auth);
+			await refreshAll();
+		} catch (error) {
+			await mergeAuthState();
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("API key save failed", "error");
+		}
+	};
+	const importDesktopSession = async () => {
+		if (!client) return;
+		setStatus("Importing desktop session…", "busy");
+		try {
+			await mergeAuthState(await client.loginAuth());
+			await refreshAll();
+		} catch (error) {
+			await mergeAuthState();
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Auth import failed", "error");
+		}
+	};
+	const refreshAuth = async () => {
+		if (!client) return;
+		setStatus("Refreshing session…", "busy");
+		try {
+			await mergeAuthState(await client.refreshAuth());
+			await refreshAll();
+		} catch (error) {
+			await mergeAuthState();
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Refresh failed", "error");
+		}
+	};
+	const switchAuthMode = async (mode) => {
+		if (!client) return;
+		setStatus("Switching auth source…", "busy");
+		try {
+			await mergeAuthState(await client.switchAuthMode(mode));
+			await refreshAll();
+		} catch (error) {
+			await mergeAuthState();
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Switch failed", "error");
+		}
+	};
+	const logout = async () => {
+		if (!client) return;
+		setStatus("Signing out…", "busy");
+		try {
+			await mergeAuthState(await client.logoutAuth());
+			await refreshAll();
+		} catch (error) {
+			await mergeAuthState();
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Sign out failed", "error");
+		}
+	};
+	const exportNotes = async () => {
+		if (!client) return;
+		setStatus(state.selectedFolderId ? "Exporting folder notes…" : "Exporting notes…", "busy");
+		try {
+			await client.exportNotes("markdown", { folderId: state.selectedFolderId || void 0 });
+			await refreshAll();
+		} catch (error) {
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Export failed", "error");
+		}
+	};
+	const exportTranscripts = async () => {
+		if (!client) return;
+		setStatus(state.selectedFolderId ? "Exporting folder transcripts…" : "Exporting transcripts…", "busy");
+		try {
+			await client.exportTranscripts("text", { folderId: state.selectedFolderId || void 0 });
+			await refreshAll();
+		} catch (error) {
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Export failed", "error");
+		}
+	};
+	const rerunJob = async (jobId) => {
+		if (!client) return;
+		setStatus("Rerunning export…", "busy");
+		try {
+			await client.rerunExportJob(jobId);
+			await refreshAll();
+		} catch (error) {
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Rerun failed", "error");
+		}
+	};
+	const unlockServer = async () => {
+		if (!state.serverPassword.trim()) {
+			setStatus("Enter the server password", "error");
+			return;
+		}
+		setStatus("Unlocking server…", "busy");
+		try {
+			await requestJson("/auth/unlock", {
+				body: JSON.stringify({ password: state.serverPassword }),
+				headers: { "content-type": "application/json" },
+				method: "POST"
+			});
+			setState("serverPassword", "");
+			setState("serverLocked", false);
+			await connectAndRefresh(true);
+		} catch (error) {
+			setState("detailError", error instanceof Error ? error.message : String(error));
+			setStatus("Unlock failed", "error");
+		}
+	};
+	const lockServer = async () => {
+		try {
+			await requestJson("/auth/lock", { method: "POST" });
+		} catch {}
+		await detachClient();
+		setState({
+			appState: null,
+			detailError: "",
+			folderError: "",
+			folders: [],
+			listError: "",
+			meetings: [],
+			selectedFolderId: null,
+			selectedMeeting: null,
+			selectedMeetingBundle: null,
+			selectedMeetingId: null,
+			serverLocked: true,
+			serverPassword: ""
+		});
+		setStatus("Server locked", "error");
+	};
+	createEffect(() => {
+		const nextPath = buildBrowserUrlPath(window.location.href, {
+			selectedFolderId: state.selectedFolderId,
+			selectedMeetingId: state.selectedMeetingId,
+			workspaceTab: state.workspaceTab
+		});
+		if (nextPath !== \`\${window.location.pathname}\${window.location.search}\${window.location.hash}\`) history.replaceState(null, "", nextPath);
+	});
+	onMount(() => {
+		const onKeyDown = (event) => {
+			const target = event.target;
+			if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) return;
+			const nextTab = nextWorkspaceTab(state.workspaceTab, event.key);
+			if (nextTab) setState("workspaceTab", nextTab);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		onCleanup(() => {
+			document.removeEventListener("keydown", onKeyDown);
+		});
+		if (!state.serverLocked) connectAndRefresh();
+	});
+	onCleanup(() => {
+		detachClient();
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$6 = _el$4.firstChild.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+		insert(_el$2, createComponent(ToolbarFilters, {
+			onQuickOpen: () => {
+				quickOpenMeeting();
+			},
+			onQuickOpenInput: (value) => {
+				setState("quickOpen", value);
+			},
+			onSearchInput: (value) => {
+				setState("search", value.trim());
+				loadMeetings();
+			},
+			onSortChange: (value) => {
+				setState("sort", value);
+				loadMeetings();
+			},
+			onUpdatedFromChange: (value) => {
+				setState("updatedFrom", value);
+				loadMeetings();
+			},
+			onUpdatedToChange: (value) => {
+				setState("updatedTo", value);
+				loadMeetings();
+			},
+			get quickOpen() {
+				return state.quickOpen;
+			},
+			get search() {
+				return state.search;
+			},
+			get sort() {
+				return state.sort;
+			},
+			get updatedFrom() {
+				return state.updatedFrom;
+			},
+			get updatedTo() {
+				return state.updatedTo;
+			}
+		}), null);
+		insert(_el$2, createComponent(FolderList, {
+			get error() {
+				return state.folderError;
+			},
+			get folders() {
+				return state.folders;
+			},
+			onSelect: (folderId) => {
+				setState("selectedFolderId", folderId);
+				setState("selectedMeetingId", null);
+				setState("selectedMeeting", null);
+				setState("selectedMeetingBundle", null);
+				loadMeetings();
+			},
+			get selectedFolderId() {
+				return state.selectedFolderId;
+			}
+		}), null);
+		insert(_el$2, createComponent(MeetingList, {
+			get error() {
+				return state.listError;
+			},
+			get folders() {
+				return state.folders;
+			},
+			get meetings() {
+				return state.meetings;
+			},
+			onSelect: (meetingId) => {
+				loadMeeting(meetingId);
+			},
+			get search() {
+				return state.search;
+			},
+			get selectedFolderId() {
+				return state.selectedFolderId;
+			},
+			get selectedMeetingId() {
+				return state.selectedMeetingId;
+			},
+			get updatedFrom() {
+				return state.updatedFrom;
+			},
+			get updatedTo() {
+				return state.updatedTo;
+			}
+		}), null);
+		insert(_el$3, createComponent(AppStatePanel, {
+			get appState() {
+				return state.appState;
+			},
+			get statusLabel() {
+				return state.statusLabel;
+			},
+			get statusTone() {
+				return state.statusTone;
+			}
+		}), _el$4);
+		_el$6.$$click = () => {
+			connectAndRefresh(true);
+		};
+		_el$7.$$click = () => {
+			exportNotes();
+		};
+		_el$8.$$click = () => {
+			exportTranscripts();
+		};
+		insert(_el$3, createComponent(SecurityPanel, {
+			onLock: () => {
+				lockServer();
+			},
+			onPasswordChange: (value) => {
+				setState("serverPassword", value);
+			},
+			onUnlock: () => {
+				unlockServer();
+			},
+			get password() {
+				return state.serverPassword;
+			},
+			get visible() {
+				return state.serverLocked;
+			}
+		}), null);
+		insert(_el$3, createComponent(AuthPanel, {
+			get apiKeyDraft() {
+				return state.apiKeyDraft;
+			},
+			get auth() {
+				return state.appState?.auth;
+			},
+			onApiKeyDraftChange: (value) => {
+				setState("apiKeyDraft", value);
+			},
+			onImportDesktopSession: () => {
+				importDesktopSession();
+			},
+			onLogout: () => {
+				logout();
+			},
+			onRefresh: () => {
+				refreshAuth();
+			},
+			onSaveApiKey: () => {
+				saveApiKey();
+			},
+			onSwitchMode: (mode) => {
+				switchAuthMode(mode);
+			}
+		}), null);
+		insert(_el$3, createComponent(ExportJobsPanel, {
+			get jobs() {
+				return state.appState?.exports.jobs || [];
+			},
+			onRerun: (jobId) => {
+				rerunJob(jobId);
+			}
+		}), null);
+		insert(_el$3, createComponent(Workspace, {
+			get bundle() {
+				return state.selectedMeetingBundle;
+			},
+			get detailError() {
+				return state.detailError;
+			},
+			onSelectTab: (tab) => {
+				setState("workspaceTab", tab);
+			},
+			get selectedMeeting() {
+				return state.selectedMeeting;
+			},
+			get tab() {
+				return state.workspaceTab;
+			}
+		}), null);
+		return _el$;
+	})();
 }
+delegateEvents(["click"]);
+//#endregion
+//#region src/web-app/main.tsx
+/** @jsxImportSource solid-js */
+var root = document.getElementById("granola-web-root");
+if (!root) throw new Error("Granola web root element not found");
+render(() => createComponent(App, {}), root);
+//#endregion
 `;
 //#endregion
+//#region src/web/assets.ts
+const granolaWebAssetPaths = {
+	script: "/assets/granola-web-client.js",
+	stylesheet: "/assets/granola-web-client.css"
+};
+function granolaWebAssetForPath(path) {
+	switch (path) {
+		case granolaWebAssetPaths.script: return {
+			body: granolaWebClientJs,
+			contentType: "text/javascript; charset=utf-8"
+		};
+		case granolaWebAssetPaths.stylesheet: return {
+			body: granolaWebClientCss,
+			contentType: "text/css; charset=utf-8"
+		};
+		default: return;
+	}
+}
+//#endregion
 //#region src/server/web.ts
 function renderGranolaWebPage(options = {}) {
 	return `<!doctype html>
@@ -6874,16 +8222,14 @@ function renderGranolaWebPage(options = {}) {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Granola Toolkit</title>
-    <style>
-${granolaWebStyles}
-    </style>
+    <link rel="stylesheet" href="${granolaWebAssetPaths.stylesheet}" />
   </head>
   <body>
-${granolaWebMarkup}
-    <script type="module">
+    <div id="granola-web-root"></div>
+    <script>
 window.__GRANOLA_SERVER__ = ${JSON.stringify({ passwordRequired: options.serverPasswordRequired ?? false })};
-${granolaWebClientScript}
     <\/script>
+    <script type="module" src="${granolaWebAssetPaths.script}"><\/script>
   </body>
 </html>`;
 }
@@ -7028,7 +8374,7 @@ function isPasswordAuthenticated(request, password) {
 	return parseCookies(request)[PASSWORD_COOKIE_NAME] === password;
 }
 function publicRoute(path, enableWebClient) {
-	return path === granolaTransportPaths.health || path === granolaTransportPaths.serverInfo || path === granolaTransportPaths.authUnlock || enableWebClient && path === granolaTransportPaths.root;
+	return path === granolaTransportPaths.health || path === granolaTransportPaths.serverInfo || path === granolaTransportPaths.authUnlock || enableWebClient && (path === granolaTransportPaths.root || Boolean(granolaWebAssetForPath(path)));
 }
 async function startGranolaServer(app, options = {}) {
 	const enableWebClient = options.enableWebClient ?? false;
@@ -7091,6 +8437,18 @@ async function startGranolaServer(app, options = {}) {
 				sendHtml(response, renderGranolaWebPage({ serverPasswordRequired: Boolean(security.password) }), 200, originHeaders);
 				return;
 			}
+			if (method === "GET" && enableWebClient) {
+				const asset = granolaWebAssetForPath(path);
+				if (asset) {
+					response.writeHead(200, {
+						"content-length": Buffer.byteLength(asset.body),
+						"content-type": asset.contentType,
+						...originHeaders
+					});
+					response.end(asset.body);
+					return;
+				}
+			}
 			if (method === "GET" && path === granolaTransportPaths.health) {
 				sendJson(response, {
 					ok: true,