From c68cb6765ead8e3c7b539b72388795ccd95d63ed Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 06:08:21 +0530
Subject: [PATCH 1/8] Make Markdown browsing match reader expectations

Render Markdown blobs by default while preserving an explicit raw source mode, so README-style files are readable without losing the existing CodeMirror path.

Constraint: Issue #794 asks for rendered Markdown with a source option similar to GitHub.\nRejected: Always using CodeMirror for Markdown | Keeps documentation-style files hard to read and leaves no rendered mode.\nRejected: Enabling raw HTML rendering | Avoids expanding the browse page XSS surface for the first slice.\nConfidence: high\nScope-risk: moderate\nDirective: Keep raw source mode available when extending Markdown previews.\nTested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx' 'src/app/(app)/browse/hooks/utils.test.ts'\nTested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web lint\nTested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web build\nTested: git diff --check\nNot-tested: Live browser screenshot against a running indexed repository.
---
 .../codePreviewPanel/codePreviewPanel.tsx     | 43 ++++++---
 .../codePreviewPanel/markdownPreview.test.tsx | 95 +++++++++++++++++++
 .../codePreviewPanel/markdownPreviewPanel.tsx | 32 +++++++
 .../codePreviewPanel/markdownViewToggle.tsx   | 60 ++++++++++++
 .../src/app/(app)/browse/[...path]/page.tsx   |  6 +-
 .../src/app/(app)/browse/hooks/utils.test.ts  | 26 ++++-
 .../web/src/app/(app)/browse/hooks/utils.ts   |  8 ++
 7 files changed, 255 insertions(+), 15 deletions(-)
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.tsx

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index 7209abdab..050b3cd68 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -7,9 +7,11 @@ import { cn, getCodeHostInfoForRepo, isServiceError, truncateSha } from "@/lib/u
 import { X } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { getBrowsePath } from "../../../hooks/utils";
+import { type BlobViewMode, getBrowsePath } from "../../../hooks/utils";
 import { BlameAgeLegend } from "./blameAgeLegend";
 import { BlameViewToggle } from "./blameViewToggle";
+import { MarkdownPreviewPanel } from "./markdownPreviewPanel";
+import { MarkdownViewToggle } from "./markdownViewToggle";
 import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
 import { getFileBlame, getFileSource } from '@/features/git';
 
@@ -33,9 +35,10 @@ interface CodePreviewPanelProps {
     // When true, fetch blame data alongside the file source and pass it to
     // the editor so the blame gutter can render.
     blame?: boolean;
+    viewMode?: BlobViewMode;
 }
 
