From 5ef4d0e198c2bf31fd897bbb3be51b643aadacbb Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Mon, 14 Sep 2026 03:18:42 +0300
Subject: [PATCH] web/search: unify code search views and use FileCardHeader in
 FileMatch

Signed-off-by: dawn <dawn@tangled.org>
---
 .../search/CodeResultCard.stories.svelte      |  42 ++++
 .../components/search/CodeResultCard.svelte   |  12 +-
 .../components/search/CodeSearchView.svelte   | 156 ++++++++++++
 .../search/FileMatch.stories.svelte           |  88 +++++++
 .../lib/components/search/FileMatch.svelte    | 226 ++++++++++++------
 .../components/search/RepoCodeSearch.svelte   | 120 ----------
 .../lib/components/search/SearchBar.svelte    |   7 +-
 .../components/search/codeSearch.svelte.ts    |  20 +-
 .../search/tabs/CodeSearchTab.svelte          |  85 +------
 .../[handle]/[repo]/search/+page.svelte       |  12 +-
 10 files changed, 475 insertions(+), 293 deletions(-)
 create mode 100644 web/src/lib/components/search/CodeResultCard.stories.svelte
 create mode 100644 web/src/lib/components/search/CodeSearchView.svelte
 create mode 100644 web/src/lib/components/search/FileMatch.stories.svelte
 delete mode 100644 web/src/lib/components/search/RepoCodeSearch.svelte

diff --git a/web/src/lib/components/search/CodeResultCard.stories.svelte b/web/src/lib/components/search/CodeResultCard.stories.svelte
new file mode 100644
index 000000000..7a3c3ac76
--- /dev/null
+++ b/web/src/lib/components/search/CodeResultCard.stories.svelte
@@ -0,0 +1,42 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import CodeResultCard from "$lib/components/search/CodeResultCard.svelte";
+	import type { FileResult } from "$lib/api/lexicons/types/org/tangled/temp/search/searchCode";
+
+	const sampleResult: FileResult = {
+		commit: "75fec242",
+		path: "src/lib/components/repo/FileCardHeader.svelte",
+		language: "Svelte",
+		branches: ["main", "feature/search"],
+		repo: {
+			createdAt: "2026-09-01T00:00:00.000Z",
+			did: "did:plc:dawnrepo123",
+			slug: "tangled",
+			owner: {
+				did: "did:plc:dawn123",
+				handle: "dawn.tangled.org"
+			},
+			starCount: 42
+		},
+		ranges: [{ start: 24, end: 38 }],
+		chunks: [
+			{
+				lineStart: 12,
+				content:
+					"interface Props {\n\topen?: boolean;\n\tcollapsible?: boolean;\n\ttitle: Snippet;\n}",
+				highlights: [{ start: 35, end: 46 }]
+			}
+		]
+	};
+
+	const { Story } = defineMeta({
+		title: "Search/CodeResultCard",
+		component: CodeResultCard,
+		tags: ["autodocs"],
+		args: {
+			result: sampleResult
+		}
+	});
+</script>
+
+<Story name="Global Search (with repo header)" />
diff --git a/web/src/lib/components/search/CodeResultCard.svelte b/web/src/lib/components/search/CodeResultCard.svelte
index a15b86d69..c1f555776 100644
--- a/web/src/lib/components/search/CodeResultCard.svelte
+++ b/web/src/lib/components/search/CodeResultCard.svelte
@@ -7,10 +7,14 @@
 	import Card from "$lib/components/ui/Card.svelte";
 	import FileMatch from "$lib/components/search/FileMatch.svelte";
 
-	let { result }: { result: FileResult } = $props();
+	interface Props {
+		result: FileResult;
+	}
+
+	let { result }: Props = $props();
 
 	const repoHref = $derived(resolve(`/${result.repo.owner.handle}/${result.repo.slug}` as "/"));
-	const branches = $derived(result.branches ?? []);
+	const branches = $derived([...new Set(result.branches ?? [])]);
 </script>
 
 <Card padding="none" class="flex flex-col gap-2 p-3 text-foreground-default">
@@ -19,8 +23,8 @@
 			<BookMarked class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 			<!-- prettier-ignore -->
 			<a href={repoHref} class="min-w-0 truncate text-foreground-default no-underline hover:underline"
