From df0363804d6d402913bf3c029222bfd56afb390f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 1 Mar 2026 12:15:57 +0000
Subject: [PATCH 1/2] feat: add global command palette with Cmd+K shortcut
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New CommandPalette.svelte component with thread search, actions, navigation
- Keyboard navigation (arrows/Enter/Escape), auto-focus input on open
- Features: search threads, new thread, add resource, toggle theme, nav shortcuts
- Sidebar search input now opens command palette with ⌘K hint
- Global Cmd+K shortcut wired in app layout
- AddResourceModal accessible from palette

Co-authored-by: Ben Davis <bmdavis419@users.noreply.github.com>
---
 .../src/lib/components/CommandPalette.svelte  | 332 ++++++++++++++++++
 apps/web/src/lib/components/Sidebar.svelte    |  59 ++--
 apps/web/src/routes/app/+layout.svelte        |  35 +-
 3 files changed, 382 insertions(+), 44 deletions(-)
 create mode 100644 apps/web/src/lib/components/CommandPalette.svelte

diff --git a/apps/web/src/lib/components/CommandPalette.svelte b/apps/web/src/lib/components/CommandPalette.svelte
new file mode 100644
index 00000000..a85c52e5
--- /dev/null
+++ b/apps/web/src/lib/components/CommandPalette.svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+	import {
+		BookOpen,
+		CornerDownLeft,
+		LifeBuoy,
+		Link,
+		MessageSquare,
+		Moon,
+		Plus,
+		Search,
+		Settings,
+		Sun
+	} from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { getThemeStore } from '$lib/stores/theme.svelte';
+
+	type ThreadItem = {
+		_id: string;
+		title?: string | null;
+		lastActivityAt: number;
+		isStreaming?: boolean;
+	};
+
+	type CommandItem = {
+		id: string;
+		group: string;
+		label: string;
+		sublabel?: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon: any;
+		onSelect: () => void;
+	};
+
+	interface Props {
+		isOpen: boolean;
+		threads: ThreadItem[];
+		onClose: () => void;
+		onOpenAddResource: () => void;
+	}
+
+	let { isOpen, threads, onClose, onOpenAddResource }: Props = $props();
+
+	const themeStore = getThemeStore();
+
+	let searchQuery = $state('');
+	let selectedIndex = $state(0);
+	let inputEl: HTMLInputElement | undefined = $state(undefined);
+	let listEl: HTMLDivElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (isOpen) {
+			searchQuery = '';
+			selectedIndex = 0;
+			setTimeout(() => inputEl?.focus(), 10);
+		}
+	});
+
+	$effect(() => {
+		searchQuery;
+		selectedIndex = 0;
+	});
+
+	const allItems = $derived.by((): CommandItem[] => {
+		const query = searchQuery.trim().toLowerCase();
+
+		const threadItems: CommandItem[] = (() => {
+			const filtered = !query
+				? threads.slice(0, 6)
+				: threads.filter((t) => (t.title ?? t._id).toLowerCase().includes(query)).slice(0, 8);
+			return filtered.map((t) => ({
+				id: `thread-${t._id}`,
+				group: 'Threads',
+				label: t.title ?? `Thread ${t._id.slice(0, 8)}…`,
+				sublabel: new Date(t.lastActivityAt).toLocaleDateString(undefined, {
+					month: 'short',
+					day: 'numeric'
+				}),
+				icon: MessageSquare,
+				onSelect: () => {
+					goto(`/app/chat/${t._id}`);
+					onClose();
+				}
+			}));
+		})();
+
+		const actionItems: CommandItem[] = [
+			{
+				id: 'new-thread',
+				group: 'Actions',
+				label: 'New Thread',
+				icon: Plus,
+				onSelect: () => {
+					goto('/app/chat/new');
+					onClose();
+				}
+			},
+			{
+				id: 'add-resource',
+				group: 'Actions',
+				label: 'Add Resource',
+				icon: Link,
+				onSelect: () => {
+					onOpenAddResource();
+					onClose();
+				}
+			},
+			{
+				id: 'toggle-theme',
+				group: 'Actions',
+				label: themeStore.theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode',
+				icon: themeStore.theme === 'dark' ? Sun : Moon,
+				onSelect: () => {
+					themeStore.toggle();
+					onClose();
+				}
+			}
+		];
+
+		const navItems: CommandItem[] = [
+			{
+				id: 'goto-settings',
+				group: 'Navigate',
+				label: 'Settings',
+				icon: Settings,
+				onSelect: () => {
+					goto('/app/settings');
+					onClose();
+				}
+			},
+			{
+				id: 'goto-resources',
+				group: 'Navigate',
+				label: 'Resources',
+				icon: BookOpen,
+				onSelect: () => {
+					goto('/app/settings/resources');
+					onClose();
+				}
+			},
+			{
+				id: 'goto-mcp',
+				group: 'Navigate',
+				label: 'MCP Questions',
+				icon: MessageSquare,
+				onSelect: () => {
+					goto('/app/settings/questions');
+					onClose();
+				}
+			},
+			{
+				id: 'goto-support',
+				group: 'Navigate',
+				label: 'Support',
+				icon: LifeBuoy,
+				onSelect: () => {
+					goto('/app/support');
+					onClose();
+				}
+			}
+		];
+
+		const filteredNonThread = query
+			? [...actionItems, ...navItems].filter(
+					(item) =>
+						item.label.toLowerCase().includes(query) ||
+						item.group.toLowerCase().includes(query)
+				)
+			: [...actionItems, ...navItems];
+
+		return [...threadItems, ...filteredNonThread];
+	});
+
+	const groupedItems = $derived.by(() => {
+		const groups: { name: string; items: (CommandItem & { globalIndex: number })[] }[] = [];
+		let idx = 0;
+		for (const item of allItems) {
+			let group = groups.find((g) => g.name === item.group);
+			if (!group) {
+				group = { name: item.group, items: [] };
+				groups.push(group);
+			}
+			group.items.push({ ...item, globalIndex: idx++ });
+		}
+		return groups;
+	});
+
+	$effect(() => {
+		const sel = selectedIndex;
+		const el = listEl?.querySelector(`[data-index="${sel}"]`) as HTMLElement | null;
+		el?.scrollIntoView({ block: 'nearest' });
+	});
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!isOpen) return;
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			onClose();
+			return;
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			selectedIndex = Math.min(selectedIndex + 1, allItems.length - 1);
+			return;
+		}
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			selectedIndex = Math.max(selectedIndex - 1, 0);
+			return;
+		}
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			allItems[selectedIndex]?.onSelect();
+			return;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+	<div
+		class="fixed inset-0 z-50 flex items-start justify-center bg-[hsl(var(--bc-bg))]/80 px-4 pt-[14vh] backdrop-blur-sm"
+		role="presentation"
+		onclick={onClose}
+	>
+		<div
+			class="bc-card bc-reveal relative w-full max-w-[520px] overflow-hidden"
+			style="--delay: 15ms; box-shadow: 0 16px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);"
+			role="dialog"
+			aria-modal="true"
+			aria-label="Command palette"
+			tabindex="-1"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
+			<div class="flex items-center gap-3 border-b border-[hsl(var(--bc-border))] px-4 py-3">
+				<Search size={15} class="shrink-0 text-[hsl(var(--bc-fg-muted))]" />
+				<input
+					bind:this={inputEl}
+					type="text"
+					class="min-w-0 flex-1 bg-transparent text-sm text-[hsl(var(--bc-fg))] placeholder-[hsl(var(--bc-fg-muted))] focus:outline-none"
+					placeholder="Search threads, actions, pages…"
+					bind:value={searchQuery}
+					aria-label="Search commands"
+					autocomplete="off"
+					spellcheck="false"
+				/>
+				<button
+					type="button"
+					class="shrink-0 border border-[hsl(var(--bc-border))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--bc-fg-muted))] transition-colors hover:border-[hsl(var(--bc-fg-muted))] hover:text-[hsl(var(--bc-fg))]"
+					onclick={onClose}
+					aria-label="Close command palette"
+				>
+					Esc
+				</button>
+			</div>
+
+			<div bind:this={listEl} class="max-h-[360px] overflow-y-auto" role="listbox">
+				{#if allItems.length === 0}
+					<div class="px-4 py-10 text-center text-sm text-[hsl(var(--bc-fg-muted))]">
+						No results for "<span class="text-[hsl(var(--bc-fg))]">{searchQuery}</span>"
+					</div>
+				{:else}
+					{#each groupedItems as group (group.name)}
+						<div
+							class="px-4 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-[hsl(var(--bc-fg-muted))]"
+						>
+							{group.name}
+						</div>
+						{#each group.items as item (item.id)}
+							{@const isSelected = item.globalIndex === selectedIndex}
+							{@const Icon = item.icon}
+							<button
+								type="button"
+								data-index={item.globalIndex}
+								class="flex w-full items-center gap-3 border-l-2 px-4 py-2.5 text-left text-sm transition-colors
+									{isSelected
+									? 'border-[hsl(var(--bc-accent))] bg-[hsl(var(--bc-surface-2))]'
+									: 'border-transparent hover:bg-[hsl(var(--bc-surface-2))]'}"
+								role="option"
+								aria-selected={isSelected}
+								onclick={() => item.onSelect()}
+								onmouseenter={() => (selectedIndex = item.globalIndex)}
+							>
+								<Icon
+									size={14}
+									class="shrink-0 {isSelected
+										? 'text-[hsl(var(--bc-accent))]'
+										: 'text-[hsl(var(--bc-fg-muted))]'}"
+								/>
+								<span class="flex-1 truncate font-medium">
+									{item.label}
+								</span>
+								{#if item.sublabel}
+									<span class="shrink-0 text-[11px] text-[hsl(var(--bc-fg-muted))]">
+										{item.sublabel}
+									</span>
+								{/if}
+							</button>
+						{/each}
+					{/each}
+				{/if}
+			</div>
+
+			<div
+				class="flex items-center gap-5 border-t border-[hsl(var(--bc-border))] px-4 py-2 text-[10px] text-[hsl(var(--bc-fg-muted))]"
+			>
+				<span class="flex items-center gap-1.5">
+					<kbd
+						class="inline-flex items-center border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px]"
+					>↑↓</kbd>
+					navigate
+				</span>
+				<span class="flex items-center gap-1.5">
+					<kbd
+						class="inline-flex items-center gap-0.5 border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px]"
+					>
+						<CornerDownLeft size={8} />
+					</kbd>
+					select
+				</span>
+				<span class="flex items-center gap-1.5">
+					<kbd
+						class="inline-flex items-center border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px]"
+					>Esc</kbd>
+					close
+				</span>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index ea4315a0..9201d5dc 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -14,8 +14,7 @@
 		Settings,
 		Sun,
 		Trash2,
-		User,
-		X
+		User
 	} from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 	import { createEventDispatcher, onDestroy } from 'svelte';
@@ -41,9 +40,11 @@
 		currentThreadId: string | null;
 		isOpen: boolean;
 		isLoading?: boolean;
+		onOpenCommandPalette: () => void;
 	}
 
-	let { threads, currentThreadId, isOpen, isLoading = false }: Props = $props();
+	let { threads, currentThreadId, isOpen, isLoading = false, onOpenCommandPalette }: Props =
+		$props();
 
 	const dispatch = createEventDispatcher<{ close: void }>();
 	const auth = getAuthState();
@@ -51,19 +52,12 @@
 	const projectStore = getProjectStore();
 	const client = useConvexClient();
 
-	let searchValue = $state('');
 	let showUserMenu = $state(false);
 	let showProjectsSection = $state(false);
 	const preloadDelayMs = 120;
 	const preloadTimers = new Map<string, ReturnType<typeof setTimeout>>();
 	const preloadInFlight = new Set<string>();
 
-	const filteredThreads = $derived.by(() => {
-		const query = searchValue.trim().toLowerCase();
-		if (!query) return threads;
-		return threads.filter((thread) => (thread.title ?? thread._id).toLowerCase().includes(query));
-	});
-
 	function formatDate(timestamp: number): string {
 		return new Date(timestamp).toLocaleDateString(undefined, {
 			month: 'short',
@@ -265,25 +259,20 @@
 	</div>
 
 	<div class="bc-sidebar-section">
-		<div class="bc-sidebar-search">
-			<Search size={14} class="bc-muted" />
-			<input
-				type="text"
-				class="bc-sidebar-search-input"
-				placeholder="Search threads"
-				bind:value={searchValue}
-			/>
-			{#if searchValue}
-				<button
-					type="button"
-					class="bc-sidebar-clear"
-					onclick={() => (searchValue = '')}
-					aria-label="Clear search"
-				>
-					<X size={14} />
-				</button>
-			{/if}
-		</div>
+		<button
+			type="button"
+			class="bc-sidebar-search w-full"
+			onclick={onOpenCommandPalette}
+			aria-label="Open command palette"
+		>
+			<Search size={14} class="bc-muted shrink-0" />
+			<span class="bc-sidebar-search-input bc-muted pointer-events-none select-none">
+				Search…
+			</span>
+			<kbd
+				class="shrink-0 border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px] text-[hsl(var(--bc-fg-muted))]"
+			>⌘K</kbd>
+		</button>
 	</div>
 
 	<div class="bc-sidebar-section">
@@ -296,17 +285,13 @@
 				<Loader2 size={14} class="animate-spin" />
 				Loading threads...
 			</div>
-		{:else if filteredThreads.length === 0}
+		{:else if threads.length === 0}
 			<div class="px-3 py-2 text-xs">
-				<div class="font-semibold">
-					{searchValue ? 'No matches found' : 'No threads yet'}
-				</div>
-				<p class="bc-muted mt-1">
-					{searchValue ? 'Try a different search.' : 'Create a new thread to get started.'}
-				</p>
+				<div class="font-semibold">No threads yet</div>
+				<p class="bc-muted mt-1">Create a new thread to get started.</p>
 			</div>
 		{:else}
-			{#each filteredThreads as thread (thread._id)}
+			{#each threads as thread (thread._id)}
 				<a
 					href="/app/chat/{thread._id}"
 					class={currentThreadId === thread._id
diff --git a/apps/web/src/routes/app/+layout.svelte b/apps/web/src/routes/app/+layout.svelte
index 427a1a8a..7318f740 100644
--- a/apps/web/src/routes/app/+layout.svelte
+++ b/apps/web/src/routes/app/+layout.svelte
@@ -19,6 +19,8 @@
 	import Sidebar from '$lib/components/Sidebar.svelte';
 	import ProvisioningModal from '$lib/components/ProvisioningModal.svelte';
 	import CreateProjectModal from '$lib/components/CreateProjectModal.svelte';
+	import CommandPalette from '$lib/components/CommandPalette.svelte';
+	import AddResourceModal from '$lib/components/AddResourceModal.svelte';
 
 	let { children } = $props();
 
@@ -46,6 +48,15 @@
 
 	let isInitializing = $state(true);
 	let sidebarOpen = $state(false);
+	let commandPaletteOpen = $state(false);
+	let addResourceModalOpen = $state(false);
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+			event.preventDefault();
+			commandPaletteOpen = !commandPaletteOpen;
+		}
+	}
 
 	const routeId = $derived((page.params as { id?: string }).id);
 	const currentThreadId = $derived(routeId && routeId !== 'new' ? routeId : null);
@@ -134,6 +145,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={handleGlobalKeydown} />
+
 <svelte:head>
 	<title>btca | App</title>
 	<meta name="description" content="Web-based chat interface for btca" />
@@ -157,13 +170,14 @@
 				sidebarOpen ? 'translate-x-0' : '-translate-x-full'
 			}`}
 		>
-			<Sidebar
-				{threads}
-				{currentThreadId}
-				isOpen={sidebarOpen}
-				isLoading={threadsLoading}
-				on:close={() => (sidebarOpen = false)}
-			/>
+		<Sidebar
+			{threads}
+			{currentThreadId}
+			isOpen={sidebarOpen}
+			isLoading={threadsLoading}
+			onOpenCommandPalette={() => (commandPaletteOpen = true)}
+			on:close={() => (sidebarOpen = false)}
+		/>
 		</aside>
 
 		{#if sidebarOpen}
@@ -189,3 +203,10 @@
 
 <ProvisioningModal />
 <CreateProjectModal {projectStore} />
+<CommandPalette
+	isOpen={commandPaletteOpen}
+	{threads}
+	onClose={() => (commandPaletteOpen = false)}
+	onOpenAddResource={() => (addResourceModalOpen = true)}
+/>
+<AddResourceModal isOpen={addResourceModalOpen} onClose={() => (addResourceModalOpen = false)} />

From 67cdab5bec8f1e1caed7805480ba541286c00e57 Mon Sep 17 00:00:00 2001
From: Ben Davis <davis.benjamin41902@gmail.com>
Date: Sun, 1 Mar 2026 16:47:33 -0800
Subject: [PATCH 2/2] cleanup

---
 apps/web/src/convex/_generated/api.d.ts       | 307 +++++++++---------
 apps/web/src/convex/_generated/api.js         |   2 +-
 apps/web/src/convex/_generated/dataModel.d.ts |  22 +-
 apps/web/src/convex/_generated/server.d.ts    |  34 +-
 apps/web/src/convex/_generated/server.js      |  16 +-
 .../lib/components/AddResourceModal.svelte    | 235 ++++++++++----
 .../src/lib/components/CommandPalette.svelte  |  49 +--
 apps/web/src/lib/components/Sidebar.svelte    |  12 +-
 apps/web/src/routes/app/+layout.svelte        |  16 +-
 9 files changed, 415 insertions(+), 278 deletions(-)

diff --git a/apps/web/src/convex/_generated/api.d.ts b/apps/web/src/convex/_generated/api.d.ts
index 6d941959..7c558585 100644
--- a/apps/web/src/convex/_generated/api.d.ts
+++ b/apps/web/src/convex/_generated/api.d.ts
@@ -8,72 +8,76 @@
  * @module
  */
 
-import type * as analytics from '../analytics.js';
-import type * as analyticsEvents from '../analyticsEvents.js';
-import type * as apiHelpers from '../apiHelpers.js';
-import type * as authHelpers from '../authHelpers.js';
-import type * as clerkApiKeys from '../clerkApiKeys.js';
-import type * as clerkApiKeysQueries from '../clerkApiKeysQueries.js';
-import type * as crons from '../crons.js';
-import type * as githubAuth from '../githubAuth.js';
-import type * as githubConnections from '../githubConnections.js';
-import type * as http from '../http.js';
-import type * as instances_actions from '../instances/actions.js';
-import type * as instances_mutations from '../instances/mutations.js';
-import type * as instances_queries from '../instances/queries.js';
-import type * as mcp from '../mcp.js';
-import type * as mcp_resourceContract from '../mcp/resourceContract.js';
-import type * as mcpInternal from '../mcpInternal.js';
-import type * as mcpQuestions from '../mcpQuestions.js';
-import type * as messages from '../messages.js';
-import type * as migrations from '../migrations.js';
-import type * as privateWrappers from '../privateWrappers.js';
-import type * as projects from '../projects.js';
-import type * as resourceActions from '../resourceActions.js';
-import type * as resources from '../resources.js';
-import type * as scheduled_queries from '../scheduled/queries.js';
-import type * as scheduled_updates from '../scheduled/updates.js';
-import type * as scheduled_versionCheck from '../scheduled/versionCheck.js';
-import type * as streamSessions from '../streamSessions.js';
-import type * as threadTitle from '../threadTitle.js';
-import type * as threads from '../threads.js';
-import type * as usage from '../usage.js';
-import type * as users from '../users.js';
+import type * as analytics from "../analytics.js";
+import type * as analyticsEvents from "../analyticsEvents.js";
+import type * as apiHelpers from "../apiHelpers.js";
+import type * as authHelpers from "../authHelpers.js";
+import type * as clerkApiKeys from "../clerkApiKeys.js";
+import type * as clerkApiKeysQueries from "../clerkApiKeysQueries.js";
+import type * as crons from "../crons.js";
+import type * as githubAuth from "../githubAuth.js";
+import type * as githubConnections from "../githubConnections.js";
+import type * as http from "../http.js";
+import type * as instances_actions from "../instances/actions.js";
+import type * as instances_mutations from "../instances/mutations.js";
+import type * as instances_queries from "../instances/queries.js";
+import type * as mcp from "../mcp.js";
+import type * as mcp_resourceContract from "../mcp/resourceContract.js";
+import type * as mcpInternal from "../mcpInternal.js";
+import type * as mcpQuestions from "../mcpQuestions.js";
+import type * as messages from "../messages.js";
+import type * as migrations from "../migrations.js";
+import type * as privateWrappers from "../privateWrappers.js";
+import type * as projects from "../projects.js";
+import type * as resourceActions from "../resourceActions.js";
+import type * as resources from "../resources.js";
+import type * as scheduled_queries from "../scheduled/queries.js";
+import type * as scheduled_updates from "../scheduled/updates.js";
+import type * as scheduled_versionCheck from "../scheduled/versionCheck.js";
+import type * as streamSessions from "../streamSessions.js";
+import type * as threadTitle from "../threadTitle.js";
+import type * as threads from "../threads.js";
+import type * as usage from "../usage.js";
+import type * as users from "../users.js";
 
-import type { ApiFromModules, FilterApi, FunctionReference } from 'convex/server';
+import type {
+  ApiFromModules,
+  FilterApi,
+  FunctionReference,
+} from "convex/server";
 
 declare const fullApi: ApiFromModules<{
-	analytics: typeof analytics;
-	analyticsEvents: typeof analyticsEvents;
-	apiHelpers: typeof apiHelpers;
-	authHelpers: typeof authHelpers;
-	clerkApiKeys: typeof clerkApiKeys;
-	clerkApiKeysQueries: typeof clerkApiKeysQueries;
-	crons: typeof crons;
-	githubAuth: typeof githubAuth;
-	githubConnections: typeof githubConnections;
-	http: typeof http;
-	'instances/actions': typeof instances_actions;
-	'instances/mutations': typeof instances_mutations;
-	'instances/queries': typeof instances_queries;
-	mcp: typeof mcp;
-	'mcp/resourceContract': typeof mcp_resourceContract;
-	mcpInternal: typeof mcpInternal;
-	mcpQuestions: typeof mcpQuestions;
-	messages: typeof messages;
-	migrations: typeof migrations;
-	privateWrappers: typeof privateWrappers;
-	projects: typeof projects;
-	resourceActions: typeof resourceActions;
-	resources: typeof resources;
-	'scheduled/queries': typeof scheduled_queries;
-	'scheduled/updates': typeof scheduled_updates;
-	'scheduled/versionCheck': typeof scheduled_versionCheck;
-	streamSessions: typeof streamSessions;
-	threadTitle: typeof threadTitle;
-	threads: typeof threads;
-	usage: typeof usage;
-	users: typeof users;
+  analytics: typeof analytics;
+  analyticsEvents: typeof analyticsEvents;
+  apiHelpers: typeof apiHelpers;
+  authHelpers: typeof authHelpers;
+  clerkApiKeys: typeof clerkApiKeys;
+  clerkApiKeysQueries: typeof clerkApiKeysQueries;
+  crons: typeof crons;
+  githubAuth: typeof githubAuth;
+  githubConnections: typeof githubConnections;
+  http: typeof http;
+  "instances/actions": typeof instances_actions;
+  "instances/mutations": typeof instances_mutations;
+  "instances/queries": typeof instances_queries;
+  mcp: typeof mcp;
+  "mcp/resourceContract": typeof mcp_resourceContract;
+  mcpInternal: typeof mcpInternal;
+  mcpQuestions: typeof mcpQuestions;
+  messages: typeof messages;
+  migrations: typeof migrations;
+  privateWrappers: typeof privateWrappers;
+  projects: typeof projects;
+  resourceActions: typeof resourceActions;
+  resources: typeof resources;
+  "scheduled/queries": typeof scheduled_queries;
+  "scheduled/updates": typeof scheduled_updates;
+  "scheduled/versionCheck": typeof scheduled_versionCheck;
+  streamSessions: typeof streamSessions;
+  threadTitle: typeof threadTitle;
+  threads: typeof threads;
+  usage: typeof usage;
+  users: typeof users;
 }>;
 
 /**
@@ -84,7 +88,10 @@ declare const fullApi: ApiFromModules<{
  * const myFunctionReference = api.myModule.myFunction;
  * ```
  */
-export declare const api: FilterApi<typeof fullApi, FunctionReference<any, 'public'>>;
+export declare const api: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "public">
+>;
 
 /**
  * A utility for referencing Convex functions in your app's internal API.
@@ -94,88 +101,96 @@ export declare const api: FilterApi<typeof fullApi, FunctionReference<any, 'publ
  * const myFunctionReference = internal.myModule.myFunction;
  * ```
  */
-export declare const internal: FilterApi<typeof fullApi, FunctionReference<any, 'internal'>>;
+export declare const internal: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "internal">
+>;
 
 export declare const components: {
-	migrations: {
-		lib: {
-			cancel: FunctionReference<
-				'mutation',
-				'internal',
-				{ name: string },
-				{
-					batchSize?: number;
-					cursor?: string | null;
-					error?: string;
-					isDone: boolean;
-					latestEnd?: number;
-					latestStart: number;
-					name: string;
-					next?: Array<string>;
-					processed: number;
-					state: 'inProgress' | 'success' | 'failed' | 'canceled' | 'unknown';
-				}
-			>;
-			cancelAll: FunctionReference<
-				'mutation',
-				'internal',
-				{ sinceTs?: number },
-				Array<{
-					batchSize?: number;
-					cursor?: string | null;
-					error?: string;
-					isDone: boolean;
-					latestEnd?: number;
-					latestStart: number;
-					name: string;
-					next?: Array<string>;
-					processed: number;
-					state: 'inProgress' | 'success' | 'failed' | 'canceled' | 'unknown';
-				}>
-			>;
-			clearAll: FunctionReference<'mutation', 'internal', { before?: number }, null>;
-			getStatus: FunctionReference<
-				'query',
-				'internal',
-				{ limit?: number; names?: Array<string> },
-				Array<{
-					batchSize?: number;
-					cursor?: string | null;
-					error?: string;
-					isDone: boolean;
-					latestEnd?: number;
-					latestStart: number;
-					name: string;
-					next?: Array<string>;
-					processed: number;
-					state: 'inProgress' | 'success' | 'failed' | 'canceled' | 'unknown';
-				}>
-			>;
-			migrate: FunctionReference<
-				'mutation',
-				'internal',
-				{
-					batchSize?: number;
-					cursor?: string | null;
-					dryRun: boolean;
-					fnHandle: string;
-					name: string;
-					next?: Array<{ fnHandle: string; name: string }>;
-					oneBatchOnly?: boolean;
-				},
-				{
-					batchSize?: number;
-					cursor?: string | null;
-					error?: string;
-					isDone: boolean;
-					latestEnd?: number;
-					latestStart: number;
-					name: string;
-					next?: Array<string>;
-					processed: number;
-					state: 'inProgress' | 'success' | 'failed' | 'canceled' | 'unknown';
-				}
-			>;
-		};
-	};
+  migrations: {
+    lib: {
+      cancel: FunctionReference<
+        "mutation",
+        "internal",
+        { name: string },
+        {
+          batchSize?: number;
+          cursor?: string | null;
+          error?: string;
+          isDone: boolean;
+          latestEnd?: number;
+          latestStart: number;
+          name: string;
+          next?: Array<string>;
+          processed: number;
+          state: "inProgress" | "success" | "failed" | "canceled" | "unknown";
+        }
+      >;
+      cancelAll: FunctionReference<
+        "mutation",
+        "internal",
+        { sinceTs?: number },
+        Array<{
+          batchSize?: number;
+          cursor?: string | null;
+          error?: string;
+          isDone: boolean;
+          latestEnd?: number;
+          latestStart: number;
+          name: string;
+          next?: Array<string>;
+          processed: number;
+          state: "inProgress" | "success" | "failed" | "canceled" | "unknown";
+        }>
+      >;
+      clearAll: FunctionReference<
+        "mutation",
+        "internal",
+        { before?: number },
+        null
+      >;
+      getStatus: FunctionReference<
+        "query",
+        "internal",
+        { limit?: number; names?: Array<string> },
+        Array<{
+          batchSize?: number;
+          cursor?: string | null;
+          error?: string;
+          isDone: boolean;
+          latestEnd?: number;
+          latestStart: number;
+          name: string;
+          next?: Array<string>;
+          processed: number;
+          state: "inProgress" | "success" | "failed" | "canceled" | "unknown";
+        }>
+      >;
+      migrate: FunctionReference<
+        "mutation",
+        "internal",
+        {
+          batchSize?: number;
+          cursor?: string | null;
+          dryRun: boolean;
+          fnHandle: string;
+          name: string;
+          next?: Array<{ fnHandle: string; name: string }>;
+          oneBatchOnly?: boolean;
+        },
+        {
+          batchSize?: number;
+          cursor?: string | null;
+          error?: string;
+          isDone: boolean;
+          latestEnd?: number;
+          latestStart: number;
+          name: string;
+          next?: Array<string>;
+          processed: number;
+          state: "inProgress" | "success" | "failed" | "canceled" | "unknown";
+        }
+      >;
+    };
+  };
 };
diff --git a/apps/web/src/convex/_generated/api.js b/apps/web/src/convex/_generated/api.js
index 24593c74..44bf9858 100644
--- a/apps/web/src/convex/_generated/api.js
+++ b/apps/web/src/convex/_generated/api.js
@@ -8,7 +8,7 @@
  * @module
  */
 
-import { anyApi, componentsGeneric } from 'convex/server';
+import { anyApi, componentsGeneric } from "convex/server";
 
 /**
  * A utility for referencing Convex functions in your app's API.
diff --git a/apps/web/src/convex/_generated/dataModel.d.ts b/apps/web/src/convex/_generated/dataModel.d.ts
index 5428df6f..f97fd194 100644
--- a/apps/web/src/convex/_generated/dataModel.d.ts
+++ b/apps/web/src/convex/_generated/dataModel.d.ts
@@ -9,13 +9,13 @@
  */
 
 import type {
-	DataModelFromSchemaDefinition,
-	DocumentByName,
-	TableNamesInDataModel,
-	SystemTableNames
-} from 'convex/server';
-import type { GenericId } from 'convex/values';
-import schema from '../schema.js';
+  DataModelFromSchemaDefinition,
+  DocumentByName,
+  TableNamesInDataModel,
+  SystemTableNames,
+} from "convex/server";
+import type { GenericId } from "convex/values";
+import schema from "../schema.js";
 
 /**
  * The names of all of your Convex tables.
@@ -27,7 +27,10 @@ export type TableNames = TableNamesInDataModel<DataModel>;
  *
  * @typeParam TableName - A string literal type of the table name (like "users").
  */
-export type Doc<TableName extends TableNames> = DocumentByName<DataModel, TableName>;
+export type Doc<TableName extends TableNames> = DocumentByName<
+  DataModel,
+  TableName
+>;
 
 /**
  * An identifier for a document in Convex.
@@ -42,7 +45,8 @@ export type Doc<TableName extends TableNames> = DocumentByName<DataModel, TableN
  *
  * @typeParam TableName - A string literal type of the table name (like "users").
  */
-export type Id<TableName extends TableNames | SystemTableNames> = GenericId<TableName>;
+export type Id<TableName extends TableNames | SystemTableNames> =
+  GenericId<TableName>;
 
 /**
  * A type describing your Convex data model.
diff --git a/apps/web/src/convex/_generated/server.d.ts b/apps/web/src/convex/_generated/server.d.ts
index 1cc047ef..bec05e68 100644
--- a/apps/web/src/convex/_generated/server.d.ts
+++ b/apps/web/src/convex/_generated/server.d.ts
@@ -9,17 +9,17 @@
  */
 
 import {
-	ActionBuilder,
-	HttpActionBuilder,
-	MutationBuilder,
-	QueryBuilder,
-	GenericActionCtx,
-	GenericMutationCtx,
-	GenericQueryCtx,
-	GenericDatabaseReader,
-	GenericDatabaseWriter
-} from 'convex/server';
-import type { DataModel } from './dataModel.js';
+  ActionBuilder,
+  HttpActionBuilder,
+  MutationBuilder,
+  QueryBuilder,
+  GenericActionCtx,
+  GenericMutationCtx,
+  GenericQueryCtx,
+  GenericDatabaseReader,
+  GenericDatabaseWriter,
+} from "convex/server";
+import type { DataModel } from "./dataModel.js";
 
 /**
  * Define a query in this Convex app's public API.
@@ -29,7 +29,7 @@ import type { DataModel } from './dataModel.js';
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export declare const query: QueryBuilder<DataModel, 'public'>;
+export declare const query: QueryBuilder<DataModel, "public">;
 
 /**
  * Define a query that is only accessible from other Convex functions (but not from the client).
@@ -39,7 +39,7 @@ export declare const query: QueryBuilder<DataModel, 'public'>;
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalQuery: QueryBuilder<DataModel, 'internal'>;
+export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 
 /**
  * Define a mutation in this Convex app's public API.
@@ -49,7 +49,7 @@ export declare const internalQuery: QueryBuilder<DataModel, 'internal'>;
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export declare const mutation: MutationBuilder<DataModel, 'public'>;
+export declare const mutation: MutationBuilder<DataModel, "public">;
 
 /**
  * Define a mutation that is only accessible from other Convex functions (but not from the client).
@@ -59,7 +59,7 @@ export declare const mutation: MutationBuilder<DataModel, 'public'>;
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalMutation: MutationBuilder<DataModel, 'internal'>;
+export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 
 /**
  * Define an action in this Convex app's public API.
@@ -72,7 +72,7 @@ export declare const internalMutation: MutationBuilder<DataModel, 'internal'>;
  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
  */
-export declare const action: ActionBuilder<DataModel, 'public'>;
+export declare const action: ActionBuilder<DataModel, "public">;
 
 /**
  * Define an action that is only accessible from other Convex functions (but not from the client).
@@ -80,7 +80,7 @@ export declare const action: ActionBuilder<DataModel, 'public'>;
  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
  */
-export declare const internalAction: ActionBuilder<DataModel, 'internal'>;
+export declare const internalAction: ActionBuilder<DataModel, "internal">;
 
 /**
  * Define an HTTP action.
diff --git a/apps/web/src/convex/_generated/server.js b/apps/web/src/convex/_generated/server.js
index a18aa285..bf3d25ad 100644
--- a/apps/web/src/convex/_generated/server.js
+++ b/apps/web/src/convex/_generated/server.js
@@ -9,14 +9,14 @@
  */
 
 import {
-	actionGeneric,
-	httpActionGeneric,
-	queryGeneric,
-	mutationGeneric,
-	internalActionGeneric,
-	internalMutationGeneric,
-	internalQueryGeneric
-} from 'convex/server';
+  actionGeneric,
+  httpActionGeneric,
+  queryGeneric,
+  mutationGeneric,
+  internalActionGeneric,
+  internalMutationGeneric,
+  internalQueryGeneric,
+} from "convex/server";
 
 /**
  * Define a query in this Convex app's public API.
diff --git a/apps/web/src/lib/components/AddResourceModal.svelte b/apps/web/src/lib/components/AddResourceModal.svelte
index 47234127..a0567e7e 100644
--- a/apps/web/src/lib/components/AddResourceModal.svelte
+++ b/apps/web/src/lib/components/AddResourceModal.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { CheckCircle2, GitBranch, Link, Loader2, X } from '@lucide/svelte';
+	import {
+		CheckCircle2,
+		GitBranch,
+		Link,
+		Loader2,
+		Package as PackageIcon,
+		X
+	} from '@lucide/svelte';
 	import { useConvexClient } from 'convex-svelte';
 	import { api } from '../../convex/_generated/api';
 	import { getAuthState } from '$lib/stores/auth.svelte';
@@ -11,6 +18,8 @@
 
 	let { isOpen, onClose }: Props = $props();
 
+	type ResourceFormType = 'git' | 'npm';
+
 	type ParsedRepo = {
 		name: string;
 		url: string;
@@ -21,7 +30,10 @@
 	const auth = getAuthState();
 	const client = useConvexClient();
 
+	let resourceType = $state<ResourceFormType>('git');
 	let gitUrl = $state('');
+	let packageName = $state('');
+	let packageVersion = $state('');
 	let resourceName = $state('');
 	let branchName = $state('main');
 	let detectedRepo = $state<string | null>(null);
@@ -35,8 +47,11 @@
 		if (!isOpen) resetForm();
 	});
 
-	function resetForm() {
+	function resetForm(nextType: ResourceFormType = 'git') {
+		resourceType = nextType;
 		gitUrl = '';
+		packageName = '';
+		packageVersion = '';
 		resourceName = '';
 		branchName = 'main';
 		detectedRepo = null;
@@ -58,6 +73,10 @@
 			.replace(/^(.)/, (_, c) => c.toLowerCase());
 	}
 
+	function formatPackageResourceName(input: string) {
+		return input.trim().replace(/^@/, '').replace(/\s+/g, '');
+	}
+
 	function parseGitUrl(input: string): ParsedRepo | null {
 		const trimmed = input.trim();
 		if (!trimmed) return null;
@@ -139,6 +158,14 @@
 		branchTouched = true;
 	}
 
+	function handlePackageInput() {
+		parseError = null;
+		submitError = null;
+		if (!nameTouched) {
+			resourceName = formatPackageResourceName(packageName);
+		}
+	}
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (!isOpen) return;
 		if (event.key === 'Escape') {
@@ -154,8 +181,8 @@
 			return;
 		}
 
-		const parsed = detectFromUrl({ showError: true });
-		if (!parsed) return;
+		const parsed = resourceType === 'git' ? detectFromUrl({ showError: true }) : null;
+		if (resourceType === 'git' && !parsed) return;
 
 		const name = resourceName.trim();
 		if (!name) {
@@ -163,12 +190,20 @@
 			return;
 		}
 
+		if (resourceType === 'npm' && !packageName.trim()) {
+			submitError = 'npm package is required.';
+			return;
+		}
+
 		isSubmitting = true;
 		try {
-			await client.mutation(api.resources.addCustomResource, {
+			await client.action(api.resourceActions.addCustomResource, {
+				type: resourceType,
 				name,
-				url: parsed.url,
-				branch: branchName.trim() || 'main'
+				url: resourceType === 'git' ? parsed?.url : undefined,
+				branch: resourceType === 'git' ? branchName.trim() || 'main' : undefined,
+				package: resourceType === 'npm' ? packageName.trim() : undefined,
+				version: resourceType === 'npm' ? packageVersion.trim() || undefined : undefined
 			});
 			closeModal();
 		} catch (error) {
@@ -179,8 +214,6 @@
 	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 {#if isOpen}
 	<div
 		class="fixed inset-0 z-50 flex items-center justify-center bg-[hsl(var(--bc-bg))]/85 px-6 py-10 backdrop-blur-sm"
@@ -206,52 +239,109 @@
 			aria-label="Add a resource"
 			tabindex="-1"
 			onclick={(event) => event.stopPropagation()}
-			onkeydown={(event) => {
-				event.stopPropagation();
-			}}
+			onkeydown={handleKeydown}
 		>
-			<div class="flex flex-wrap items-center justify-between gap-4">
-				<div class="flex items-center gap-3">
+			<div class="flex items-start justify-between gap-4">
+				<div class="flex min-w-0 flex-1 items-start gap-3">
 					<div class="bc-logoMark">
-						<Link size={18} />
+						{#if resourceType === 'git'}
+							<Link size={18} />
+						{:else}
+							<PackageIcon size={18} />
+						{/if}
 					</div>
-					<div>
+					<div class="min-w-0">
 						<h2 class="text-lg font-semibold">Add a resource</h2>
-						<p class="bc-muted text-sm">Connect a git repository so btca can index it.</p>
+						<p class="bc-muted text-sm">
+							{resourceType === 'git'
+								? 'Connect a git repository so btca can index it.'
+								: 'Attach an npm package so btca can use its published docs and metadata.'}
+						</p>
 					</div>
 				</div>
-				<button type="button" class="bc-chip p-2" onclick={closeModal} aria-label="Close">
+				<button type="button" class="bc-chip shrink-0 p-2" onclick={closeModal} aria-label="Close">
 					<X size={14} />
 				</button>
 			</div>
 
 			<div class="mt-6 grid gap-4">
-				<div>
-					<label for="git-url" class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]">
-						Git URL
-					</label>
-					<input
-						id="git-url"
-						type="url"
-						class="bc-input"
-						placeholder="https://github.com/owner/repo"
-						bind:value={gitUrl}
-						oninput={handleUrlInput}
-						onblur={handleUrlBlur}
-					/>
-					{#if parseError}
-						<p class="mt-2 text-xs text-red-500">{parseError}</p>
-					{/if}
-					{#if detectedRepo}
-						<div class="mt-2 flex items-center gap-2 text-xs">
-							<CheckCircle2 size={14} class="text-[hsl(var(--bc-success))]" />
-							<span class="bc-muted">
-								Detected {detectedRepo} · default branch {branchName}
-							</span>
+				<div class="grid gap-2 sm:grid-cols-2">
+					<button
+						type="button"
+						class="rounded-2xl border px-4 py-3 text-left transition-colors {resourceType === 'git'
+							? 'border-[hsl(var(--bc-accent))] bg-[hsl(var(--bc-surface-2))]'
+							: 'border-[hsl(var(--bc-border))] hover:bg-[hsl(var(--bc-surface-2))]'}"
+						onclick={() => resetForm('git')}
+					>
+						<div class="flex items-center gap-2">
+							<Link size={16} />
+							<span class="font-medium">Git Repository</span>
 						</div>
-					{/if}
+						<p class="bc-muted mt-1 text-xs">Repo URL and branch.</p>
+					</button>
+					<button
+						type="button"
+						class="rounded-2xl border px-4 py-3 text-left transition-colors {resourceType === 'npm'
+							? 'border-[hsl(var(--bc-accent))] bg-[hsl(var(--bc-surface-2))]'
+							: 'border-[hsl(var(--bc-border))] hover:bg-[hsl(var(--bc-surface-2))]'}"
+						onclick={() => resetForm('npm')}
+					>
+						<div class="flex items-center gap-2">
+							<PackageIcon size={16} />
+							<span class="font-medium">npm Package</span>
+						</div>
+						<p class="bc-muted mt-1 text-xs">Package name and optional version.</p>
+					</button>
 				</div>
 
+				{#if resourceType === 'git'}
+					<div>
+						<label
+							for="git-url"
+							class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]"
+						>
+							Git URL
+						</label>
+						<input
+							id="git-url"
+							type="url"
+							class="bc-input"
+							placeholder="https://github.com/owner/repo"
+							bind:value={gitUrl}
+							oninput={handleUrlInput}
+							onblur={handleUrlBlur}
+						/>
+						{#if parseError}
+							<p class="mt-2 text-xs text-red-500">{parseError}</p>
+						{/if}
+						{#if detectedRepo}
+							<div class="mt-2 flex items-center gap-2 text-xs">
+								<CheckCircle2 size={14} class="text-[hsl(var(--bc-success))]" />
+								<span class="bc-muted">
+									Detected {detectedRepo} · default branch {branchName}
+								</span>
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<div>
+						<label
+							for="package-name"
+							class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]"
+						>
+							npm package
+						</label>
+						<input
+							id="package-name"
+							type="text"
+							class="bc-input"
+							placeholder="react or @types/node"
+							bind:value={packageName}
+							oninput={handlePackageInput}
+						/>
+					</div>
+				{/if}
+
 				<div class="grid gap-4 md:grid-cols-2">
 					<div>
 						<label
@@ -264,34 +354,52 @@
 							id="resource-name"
 							type="text"
 							class="bc-input"
-							placeholder="e.g. svelteKit"
+							placeholder={resourceType === 'git' ? 'e.g. svelteKit' : 'e.g. types/node'}
 							bind:value={resourceName}
 							oninput={handleNameInput}
 						/>
 						<p class="bc-muted mt-2 text-xs">Use @mention: @{resourceName || 'resource'}</p>
 					</div>
-					<div>
-						<label
-							for="resource-branch"
-							class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]"
-						>
-							Branch
-						</label>
-						<div class="relative">
-							<GitBranch
-								size={14}
-								class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--bc-fg-muted))]"
-							/>
+					{#if resourceType === 'git'}
+						<div>
+							<label
+								for="resource-branch"
+								class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]"
+							>
+								Branch
+							</label>
+							<div class="relative">
+								<GitBranch
+									size={14}
+									class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--bc-fg-muted))]"
+								/>
+								<input
+									id="resource-branch"
+									type="text"
+									class="bc-input pl-9"
+									placeholder="main"
+									bind:value={branchName}
+									oninput={handleBranchInput}
+								/>
+							</div>
+						</div>
+					{:else}
+						<div>
+							<label
+								for="package-version"
+								class="mb-2 block text-xs font-semibold uppercase tracking-[0.2em]"
+							>
+								Version or tag
+							</label>
 							<input
-								id="resource-branch"
+								id="package-version"
 								type="text"
-								class="bc-input pl-9"
-								placeholder="main"
-								bind:value={branchName}
-								oninput={handleBranchInput}
+								class="bc-input"
+								placeholder="latest, 19.0.0, beta"
+								bind:value={packageVersion}
 							/>
 						</div>
-					</div>
+					{/if}
 				</div>
 
 				{#if submitError}
@@ -305,7 +413,7 @@
 
 			<div class="mt-6 flex flex-wrap items-center justify-between gap-3">
 				<p class="bc-muted text-xs">
-					We'll cache the repo on your instance after the next chat mention.
+					We'll sync this resource onto your instance after the next chat mention.
 				</p>
 				<div class="flex items-center gap-2">
 					<button type="button" class="bc-btn text-sm" onclick={closeModal} disabled={isSubmitting}>
@@ -315,13 +423,14 @@
 						type="button"
 						class="bc-btn bc-btn-primary text-sm"
 						onclick={handleSubmit}
-						disabled={isSubmitting || !gitUrl.trim()}
+						disabled={isSubmitting ||
+							(resourceType === 'git' ? !gitUrl.trim() : !packageName.trim())}
 					>
 						{#if isSubmitting}
 							<Loader2 size={16} class="animate-spin" />
 							Adding...
 						{:else}
-							Add resource
+							Add {resourceType === 'git' ? 'repository' : 'package'}
 						{/if}
 					</button>
 				</div>
diff --git a/apps/web/src/lib/components/CommandPalette.svelte b/apps/web/src/lib/components/CommandPalette.svelte
index a85c52e5..b81851eb 100644
--- a/apps/web/src/lib/components/CommandPalette.svelte
+++ b/apps/web/src/lib/components/CommandPalette.svelte
@@ -41,6 +41,7 @@
 	let { isOpen, threads, onClose, onOpenAddResource }: Props = $props();
 
 	const themeStore = getThemeStore();
+	const MAX_VISIBLE_THREADS = 3;
 
 	let searchQuery = $state('');
 	let selectedIndex = $state(0);
@@ -65,22 +66,24 @@
 
 		const threadItems: CommandItem[] = (() => {
 			const filtered = !query
-				? threads.slice(0, 6)
-				: threads.filter((t) => (t.title ?? t._id).toLowerCase().includes(query)).slice(0, 8);
-			return filtered.map((t) => ({
-				id: `thread-${t._id}`,
-				group: 'Threads',
-				label: t.title ?? `Thread ${t._id.slice(0, 8)}…`,
-				sublabel: new Date(t.lastActivityAt).toLocaleDateString(undefined, {
-					month: 'short',
-					day: 'numeric'
-				}),
-				icon: MessageSquare,
-				onSelect: () => {
-					goto(`/app/chat/${t._id}`);
-					onClose();
-				}
-			}));
+				? threads
+				: threads.filter((t) => (t.title ?? t._id).toLowerCase().includes(query));
+			return filtered
+				.map((t) => ({
+					id: `thread-${t._id}`,
+					group: 'Threads',
+					label: t.title ?? `Thread ${t._id.slice(0, 8)}…`,
+					sublabel: new Date(t.lastActivityAt).toLocaleDateString(undefined, {
+						month: 'short',
+						day: 'numeric'
+					}),
+					icon: MessageSquare,
+					onSelect: () => {
+						goto(`/app/chat/${t._id}`);
+						onClose();
+					}
+				}))
+				.slice(0, MAX_VISIBLE_THREADS);
 		})();
 
 		const actionItems: CommandItem[] = [
@@ -162,8 +165,7 @@
 		const filteredNonThread = query
 			? [...actionItems, ...navItems].filter(
 					(item) =>
-						item.label.toLowerCase().includes(query) ||
-						item.group.toLowerCase().includes(query)
+						item.label.toLowerCase().includes(query) || item.group.toLowerCase().includes(query)
 				)
 			: [...actionItems, ...navItems];
 
@@ -198,6 +200,7 @@
 			onClose();
 			return;
 		}
+		if (allItems.length === 0) return;
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, allItems.length - 1);
@@ -216,8 +219,6 @@
 	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 {#if isOpen}
 	<div
 		class="fixed inset-0 z-50 flex items-start justify-center bg-[hsl(var(--bc-bg))]/80 px-4 pt-[14vh] backdrop-blur-sm"
@@ -232,7 +233,7 @@
 			aria-label="Command palette"
 			tabindex="-1"
 			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
+			onkeydown={handleKeydown}
 		>
 			<div class="flex items-center gap-3 border-b border-[hsl(var(--bc-border))] px-4 py-3">
 				<Search size={15} class="shrink-0 text-[hsl(var(--bc-fg-muted))]" />
@@ -309,7 +310,8 @@
 				<span class="flex items-center gap-1.5">
 					<kbd
 						class="inline-flex items-center border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px]"
-					>↑↓</kbd>
+						>↑↓</kbd
+					>
 					navigate
 				</span>
 				<span class="flex items-center gap-1.5">
@@ -323,7 +325,8 @@
 				<span class="flex items-center gap-1.5">
 					<kbd
 						class="inline-flex items-center border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px]"
-					>Esc</kbd>
+						>Esc</kbd
+					>
 					close
 				</span>
 			</div>
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 9201d5dc..97a3ed7d 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -43,8 +43,13 @@
 		onOpenCommandPalette: () => void;
 	}
 
-	let { threads, currentThreadId, isOpen, isLoading = false, onOpenCommandPalette }: Props =
-		$props();
+	let {
+		threads,
+		currentThreadId,
+		isOpen,
+		isLoading = false,
+		onOpenCommandPalette
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher<{ close: void }>();
 	const auth = getAuthState();
@@ -271,7 +276,8 @@
 			</span>
 			<kbd
 				class="shrink-0 border border-[hsl(var(--bc-border))] px-1 py-0.5 font-sans text-[9px] text-[hsl(var(--bc-fg-muted))]"
-			>⌘K</kbd>
+				>⌘K</kbd
+			>
 		</button>
 	</div>
 
diff --git a/apps/web/src/routes/app/+layout.svelte b/apps/web/src/routes/app/+layout.svelte
index 7318f740..4186d7ce 100644
--- a/apps/web/src/routes/app/+layout.svelte
+++ b/apps/web/src/routes/app/+layout.svelte
@@ -170,14 +170,14 @@
 				sidebarOpen ? 'translate-x-0' : '-translate-x-full'
 			}`}
 		>
-		<Sidebar
-			{threads}
-			{currentThreadId}
-			isOpen={sidebarOpen}
-			isLoading={threadsLoading}
-			onOpenCommandPalette={() => (commandPaletteOpen = true)}
-			on:close={() => (sidebarOpen = false)}
-		/>
+			<Sidebar
+				{threads}
+				{currentThreadId}
+				isOpen={sidebarOpen}
+				isLoading={threadsLoading}
+				onOpenCommandPalette={() => (commandPaletteOpen = true)}
+				on:close={() => (sidebarOpen = false)}
+			/>
 		</aside>
 
 		{#if sidebarOpen}