-export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRef, blame }: CodePreviewPanelProps) => {
+export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRef, blame, viewMode = 'rendered' }: CodePreviewPanelProps) => {
     const contentRef = previewRef ?? revisionName;
 
     const [fileSourceResponse, repoInfoResponse, blameResponse] = await Promise.all([
@@ -72,6 +75,9 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
         : source.split('\n').length - (source.endsWith('\n') ? 1 : 0);
     const byteSize = Buffer.byteLength(source, 'utf-8');
     const fileSize = formatFileSize(byteSize);
+    const isMarkdown = fileSourceResponse.language === 'Markdown';
+    const isMarkdownPreviewAvailable = isMarkdown && !blame && !previewRef;
+    const shouldRenderMarkdown = isMarkdownPreviewAvailable && viewMode === 'rendered';
 
     const codeHostInfo = getCodeHostInfoForRepo({
         codeHostType: repoInfoResponse.codeHostType,
@@ -119,6 +125,17 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
             <Separator />
             {!previewRef && (
                 <div className="flex flex-row items-center gap-3 px-4 py-1 border-b shrink-0">
+                    {isMarkdownPreviewAvailable && (
+                        <>
+                            <MarkdownViewToggle
+                                repoName={repoName}
+                                revisionName={revisionName}
+                                path={path}
+                                viewMode={viewMode}
+                            />
+                            <Separator orientation="vertical" className="h-4" />
+                        </>
+                    )}
                     <BlameViewToggle
                         repoName={repoName}
                         revisionName={revisionName}
@@ -178,14 +195,18 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                     </Tooltip>
                 </div>
             )}
-            <PureCodePreviewPanel
-                source={fileSourceResponse.source}
-                language={fileSourceResponse.language}
-                repoName={repoName}
-                path={path}
-                revisionName={contentRef ?? 'HEAD'}
-                blame={blameResponse}
-            />
+            {shouldRenderMarkdown ? (
+                <MarkdownPreviewPanel source={fileSourceResponse.source} />
+            ) : (
+                <PureCodePreviewPanel
+                    source={fileSourceResponse.source}
+                    language={fileSourceResponse.language}
+                    repoName={repoName}
+                    path={path}
+                    revisionName={contentRef ?? 'HEAD'}
+                    blame={blameResponse}
+                />
+            )}
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
new file mode 100644
index 000000000..5be7b2839
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -0,0 +1,95 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+    getRepoInfoByName: vi.fn(),
+    getFileSource: vi.fn(),
+    getFileBlame: vi.fn(),
+}));
+
+vi.mock('@/actions', () => ({
+    getRepoInfoByName: mocks.getRepoInfoByName,
+}));
+
+vi.mock('@/features/git', () => ({
+    getFileSource: mocks.getFileSource,
+    getFileBlame: mocks.getFileBlame,
+}));
+
+vi.mock('@/app/(app)/components/pathHeader', () => ({
+    PathHeader: ({ path }: { path: string }) => <div>Path: {path}</div>,
+}));
+
+vi.mock('./blameViewToggle', () => ({
+    BlameViewToggle: () => <div>Blame toggle</div>,
+}));
+
+vi.mock('./pureCodePreviewPanel', () => ({
+    PureCodePreviewPanel: ({ source }: { source: string }) => <pre data-testid="raw-source">{source}</pre>,
+}));
+
+import { CodePreviewPanel } from './codePreviewPanel';
+
+afterEach(() => {
+    cleanup();
+});
+
+describe('CodePreviewPanel markdown preview', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+
+        mocks.getRepoInfoByName.mockResolvedValue({
+            name: 'github.com/sourcebot-dev/sourcebot',
+            displayName: 'sourcebot-dev/sourcebot',
+            codeHostType: 'github',
+            externalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+        });
+        mocks.getFileBlame.mockResolvedValue(undefined);
+    });
+
+    test('renders markdown files as markdown by default', async () => {
+        mocks.getFileSource.mockResolvedValue({
+            source: '# Project README\n\n- fast search\n- code intelligence',
+            language: 'Markdown',
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            repoCodeHostType: 'github',
+            repoDisplayName: 'sourcebot-dev/sourcebot',
+            repoExternalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+            webUrl: 'https://sourcebot.example.com/browse/github.com/sourcebot-dev/sourcebot/-/blob/README.md',
+        });
+
+        render(await CodePreviewPanel({
+            path: 'README.md',
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+        }));
+
+        expect(screen.queryByRole('heading', { name: 'Project README' })).toBeTruthy();
+        expect(screen.queryByText('fast search')).toBeTruthy();
+        expect(screen.queryByTestId('raw-source')).toBeNull();
+    });
+
+    test('keeps raw source view available for markdown files', async () => {
+        mocks.getFileSource.mockResolvedValue({
+            source: '# Project README\n\n- fast search\n- code intelligence',
+            language: 'Markdown',
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            repoCodeHostType: 'github',
+            repoDisplayName: 'sourcebot-dev/sourcebot',
+            repoExternalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+            webUrl: 'https://sourcebot.example.com/browse/github.com/sourcebot-dev/sourcebot/-/blob/README.md',
+        });
+
+        render(await CodePreviewPanel({
+            path: 'README.md',
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+            viewMode: 'source',
+        }));
+
+        expect(screen.queryByRole('heading', { name: 'Project README' })).toBeNull();
+        expect(screen.queryByTestId('raw-source')?.textContent).toContain('# Project README');
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
new file mode 100644
index 000000000..772a26a4d
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
@@ -0,0 +1,32 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownPreviewPanelProps {
+    source: string;
+}
+
+export const MarkdownPreviewPanel = ({ source }: MarkdownPreviewPanelProps) => {
+    return (
+        <ScrollArea className="h-full w-full">
+            <article
+                className={cn(
+                    "prose prose-sm dark:prose-invert max-w-none px-6 py-5",
+                    "prose-p:text-foreground prose-li:text-foreground prose-headings:text-foreground",
+                    "prose-headings:mt-6 prose-p:my-3 prose-img:rounded-md prose-img:my-4 prose-hr:my-6",
+                    "prose-headings:font-semibold prose-li:marker:text-foreground",
+                    "prose-a:text-link prose-a:no-underline hover:prose-a:underline",
+                    "prose-code:before:content-none prose-code:after:content-none",
+                    "prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-xs",
+                    "prose-pre:bg-muted prose-pre:text-foreground prose-pre:leading-snug",
+                    "[&>*:first-child]:mt-0"
+                )}
+            >
+                <Markdown remarkPlugins={[remarkGfm]}>
+                    {source}
+                </Markdown>
+            </article>
+        </ScrollArea>
+    );
+}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.tsx
new file mode 100644
index 000000000..aa8a10d3e
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.tsx
@@ -0,0 +1,60 @@
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { getBrowsePath, type BlobViewMode } from "../../../hooks/utils";
+import Link from "next/link";
+
+interface MarkdownViewToggleProps {
+    repoName: string;
+    revisionName?: string;
+    path: string;
+    viewMode: BlobViewMode;
+}
+
+export const MarkdownViewToggle = ({ repoName, revisionName, path, viewMode }: MarkdownViewToggleProps) => {
+    const baseItemClass = "w-auto min-w-0 px-3";
+
+    return (
+        <ToggleGroup
+            type="single"
+            value={viewMode}
+            variant="outline"
+            className="gap-0"
+        >
+            <ToggleGroupItem
+                value="rendered"
+                aria-label="Preview rendered markdown"
+                className={`${baseItemClass} rounded-r-none`}
+                asChild
+            >
+                <Link
+                    href={getBrowsePath({
+                        repoName,
+                        revisionName,
+                        path,
+                        pathType: 'blob',
+                        viewMode: 'rendered',
+                    })}
+                >
+                    Preview
+                </Link>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+                value="source"
+                aria-label="View raw markdown source"
+                className={`${baseItemClass} rounded-l-none -ml-px`}
+                asChild
+            >
+                <Link
+                    href={getBrowsePath({
+                        repoName,
+                        revisionName,
+                        path,
+                        pathType: 'blob',
+                        viewMode: 'source',
+                    })}
+                >
+                    Source
+                </Link>
+            </ToggleGroupItem>
+        </ToggleGroup>
+    );
+}
diff --git a/packages/web/src/app/(app)/browse/[...path]/page.tsx b/packages/web/src/app/(app)/browse/[...path]/page.tsx
index a051e5bb2..8f1665b22 100644
--- a/packages/web/src/app/(app)/browse/[...path]/page.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/page.tsx
@@ -1,5 +1,5 @@
 import { Suspense } from "react";
-import { getBrowseParamsFromPathParam } from "../hooks/utils";
+import { BLOB_VIEW_QUERY_PARAM, getBrowseParamsFromPathParam } from "../hooks/utils";
 import { CodePreviewPanel } from "./components/codePreviewPanel/codePreviewPanel";
 import { FocusedCommitDiffPanel } from "./components/commitDiffPanel/focusedCommitDiffPanel";
 import { FullCommitDiffPanel } from "./components/commitDiffPanel/fullCommitDiffPanel";
@@ -92,6 +92,7 @@ interface BrowsePageProps {
         ref?: string;
         diff?: string;
         blame?: string;
+        view?: string;
     }>;
 }
 
@@ -113,6 +114,7 @@ export default async function BrowsePage(props: BrowsePageProps) {
     const previewRef = searchParams.ref || undefined;
     const isDiffMode = searchParams.diff === 'true';
     const isBlameMode = searchParams.blame === 'true';
+    const blobViewMode = searchParams[BLOB_VIEW_QUERY_PARAM] === 'source' ? 'source' : 'rendered';
 
     return (
         <div className="flex flex-col h-full">
@@ -138,6 +140,7 @@ export default async function BrowsePage(props: BrowsePageProps) {
                             revisionName={revisionName}
                             previewRef={previewRef}
                             blame={isBlameMode}
+                            viewMode={blobViewMode}
                         />
                     )
                 ) : browseProps.pathType === 'commits' ? (
@@ -166,4 +169,3 @@ export default async function BrowsePage(props: BrowsePageProps) {
         </div>
     )
 }
-
diff --git a/packages/web/src/app/(app)/browse/hooks/utils.test.ts b/packages/web/src/app/(app)/browse/hooks/utils.test.ts
index a50214c82..838d69fcd 100644
--- a/packages/web/src/app/(app)/browse/hooks/utils.test.ts
+++ b/packages/web/src/app/(app)/browse/hooks/utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getBrowseParamsFromPathParam } from './utils';
+import { getBrowseParamsFromPathParam, getBrowsePath } from './utils';
 
 describe('getBrowseParamsFromPathParam', () => {
     describe('tree paths', () => {
@@ -211,4 +211,26 @@ describe('getBrowseParamsFromPathParam', () => {
             }).toThrow();
         });
     });
-}); 
\ No newline at end of file
+});
+
+describe('getBrowsePath', () => {
+    it('adds source view mode for blob paths', () => {
+        expect(getBrowsePath({
+            repoName: 'github.com/sourcebot-dev/zoekt',
+            revisionName: 'main',
+            path: 'README.md',
+            pathType: 'blob',
+            viewMode: 'source',
+        })).toBe('/browse/github.com/sourcebot-dev/zoekt@main/-/blob/README.md?view=source');
+    });
+
+    it('omits rendered view mode because it is the default', () => {
+        expect(getBrowsePath({
+            repoName: 'github.com/sourcebot-dev/zoekt',
+            revisionName: 'main',
+            path: 'README.md',
+            pathType: 'blob',
+            viewMode: 'rendered',
+        })).toBe('/browse/github.com/sourcebot-dev/zoekt@main/-/blob/README.md');
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/hooks/utils.ts b/packages/web/src/app/(app)/browse/hooks/utils.ts
index 7ea1863c6..3eb9af0c7 100644
--- a/packages/web/src/app/(app)/browse/hooks/utils.ts
+++ b/packages/web/src/app/(app)/browse/hooks/utils.ts
@@ -4,6 +4,8 @@ export const HIGHLIGHT_RANGE_QUERY_PARAM = 'highlightRange';
 export const PREVIEW_REF_QUERY_PARAM = 'ref';
 export const DIFF_QUERY_PARAM = 'diff';
 export const BLAME_QUERY_PARAM = 'blame';
+export const BLOB_VIEW_QUERY_PARAM = 'view';
+export type BlobViewMode = 'rendered' | 'source';
 
 export type BrowseHighlightRange = {
     start: { lineNumber: number; column: number; };
@@ -31,6 +33,8 @@ type BlobProps = BaseProps & {
     diff?: boolean;
     // When true, render blame annotations alongside the file source.
     blame?: boolean;
+    // Markdown files render by default. Set to source to show the raw file.
+    viewMode?: BlobViewMode;
 }
 
 type TreeProps = BaseProps & {
@@ -172,6 +176,10 @@ export const getBrowsePath = (props: BrowseProps) => {
         params.set(BLAME_QUERY_PARAM, 'true');
     }
 
+    if (pathType === 'blob' && props.viewMode === 'source') {
+        params.set(BLOB_VIEW_QUERY_PARAM, 'source');
+    }
+
     if (setBrowseState) {
         params.set(SET_BROWSE_STATE_QUERY_PARAM, JSON.stringify(setBrowseState));
     }

From a93e0fa7afd10b6d0e903031b8fef1873b22cd86 Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 06:09:21 +0530
Subject: [PATCH 2/8] Record Markdown preview support for release notes

Add the required Unreleased changelog entry after the draft PR number is known.

Constraint: Sourcebot contribution rules require every PR to include a changelog follow-up commit.\nConfidence: high\nScope-risk: narrow\nDirective: Keep this as the PR-number-specific follow-up commit.\nTested: git diff --check\nNot-tested: Full test suite not rerun for changelog-only text change.
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0725af08..d923cd7d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [EE] Added mermaid diagram rendering to Ask Sourcebot answers, with pan/zoom, copy/export, in-thread deep links, and an interleaved right-panel view. [#1369](https://github.com/sourcebot-dev/sourcebot/pull/1369)
 - [EE] Added a context-window usage gauge to the Ask Sourcebot chat details, showing how much of the selected model's context window each turn occupies. Window sizes are resolved from the models.dev catalog. [#1370](https://github.com/sourcebot-dev/sourcebot/pull/1370)
 - Added language model input-modality and document capability resolution, automatically resolved from the models.dev catalog (falls back to text-only for uncatalogued/self-hosted models). [#1372](https://github.com/sourcebot-dev/sourcebot/pull/1372)
+- Added rendered Markdown previews with a raw source toggle in the code browser. [#1382](https://github.com/sourcebot-dev/sourcebot/pull/1382)
 
 ### Fixed
 - Send anonymous server-side PostHog events as personless so unauthenticated requests don't inflate person counts. [#1367](https://github.com/sourcebot-dev/sourcebot/pull/1367)

From d859d061501c449ed635a079493f2acee1c00677 Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 08:35:49 +0530
Subject: [PATCH 3/8] Harden repository markdown browse previews

Repository-authored Markdown is untrusted browser content, so rendered browse previews must preserve existing source-navigation semantics while avoiding automatic remote asset loads. This keeps rendered links useful, turns images into explicit non-fetching links, and forces source mode for line-highlight URLs.

Constraint: Browse markdown rendering is now the default path for Markdown blobs.
Rejected: Auto-rendering markdown images | it can trigger third-party or local-network requests from viewer browsers.
Confidence: high
Scope-risk: narrow
Directive: Keep repository Markdown rendering conservative unless a hardened asset proxy/raw-file pipeline is added.
Tested: yarn workspace @sourcebot/web test src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx src/app/(app)/browse/[...path]/page.test.tsx src/app/(app)/browse/hooks/utils.test.ts; yarn workspace @sourcebot/web lint; yarn workspace @sourcebot/web build; yarn workspace @sourcebot/web test; git diff --check --cached
Not-tested: Browser screenshot of rendered Markdown preview
---
 .../codePreviewPanel/codePreviewPanel.tsx     |   7 +-
 .../codePreviewPanel/markdownPreview.test.tsx | 133 +++++++++++++++++-
 .../codePreviewPanel/markdownPreviewPanel.tsx | 109 +++++++++++++-
 .../app/(app)/browse/[...path]/page.test.tsx  |  65 +++++++++
 .../src/app/(app)/browse/[...path]/page.tsx   |   6 +-
 5 files changed, 313 insertions(+), 7 deletions(-)
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/page.test.tsx

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index 050b3cd68..eb731aa18 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -196,7 +196,12 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                 </div>
             )}
             {shouldRenderMarkdown ? (
-                <MarkdownPreviewPanel source={fileSourceResponse.source} />
+                <MarkdownPreviewPanel
+                    source={fileSourceResponse.source}
+                    repoName={repoName}
+                    revisionName={revisionName}
+                    path={path}
+                />
             ) : (
                 <PureCodePreviewPanel
                     source={fileSourceResponse.source}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index 5be7b2839..80520f7bc 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -1,4 +1,5 @@
 import { cleanup, render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 const mocks = vi.hoisted(() => ({
@@ -25,15 +26,22 @@ vi.mock('./blameViewToggle', () => ({
 }));
 
 vi.mock('./pureCodePreviewPanel', () => ({
-    PureCodePreviewPanel: ({ source }: { source: string }) => <pre data-testid="raw-source">{source}</pre>,
+    PureCodePreviewPanel: ({ source, blame }: { source: string; blame?: unknown }) => (
+        <pre data-testid="raw-source" data-has-blame={blame ? 'true' : 'false'}>{source}</pre>
+    ),
 }));
 
 import { CodePreviewPanel } from './codePreviewPanel';
+import { MarkdownPreviewPanel } from './markdownPreviewPanel';
 
 afterEach(() => {
     cleanup();
 });
 
+const renderWithTooltipProvider = (ui: React.ReactNode) => render(
+    <TooltipProvider>{ui}</TooltipProvider>
+);
+
 describe('CodePreviewPanel markdown preview', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -44,7 +52,10 @@ describe('CodePreviewPanel markdown preview', () => {
             codeHostType: 'github',
             externalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
         });
-        mocks.getFileBlame.mockResolvedValue(undefined);
+        mocks.getFileBlame.mockResolvedValue({
+            ranges: [],
+            commits: {},
+        });
     });
 
     test('renders markdown files as markdown by default', async () => {
@@ -92,4 +103,122 @@ describe('CodePreviewPanel markdown preview', () => {
         expect(screen.queryByRole('heading', { name: 'Project README' })).toBeNull();
         expect(screen.queryByTestId('raw-source')?.textContent).toContain('# Project README');
     });
+
+    test('keeps markdown in raw source view when blame is enabled', async () => {
+        mocks.getFileSource.mockResolvedValue({
+            source: '# Project README\n\n- fast search',
+            language: 'Markdown',
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            repoCodeHostType: 'github',
+            repoDisplayName: 'sourcebot-dev/sourcebot',
+            repoExternalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+            webUrl: 'https://sourcebot.example.com/browse/github.com/sourcebot-dev/sourcebot/-/blob/README.md',
+        });
+
+        render(await CodePreviewPanel({
+            path: 'README.md',
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+            blame: true,
+        }));
+
+        expect(screen.queryByRole('heading', { name: 'Project README' })).toBeNull();
+        expect(screen.queryByTestId('raw-source')?.textContent).toContain('# Project README');
+        expect(mocks.getFileBlame).toHaveBeenCalledWith({
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            ref: 'main',
+        }, { source: 'sourcebot-web-client' });
+    });
+
+    test('keeps markdown in raw source view when previewing another revision', async () => {
+        mocks.getFileSource.mockResolvedValue({
+            source: '# Previous README',
+            language: 'Markdown',
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            repoCodeHostType: 'github',
+            repoDisplayName: 'sourcebot-dev/sourcebot',
+            repoExternalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+            webUrl: 'https://sourcebot.example.com/browse/github.com/sourcebot-dev/sourcebot/-/blob/README.md',
+        });
+
+        renderWithTooltipProvider(await CodePreviewPanel({
+            path: 'README.md',
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+            previewRef: 'abc123456789',
+        }));
+
+        expect(screen.queryByRole('heading', { name: 'Previous README' })).toBeNull();
+        expect(screen.queryByTestId('raw-source')?.textContent).toContain('# Previous README');
+        expect(mocks.getFileSource).toHaveBeenCalledWith({
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            ref: 'abc123456789',
+        }, { source: 'sourcebot-web-client' });
+    });
+
+    test('does not mount raw html from repository markdown', () => {
+        const { container } = render(
+            <MarkdownPreviewPanel
+                source={'# Safe\n\n<script>alert("xss")</script>\n\n<img src=x onerror=alert(1) />'}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        expect(container.querySelector('script')).toBeNull();
+        expect(container.querySelector('img')).toBeNull();
+        expect(screen.queryByText(/<script>alert/)).toBeTruthy();
+    });
+
+    test('rewrites relative markdown links to browse paths', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="[Guide](../docs/guide.md#install)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="packages/web/README.md"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'Guide' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/packages%2Fdocs%2Fguide.md#install'
+        );
+    });
+
+    test('renders markdown images as non-fetching links', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="![Architecture](./assets/architecture.png)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="docs/README.md"
+            />
+        );
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(screen.getByRole('link', { name: 'Image: Architecture' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/docs%2Fassets%2Farchitecture.png'
+        );
+    });
+
+    test('renders external markdown images as non-fetching links', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="![Tracking pixel](https://example.com/pixel.png)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="docs/README.md"
+            />
+        );
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(screen.getByRole('link', { name: 'Image: Tracking pixel' }).getAttribute('href')).toBe(
+            'https://example.com/pixel.png'
+        );
+    });
 });
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
index 772a26a4d..8a8dfe7a7 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
@@ -1,13 +1,83 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { getBrowsePath } from "../../../hooks/utils";
 
 interface MarkdownPreviewPanelProps {
     source: string;
+    repoName: string;
+    revisionName?: string;
+    path: string;
 }
 
-export const MarkdownPreviewPanel = ({ source }: MarkdownPreviewPanelProps) => {
+const URL_WITH_SCHEME_RE = /^[a-z][a-z0-9+.-]*:/i;
+
+const isExternalUrl = (url: string): boolean => URL_WITH_SCHEME_RE.test(url) || url.startsWith('//');
+
+const splitUrl = (url: string) => {
+    const hashIndex = url.indexOf('#');
+    const beforeHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
+    const hash = hashIndex === -1 ? '' : url.slice(hashIndex);
+    const queryIndex = beforeHash.indexOf('?');
+
+    return {
+        path: queryIndex === -1 ? beforeHash : beforeHash.slice(0, queryIndex),
+        query: queryIndex === -1 ? '' : beforeHash.slice(queryIndex),
+        hash,
+    };
+};
+
+const resolveRepoRelativePath = (currentFilePath: string, urlPath: string): string => {
+    const baseSegments = currentFilePath.split('/').slice(0, -1);
+    const candidateSegments = urlPath.startsWith('/')
+        ? urlPath.split('/')
+        : [...baseSegments, ...urlPath.split('/')];
+    const resolvedSegments: string[] = [];
+
+    for (const segment of candidateSegments) {
+        if (!segment || segment === '.') {
+            continue;
+        }
+
+        if (segment === '..') {
+            resolvedSegments.pop();
+            continue;
+        }
+
+        resolvedSegments.push(segment);
+    }
+
+    return resolvedSegments.join('/');
+};
+
+const getRelativeBrowseHref = ({ repoName, revisionName, currentPath, href }: {
+    repoName: string;
+    revisionName?: string;
+    currentPath: string;
+    href: string;
+}): string | undefined => {
+    if (!href || href.startsWith('#') || isExternalUrl(href)) {
+        return undefined;
+    }
+
+    const { path, query, hash } = splitUrl(href);
+    const resolvedPath = resolveRepoRelativePath(currentPath, path);
+
+    if (!resolvedPath) {
+        return undefined;
+    }
+
+    return `${getBrowsePath({
+        repoName,
+        revisionName,
+        path: resolvedPath,
+        pathType: 'blob',
+    })}${query}${hash}`;
+};
+
+export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: MarkdownPreviewPanelProps) => {
     return (
         <ScrollArea className="h-full w-full">
             <article
@@ -23,7 +93,42 @@ export const MarkdownPreviewPanel = ({ source }: MarkdownPreviewPanelProps) => {
                     "[&>*:first-child]:mt-0"
                 )}
             >
-                <Markdown remarkPlugins={[remarkGfm]}>
+                <Markdown
+                    remarkPlugins={[remarkGfm]}
+                    components={{
+                        a: ({ href, children, node: _node, ...props }) => {
+                            const browseHref = typeof href === 'string'
+                                ? getRelativeBrowseHref({ repoName, revisionName, currentPath: path, href })
+                                : undefined;
+
+                            if (browseHref) {
+                                return <Link href={browseHref}>{children}</Link>;
+                            }
+
+                            return <a href={href} {...props}>{children}</a>;
+                        },
+                        img: ({ src, alt }) => {
+                            if (typeof src !== 'string' || src.length === 0) {
+                                return null;
+                            }
+
+                            const browseHref = getRelativeBrowseHref({ repoName, revisionName, currentPath: path, href: src });
+                            const label = alt ? `Image: ${alt}` : 'Image';
+                            const href = browseHref ?? src;
+
+                            return (
+                                <a
+                                    href={href}
+                                    className="not-prose inline-flex max-w-full rounded-md border bg-muted/40 px-2 py-1 text-sm text-link hover:underline"
+                                    rel={browseHref ? undefined : "noopener noreferrer"}
+                                    target={browseHref ? undefined : "_blank"}
+                                >
+                                    <span className="truncate">{label}</span>
+                                </a>
+                            );
+                        },
+                    }}
+                >
                     {source}
                 </Markdown>
             </article>
diff --git a/packages/web/src/app/(app)/browse/[...path]/page.test.tsx b/packages/web/src/app/(app)/browse/[...path]/page.test.tsx
new file mode 100644
index 000000000..5f0bf8dad
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/page.test.tsx
@@ -0,0 +1,65 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import BrowsePage from './page';
+
+vi.mock('@/auth', () => ({
+    auth: vi.fn().mockResolvedValue(null),
+}));
+
+vi.mock('./components/trackRepoVisit', () => ({
+    TrackRepoVisit: () => null,
+}));
+
+vi.mock('./components/codePreviewPanel/codePreviewPanel', () => ({
+    CodePreviewPanel: ({ viewMode }: { viewMode: string }) => <div data-testid="code-preview">{viewMode}</div>,
+}));
+
+vi.mock('./components/commitDiffPanel/focusedCommitDiffPanel', () => ({
+    FocusedCommitDiffPanel: () => <div data-testid="focused-diff" />,
+}));
+
+vi.mock('./components/commitDiffPanel/fullCommitDiffPanel', () => ({
+    FullCommitDiffPanel: () => <div data-testid="full-diff" />,
+}));
+
+vi.mock('./components/commitHistoryPanel/commitsPanel', () => ({
+    CommitsPanel: () => <div data-testid="commits" />,
+}));
+
+vi.mock('./components/treePreviewPanel/treePreviewPanel', () => ({
+    TreePreviewPanel: () => <div data-testid="tree-preview" />,
+}));
+
+afterEach(() => {
+    cleanup();
+});
+
+const renderBrowsePage = async (searchParams: Record<string, string | undefined>) => {
+    render(await BrowsePage({
+        params: Promise.resolve({
+            path: 'github.com/sourcebot-dev/sourcebot@main/-/blob/README.md'.split('/'),
+        }),
+        searchParams: Promise.resolve(searchParams),
+    }));
+};
+
+describe('BrowsePage markdown view routing', () => {
+    test('forces source view when a blob highlight range is present', async () => {
+        await renderBrowsePage({
+            highlightRange: '12,12',
+        });
+
+        expect(screen.getByTestId('code-preview').textContent).toBe('source');
+    });
+
+    test('keeps focused diff routing ahead of blob source view', async () => {
+        await renderBrowsePage({
+            ref: 'abc123456789',
+            diff: 'true',
+            view: 'source',
+        });
+
+        expect(screen.queryByTestId('code-preview')).toBeNull();
+        expect(screen.getByTestId('focused-diff')).toBeTruthy();
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/[...path]/page.tsx b/packages/web/src/app/(app)/browse/[...path]/page.tsx
index 8f1665b22..df11e288f 100644
--- a/packages/web/src/app/(app)/browse/[...path]/page.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/page.tsx
@@ -1,5 +1,5 @@
 import { Suspense } from "react";
-import { BLOB_VIEW_QUERY_PARAM, getBrowseParamsFromPathParam } from "../hooks/utils";
+import { BLOB_VIEW_QUERY_PARAM, getBrowseParamsFromPathParam, HIGHLIGHT_RANGE_QUERY_PARAM } from "../hooks/utils";
 import { CodePreviewPanel } from "./components/codePreviewPanel/codePreviewPanel";
 import { FocusedCommitDiffPanel } from "./components/commitDiffPanel/focusedCommitDiffPanel";
 import { FullCommitDiffPanel } from "./components/commitDiffPanel/fullCommitDiffPanel";
@@ -93,6 +93,7 @@ interface BrowsePageProps {
         diff?: string;
         blame?: string;
         view?: string;
+        highlightRange?: string;
     }>;
 }
 
@@ -114,7 +115,8 @@ export default async function BrowsePage(props: BrowsePageProps) {
     const previewRef = searchParams.ref || undefined;
     const isDiffMode = searchParams.diff === 'true';
     const isBlameMode = searchParams.blame === 'true';
-    const blobViewMode = searchParams[BLOB_VIEW_QUERY_PARAM] === 'source' ? 'source' : 'rendered';
+    const hasHighlightRange = !!searchParams[HIGHLIGHT_RANGE_QUERY_PARAM];
+    const blobViewMode = hasHighlightRange || searchParams[BLOB_VIEW_QUERY_PARAM] === 'source' ? 'source' : 'rendered';
 
     return (
         <div className="flex flex-col h-full">

From 1c10c0a53909f6c0ba5cda33fb8562229f1f225f Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 08:46:33 +0530
Subject: [PATCH 4/8] Handle markdown preview links conservatively

Repository markdown links need to stay useful without introducing broken browse routes or invalid nested anchors. This decodes relative URL paths before browse-path generation, routes directory-style links to tree views, and converts markdown images through the AST so linked images remain a single link.

Constraint: Rendered repository Markdown is untrusted user-authored content shown inside the browse UI.
Rejected: Rendering images with a custom img component | linked image markdown can create nested interactive anchors.
Confidence: high
Scope-risk: narrow
Directive: Keep markdown image handling non-fetching until a hardened raw asset route exists.
Tested: yarn workspace @sourcebot/web test src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx src/app/(app)/browse/[...path]/page.test.tsx src/app/(app)/browse/hooks/utils.test.ts; yarn workspace @sourcebot/web lint; yarn workspace @sourcebot/web build; rm -rf packages/web/.next && yarn workspace @sourcebot/web test; git diff --check
Not-tested: Browser screenshot of rendered Markdown preview
---
 .../codePreviewPanel/markdownPreview.test.tsx | 64 ++++++++++++++++
 .../codePreviewPanel/markdownPreviewPanel.tsx | 76 +++++++++++++------
 2 files changed, 116 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index 80520f7bc..bb07b244a 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -190,6 +190,36 @@ describe('CodePreviewPanel markdown preview', () => {
         );
     });
 
+    test('decodes encoded relative markdown link paths before rewriting them', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="[Guide](./file%20with%20spaces%23and%3Fchars.md?plain=true#install)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="docs/README.md"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'Guide' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/docs%2Ffile%20with%20spaces%23and%3Fchars.md?plain=true#install'
+        );
+    });
+
+    test('rewrites directory-style markdown links to browse tree paths', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="[Docs](./docs/)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'Docs' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/tree/docs'
+        );
+    });
+
     test('renders markdown images as non-fetching links', () => {
         render(
             <MarkdownPreviewPanel
@@ -206,6 +236,40 @@ describe('CodePreviewPanel markdown preview', () => {
         );
     });
 
+    test('does not create nested anchors for linked markdown images', () => {
+        const { container } = render(
+            <MarkdownPreviewPanel
+                source="[![Build status](./badge.svg)](https://example.com/status)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        const links = container.querySelectorAll('a');
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(links).toHaveLength(1);
+        expect(links[0].getAttribute('href')).toBe('https://example.com/status');
+        expect(links[0].textContent).toBe('Image: Build status');
+    });
+
+    test('decodes encoded relative markdown image paths before rewriting them', () => {
+        render(
+            <MarkdownPreviewPanel
+                source="![Architecture](./image%20one.png)"
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="docs/README.md"
+            />
+        );
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(screen.getByRole('link', { name: 'Image: Architecture' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/docs%2Fimage%20one.png'
+        );
+    });
+
     test('renders external markdown images as non-fetching links', () => {
         render(
             <MarkdownPreviewPanel
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
index 8a8dfe7a7..aed333b8f 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
@@ -1,8 +1,10 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
+import type { Image, Link as MdastLink, Root, Text } from "mdast";
 import Link from "next/link";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { visit } from "unist-util-visit";
 import { getBrowsePath } from "../../../hooks/utils";
 
 interface MarkdownPreviewPanelProps {
@@ -29,6 +31,14 @@ const splitUrl = (url: string) => {
     };
 };
 
+const decodeUrlPath = (urlPath: string): string | undefined => {
+    try {
+        return decodeURIComponent(urlPath);
+    } catch {
+        return undefined;
+    }
+};
+
 const resolveRepoRelativePath = (currentFilePath: string, urlPath: string): string => {
     const baseSegments = currentFilePath.split('/').slice(0, -1);
     const candidateSegments = urlPath.startsWith('/')
@@ -63,9 +73,16 @@ const getRelativeBrowseHref = ({ repoName, revisionName, currentPath, href }: {
     }
 
     const { path, query, hash } = splitUrl(href);
-    const resolvedPath = resolveRepoRelativePath(currentPath, path);
+    const decodedPath = decodeUrlPath(path);
+
+    if (decodedPath === undefined) {
+        return undefined;
+    }
 
-    if (!resolvedPath) {
+    const pathType = decodedPath.endsWith('/') ? 'tree' : 'blob';
+    const resolvedPath = resolveRepoRelativePath(currentPath, decodedPath);
+
+    if (!resolvedPath && pathType !== 'tree') {
         return undefined;
     }
 
@@ -73,10 +90,41 @@ const getRelativeBrowseHref = ({ repoName, revisionName, currentPath, href }: {
         repoName,
         revisionName,
         path: resolvedPath,
-        pathType: 'blob',
+        pathType,
     })}${query}${hash}`;
 };
 
+const getImageLabel = (alt?: string | null): string => alt ? `Image: ${alt}` : 'Image';
+
+const remarkImageLinks = () => {
+    return (tree: Root) => {
+        visit(tree, 'image', (node: Image, index, parent) => {
+            if (index === undefined || !parent || !('children' in parent)) {
+                return;
+            }
+
+            const textNode: Text = {
+                type: 'text',
+                value: getImageLabel(node.alt),
+            };
+
+            if (!node.url || parent.type === 'link') {
+                parent.children[index] = textNode;
+                return;
+            }
+
+            const linkNode: MdastLink = {
+                type: 'link',
+                url: node.url,
+                title: node.title,
+                children: [textNode],
+            };
+
+            parent.children[index] = linkNode;
+        });
+    };
+};
+
 export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: MarkdownPreviewPanelProps) => {
     return (
         <ScrollArea className="h-full w-full">
@@ -94,7 +142,7 @@ export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: M
                 )}
             >
                 <Markdown
-                    remarkPlugins={[remarkGfm]}
+                    remarkPlugins={[remarkGfm, remarkImageLinks]}
                     components={{
                         a: ({ href, children, node: _node, ...props }) => {
                             const browseHref = typeof href === 'string'
@@ -107,26 +155,6 @@ export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: M
 
                             return <a href={href} {...props}>{children}</a>;
                         },
-                        img: ({ src, alt }) => {
-                            if (typeof src !== 'string' || src.length === 0) {
-                                return null;
-                            }
-
-                            const browseHref = getRelativeBrowseHref({ repoName, revisionName, currentPath: path, href: src });
-                            const label = alt ? `Image: ${alt}` : 'Image';
-                            const href = browseHref ?? src;
-
-                            return (
-                                <a
-                                    href={href}
-                                    className="not-prose inline-flex max-w-full rounded-md border bg-muted/40 px-2 py-1 text-sm text-link hover:underline"
-                                    rel={browseHref ? undefined : "noopener noreferrer"}
-                                    target={browseHref ? undefined : "_blank"}
-                                >
-                                    <span className="truncate">{label}</span>
-                                </a>
-                            );
-                        },
                     }}
                 >
                     {source}

From 12ad7be694e221c42cadeaa92ac4ee7f7e58612b Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 09:02:47 +0530
Subject: [PATCH 5/8] Preserve markdown source navigation intent

Markdown previews need hash anchors and source-mode transitions to preserve existing browse navigation expectations. This adds heading ids for fragment links and carries source view through blame and focused diff entry/exit.

Constraint: Rendered Markdown is now default for Markdown blobs, but source/blame/diff flows must remain stable.

Rejected: Dropping view state at blame/diff boundaries | it returns source-mode users to rendered preview unexpectedly.

Confidence: high

Scope-risk: narrow

Directive: Keep markdown preview routing state explicit when adding browse modes.

Tested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx' 'src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx' 'src/app/(app)/browse/[...path]/page.test.tsx' 'src/app/(app)/browse/hooks/utils.test.ts'; node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web lint; node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web build; rm -rf packages/web/.next && node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test; git diff --check origin/main...HEAD && git diff --check

Not-tested: Browser screenshot of source-to-blame-to-diff transition
---
 .../codePreviewPanel/blameViewToggle.test.tsx | 74 +++++++++++++++++++
 .../codePreviewPanel/blameViewToggle.tsx      |  6 +-
 .../codePreviewPanel/codePreviewPanel.tsx     |  2 +
 .../codePreviewPanel/markdownPreview.test.tsx | 46 ++++++++++++
 .../codePreviewPanel/markdownPreviewPanel.tsx | 48 ++++++++++++
 .../codePreviewPanel/pureCodePreviewPanel.tsx | 11 ++-
 .../focusedCommitDiffPanel.tsx                |  5 +-
 .../app/(app)/browse/[...path]/page.test.tsx  |  3 +-
 .../src/app/(app)/browse/[...path]/page.tsx   |  1 +
 9 files changed, 188 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx
new file mode 100644
index 000000000..a1cc1a72a
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx
@@ -0,0 +1,74 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { BlameViewToggle } from './blameViewToggle';
+
+const mocks = vi.hoisted(() => ({
+    push: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({
+    useRouter: () => ({
+        push: mocks.push,
+    }),
+}));
+
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+
+describe('BlameViewToggle', () => {
+    test('preserves source view when entering blame mode', () => {
+        render(
+            <BlameViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                blame={false}
+                viewMode="source"
+            />
+        );
+
+        fireEvent.click(screen.getByRole('radio', { name: 'View blame' }));
+
+        expect(mocks.push).toHaveBeenCalledWith(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?blame=true&view=source'
+        );
+    });
+
+    test('preserves source view when leaving blame mode', () => {
+        render(
+            <BlameViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                blame
+                viewMode="source"
+            />
+        );
+
+        fireEvent.click(screen.getByRole('radio', { name: 'View source code' }));
+
+        expect(mocks.push).toHaveBeenCalledWith(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?view=source'
+        );
+    });
+
+    test('does not add a view query when rendered preview mode enters blame', () => {
+        render(
+            <BlameViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                blame={false}
+                viewMode="rendered"
+            />
+        );
+
+        fireEvent.click(screen.getByRole('radio', { name: 'View blame' }));
+
+        expect(mocks.push).toHaveBeenCalledWith(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?blame=true'
+        );
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
index a8a1d863b..04135540b 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
@@ -2,16 +2,17 @@
 
 import { useRouter } from "next/navigation";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { getBrowsePath } from "@/app/(app)/browse/hooks/utils";
+import { getBrowsePath, type BlobViewMode } from "@/app/(app)/browse/hooks/utils";
 
 interface BlameViewToggleProps {
     repoName: string;
     revisionName?: string;
     path: string;
     blame: boolean;
+    viewMode?: BlobViewMode;
 }
 
-export const BlameViewToggle = ({ repoName, revisionName, path, blame }: BlameViewToggleProps) => {
+export const BlameViewToggle = ({ repoName, revisionName, path, blame, viewMode }: BlameViewToggleProps) => {
     const router = useRouter();
 
     const handleValueChange = (value: string) => {
@@ -27,6 +28,7 @@ export const BlameViewToggle = ({ repoName, revisionName, path, blame }: BlameVi
             path,
             pathType: 'blob',
             blame: value === 'blame',
+            viewMode: viewMode === 'source' ? 'source' : undefined,
         }));
     };
 
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index eb731aa18..084d572a9 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -141,6 +141,7 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                         revisionName={revisionName}
                         path={path}
                         blame={blame ?? false}
+                        viewMode={viewMode}
                     />
                     <span className="text-sm text-muted-foreground">
                         {lineCount.toLocaleString()} lines · {fileSize}
@@ -209,6 +210,7 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                     repoName={repoName}
                     path={path}
                     revisionName={contentRef ?? 'HEAD'}
+                    viewMode={viewMode}
                     blame={blameResponse}
                 />
             )}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index bb07b244a..1d6cb4dd0 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -190,6 +190,36 @@ describe('CodePreviewPanel markdown preview', () => {
         );
     });
 
+    test('adds heading ids for same-file markdown hash links', () => {
+        render(
+            <MarkdownPreviewPanel
+                source={"# Install Guide\n\n[Jump](#install-guide)"}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        expect(screen.getByRole('heading', { name: 'Install Guide' }).getAttribute('id')).toBe('install-guide');
+        expect(screen.getByRole('link', { name: 'Jump' }).getAttribute('href')).toBe('#install-guide');
+    });
+
+    test('deduplicates repeated heading ids', () => {
+        render(
+            <MarkdownPreviewPanel
+                source={"## Usage\n\n## Usage"}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        const headings = screen.getAllByRole('heading', { name: 'Usage' });
+
+        expect(headings[0].getAttribute('id')).toBe('usage');
+        expect(headings[1].getAttribute('id')).toBe('usage-1');
+    });
+
     test('decodes encoded relative markdown link paths before rewriting them', () => {
         render(
             <MarkdownPreviewPanel
@@ -205,6 +235,22 @@ describe('CodePreviewPanel markdown preview', () => {
         );
     });
 
+    test('preserves cross-file markdown hash links while headings expose targets', () => {
+        render(
+            <MarkdownPreviewPanel
+                source={"# Current File\n\n[Guide](./guide.md#install)"}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="docs/README.md"
+            />
+        );
+
+        expect(screen.getByRole('heading', { name: 'Current File' }).getAttribute('id')).toBe('current-file');
+        expect(screen.getByRole('link', { name: 'Guide' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/docs%2Fguide.md#install'
+        );
+    });
+
     test('rewrites directory-style markdown links to browse tree paths', () => {
         render(
             <MarkdownPreviewPanel
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
index aed333b8f..83deb15cd 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import type { Image, Link as MdastLink, Root, Text } from "mdast";
 import Link from "next/link";
 import Markdown from "react-markdown";
+import { isValidElement, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 import { getBrowsePath } from "../../../hooks/utils";
@@ -96,6 +97,36 @@ const getRelativeBrowseHref = ({ repoName, revisionName, currentPath, href }: {
 
 const getImageLabel = (alt?: string | null): string => alt ? `Image: ${alt}` : 'Image';
 
+const getNodeText = (node: ReactNode): string => {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+
+    if (Array.isArray(node)) {
+        return node.map(getNodeText).join('');
+    }
+
+    if (isValidElement<{ children?: ReactNode }>(node)) {
+        return getNodeText(node.props.children);
+    }
+
+    return '';
+};
+
+const slugHeading = (text: string): string => {
+    const slug = text
+        .trim()
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+
+    return slug || 'section';
+};
+
 const remarkImageLinks = () => {
     return (tree: Root) => {
         visit(tree, 'image', (node: Image, index, parent) => {
@@ -125,7 +156,18 @@ const remarkImageLinks = () => {
     };
 };
 
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingProps<T extends HeadingTag> = ComponentPropsWithoutRef<T> & { node?: unknown };
+
 export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: MarkdownPreviewPanelProps) => {
+    const headingCounts = new Map<string, number>();
+    const getHeadingId = (children: ReactNode) => {
+        const slug = slugHeading(getNodeText(children));
+        const count = headingCounts.get(slug) ?? 0;
+        headingCounts.set(slug, count + 1);
+        return count === 0 ? slug : `${slug}-${count}`;
+    };
+
     return (
         <ScrollArea className="h-full w-full">
             <article
@@ -155,6 +197,12 @@ export const MarkdownPreviewPanel = ({ source, repoName, revisionName, path }: M
 
                             return <a href={href} {...props}>{children}</a>;
                         },
+                        h1: ({ children, node: _node, ...props }: HeadingProps<'h1'>) => <h1 {...props} id={getHeadingId(children)}>{children}</h1>,
+                        h2: ({ children, node: _node, ...props }: HeadingProps<'h2'>) => <h2 {...props} id={getHeadingId(children)}>{children}</h2>,
+                        h3: ({ children, node: _node, ...props }: HeadingProps<'h3'>) => <h3 {...props} id={getHeadingId(children)}>{children}</h3>,
+                        h4: ({ children, node: _node, ...props }: HeadingProps<'h4'>) => <h4 {...props} id={getHeadingId(children)}>{children}</h4>,
+                        h5: ({ children, node: _node, ...props }: HeadingProps<'h5'>) => <h5 {...props} id={getHeadingId(children)}>{children}</h5>,
+                        h6: ({ children, node: _node, ...props }: HeadingProps<'h6'>) => <h6 {...props} id={getHeadingId(children)}>{children}</h6>,
                     }}
                 >
                     {source}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx
index 72e46ae2d..a4fe60aa0 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx
@@ -13,7 +13,7 @@ import CodeMirror, { EditorSelection, EditorView, ReactCodeMirrorRef, SelectionR
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { EditorContextMenu } from "@/app/(app)/components/editorContextMenu";
-import { BrowseHighlightRange, getBrowsePath, HIGHLIGHT_RANGE_QUERY_PARAM } from "@/app/(app)/browse/hooks/utils";
+import { type BlobViewMode, BrowseHighlightRange, getBrowsePath, HIGHLIGHT_RANGE_QUERY_PARAM } from "@/app/(app)/browse/hooks/utils";
 import { rangeHighlightingExtension } from "./rangeHighlightingExtension";
 import { blameGutterExtension } from "./blameGutterExtension";
 import type { FileBlameResponse } from "@/features/git";
@@ -24,6 +24,7 @@ interface PureCodePreviewPanelProps {
     revisionName: string;
     source: string;
     language: string;
+    viewMode?: BlobViewMode;
     blame?: FileBlameResponse;
 }
 
@@ -33,6 +34,7 @@ export const PureCodePreviewPanel = ({
     path,
     repoName,
     revisionName,
+    viewMode,
     blame,
 }: PureCodePreviewPanelProps) => {
     const [editorRef, setEditorRef] = useState<ReactCodeMirrorRef | null>(null);
@@ -51,8 +53,9 @@ export const PureCodePreviewPanel = ({
             pathType: 'blob',
             previewRef: commit.hash,
             diff: true,
+            viewMode: viewMode === 'source' ? 'source' : undefined,
         }));
-    }, [router, repoName, revisionName]);
+    }, [router, repoName, revisionName, viewMode]);
 
     const handleBlameReblameClick = useCallback((previous: { hash: string; path: string }) => {
         router.push(getBrowsePath({
@@ -61,8 +64,9 @@ export const PureCodePreviewPanel = ({
             path: previous.path,
             pathType: 'blob',
             blame: true,
+            viewMode: viewMode === 'source' ? 'source' : undefined,
         }));
-    }, [router, repoName]);
+    }, [router, repoName, viewMode]);
 
     const highlightRangeQuery = useNonEmptyQueryParam(HIGHLIGHT_RANGE_QUERY_PARAM);
     const highlightRange = useMemo((): BrowseHighlightRange | undefined => {
@@ -299,4 +303,3 @@ export const PureCodePreviewPanel = ({
         </ScrollArea>
     )
 }
-
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
index 308ab9f6c..888faa8ff 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
@@ -9,7 +9,7 @@ import { X } from "lucide-react";
 import Link from "next/link";
 import { formatAuthorsText, getCommitAuthors } from "../../../components/commitAuthors";
 import { AuthorsAvatarGroup } from "../../../components/commitParts";
-import { getBrowsePath } from "../../../hooks/utils";
+import { getBrowsePath, type BlobViewMode } from "../../../hooks/utils";
 import { computeChangeCounts, DiffStat } from "./diffStat";
 import { FileStatus, getFileStatus, StatusBadge } from "./fileStatus";
 import { LightweightDiffViewer } from "./lightweightDiffViewer";
@@ -26,6 +26,7 @@ interface FocusedCommitDiffPanelProps {
     revisionName?: string;
     commitSha: string;
     path: string;
+    viewMode?: BlobViewMode;
 }
 
 // Git's well-known empty-tree SHA. Used as the diff base when the commit has
@@ -37,6 +38,7 @@ export const FocusedCommitDiffPanel = async ({
     revisionName,
     commitSha,
     path,
+    viewMode,
 }: FocusedCommitDiffPanelProps) => {
     const [commitResponse, initialDiffResponse, repoInfoResponse] = await Promise.all([
         getCommit({
@@ -166,6 +168,7 @@ export const FocusedCommitDiffPanel = async ({
                                                 revisionName,
                                                 path,
                                                 pathType: 'blob',
+                                                viewMode: viewMode === 'source' ? 'source' : undefined,
                                             })}
                                             aria-label="Exit diff view"
                                         >
diff --git a/packages/web/src/app/(app)/browse/[...path]/page.test.tsx b/packages/web/src/app/(app)/browse/[...path]/page.test.tsx
index 5f0bf8dad..b590a5219 100644
--- a/packages/web/src/app/(app)/browse/[...path]/page.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/page.test.tsx
@@ -15,7 +15,7 @@ vi.mock('./components/codePreviewPanel/codePreviewPanel', () => ({
 }));
 
 vi.mock('./components/commitDiffPanel/focusedCommitDiffPanel', () => ({
-    FocusedCommitDiffPanel: () => <div data-testid="focused-diff" />,
+    FocusedCommitDiffPanel: ({ viewMode }: { viewMode: string }) => <div data-testid="focused-diff">{viewMode}</div>,
 }));
 
 vi.mock('./components/commitDiffPanel/fullCommitDiffPanel', () => ({
@@ -61,5 +61,6 @@ describe('BrowsePage markdown view routing', () => {
 
         expect(screen.queryByTestId('code-preview')).toBeNull();
         expect(screen.getByTestId('focused-diff')).toBeTruthy();
+        expect(screen.getByTestId('focused-diff').textContent).toBe('source');
     });
 });
diff --git a/packages/web/src/app/(app)/browse/[...path]/page.tsx b/packages/web/src/app/(app)/browse/[...path]/page.tsx
index df11e288f..373ccfd99 100644
--- a/packages/web/src/app/(app)/browse/[...path]/page.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/page.tsx
@@ -134,6 +134,7 @@ export default async function BrowsePage(props: BrowsePageProps) {
                             revisionName={revisionName}
                             commitSha={previewRef}
                             path={path}
+                            viewMode={blobViewMode}
                         />
                     ) : (
                         <CodePreviewPanel

From c51a2772f8b44683a9571f209ff6635e51505e5a Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 09:05:52 +0530
Subject: [PATCH 6/8] Keep preview close links in source mode

Closing a commit preview should not reset users who chose raw source back to rendered Markdown. Preserve the active source view in the preview-close browse URL and lock it with a regression test.

Constraint: Markdown previews default to rendered mode, but explicit source-mode navigation must remain sticky across preview, blame, and diff paths.

Rejected: Letting preview close omit view state | it creates an unexpected rendered-preview transition for source-mode users.

Confidence: high

Scope-risk: narrow

Directive: When adding browse transitions, carry BlobViewMode intentionally instead of relying on defaults.

Tested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx' 'src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx' 'src/app/(app)/browse/[...path]/page.test.tsx' 'src/app/(app)/browse/hooks/utils.test.ts' (4 files, 45 tests); git diff --check origin/main...HEAD && git diff --check; node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web lint (0 errors, 5 existing warnings); node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web build; rm -rf packages/web/.next && node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test (64 files, 814 tests)

Not-tested: Browser screenshot of source-to-preview-close transition
---
 .../codePreviewPanel/codePreviewPanel.tsx     |  1 +
 .../codePreviewPanel/markdownPreview.test.tsx | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index 084d572a9..470804858 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -185,6 +185,7 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                                         revisionName,
                                         path,
                                         pathType: 'blob',
+                                        viewMode: viewMode === 'source' ? 'source' : undefined,
                                     })}
                                     aria-label="Close preview"
                                 >
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index 1d6cb4dd0..1092e37da 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -160,6 +160,31 @@ describe('CodePreviewPanel markdown preview', () => {
         }, { source: 'sourcebot-web-client' });
     });
 
+    test('preserves source view when closing a revision preview', async () => {
+        mocks.getFileSource.mockResolvedValue({
+            source: '# Previous README',
+            language: 'Markdown',
+            path: 'README.md',
+            repo: 'github.com/sourcebot-dev/sourcebot',
+            repoCodeHostType: 'github',
+            repoDisplayName: 'sourcebot-dev/sourcebot',
+            repoExternalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+            webUrl: 'https://sourcebot.example.com/browse/github.com/sourcebot-dev/sourcebot/-/blob/README.md',
+        });
+
+        renderWithTooltipProvider(await CodePreviewPanel({
+            path: 'README.md',
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+            previewRef: 'abc123456789',
+            viewMode: 'source',
+        }));
+
+        expect(screen.getByLabelText('Close preview').getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?view=source'
+        );
+    });
+
     test('does not mount raw html from repository markdown', () => {
         const { container } = render(
             <MarkdownPreviewPanel

From e546a377657a804f3b80824b54553f03185f3874 Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 09:25:34 +0530
Subject: [PATCH 7/8] Preserve source mode through history links

Markdown source mode should remain sticky when users enter historical previews or focused diffs from file history. Thread the current source view through those history links and label the non-blame state as Preview or Source for Markdown so the toolbar matches the rendered panel.

Constraint: Rendered Markdown remains the default URL state, so only explicit source mode should add view=source.

Rejected: Preserving source only on exit links | history entry links can already drop the mode before the exit path runs.

Confidence: high

Scope-risk: narrow

Directive: Carry BlobViewMode at both entry and exit points for any new blob navigation path.

Tested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx' 'src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx' 'src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx' 'src/app/(app)/browse/components/historyRow.test.tsx' 'src/app/(app)/browse/[...path]/page.test.tsx' 'src/app/(app)/browse/hooks/utils.test.ts' (6 files, 50 tests); git diff --check origin/main...HEAD && git diff --check; node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web lint (0 errors, 5 existing warnings); node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web build; rm -rf packages/web/.next && node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test (66 files, 819 tests)

Not-tested: Browser screenshot of the file-history source-mode round trip
---
 .../codePreviewPanel/blameViewToggle.test.tsx | 16 ++++
 .../codePreviewPanel/blameViewToggle.tsx      | 16 +++-
 .../codePreviewPanel/codePreviewPanel.tsx     |  8 ++
 .../codePreviewPanel/markdownPreview.test.tsx |  6 +-
 .../focusedCommitDiffPanel.test.tsx           | 91 ++++++++++++++++++
 .../browse/components/historyRow.test.tsx     | 95 +++++++++++++++++++
 .../(app)/browse/components/historyRow.tsx    |  5 +-
 7 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx
 create mode 100644 packages/web/src/app/(app)/browse/components/historyRow.test.tsx

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx
index a1cc1a72a..b865da5b0 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx
@@ -71,4 +71,20 @@ describe('BlameViewToggle', () => {
             '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?blame=true'
         );
     });
+
+    test('supports markdown-specific non-blame labels', () => {
+        render(
+            <BlameViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                blame={false}
+                viewMode="rendered"
+                codeLabel="Preview"
+                codeAriaLabel="Preview rendered markdown"
+            />
+        );
+
+        expect(screen.getByRole('radio', { name: 'Preview rendered markdown' }).textContent).toBe('Preview');
+    });
 });
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
index 04135540b..844785db8 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.tsx
@@ -10,9 +10,19 @@ interface BlameViewToggleProps {
     path: string;
     blame: boolean;
     viewMode?: BlobViewMode;
+    codeLabel?: string;
+    codeAriaLabel?: string;
 }
 
-export const BlameViewToggle = ({ repoName, revisionName, path, blame, viewMode }: BlameViewToggleProps) => {
+export const BlameViewToggle = ({
+    repoName,
+    revisionName,
+    path,
+    blame,
+    viewMode,
+    codeLabel = 'Code',
+    codeAriaLabel = 'View source code',
+}: BlameViewToggleProps) => {
     const router = useRouter();
 
     const handleValueChange = (value: string) => {
@@ -50,10 +60,10 @@ export const BlameViewToggle = ({ repoName, revisionName, path, blame, viewMode
         >
             <ToggleGroupItem
                 value="code"
-                aria-label="View source code"
+                aria-label={codeAriaLabel}
                 className={`${baseItemClass} rounded-r-none`}
             >
-                Code
+                {codeLabel}
             </ToggleGroupItem>
             <ToggleGroupItem
                 value="blame"
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index 470804858..4241cb675 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -78,6 +78,12 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
     const isMarkdown = fileSourceResponse.language === 'Markdown';
     const isMarkdownPreviewAvailable = isMarkdown && !blame && !previewRef;
     const shouldRenderMarkdown = isMarkdownPreviewAvailable && viewMode === 'rendered';
+    const nonBlameViewLabel = isMarkdown
+        ? viewMode === 'source' ? 'Source' : 'Preview'
+        : 'Code';
+    const nonBlameViewAriaLabel = isMarkdown
+        ? viewMode === 'source' ? 'View raw markdown source' : 'Preview rendered markdown'
+        : 'View source code';
 
     const codeHostInfo = getCodeHostInfoForRepo({
         codeHostType: repoInfoResponse.codeHostType,
@@ -142,6 +148,8 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                         path={path}
                         blame={blame ?? false}
                         viewMode={viewMode}
+                        codeLabel={nonBlameViewLabel}
+                        codeAriaLabel={nonBlameViewAriaLabel}
                     />
                     <span className="text-sm text-muted-foreground">
                         {lineCount.toLocaleString()} lines · {fileSize}
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index 1092e37da..a625f7768 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -22,7 +22,9 @@ vi.mock('@/app/(app)/components/pathHeader', () => ({
 }));
 
 vi.mock('./blameViewToggle', () => ({
-    BlameViewToggle: () => <div>Blame toggle</div>,
+    BlameViewToggle: ({ codeLabel }: { codeLabel?: string }) => (
+        <div data-testid="blame-view-toggle">{codeLabel}</div>
+    ),
 }));
 
 vi.mock('./pureCodePreviewPanel', () => ({
@@ -79,6 +81,7 @@ describe('CodePreviewPanel markdown preview', () => {
         expect(screen.queryByRole('heading', { name: 'Project README' })).toBeTruthy();
         expect(screen.queryByText('fast search')).toBeTruthy();
         expect(screen.queryByTestId('raw-source')).toBeNull();
+        expect(screen.getByTestId('blame-view-toggle').textContent).toBe('Preview');
     });
 
     test('keeps raw source view available for markdown files', async () => {
@@ -102,6 +105,7 @@ describe('CodePreviewPanel markdown preview', () => {
 
         expect(screen.queryByRole('heading', { name: 'Project README' })).toBeNull();
         expect(screen.queryByTestId('raw-source')?.textContent).toContain('# Project README');
+        expect(screen.getByTestId('blame-view-toggle').textContent).toBe('Source');
     });
 
     test('keeps markdown in raw source view when blame is enabled', async () => {
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx
new file mode 100644
index 000000000..239e0f970
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx
@@ -0,0 +1,91 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+    getRepoInfoByName: vi.fn(),
+    getCommit: vi.fn(),
+    getDiff: vi.fn(),
+}));
+
+vi.mock('@/actions', () => ({
+    getRepoInfoByName: mocks.getRepoInfoByName,
+}));
+
+vi.mock('@/features/git', () => ({
+    getCommit: mocks.getCommit,
+    getDiff: mocks.getDiff,
+}));
+
+vi.mock('@/app/(app)/components/pathHeader', () => ({
+    PathHeader: ({ path }: { path: string }) => <div>Path: {path}</div>,
+}));
+
+vi.mock('./lightweightDiffViewer', () => ({
+    LightweightDiffViewer: () => <div data-testid="diff-viewer" />,
+}));
+
+import { FocusedCommitDiffPanel } from './focusedCommitDiffPanel';
+
+afterEach(() => {
+    cleanup();
+});
+
+const renderWithTooltipProvider = (ui: React.ReactNode) => render(
+    <TooltipProvider>{ui}</TooltipProvider>
+);
+
+describe('FocusedCommitDiffPanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+
+        mocks.getRepoInfoByName.mockResolvedValue({
+            name: 'github.com/sourcebot-dev/sourcebot',
+            displayName: 'sourcebot-dev/sourcebot',
+            codeHostType: 'github',
+            externalWebUrl: 'https://github.com/sourcebot-dev/sourcebot',
+        });
+
+        mocks.getCommit.mockResolvedValue({
+            hash: 'abc123456789',
+            date: '2026-01-02T03:04:05.000Z',
+            message: 'Update README',
+            refs: '',
+            body: '',
+            authorName: 'Sourcebot Maintainer',
+            authorEmail: 'maintainer@sourcebot.dev',
+            parents: ['parent123'],
+        });
+
+        mocks.getDiff.mockResolvedValue({
+            files: [
+                {
+                    oldPath: 'README.md',
+                    newPath: 'README.md',
+                    hunks: [
+                        {
+                            oldRange: { start: 1, lines: 1 },
+                            newRange: { start: 1, lines: 1 },
+                            body: '-old\n+new',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+
+    test('preserves source view when exiting a focused diff', async () => {
+        renderWithTooltipProvider(await FocusedCommitDiffPanel({
+            repoName: 'github.com/sourcebot-dev/sourcebot',
+            revisionName: 'main',
+            commitSha: 'abc123456789',
+            path: 'README.md',
+            viewMode: 'source',
+        }));
+
+        expect(screen.getByLabelText('Exit diff view').getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?view=source'
+        );
+        expect(screen.getByTestId('diff-viewer')).toBeTruthy();
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/components/historyRow.test.tsx b/packages/web/src/app/(app)/browse/components/historyRow.test.tsx
new file mode 100644
index 000000000..1e8c4e1c0
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/components/historyRow.test.tsx
@@ -0,0 +1,95 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { HistoryRow } from './historyRow';
+
+const mocks = vi.hoisted(() => ({
+    pathname: '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md',
+    search: '',
+}));
+
+vi.mock('next/navigation', () => ({
+    usePathname: () => mocks.pathname,
+    useSearchParams: () => new URLSearchParams(mocks.search),
+}));
+
+afterEach(() => {
+    cleanup();
+});
+
+const renderWithTooltipProvider = (ui: React.ReactNode) => render(
+    <TooltipProvider>{ui}</TooltipProvider>
+);
+
+const commit = {
+    hash: 'abc123456789',
+    date: '2026-01-02T03:04:05.000Z',
+    message: 'Update README',
+    refs: '',
+    body: '',
+    authorName: 'Sourcebot Maintainer',
+    authorEmail: 'maintainer@sourcebot.dev',
+    parents: ['parent123'],
+};
+
+describe('HistoryRow', () => {
+    beforeEach(() => {
+        mocks.pathname = '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md';
+        mocks.search = '';
+    });
+
+    test('preserves source view in file history preview links', () => {
+        mocks.search = 'view=source';
+
+        renderWithTooltipProvider(
+            <HistoryRow
+                commit={commit}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                pathType="blob"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'View code at this commit' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789&view=source'
+        );
+    });
+
+    test('preserves source view in focused diff links', () => {
+        mocks.search = 'view=source';
+
+        renderWithTooltipProvider(
+            <HistoryRow
+                commit={commit}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                pathType="blob"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'Update README' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789&diff=true&view=source'
+        );
+    });
+
+    test('keeps rendered preview history links as the default URL', () => {
+        renderWithTooltipProvider(
+            <HistoryRow
+                commit={commit}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                pathType="blob"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'View code at this commit' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789'
+        );
+        expect(screen.getByRole('link', { name: 'Update README' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789&diff=true'
+        );
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/components/historyRow.tsx b/packages/web/src/app/(app)/browse/components/historyRow.tsx
index 4dea78c92..2400e7a09 100644
--- a/packages/web/src/app/(app)/browse/components/historyRow.tsx
+++ b/packages/web/src/app/(app)/browse/components/historyRow.tsx
@@ -8,7 +8,7 @@ import type { Commit } from "@/features/git";
 import { cn } from "@/lib/utils";
 import { HoverPrefetchLink } from "@/app/(app)/components/hoverPrefetchLink";
 import { useBrowseParams } from "../hooks/useBrowseParams";
-import { BrowsePathType, getBrowsePath, PREVIEW_REF_QUERY_PARAM } from "../hooks/utils";
+import { BLOB_VIEW_QUERY_PARAM, BrowsePathType, getBrowsePath, PREVIEW_REF_QUERY_PARAM } from "../hooks/utils";
 import { formatAuthorsText, getCommitAuthors } from "./commitAuthors";
 import { AuthorsAvatarGroup, CommitActionLink } from "./commitParts";
 
@@ -26,6 +26,7 @@ export const HistoryRow = ({ commit, repoName, revisionName, path, pathType }: H
     const shortSha = commit.hash.slice(0, 7);
     const relativeDate = formatDistanceToNow(new Date(commit.date), { addSuffix: true });
     const isBlobPath = pathType === 'blob';
+    const viewMode = searchParams.get(BLOB_VIEW_QUERY_PARAM) === 'source' ? 'source' : undefined;
 
     const isSelected =
         browseParams.pathType === 'blob' &&
@@ -39,6 +40,7 @@ export const HistoryRow = ({ commit, repoName, revisionName, path, pathType }: H
         path,
         pathType: 'blob',
         previewRef: commit.hash,
+        viewMode,
     });
 
     const viewRepoHref = getBrowsePath({
@@ -67,6 +69,7 @@ export const HistoryRow = ({ commit, repoName, revisionName, path, pathType }: H
             pathType: 'blob',
             previewRef: commit.hash,
             diff: true,
+            viewMode,
         })
         : undefined;
 

From 73082070266b27b25b3a4f94e5909d37ce970a41 Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Sun, 28 Jun 2026 09:37:37 +0530
Subject: [PATCH 8/8] Close markdown preview state gaps

Markdown preview state needs to stay consistent across implicit source-mode links and every supported image syntax. Preserve source mode for highlight-driven history links, convert reference-style images into the same non-fetching links as inline images, and lock the Markdown view toggle labels and active state with direct tests.

Constraint: This PR keeps repository Markdown images non-fetching until Sourcebot has a dedicated raw asset pipeline.

Rejected: Adding a broad raw-file endpoint here | it expands the PR beyond browse rendering and needs separate binary/auth/cache design.

Confidence: high

Scope-risk: narrow

Directive: Treat new Markdown URL syntaxes as untrusted until tests prove they cannot trigger unexpected fetches or state loss.

Tested: node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx' 'src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.test.tsx' 'src/app/(app)/browse/[...path]/components/codePreviewPanel/blameViewToggle.test.tsx' 'src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.test.tsx' 'src/app/(app)/browse/components/historyRow.test.tsx' 'src/app/(app)/browse/[...path]/page.test.tsx' 'src/app/(app)/browse/hooks/utils.test.ts' (7 files, 55 tests); git diff --check origin/main...HEAD && git diff --check; node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web lint (0 errors, 5 existing warnings); node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web build; rm -rf packages/web/.next && node .yarn/releases/yarn-4.7.0.cjs workspace @sourcebot/web test (67 files, 824 tests)

Not-tested: Browser screenshot of reference-style image Markdown
---
 .../codePreviewPanel/markdownPreview.test.tsx | 34 +++++++++++
 .../codePreviewPanel/markdownPreviewPanel.tsx | 30 ++++++++--
 .../markdownViewToggle.test.tsx               | 59 +++++++++++++++++++
 .../browse/components/historyRow.test.tsx     | 21 +++++++
 .../(app)/browse/components/historyRow.tsx    |  6 +-
 5 files changed, 142 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.test.tsx

diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
index a625f7768..5afc676d2 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreview.test.tsx
@@ -360,4 +360,38 @@ describe('CodePreviewPanel markdown preview', () => {
             'https://example.com/pixel.png'
         );
     });
+
+    test('renders reference-style markdown images as non-fetching links', () => {
+        render(
+            <MarkdownPreviewPanel
+                source={"![Badge][badge]\n\n[badge]: https://example.com/badge.svg"}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(screen.getByRole('link', { name: 'Image: Badge' }).getAttribute('href')).toBe(
+            'https://example.com/badge.svg'
+        );
+    });
+
+    test('does not create nested anchors for linked reference-style markdown images', () => {
+        const { container } = render(
+            <MarkdownPreviewPanel
+                source={"[![Build status][badge]](https://example.com/status)\n\n[badge]: https://example.com/badge.svg"}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+            />
+        );
+
+        const links = container.querySelectorAll('a');
+
+        expect(screen.queryByRole('img')).toBeNull();
+        expect(links).toHaveLength(1);
+        expect(links[0].getAttribute('href')).toBe('https://example.com/status');
+        expect(links[0].textContent).toBe('Image: Build status');
+    });
 });
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
index 83deb15cd..abbfa53ef 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownPreviewPanel.tsx
@@ -1,6 +1,6 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
-import type { Image, Link as MdastLink, Root, Text } from "mdast";
+import type { Definition, Image, ImageReference, Link as MdastLink, Root, Text } from "mdast";
 import Link from "next/link";
 import Markdown from "react-markdown";
 import { isValidElement, type ComponentPropsWithoutRef, type ReactNode } from "react";
@@ -97,6 +97,9 @@ const getRelativeBrowseHref = ({ repoName, revisionName, currentPath, href }: {
 
 const getImageLabel = (alt?: string | null): string => alt ? `Image: ${alt}` : 'Image';
 
+const normalizeDefinitionIdentifier = (identifier: string): string =>
+    identifier.trim().replace(/[\t\n\r ]+/g, ' ').toLowerCase();
+
 const getNodeText = (node: ReactNode): string => {
     if (typeof node === 'string' || typeof node === 'number') {
         return String(node);
@@ -129,30 +132,45 @@ const slugHeading = (text: string): string => {
 
 const remarkImageLinks = () => {
     return (tree: Root) => {
-        visit(tree, 'image', (node: Image, index, parent) => {
+        const definitions = new Map<string, Definition>();
+
+        visit(tree, 'definition', (node: Definition) => {
+            definitions.set(normalizeDefinitionIdentifier(node.identifier), node);
+        });
+
+        type ImageParent = { type?: string; children: Array<unknown> };
+        const replaceImageNode = (node: Image | ImageReference, index?: number, parent?: ImageParent) => {
             if (index === undefined || !parent || !('children' in parent)) {
                 return;
             }
 
+            const definition = node.type === 'imageReference'
+                ? definitions.get(normalizeDefinitionIdentifier(node.identifier))
+                : undefined;
+            const imageUrl = node.type === 'image' ? node.url : definition?.url;
+            const imageTitle = node.type === 'image' ? node.title : definition?.title;
             const textNode: Text = {
                 type: 'text',
                 value: getImageLabel(node.alt),
             };
 
-            if (!node.url || parent.type === 'link') {
+            if (!imageUrl || parent.type === 'link' || parent.type === 'linkReference') {
                 parent.children[index] = textNode;
                 return;
             }
 
             const linkNode: MdastLink = {
                 type: 'link',
-                url: node.url,
-                title: node.title,
+                url: imageUrl,
+                title: imageTitle,
                 children: [textNode],
             };
 
             parent.children[index] = linkNode;
-        });
+        };
+
+        visit(tree, 'image', replaceImageNode);
+        visit(tree, 'imageReference', replaceImageNode);
     };
 };
 
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.test.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.test.tsx
new file mode 100644
index 000000000..b131ee46a
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/markdownViewToggle.test.tsx
@@ -0,0 +1,59 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+import { MarkdownViewToggle } from './markdownViewToggle';
+
+afterEach(() => {
+    cleanup();
+});
+
+describe('MarkdownViewToggle', () => {
+    test('marks rendered preview as selected by default', () => {
+        render(
+            <MarkdownViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                viewMode="rendered"
+            />
+        );
+
+        const preview = screen.getByRole('radio', { name: 'Preview rendered markdown' });
+        const source = screen.getByRole('radio', { name: 'View raw markdown source' });
+
+        expect(preview.textContent).toBe('Preview');
+        expect(preview.getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md'
+        );
+        expect(preview.getAttribute('aria-checked')).toBe('true');
+
+        expect(source.textContent).toBe('Source');
+        expect(source.getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?view=source'
+        );
+        expect(source.getAttribute('aria-checked')).toBe('false');
+    });
+
+    test('marks source mode as selected when raw markdown is active', () => {
+        render(
+            <MarkdownViewToggle
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                viewMode="source"
+            />
+        );
+
+        const preview = screen.getByRole('radio', { name: 'Preview rendered markdown' });
+        const source = screen.getByRole('radio', { name: 'View raw markdown source' });
+
+        expect(preview.getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md'
+        );
+        expect(preview.getAttribute('aria-checked')).toBe('false');
+
+        expect(source.getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?view=source'
+        );
+        expect(source.getAttribute('aria-checked')).toBe('true');
+    });
+});
diff --git a/packages/web/src/app/(app)/browse/components/historyRow.test.tsx b/packages/web/src/app/(app)/browse/components/historyRow.test.tsx
index 1e8c4e1c0..177ecb12c 100644
--- a/packages/web/src/app/(app)/browse/components/historyRow.test.tsx
+++ b/packages/web/src/app/(app)/browse/components/historyRow.test.tsx
@@ -74,6 +74,27 @@ describe('HistoryRow', () => {
         );
     });
 
+    test('preserves source view in history links when a highlight range forced source mode', () => {
+        mocks.search = 'highlightRange=12,12';
+
+        renderWithTooltipProvider(
+            <HistoryRow
+                commit={commit}
+                repoName="github.com/sourcebot-dev/sourcebot"
+                revisionName="main"
+                path="README.md"
+                pathType="blob"
+            />
+        );
+
+        expect(screen.getByRole('link', { name: 'View code at this commit' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789&view=source'
+        );
+        expect(screen.getByRole('link', { name: 'Update README' }).getAttribute('href')).toBe(
+            '/browse/github.com/sourcebot-dev/sourcebot@main/-/blob/README.md?ref=abc123456789&diff=true&view=source'
+        );
+    });
+
     test('keeps rendered preview history links as the default URL', () => {
         renderWithTooltipProvider(
             <HistoryRow
diff --git a/packages/web/src/app/(app)/browse/components/historyRow.tsx b/packages/web/src/app/(app)/browse/components/historyRow.tsx
index 2400e7a09..59d3fb015 100644
--- a/packages/web/src/app/(app)/browse/components/historyRow.tsx
+++ b/packages/web/src/app/(app)/browse/components/historyRow.tsx
@@ -8,7 +8,7 @@ import type { Commit } from "@/features/git";
 import { cn } from "@/lib/utils";
 import { HoverPrefetchLink } from "@/app/(app)/components/hoverPrefetchLink";
 import { useBrowseParams } from "../hooks/useBrowseParams";
-import { BLOB_VIEW_QUERY_PARAM, BrowsePathType, getBrowsePath, PREVIEW_REF_QUERY_PARAM } from "../hooks/utils";
+import { BLOB_VIEW_QUERY_PARAM, BrowsePathType, getBrowsePath, HIGHLIGHT_RANGE_QUERY_PARAM, PREVIEW_REF_QUERY_PARAM } from "../hooks/utils";
 import { formatAuthorsText, getCommitAuthors } from "./commitAuthors";
 import { AuthorsAvatarGroup, CommitActionLink } from "./commitParts";
 
@@ -26,7 +26,9 @@ export const HistoryRow = ({ commit, repoName, revisionName, path, pathType }: H
     const shortSha = commit.hash.slice(0, 7);
     const relativeDate = formatDistanceToNow(new Date(commit.date), { addSuffix: true });
     const isBlobPath = pathType === 'blob';
-    const viewMode = searchParams.get(BLOB_VIEW_QUERY_PARAM) === 'source' ? 'source' : undefined;
+    const hasSourceMode = Boolean(searchParams.get(HIGHLIGHT_RANGE_QUERY_PARAM)) ||
+        searchParams.get(BLOB_VIEW_QUERY_PARAM) === 'source';
+    const viewMode = hasSourceMode ? 'source' : undefined;
 
     const isSelected =
         browseParams.pathType === 'blob' &&