-				>{result.repo.owner.handle}/{result.repo.slug}</a
-			>
+			>{result.repo.owner.handle}/{result.repo.slug}</a
+		>
 		</div>
 		<div class="flex gap-1">
 			{#each branches as branch (branch)}
diff --git a/web/src/lib/components/search/CodeSearchView.svelte b/web/src/lib/components/search/CodeSearchView.svelte
new file mode 100644
index 000000000..6aab502b8
--- /dev/null
+++ b/web/src/lib/components/search/CodeSearchView.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { Did } from "@atcute/lexicons";
+	import { resolve } from "$app/paths";
+	import { getAuth } from "$lib/auth.svelte";
+	import { loginWithReturn } from "$lib/auth/guards";
+	import Button from "$lib/components/ui/Button.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import ErrorBox from "$lib/components/ui/Error.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import SearchBar from "$lib/components/search/SearchBar.svelte";
+	import SearchSidebar from "$lib/components/search/SearchSidebar.svelte";
+	import CodeResultCard from "$lib/components/search/CodeResultCard.svelte";
+	import FileMatch from "$lib/components/search/FileMatch.svelte";
+	import { searchUrl } from "$lib/components/search/SearchTabs.svelte";
+	import { matchCount } from "$lib/components/search/chunks";
+	import { createCodeSearch } from "$lib/components/search/codeSearch.svelte";
+
+	const HINT = "rounded-sm bg-background-subtle px-1 py-0.5 typography-monospace-small";
+
+	export interface RepoScope {
+		ownerHandle: string;
+		repoName: string;
+		repoDid?: string;
+	}
+
+	interface Props {
+		query: string;
+		repo?: RepoScope;
+	}
+
+	let { query, repo }: Props = $props();
+
+	const auth = getAuth();
+	const search = createCodeSearch({
+		query: () => query,
+		repo: () => repo?.repoDid as Did | undefined
+	});
+
+	// eslint-disable-next-line svelte/prefer-writable-derived -- draft is two-way bound to search input
+	let draft = $state(query);
+
+	$effect(() => {
+		draft = query;
+	});
+
+	const signedIn = $derived(Boolean(auth.currentDid));
+
+	const loginHref = $derived(
+		resolve(
+			loginWithReturn(
+				repo
+					? (`/${repo.ownerHandle}/${repo.repoName}/search${query ? `?q=${encodeURIComponent(query)}` : ""}` as "/")
+					: (searchUrl("code", query) as "/")
+			) as "/login"
+		)
+	);
+
+	const matches = $derived(
+		search.results.reduce((n, r) => n + matchCount(r.chunks ?? []) + (r.ranges?.length ?? 0), 0)
+	);
+</script>
+
+<svelte:head>
+	{#if repo}
+		<title>Search &middot; {repo.ownerHandle}/{repo.repoName} &middot; Tangled</title>
+	{:else}
+		<title>Code Search &middot; Tangled</title>
+	{/if}
+</svelte:head>
+
+{#snippet resultsList()}
+	{#if !signedIn}
+		<EmptyState message="Code search needs an account.">
+			<a href={loginHref} class="underline">Login</a>
+		</EmptyState>
+	{:else if repo && !repo.repoDid}
+		<EmptyState message="This repository has no DID to search by." />
+	{:else if !query}
+		{#if repo}
+			<EmptyState message="Enter a search term to find files or code in this repository.">
+				<span>
+					Narrow it with <code class={HINT}>lang:go</code>,
+					<code class={HINT}>file:readme</code>, or
+					<code class={HINT}>case:yes</code>.
+				</span>
+			</EmptyState>
+		{:else}
+			<EmptyState message="Enter a query to search code." />
+		{/if}
+	{:else if search.loading}
+		<div class="flex justify-center p-12 text-foreground-subtle">
+			<Spinner class="size-6" />
+		</div>
+	{:else if search.error}
+		<ErrorBox label={search.error} />
+	{:else}
+		<div class="grid grid-cols-1 gap-4">
+			{#each search.results as result (`${result.repo.did}/${result.commit}/${result.path}`)}
+				{#if repo}
+					<FileMatch {result} />
+				{:else}
+					<CodeResultCard {result} />
+				{/if}
+			{:else}
+				<EmptyState message="No results found." />
+			{/each}
+		</div>
+
+		{#if search.moreError}
+			<ErrorBox label={search.moreError} />
+		{/if}
+
+		{#if search.cursor}
+			<Button
+				onclick={search.loadMore}
+				loading={search.loadingMore}
+				disabled={search.loadingMore}
+				class="w-full"
+			>
+				Load more
+			</Button>
+		{/if}
+	{/if}
+{/snippet}
+
+{#snippet matchSummary()}
+	{#if matches > 0}
+		<div class="border-t border-border-default py-2 text-xs text-foreground-muted">
+			Found {matches}
+			{matches === 1 ? "match" : "matches"} in {search.results.length}
+			{search.results.length === 1 ? "file" : "files"}
+		</div>
+	{/if}
+{/snippet}
+
+{#if repo}
+	<TabPanel class="flex flex-col gap-4">
+		<SearchBar type="code" bind:query={draft} placeholder="Find files or code..." mono />
+		{@render resultsList()}
+	</TabPanel>
+{:else}
+	<div class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-8">
+		<h1 class="mb-4 px-2 text-2xl font-semibold">Code Search</h1>
+		<div class="grid grid-cols-1 gap-4 px-2 md:grid-cols-4">
+			<div class="col-span-1 space-y-4 md:col-span-3">
+				<SearchBar type="code" bind:query={draft} placeholder="Search code..." mono />
+				{@render resultsList()}
+			</div>
+
+			<SearchSidebar bind:query={draft} active="code">
+				{@render matchSummary()}
+			</SearchSidebar>
+		</div>
+	</div>
+{/if}
diff --git a/web/src/lib/components/search/FileMatch.stories.svelte b/web/src/lib/components/search/FileMatch.stories.svelte
new file mode 100644
index 000000000..bd0bfaac4
--- /dev/null
+++ b/web/src/lib/components/search/FileMatch.stories.svelte
@@ -0,0 +1,88 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import FileMatch from "$lib/components/search/FileMatch.svelte";
+	import type { FileResult } from "$lib/api/lexicons/types/org/tangled/temp/search/searchCode";
+
+	const sampleResult: FileResult = {
+		commit: "75fec242",
+		path: "src/lib/components/repo/FileCardHeader.svelte",
+		language: "Svelte",
+		repo: {
+			createdAt: "2026-09-01T00:00:00.000Z",
+			did: "did:plc:dawnrepo123",
+			slug: "tangled",
+			owner: {
+				did: "did:plc:dawn123",
+				handle: "dawn.tangled.org"
+			},
+			starCount: 42
+		},
+		ranges: [{ start: 24, end: 38 }],
+		chunks: [
+			{
+				lineStart: 12,
+				content:
+					"interface Props {\n\topen?: boolean;\n\tcollapsible?: boolean;\n\ttitle: Snippet;\n}",
+				highlights: [{ start: 35, end: 46 }]
+			},
+			{
+				lineStart: 30,
+				content:
+					'<div class="flex justify-between rounded-t-sm border border-border-default">\n\t{@render title()}\n</div>',
+				highlights: [{ start: 13, end: 28 }]
+			}
+		]
+	};
+
+	const { Story } = defineMeta({
+		title: "Search/FileMatch",
+		component: FileMatch,
+		tags: ["autodocs"],
+		args: {
+			result: sampleResult
+		}
+	});
+</script>
+
+<Story name="Standard Result" />
+
+<Story
+	name="Without Language"
+	args={{
+		result: {
+			...sampleResult,
+			language: undefined
+		}
+	}}
+/>
+
+<Story
+	name="Many Chunks"
+	args={{
+		result: {
+			...sampleResult,
+			chunks: [
+				{
+					lineStart: 1,
+					content: "line one\nline two\nline three",
+					highlights: [{ start: 0, end: 4 }]
+				},
+				{
+					lineStart: 10,
+					content: "line ten\nline eleven",
+					highlights: [{ start: 5, end: 8 }]
+				},
+				{
+					lineStart: 20,
+					content: "line twenty\nline twenty-one",
+					highlights: [{ start: 5, end: 11 }]
+				},
+				{
+					lineStart: 30,
+					content: "line thirty\nline thirty-one",
+					highlights: [{ start: 5, end: 11 }]
+				}
+			]
+		}
+	}}
+/>
diff --git a/web/src/lib/components/search/FileMatch.svelte b/web/src/lib/components/search/FileMatch.svelte
index 142ddd68e..189d36e10 100644
--- a/web/src/lib/components/search/FileMatch.svelte
+++ b/web/src/lib/components/search/FileMatch.svelte
@@ -2,14 +2,20 @@
 	import { resolve } from "$app/paths";
 	import ChevronDown from "$icon/chevron-down";
 	import ChevronUp from "$icon/chevron-up";
-	import File from "$icon/file";
+	import Eye from "$icon/eye";
 	import type {
 		Chunk,
 		FileResult
 	} from "$lib/api/lexicons/types/org/tangled/temp/search/searchCode";
-	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors";
+	import {
+		LANGUAGE_COLORS,
+		LANGUAGE_COLOR_FALLBACK,
+		languageForPath
+	} from "$lib/components/repo/languageColors";
+	import Button from "$lib/components/ui/Button.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
-	import { chunkLines, matchCount, type Span } from "$lib/components/search/chunks";
+	import FileCardHeader from "$lib/components/repo/FileCardHeader.svelte";
+	import { chunkLines } from "$lib/components/search/chunks";
 
 	// rest of the chunks go behind a "show more" disclosure
 	const VISIBLE_CHUNKS = 3;
@@ -17,6 +23,11 @@
 	let { result }: { result: FileResult } = $props();
 
 	const chunks = $derived(result.chunks ?? []);
+	const hasChunks = $derived(chunks.length > 0);
+
+	let open = $state(true);
+	let showAll = $state(false);
+
 	const pathSpans = $derived(
 		chunkLines({ content: result.path, lineStart: 1, highlights: result.ranges ?? [] })[0].spans
 	);
@@ -29,85 +40,148 @@
 
 	const visible = $derived(chunks.slice(0, VISIBLE_CHUNKS));
 	const hidden = $derived(chunks.slice(VISIBLE_CHUNKS));
-	const hiddenMatches = $derived(matchCount(hidden));
-</script>
+	const hiddenMatches = $derived(hidden.reduce((n, c) => n + (c.highlights?.length ?? 0), 0));
 
-{#snippet gap()}
-	<div class="bg-background-subtle text-center">
-		<span class="text-sm text-foreground-subtle select-none">···</span>
-	</div>
-{/snippet}
+	const languageColor = (lang?: string | null, path?: string) => {
+		if (lang && LANGUAGE_COLORS[lang]) return LANGUAGE_COLORS[lang];
+		if (lang) {
+			const lower = lang.toLowerCase();
+			const entry = Object.entries(LANGUAGE_COLORS).find(([k]) => k.toLowerCase() === lower);
+			if (entry) return entry[1];
+		}
+		const guessed = path ? languageForPath(path) : null;
+		if (guessed && LANGUAGE_COLORS[guessed]) return LANGUAGE_COLORS[guessed];
+		return LANGUAGE_COLOR_FALLBACK;
+	};
+</script>
 
-<!-- prettier-ignore -->
-{#snippet spans(list: Span[])}{#each list as span, i (i)}{#if span.match}<span class="rounded-sm bg-background-highlight/70">{span.text}</span>{:else}{span.text}{/if}{:else}&ZeroWidthSpace;{/each}{/snippet}
+<div class="overflow-hidden rounded-sm">
+	<FileCardHeader
+		{open}
+		collapsible={hasChunks}
+		onToggle={hasChunks ? () => (open = !open) : undefined}
+	>
+		{#snippet title()}
+			<span class="truncate typography-monospace-small text-foreground-default">
+				{#each pathSpans as span, i (i)}
+					{#if span.match}
+						<mark
+							class="rounded-xs bg-background-highlight font-medium text-foreground-default"
+							>{span.text}</mark
+						>
+					{:else}
+						<span>{span.text}</span>
+					{/if}
+				{/each}
+			</span>
+		{/snippet}
 
-{#snippet body(chunk: Chunk)}
-	<div class="overflow-x-auto typography-monospace-small">
-		{#each chunkLines(chunk) as line (line.num)}
-			<div
-				class="flex w-max min-w-full gap-3 px-3 {line.highlight
-					? 'bg-background-highlight/30'
-					: ''}"
+		{#snippet actions()}
+			{#if result.language}
+				<span class="flex items-center gap-1.5 text-xs text-foreground-subtle">
+					<ColorBall color={languageColor(result.language, result.path)} />
+					{result.language}
+				</span>
+			{/if}
+			<Button
+				href={fileHref as "/"}
+				variant="ghost"
+				size="small"
+				icon={Eye}
+				class="hidden md:inline-flex"
+				onclick={(e) => e.stopPropagation()}
 			>
-				<a
-					href={lineHref(line.num)}
-					class="block min-w-10 shrink-0 text-right text-foreground-disabled no-underline select-none hover:text-foreground-subtle hover:underline"
-					>{line.num}</a
-				>
-				<!-- prettier-ignore -->
-				<div class="whitespace-pre text-foreground-muted"
-					>{@render spans(line.spans)}</div
-				>
-			</div>
-		{/each}
-	</div>
-{/snippet}
+				View file
+			</Button>
+		{/snippet}
+	</FileCardHeader>
 
-<div class="divide-y divide-border-default rounded-sm border border-border-default">
-	<div class="flex items-center justify-between gap-3 px-3.5 py-2 text-sm">
-		<div class="flex min-w-0 items-center gap-2">
-			<File class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
-			<!-- prettier-ignore -->
-			<a href={fileHref} class="min-w-0 truncate typography-monospace-regular no-underline hover:underline"
-				>{@render spans(pathSpans)}</a
-			>
-		</div>
-		{#if result.language}
-			<div class="flex shrink-0 items-center gap-2 text-foreground-muted">
-				<ColorBall
-					color={LANGUAGE_COLORS[result.language] ?? LANGUAGE_COLOR_FALLBACK}
-					class="size-2.5"
-				/>
-				<span>{result.language}</span>
-			</div>
-		{/if}
-	</div>
+	{#if hasChunks && open}
+		<div
+			class="overflow-x-auto rounded-b-sm border-x border-b border-border-default bg-background-default"
+		>
+			<table class="w-full border-collapse font-mono text-sm leading-relaxed">
+				<tbody>
+					{#each visible as chunk, i (chunk.lineStart)}
+						{#if i > 0}
+							{@render gapRow()}
+						{/if}
+						{@render chunkRows(chunk)}
+					{/each}
 
-	{#each visible as chunk, i (chunk.lineStart)}
-		{#if i > 0}{@render gap()}{/if}
-		{@render body(chunk)}
-	{/each}
+					{#if showAll}
+						{#each hidden as chunk (chunk.lineStart)}
+							{@render gapRow()}
+							{@render chunkRows(chunk)}
+						{/each}
+					{/if}
 
-	{#if hidden.length > 0}
-		<details class="group flex flex-col divide-y divide-border-default">
-			<summary
-				class="cursor-pointer list-none bg-background-subtle px-1 py-0.5 text-foreground-subtle group-open:order-last group-open:border-t group-open:border-border-default"
-			>
-				<div class="flex group-open:hidden">
-					<ChevronDown class="m-1 size-3" aria-hidden="true" />
-					<span class="text-sm select-none"
-						>Show {hiddenMatches} more {hiddenMatches === 1 ? "match" : "matches"}</span
-					>
-				</div>
-				<div class="hidden group-open:flex">
-					<ChevronUp class="m-1 size-3" aria-hidden="true" />
-					<span class="text-sm select-none">Show less</span>
-				</div>
-			</summary>
-			{#each hidden as chunk (chunk.lineStart)}
-				{@render gap()}
-				{@render body(chunk)}
-			{/each}
-		</details>
+					{#if hidden.length > 0}
+						<tr class="border-t border-border-default bg-background-default">
+							<td colspan={2} class="p-0">
+								<button
+									type="button"
+									class="flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 text-xs text-foreground-subtle transition-colors hover:bg-background-subtle hover:text-foreground-default"
+									onclick={() => (showAll = !showAll)}
+								>
+									{#if showAll}
+										<ChevronUp class="size-3.5" aria-hidden="true" />
+										<span>Show less</span>
+									{:else}
+										<ChevronDown class="size-3.5" aria-hidden="true" />
+										<span
+											>Show {hiddenMatches} more {hiddenMatches === 1
+												? "match"
+												: "matches"}</span
+										>
+									{/if}
+								</button>
+							</td>
+						</tr>
+					{/if}
+				</tbody>
+			</table>
+		</div>
 	{/if}
 </div>
+
+{#snippet gapRow()}
+	<tr class="border-y border-border-default bg-background-inset select-none">
+		<td
+			class="w-1 border-r border-border-default bg-background-default px-2.5 py-0.5 text-center font-mono text-xs text-foreground-placeholder"
+		>
+			···
+		</td>
+		<td class="px-3 py-0.5 font-mono text-xs text-foreground-placeholder"> ··· </td>
+	</tr>
+{/snippet}
+
+{#snippet chunkRows(chunk: Chunk)}
+	{@const lines = chunkLines(chunk)}
+	{#each lines as line (line.num)}
+		<tr class="hover:bg-background-subtle">
+			<td
+				class="w-1 border-r border-border-default bg-background-default px-2.5 py-0.5 text-right font-mono text-sm text-foreground-placeholder select-none"
+			>
+				<a
+					href={lineHref(line.num)}
+					class="text-inherit no-underline hover:text-foreground-default"
+				>
+					{line.num}
+				</a>
+			</td>
+			<td class="px-3 py-0.5 font-mono text-sm whitespace-pre text-foreground-default">
+				{#each line.spans as span, i (i)}
+					{#if span.match}
+						<mark
+							class="rounded-xs bg-background-highlight font-medium text-foreground-default"
+							>{span.text}</mark
+						>
+					{:else}
+						<span>{span.text}</span>
+					{/if}
+				{/each}
+			</td>
+		</tr>
+	{/each}
+{/snippet}
diff --git a/web/src/lib/components/search/RepoCodeSearch.svelte b/web/src/lib/components/search/RepoCodeSearch.svelte
deleted file mode 100644
index 0c7154834..000000000
--- a/web/src/lib/components/search/RepoCodeSearch.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-	import type { Did } from "@atcute/lexicons";
-	import { untrack } from "svelte";
-	import { replaceState } from "$app/navigation";
-	import { resolve } from "$app/paths";
-	import SearchCode from "$icon/search-code";
-	import X from "$icon/x";
-	import { getAuth } from "$lib/auth.svelte";
-	import { loginWithReturn } from "$lib/auth/guards";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import ErrorBox from "$lib/components/ui/Error.svelte";
-	import Input from "$lib/components/ui/Input.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import FileMatch from "$lib/components/search/FileMatch.svelte";
-	import { createCodeSearch } from "$lib/components/search/codeSearch.svelte";
-
-	// NOTE: we do full service-auth round trip for every search. Thus we have super long debounce
-	const DEBOUNCE_MS = 800;
-	const HINT = "rounded-sm bg-background-subtle px-1 py-0.5 typography-monospace-small";
-
-	interface Props {
-		ownerHandle: string;
-		repoName: string;
-		repoDid?: string;
-		query: string;
-	}
-
-	let { ownerHandle, repoName, repoDid, query }: Props = $props();
-
-	const auth = getAuth();
-
-	let draft = $state(untrack(() => query));
-	let committed = $state(untrack(() => query));
-
-	$effect(() => {
-		draft = query;
-		committed = query;
-	});
-
-	$effect(() => {
-		const next = draft.trim();
-		if (next === committed) return;
-		const timer = setTimeout(() => {
-			committed = next;
-			replaceState(searchHref(next), {});
-		}, DEBOUNCE_MS);
-		return () => clearTimeout(timer);
-	});
-
-	const search = createCodeSearch({
-		query: () => committed,
-		repo: () => repoDid as Did | undefined
-	});
-
-	const signedIn = $derived(Boolean(auth.currentDid));
-	const base = $derived(`/${ownerHandle}/${repoName}`);
-	const searchHref = (q: string) =>
-		resolve(`${base}/search${q ? `?q=${encodeURIComponent(q)}` : ""}` as "/");
-	const loginHref = $derived(resolve(loginWithReturn(searchHref(committed)) as "/login"));
-</script>
-
-<svelte:head>
-	<title>Search &middot; {ownerHandle}/{repoName} &middot; Tangled</title>
-</svelte:head>
-
-<TabPanel class="flex flex-col gap-4">
-	<div class="relative">
-		<Input
-			class="w-full pr-9"
-			type="text"
-			name="q"
-			bind:value={draft}
-			placeholder="Find files or code..."
-			aria-label="Search this repository"
-			iconLeft={SearchCode}
-			autofocus
-		/>
-		{#if draft}
-			<button
-				type="button"
-				onclick={() => (draft = "")}
-				aria-label="Clear search"
-				class="absolute top-1/2 right-3 -translate-y-1/2 text-foreground-subtle hover:text-foreground-default"
-			>
-				<X class="size-4" aria-hidden="true" />
-			</button>
-		{/if}
-	</div>
-
-	{#if !signedIn}
-		<EmptyState message="Code search needs an account.">
-			<a href={loginHref} class="underline">Login</a>
-		</EmptyState>
-	{:else if !repoDid}
-		<EmptyState message="This repository has no DID to search by." />
-	{:else if !committed}
-		<EmptyState message="Enter a search term to find files or code in this repository.">
-			<span>
-				Narrow it with <code class={HINT}>lang:go</code>,
-				<code class={HINT}>file:readme</code>, or
-				<code class={HINT}>case:yes</code>.
-			</span>
-		</EmptyState>
-	{:else if search.loading}
-		<div class="flex justify-center p-12 text-foreground-subtle">
-			<Spinner class="size-6" />
-		</div>
-	{:else if search.error}
-		<ErrorBox label={search.error} />
-	{:else}
-		<div class="grid grid-cols-1 gap-4">
-			{#each search.results as result (`${result.repo.did}/${result.path}`)}
-				<FileMatch {result} />
-			{:else}
-				<EmptyState message="No results found." />
-			{/each}
-		</div>
-	{/if}
-</TabPanel>
diff --git a/web/src/lib/components/search/SearchBar.svelte b/web/src/lib/components/search/SearchBar.svelte
index 92ec3b9bf..cc1fdebc4 100644
--- a/web/src/lib/components/search/SearchBar.svelte
+++ b/web/src/lib/components/search/SearchBar.svelte
@@ -5,8 +5,7 @@
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 
 	interface Props {
-		// TODO(boltless): embed 'type' field into global search query
-		type: string;
+		type?: string;
 		query: string;
 		placeholder: string;
 		mono?: boolean;
@@ -16,7 +15,9 @@
 </script>
 
 <form method="GET" class="flex items-center gap-2">
-	<input type="hidden" name="type" value={type} />
+	{#if type}
+		<input type="hidden" name="type" value={type} />
+	{/if}
 	<ButtonGroup class="w-full">
 		<Input
 			name="q"
diff --git a/web/src/lib/components/search/codeSearch.svelte.ts b/web/src/lib/components/search/codeSearch.svelte.ts
index 1d29f5a85..a8a6cd1f1 100644
--- a/web/src/lib/components/search/codeSearch.svelte.ts
+++ b/web/src/lib/components/search/codeSearch.svelte.ts
@@ -1,3 +1,4 @@
+import { SvelteSet } from "svelte/reactivity";
 import type { Did } from "@atcute/lexicons";
 import { createBobbinClient, type BobbinContext } from "$lib/api/client";
 import type { FileResult } from "$lib/api/lexicons/types/org/tangled/temp/search/searchCode";
@@ -7,6 +8,21 @@ import { getAuth } from "$lib/auth.svelte";
 
 const PAGE_LIMIT = 50;
 
+const resultKey = (r: FileResult) => `${r.repo.did}/${r.commit}/${r.path}`;
+
+const dedupeResults = (existing: FileResult[], incoming: FileResult[]): FileResult[] => {
+	const seen = new SvelteSet(existing.map(resultKey));
+	const out = [...existing];
+	for (const item of incoming) {
+		const key = resultKey(item);
+		if (!seen.has(key)) {
+			seen.add(key);
+			out.push(item);
+		}
+	}
+	return out;
+};
+
 export interface CodeSearchOptions {
 	/** the committed query */
 	query: () => string;
@@ -71,7 +87,7 @@ export const createCodeSearch = (opts: CodeSearchOptions) => {
 		searchCode(scope.ctx, { q, repo, limit: PAGE_LIMIT }, { signal })
 			.then((found) => {
 				if (signal.aborted) return;
-				results = found.results;
+				results = dedupeResults([], found.results);
 				cursor = found.cursor;
 			})
 			.catch((cause: unknown) => {
@@ -100,7 +116,7 @@ export const createCodeSearch = (opts: CodeSearchOptions) => {
 				{ signal: scope.signal }
 			);
 			if (scope.signal.aborted) return;
-			results.push(...found.results);
+			results = dedupeResults(results, found.results);
 			cursor = found.cursor;
 		} catch (cause: unknown) {
 			if (scope.signal.aborted) return;
diff --git a/web/src/lib/components/search/tabs/CodeSearchTab.svelte b/web/src/lib/components/search/tabs/CodeSearchTab.svelte
index 262b10e41..535c6871b 100644
--- a/web/src/lib/components/search/tabs/CodeSearchTab.svelte
+++ b/web/src/lib/components/search/tabs/CodeSearchTab.svelte
@@ -1,92 +1,11 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import { getAuth } from "$lib/auth.svelte";
-	import { loginWithReturn } from "$lib/auth/guards";
-	import Button from "$lib/components/ui/Button.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import ErrorBox from "$lib/components/ui/Error.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
-	import CodeResultCard from "$lib/components/search/CodeResultCard.svelte";
-	import SearchBar from "$lib/components/search/SearchBar.svelte";
-	import SearchSidebar from "$lib/components/search/SearchSidebar.svelte";
-	import { searchUrl } from "$lib/components/search/SearchTabs.svelte";
-	import { matchCount } from "$lib/components/search/chunks";
-	import { createCodeSearch } from "$lib/components/search/codeSearch.svelte";
+	import CodeSearchView from "$lib/components/search/CodeSearchView.svelte";
 
 	interface Props {
-		/** the committed query from the url */
 		query: string;
 	}
 
 	let { query }: Props = $props();
-
-	const auth = getAuth();
-	const search = createCodeSearch({ query: () => query });
-
-	let draft = $derived(query);
-	const signedIn = $derived(Boolean(auth.currentDid));
-	const loginHref = $derived(resolve(loginWithReturn(searchUrl("code", query)) as "/login"));
-	const matches = $derived(
-		search.results.reduce((n, r) => n + matchCount(r.chunks ?? []) + (r.ranges?.length ?? 0), 0)
-	);
 </script>
 
-<svelte:head>
-	<title>Code Search &middot; Tangled</title>
-</svelte:head>
-
-<div class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-8">
-	<h1 class="mb-4 px-2 text-2xl font-semibold">Code Search</h1>
-	<div class="grid grid-cols-1 gap-4 px-2 md:grid-cols-4">
-		<div class="col-span-1 space-y-4 md:col-span-3">
-			<SearchBar type="code" bind:query={draft} placeholder="Search code..." mono />
-
-			{#if !signedIn}
-				<EmptyState message="Code search needs an account.">
-					<a href={loginHref} class="underline">Login</a>
-				</EmptyState>
-			{:else if !query}
-				<EmptyState message="Enter a query to search code." />
-			{:else if search.loading}
-				<div class="flex justify-center p-12 text-foreground-subtle">
-					<Spinner class="size-6" />
-				</div>
-			{:else if search.error}
-				<ErrorBox label={search.error} />
-			{:else}
-				<div class="grid grid-cols-1 gap-4">
-					{#each search.results as result (`${result.repo.did}/${result.path}`)}
-						<CodeResultCard {result} />
-					{:else}
-						<EmptyState message="No results found." />
-					{/each}
-				</div>
-
-				{#if search.moreError}
-					<ErrorBox label={search.moreError} />
-				{/if}
-
-				{#if search.cursor}
-					<Button
-						onclick={search.loadMore}
-						loading={search.loadingMore}
-						disabled={search.loadingMore}
-						class="w-full"
-					>
-						Load more
-					</Button>
-				{/if}
-			{/if}
-		</div>
-
-		<SearchSidebar bind:query={draft} active="code">
-			{#if matches > 0}
-				<div class="border-t border-border-default py-2 text-xs text-foreground-muted">
-					Found {matches}
-					{matches === 1 ? "match" : "matches"} in {search.results.length}
-					{search.results.length === 1 ? "file" : "files"}
-				</div>
-			{/if}
-		</SearchSidebar>
-	</div>
-</div>
+<CodeSearchView {query} />
diff --git a/web/src/routes/[handle]/[repo]/search/+page.svelte b/web/src/routes/[handle]/[repo]/search/+page.svelte
index 48361b49d..d4de1a422 100644
--- a/web/src/routes/[handle]/[repo]/search/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/search/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import RepoCodeSearch from "$lib/components/search/RepoCodeSearch.svelte";
+	import CodeSearchView from "$lib/components/search/CodeSearchView.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
@@ -7,10 +7,12 @@
 
 <Pending>
 	{@const repo = await data.repo}
-	<RepoCodeSearch
-		ownerHandle={repo.ownerHandle}
-		repoName={repo.name}
-		repoDid={repo.repoDid}
+	<CodeSearchView
 		query={data.query}
+		repo={{
+			ownerHandle: repo.ownerHandle,
+			repoName: repo.name,
+			repoDid: repo.repoDid
+		}}
 	/>
 </Pending>
-- 
2.51.2