- {children}
-
- );
-}
-
-/** Two-step progress, sized for a dialog footer. */
-function StepDots({ current }: { current: number }) {
- return (
-
- {[0, 1].map((index) => (
-
- ))}
-
- );
-}
-
-function agentStateOf(
- agents: readonly OnboardingAgent[],
-): OnboardingAgentState {
- if (agents.some((agent) => agent.status === "connected")) return "connected";
- if (agents.some((agent) => agent.status !== "not_installed"))
- return "signed_out";
- return "none";
-}
-
-function AgentRows({
- agents,
- onInstall,
- installing,
- expandedSignIn,
- onToggleSignIn,
- onRecheck,
-}: {
- agents: readonly OnboardingAgent[];
- onInstall: (agent: OnboardingAgent) => void;
- installing: ReadonlySet
-
- );
- })}
-
-
- {agent.planLabel}
-
- )}
-
-
- {label}
- {isInstalling ? (
-
- {expanded && agent.loginCommand !== null ? (
- /* bb deliberately does not drive another tool's login: it shows
- the agent's own command and re-checks, so credentials never
- pass through bb. */
-
-
- {/* Fixed column so plan badges share one right edge, and rows
- without a plan keep the same gutter. Only Claude Code, Codex,
- and Cursor can report a plan; the rest get no badge rather
- than a fabricated one. */}
-
- {agent.planLabel === null ? null : (
- {agent.displayName}
- {agent.accountEmail === null ? null : (
-
- {agent.accountEmail}
-
- )}
-
- {needsAuth && agent.loginCommand !== null ? (
-
- ) : agent.status === "not_installed" &&
- agent.canInstall &&
- !isInstalling ? (
-
- ) : null}
-
-
-
- ) : null}
- - Run this in a terminal, then come back: -
-
-
-
- {agent.loginCommand}
-
-
-
- Onboarding flow
,
-}));
-
-beforeEach(() => {
- mocks.useCreateProject.mockReturnValue({ mutateAsync: vi.fn() });
- mocks.useHostProviderCliStatus.mockReturnValue({ data: undefined });
- mocks.usePrimaryHost.mockReturnValue({ id: "host-1" });
- mocks.useProviderCliInstallRunner.mockReturnValue({
- failuresByJobKey: new Map(),
- queuedJobKeys: new Set(),
- runningJobKey: null,
- startInstall: vi.fn(),
- });
- mocks.useSidebarNavigation.mockReturnValue({ data: { projects: [] } });
- mocks.useUpdateGeneralSettings.mockReturnValue({ mutate: vi.fn() });
-});
-
-afterEach(() => {
- cleanup();
- vi.clearAllMocks();
-});
-
-describe("OnboardingHost", () => {
- it("does not show or run provider checks while the experiment is off", () => {
- mocks.useSystemConfig.mockReturnValue({
- data: {
- experiments: defaultExperiments,
- generalSettings: defaultAppSettings,
- },
- });
-
- render(
-
- );
-}
-
export function DebugSettingsSection({
disabled,
enabled,
@@ -999,7 +965,6 @@ export function ProviderSettingsSection({
const CHANGELOG_PREVIEW_EXPERIMENT_LABEL = "Changelog preview";
const EDIT_MESSAGES_EXPERIMENT_LABEL = "Edit messages";
const MOBILE_APP_EXPERIMENT_LABEL = "Mobile app";
-const NEW_ONBOARDING_EXPERIMENT_LABEL = "New onboarding";
const PROVIDER_SESSION_REAPING_EXPERIMENT_LABEL =
"Idle provider session release";
export function ExperimentsSettingsSection({
@@ -1007,12 +972,10 @@ export function ExperimentsSettingsSection({
disabled,
editMessagesEnabled,
mobileAppEnabled,
- newOnboardingEnabled,
providerSessionReapingEnabled,
onChangelogPreviewEnabledChange,
onEditMessagesEnabledChange,
onMobileAppEnabledChange,
- onNewOnboardingEnabledChange,
onProviderSessionReapingEnabledChange,
}: ExperimentsSettingsSectionProps) {
return (
@@ -1057,18 +1020,6 @@ export function ExperimentsSettingsSection({
/>
-
-
-
- Setup guide
- - Walk through agent detection and adding projects again. -
-`, records it as already highlighted,
and starts a worker task. Its normal render then early-returns because
the file is unchanged. When the worker returns the highlighted AST,
Pierre suppresses the repaint because the hydrated cache says it is
already highlighted. Production does not perform this simulated remount,
which is why `pnpm start` worked while `pnpm dev` did not.
The packages CI job also exposed a separate Connect test race: the
connected status renders before the asynchronous mobile-pairing
capability response, but three tests synchronously queried the
capability-gated button.
## What changed
Added a development-only host adapter around Pierre's public
`onPostRender` and `rerender()` APIs. A mount schedules one microtask
after React's ref replay: the discarded renderer has already been
disabled and safely no-ops, while the retained renderer takes Pierre's
normal forced-render path so its worker completion can repaint. The
adapter preserves plugin callbacks and stable option identities, covers
the plugin `File`, `FileDiff`, `MultiFileDiff`, `PatchDiff`, and
`UnresolvedFile` surfaces, and also covers the built-in diff card.
Production receives the original options object unchanged.
Removed the `pnpm` patched dependency and its renderer-internals
regression; the install now uses stock `@pierre/diffs` 1.2.9. Added a
host-level regression for the Strict Mode replay ordering. The Connect
tests now await the mobile-pairing button before interacting with it.
This is frontend/test-only; there are no host daemon protocol, CLI, or
documentation changes.
## How you verified
- The new recovery regression models the discarded and retained
renderers and verifies that repaint waits until after ref replay.
- `pnpm install --frozen-lockfile --ignore-scripts` passed with
unmodified `@pierre/diffs` 1.2.9.
- `pnpm exec turbo run test --filter=@bb/app --force`: 399 files / 3,041
tests passed (3 skipped).
- `pnpm exec turbo run test --filter=@bb/app --filter=bb-plugin-github
--filter=bb-plugin-connect --force`: app, GitHub (21 tests), and Connect
(90 tests) passed.
- `pnpm exec turbo run typecheck --filter=@bb/app
--filter=bb-plugin-github --filter=bb-plugin-connect --force`: passed.
- `pnpm exec turbo run lint --filter=@bb/app --force`: passed with 0
errors (pre-existing warnings only).
- `pnpm exec turbo run build --filter=@bb/app --force`: passed.
- Sawyer Hood's dev-browser against a real GitHub pull request under
`pnpm dev` found 39 syntax-token spans with 6 distinct token styles in
the original reproduction file.
- Reproduced the Connect failure locally before awaiting the
capability-gated button; its complete 90-test suite passes afterward.
- `git diff --check`: passed.
Fixes: development-only GitHub plugin diff syntax highlighting
> AGENT GENERATED: by GPT-5
---
.../components/git-diff/GitDiffCardBody.tsx | 4 +-
.../lib/pierre-strict-mode-recovery.test.tsx | 82 +++++++++++++++++++
.../src/lib/pierre-strict-mode-recovery.ts | 50 +++++++++++
.../app/src/lib/plugin-pierre-diffs-react.tsx | 51 +++++++++---
plugins/connect/app.test.tsx | 12 ++-
5 files changed, 182 insertions(+), 17 deletions(-)
create mode 100644 apps/app/src/lib/pierre-strict-mode-recovery.test.tsx
create mode 100644 apps/app/src/lib/pierre-strict-mode-recovery.ts
diff --git a/apps/app/src/components/git-diff/GitDiffCardBody.tsx b/apps/app/src/components/git-diff/GitDiffCardBody.tsx
index fbe2001799..3796c98cb7 100644
--- a/apps/app/src/components/git-diff/GitDiffCardBody.tsx
+++ b/apps/app/src/components/git-diff/GitDiffCardBody.tsx
@@ -16,6 +16,7 @@ import type {
import { useResolvedCodeThemePair } from "@/lib/code-theme";
import { PierreWorkerPoolBoundary } from "@/lib/pierre-worker-pool-boundary";
import { useRequirePierreWorkerPool } from "@/lib/pierre-worker-pool-gate";
+import { usePierreStrictModeRecoveryOptions } from "@/lib/pierre-strict-mode-recovery";
import { FileDiff as DiffView } from "@pierre/diffs/react";
import { useIntersectionObserver } from "usehooks-ts";
import { Button } from "@bb/shared-ui/button";
@@ -1303,7 +1304,7 @@ function GitDiffCardRawDiffBody({
enabled: onSelectionAddToChat !== undefined,
onSelectionAddToChat,
});
- const options = useMemo>(
+ const baseOptions = useMemo>(
() => ({
...fileDiffOptions,
enableGutterUtility: onSelectionAddToChat !== undefined,
@@ -1327,6 +1328,7 @@ function GitDiffCardRawDiffBody({
onSelectionAddToChat,
],
);
+ const options = usePierreStrictModeRecoveryOptions(baseOptions);
// `DiffView` captures the worker pool when it creates its instance, so wait
// for the workspace to build the pool before the first render.
const isWorkerPoolReady = useRequirePierreWorkerPool();
diff --git a/apps/app/src/lib/pierre-strict-mode-recovery.test.tsx b/apps/app/src/lib/pierre-strict-mode-recovery.test.tsx
new file mode 100644
index 0000000000..c82ea4bdcb
--- /dev/null
+++ b/apps/app/src/lib/pierre-strict-mode-recovery.test.tsx
@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import type { PostRenderPhase } from "@pierre/diffs";
+import { describe, expect, it, vi } from "vitest";
+import { usePierreStrictModeRecoveryOptions } from "./pierre-strict-mode-recovery";
+
+interface TestPierreInstance {
+ rerender(): void;
+}
+
+interface TestPierreOptions {
+ label: string;
+ onPostRender?(
+ node: HTMLElement,
+ instance: TestPierreInstance,
+ phase: PostRenderPhase,
+ ): unknown;
+}
+
+describe("Pierre Strict Mode recovery", () => {
+ it("waits for ref replay before repainting the retained instance", async () => {
+ const onPostRender = vi.fn();
+ const repaint = vi.fn();
+ let discardedIsActive = true;
+ const discardedRerender = vi.fn(() => {
+ if (discardedIsActive) repaint();
+ });
+ const retainedRerender = vi.fn(repaint);
+ const discardedInstance: TestPierreInstance = {
+ rerender: discardedRerender,
+ };
+ const retainedInstance: TestPierreInstance = { rerender: retainedRerender };
+ const options: TestPierreOptions = {
+ label: "plugin-diff",
+ onPostRender,
+ };
+ const { result, rerender } = renderHook(() =>
+ usePierreStrictModeRecoveryOptions(
+ options,
+ ),
+ );
+ const recoveredOptions = result.current;
+ const node = document.createElement("diffs-container");
+
+ recoveredOptions?.onPostRender?.(node, discardedInstance, "mount");
+ discardedIsActive = false;
+ recoveredOptions?.onPostRender?.(node, retainedInstance, "mount");
+
+ expect(onPostRender).toHaveBeenNthCalledWith(
+ 1,
+ node,
+ discardedInstance,
+ "mount",
+ );
+ expect(onPostRender).toHaveBeenNthCalledWith(
+ 2,
+ node,
+ retainedInstance,
+ "mount",
+ );
+ expect(repaint).not.toHaveBeenCalled();
+
+ await act(async () => {
+ await Promise.resolve();
+ });
+
+ expect(discardedRerender).toHaveBeenCalledOnce();
+ expect(retainedRerender).toHaveBeenCalledOnce();
+ expect(repaint).toHaveBeenCalledOnce();
+
+ rerender();
+ expect(result.current).toBe(recoveredOptions);
+
+ result.current?.onPostRender?.(node, retainedInstance, "update");
+ result.current?.onPostRender?.(node, retainedInstance, "unmount");
+ await act(async () => {
+ await Promise.resolve();
+ });
+
+ expect(retainedRerender).toHaveBeenCalledOnce();
+ });
+});
diff --git a/apps/app/src/lib/pierre-strict-mode-recovery.ts b/apps/app/src/lib/pierre-strict-mode-recovery.ts
new file mode 100644
index 0000000000..eaf7970da7
--- /dev/null
+++ b/apps/app/src/lib/pierre-strict-mode-recovery.ts
@@ -0,0 +1,50 @@
+import type { PostRenderPhase } from "@pierre/diffs";
+import { useMemo } from "react";
+
+interface RerenderablePierreInstance {
+ rerender(): void;
+}
+
+interface PierrePostRenderOptions<
+ TInstance extends RerenderablePierreInstance,
+> {
+ onPostRender?(
+ node: HTMLElement,
+ instance: TInstance,
+ phase: PostRenderPhase,
+ ): unknown;
+}
+
+/**
+ * Recovers a Pierre renderer after React replays its ref in development.
+ *
+ * Strict Mode can attach a replacement renderer to the first renderer's
+ * retained plain DOM. Pierre's public `rerender()` method moves that replacement
+ * through the normal render path, where its pending worker result is allowed to
+ * repaint. A microtask runs after the replay: the discarded instance is already
+ * disabled and safely no-ops, while the retained instance performs one forced
+ * render. Production returns the original options object unchanged.
+ */
+export function usePierreStrictModeRecoveryOptions<
+ TInstance extends RerenderablePierreInstance,
+ TOptions extends PierrePostRenderOptions,
+>(options: TOptions | undefined) {
+ return useMemo(() => {
+ if (!import.meta.env.DEV) return options;
+
+ const onPostRender = options?.onPostRender;
+ return {
+ ...options,
+ onPostRender(
+ node: HTMLElement,
+ instance: TInstance,
+ phase: PostRenderPhase,
+ ) {
+ onPostRender?.(node, instance, phase);
+ if (phase === "mount") {
+ queueMicrotask(() => instance.rerender());
+ }
+ },
+ };
+ }, [options]);
+}
diff --git a/apps/app/src/lib/plugin-pierre-diffs-react.tsx b/apps/app/src/lib/plugin-pierre-diffs-react.tsx
index df814a8b6e..5c338f2e91 100644
--- a/apps/app/src/lib/plugin-pierre-diffs-react.tsx
+++ b/apps/app/src/lib/plugin-pierre-diffs-react.tsx
@@ -32,6 +32,7 @@ import {
usePierreWorkerPool,
useRequirePierreWorkerPool,
} from "./pierre-worker-pool-gate";
+import { usePierreStrictModeRecoveryOptions } from "./pierre-strict-mode-recovery";
/**
* The `@pierre/diffs/react` surface handed to plugin bundles through the
@@ -54,24 +55,48 @@ import {
* mirrors `RUNTIME_EXPORT_MANIFEST["@pierre/diffs/react"]` in
* packages/plugin-build; the plugin-frontend test keeps them in sync.
*/
-function gatePierreComponent(
- Component: ComponentType
,
- name: string,
-) {
- function PierreWorkerPoolGated(props: P) {
+function gatePierreDiffComponent<
+ P extends {
+ options?: ComponentPropsWithoutRef["options"];
+ },
+>(Component: ComponentType, name: string) {
+ function PierreWorkerPoolGatedDiff(props: P) {
const ready = useRequirePierreWorkerPool();
+ const options = usePierreStrictModeRecoveryOptions(props.options);
return (
- {ready ?
);
}
- PierreWorkerPoolGated.displayName = `PierreWorkerPoolGated(${name})`;
- return PierreWorkerPoolGated;
+ PierreWorkerPoolGatedDiff.displayName = `PierreWorkerPoolGated(${name})`;
+ return PierreWorkerPoolGatedDiff;
}
type CodeViewProps = ComponentPropsWithoutRef;
type CodeViewHandle = ElementRef;
+type FileProps = ComponentPropsWithoutRef;
+type UnresolvedFileProps = ComponentPropsWithoutRef;
+
+function GatedFile(props: FileProps) {
+ const ready = useRequirePierreWorkerPool();
+ const options = usePierreStrictModeRecoveryOptions(props.options);
+ return (
+
+ {ready ?
+ );
+}
+
+function GatedUnresolvedFile(props: UnresolvedFileProps) {
+ const ready = useRequirePierreWorkerPool();
+ const options = usePierreStrictModeRecoveryOptions(props.options);
+ return (
+
+ {ready ?
+ );
+}
/** `CodeView` forwards an imperative handle, so its gate must forward too. */
const GatedCodeView = forwardRef(
@@ -106,13 +131,13 @@ function useHostWorkerPool(): ReturnType {
export function createGatedPierreDiffsReact(): Record {
return {
CodeView: GatedCodeView,
- File: gatePierreComponent(File, "File"),
- FileDiff: gatePierreComponent(FileDiff, "FileDiff"),
+ File: GatedFile,
+ FileDiff: gatePierreDiffComponent(FileDiff, "FileDiff"),
GutterUtilitySlotStyles,
MergeConflictSlotStyles,
- MultiFileDiff: gatePierreComponent(MultiFileDiff, "MultiFileDiff"),
- PatchDiff: gatePierreComponent(PatchDiff, "PatchDiff"),
- UnresolvedFile: gatePierreComponent(UnresolvedFile, "UnresolvedFile"),
+ MultiFileDiff: gatePierreDiffComponent(MultiFileDiff, "MultiFileDiff"),
+ PatchDiff: gatePierreDiffComponent(PatchDiff, "PatchDiff"),
+ UnresolvedFile: GatedUnresolvedFile,
Virtualizer,
VirtualizerContext,
WorkerPoolContext,
diff --git a/plugins/connect/app.test.tsx b/plugins/connect/app.test.tsx
index 5a5366b19d..47d4efcb21 100644
--- a/plugins/connect/app.test.tsx
+++ b/plugins/connect/app.test.tsx
@@ -405,7 +405,9 @@ describe("connect settings section", () => {
await slot.findByText("Connected");
expect(slot.queryByText("K7QP-2M4X")).toBeNull();
- fireEvent.click(slot.getByRole("button", { name: "Add mobile device" }));
+ fireEvent.click(
+ await slot.findByRole("button", { name: "Add mobile device" }),
+ );
await waitFor(() =>
expect(slot.rpcCalls).toContainEqual({
@@ -448,7 +450,9 @@ describe("connect settings section", () => {
);
await slot.findByText("Connected");
- fireEvent.click(slot.getByRole("button", { name: "Add mobile device" }));
+ fireEvent.click(
+ await slot.findByRole("button", { name: "Add mobile device" }),
+ );
await slot.findByText("AAAA-1111");
await slot.findByText("Code expired", undefined, { timeout: 4_000 });
@@ -478,7 +482,9 @@ describe("connect settings section", () => {
);
await slot.findByText("Connected");
- fireEvent.click(slot.getByRole("button", { name: "Add mobile device" }));
+ fireEvent.click(
+ await slot.findByRole("button", { name: "Add mobile device" }),
+ );
await slot.findByText(/reached its machine limit/);
const link = slot.getByRole("link", {
From 8a50f6a0654dd580e6e67af7be92425572a5e607 Mon Sep 17 00:00:00 2001
From: Sawyer Hood
Date: Wed, 19 Aug 2026 23:51:08 -0700
Subject: [PATCH 009/232] Mobile: dark-safe scrims, keyboard gap, project
folder icon, round stop button (#2015)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## What was wrong
Four mobile polish issues from dogfooding on a phone:
- Every dimming overlay (home compose scrim, sheet backdrops) used
`tokens.ink` at 35%. Dark palettes have a light `ink`, so the overlay
lightened the screen to gray instead of dimming it.
- `KeyboardPaddingView` subtracted the full home-indicator inset when
the keyboard opened, so composers sat flush against the keyboard.
- In the flat thread list the project name under a title was plain text
and read like a second title.
- The collapsed composer's Stop control was a square `secondary` button
with a stroked square icon, flush with the pill edge.
## What changed
- `apps/mobile/src/theme/scrim.ts`: `scrimBaseColor(mode, tokens)` —
`ink` in light mode, black in dark mode. Used by the home compose scrim
+ dimmed header (`HomeScreen.tsx`), the bottom-sheet backdrop
(`ui/Sheet.tsx`), and the navigation drawer overlay
(`app/(drawer)/_layout.tsx`).
- `ui/KeyboardPaddingView.tsx`: new `keyboardGap` prop and
`COMPOSER_KEYBOARD_GAP = 8`; applied to the home dock, thread composer,
and composer showcase.
- `screens/sidebar/SidebarRows.tsx`: thread-row subtitle is now
`{kind:"project"} | {kind:"snippet"}`; project subtitles render a
`Folder` icon. Search snippets stay plain. Archived/search screens
updated.
- `composer/Composer.tsx`: `StopButton` — a 36pt round `secondary`
circle with a filled square, used in both the collapsed pill and the
expanded footer.
## How you verified
- `pnpm exec turbo run typecheck lint --filter=@bb/mobile` pass.
- New `scrim.test.ts` asserts the scrim darkens `background` for every
palette × mode (fails with the old `ink` scrim in dark mode).
- Simulator (iPhone 17 Pro, dark mode) against the local dev server:
home compose scrim, display-options sheet backdrop, keyboard gap,
project folder subtitle, and collapsed Stop button during a live turn.
- Release build installed on a physical iPhone for the scrim/gap/folder
changes.
> AGENT GENERATED: by Claude Opus 5
Co-authored-by: Claude
---
apps/mobile/app/(drawer)/_layout.tsx | 6 +-
apps/mobile/src/composer/Composer.tsx | 67 +++++++++++++++----
.../screens/dev/ComposerShowcaseScreen.tsx | 6 +-
apps/mobile/src/screens/home/HomeScreen.tsx | 24 ++++---
.../src/screens/sidebar/SidebarRows.tsx | 42 ++++++++++--
.../src/screens/sidebar/SidebarThreadList.tsx | 7 +-
apps/mobile/src/screens/sidebar/index.ts | 2 +
.../src/screens/thread/ThreadDetailScreen.tsx | 6 +-
.../screens/threads/ArchivedThreadsScreen.tsx | 10 +--
.../screens/threads/ThreadSearchScreen.tsx | 10 ++-
apps/mobile/src/theme/index.ts | 1 +
apps/mobile/src/theme/scrim.test.ts | 28 ++++++++
apps/mobile/src/theme/scrim.ts | 17 +++++
apps/mobile/src/ui/KeyboardPaddingView.tsx | 20 +++++-
apps/mobile/src/ui/Sheet.tsx | 7 +-
apps/mobile/src/ui/index.ts | 1 +
16 files changed, 210 insertions(+), 44 deletions(-)
create mode 100644 apps/mobile/src/theme/scrim.test.ts
create mode 100644 apps/mobile/src/theme/scrim.ts
diff --git a/apps/mobile/app/(drawer)/_layout.tsx b/apps/mobile/app/(drawer)/_layout.tsx
index ef227164fb..734c3f7d8b 100644
--- a/apps/mobile/app/(drawer)/_layout.tsx
+++ b/apps/mobile/app/(drawer)/_layout.tsx
@@ -1,10 +1,11 @@
import { Drawer } from "expo-router/drawer";
import { useProfiles } from "@/app-shell";
import { DrawerContent } from "@/screens";
-import { useTheme } from "@/theme";
+import { withAlpha } from "@/markdown/colors";
+import { scrimBaseColor, useTheme } from "@/theme";
export default function DrawerLayout() {
- const { tokens, fonts } = useTheme();
+ const { tokens, fonts, mode } = useTheme();
const { activeProfile } = useProfiles();
return (
(
{/* Collapsed right slot: Stop while a turn runs (it must stay
reachable without expanding), else the mic, else a spacer. */}
{collapsed && affordance.stop ? (
-
) : collapsed && showVoicePrimary ? (
@@ -578,12 +574,7 @@ export const Composer = forwardRef(
--host-id ] [--auto-update]
@@ -3243,6 +3269,9 @@ export async function runBbApp(
await runClientCommand({
args: command.args,
dataDir: runtime.context.dataDir,
+ ...(parsedArgs.options.hostId !== undefined
+ ? { hostId: parsedArgs.options.hostId }
+ : {}),
json: parsedArgs.options.json === true,
});
return;
diff --git a/packages/bb-app/test/index.test.ts b/packages/bb-app/test/index.test.ts
index 3f3ed29c70..21f0008b38 100644
--- a/packages/bb-app/test/index.test.ts
+++ b/packages/bb-app/test/index.test.ts
@@ -1111,6 +1111,55 @@ describe("bb-app launcher", () => {
});
expect(statSync(join(dataDir, "client.json")).mode & 0o777).toBe(0o600);
+ await runBbApp([
+ "--data-dir",
+ dataDir,
+ "client",
+ "ssh-target",
+ "set",
+ server.url,
+ "buildbox",
+ "--host-id",
+ "host_2",
+ ]);
+ expect(
+ server.requests().filter((request) => request.includes("/hosts")),
+ ).toHaveLength(1);
+ expect(
+ JSON.parse(readFileSync(join(dataDir, "client.json"), "utf8")),
+ ).toMatchObject({
+ servers: {
+ [server.url]: {
+ hosts: {
+ host_1: { sshAuthority: "mbp-intel" },
+ host_2: { sshAuthority: "buildbox" },
+ },
+ },
+ },
+ });
+
+ await runBbApp([
+ "--data-dir",
+ dataDir,
+ "client",
+ "ssh-target",
+ "remove",
+ server.url,
+ "--host-id",
+ "host_2",
+ ]);
+ expect(
+ JSON.parse(readFileSync(join(dataDir, "client.json"), "utf8")),
+ ).toEqual({
+ servers: {
+ [server.url]: {
+ hosts: {
+ host_1: { sshAuthority: "mbp-intel" },
+ },
+ },
+ },
+ });
+
await runBbApp([
"--data-dir",
dataDir,
diff --git a/packages/host-daemon-contract/src/protocol.ts b/packages/host-daemon-contract/src/protocol.ts
index c221b0914a..e711023a09 100644
--- a/packages/host-daemon-contract/src/protocol.ts
+++ b/packages/host-daemon-contract/src/protocol.ts
@@ -1,3 +1,8 @@
+// Version 140 reports each daemon's browser-local editor helper port during
+// session open. The server uses those ports to let a remote browser discover
+// the helper on its own machine instead of assuming every machine uses the
+// primary server host's port.
+//
// Version 139 keeps a resumed Claude session's provider-owned task-notification
// result from claiming a newly accepted human input, and delays turn/start
// acceptance until Claude's SDK prompt iterator consumes the input. Older
@@ -66,7 +71,7 @@
//
// The version mismatch is what triggers the enrolled daemon's automatic update
// instead of an `invalid-message` reconnect loop.
-export const HOST_DAEMON_PROTOCOL_VERSION = 139 as const;
+export const HOST_DAEMON_PROTOCOL_VERSION = 140 as const;
/**
* Absolute ceiling for any executable artifact delivered to a host daemon —
diff --git a/packages/host-daemon-contract/src/session.ts b/packages/host-daemon-contract/src/session.ts
index a3595c5fa7..e1266a33df 100644
--- a/packages/host-daemon-contract/src/session.ts
+++ b/packages/host-daemon-contract/src/session.ts
@@ -114,6 +114,8 @@ export const hostDaemonSessionOpenRequestSchema = z.object({
hasMachineCredential: z.boolean(),
platform: hostPlatformSchema,
dataDir: z.string().min(1),
+ /** Loopback editor-helper port, or null when this daemon exposes no full local API. */
+ localApiPort: z.number().int().min(1).max(65_535).nullable(),
// Accept any version at the schema boundary so the server can return an
// actionable protocol mismatch instead of an opaque validation failure.
protocolVersion: z.number().int().positive(),
diff --git a/packages/host-daemon-contract/test/contract.test.ts b/packages/host-daemon-contract/test/contract.test.ts
index 51ad6ca7dd..1e1f4aff80 100644
--- a/packages/host-daemon-contract/test/contract.test.ts
+++ b/packages/host-daemon-contract/test/contract.test.ts
@@ -1110,6 +1110,10 @@ describe("host-daemon command schemas", () => {
// Version 134 keeps replayed Codex resume/fork usage snapshots off turn ids
// bb never stored a turn/started for (token usage dropped, context usage
// thread-scoped).
+ // Version 140 reports the daemon's browser-local helper port during session
+ // open so remote pages can discover helpers on non-primary machines.
+ // Version 139 keeps resumed Claude task notifications from claiming newly
+ // accepted human input before the SDK prompt iterator consumes it.
// Version 137 removes the `claudeCodeMockCliTraffic` runtime option with
// the Claude Code mock CLI traffic experiment.
// Version 136 ships the narrow-grammar provider bridges: served bridge
@@ -1134,7 +1138,7 @@ describe("host-daemon command schemas", () => {
// mixed version. Version 113 carried the Devin Desktop open target rename
// and remains part of the protocol lineage.
it("uses the current host-daemon protocol version", () => {
- expect(HOST_DAEMON_PROTOCOL_VERSION).toBe(139);
+ expect(HOST_DAEMON_PROTOCOL_VERSION).toBe(140);
expect(HOST_ARTIFACT_MAX_BYTES).toBe(256 * 1024 * 1024);
});
@@ -3165,6 +3169,7 @@ describe("host-daemon session schemas", () => {
hasMachineCredential: true,
platform: "darwin",
dataDir: "/tmp/bb-data",
+ localApiPort: 38_887,
protocolVersion: HOST_DAEMON_PROTOCOL_VERSION,
activeThreads: [
{
@@ -3188,6 +3193,7 @@ describe("host-daemon session schemas", () => {
hasMachineCredential: false,
platform: "darwin",
dataDir: "/tmp/bb-data",
+ localApiPort: null,
protocolVersion: HOST_DAEMON_PROTOCOL_VERSION,
activeThreads: [],
loadedEnvironments: [
@@ -3213,6 +3219,7 @@ describe("host-daemon session schemas", () => {
hasMachineCredential: true,
platform: "darwin",
dataDir: "/tmp/bb-data",
+ localApiPort: 38_887,
protocolVersion: HOST_DAEMON_PROTOCOL_VERSION,
activeThreads: [
{
@@ -3231,6 +3238,7 @@ describe("host-daemon session schemas", () => {
hasMachineCredential: true,
platform: "darwin",
dataDir: "/tmp/bb-data",
+ localApiPort: 38_887,
protocolVersion: HOST_DAEMON_PROTOCOL_VERSION - 1,
activeThreads: [],
}),
@@ -3247,6 +3255,7 @@ describe("host-daemon session schemas", () => {
hasMachineCredential: true,
platform: "darwin",
dataDir: "/tmp/bb-data",
+ localApiPort: 38_887,
protocolVersion: 0,
activeThreads: [],
}),
diff --git a/packages/server-contract/src/api/system.ts b/packages/server-contract/src/api/system.ts
index 17fa20b5f5..ce19ac376f 100644
--- a/packages/server-contract/src/api/system.ts
+++ b/packages/server-contract/src/api/system.ts
@@ -174,6 +174,8 @@ export const systemConfigResponseSchema = z.object({
pluginThemes: z.array(pluginThemeMetaSchema),
featureFlags: featureFlagsSchema,
hostDaemonPort: z.number().nullable(),
+ /** Loopback ports a browser may probe for an editor helper on its own device. */
+ localHelperPorts: z.array(z.number().int().min(1).max(65_535)),
/** Base URL external host daemons should use to reach this server. */
serverUrl: z.string().url(),
/**
From ea61d177b50a765c42df3ffb75ec9c14bf13c46a Mon Sep 17 00:00:00 2001
From: Michael Yong <610102+ymichael@users.noreply.github.com>
Date: Thu, 20 Aug 2026 00:14:25 -0700
Subject: [PATCH 011/232] Add host-owned SourceCode and Diff rendering for the
app and plugins (#1876)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## What was wrong
BB rendered code in two independent places and had no way for a plugin
to change either. The file preview drove `@pierre/diffs`' `File` view
and the diff card drove its `FileDiff` view, each assembling its own
options record, its own line-selection wiring, and its own code-theme
lookup. A plugin that wanted to render source or a diff had a third
path: import `@pierre/diffs` directly through the runtime shim and
rebuild the host's behavior by hand. `plugins/github` did exactly that —
synthesizing a `diff --git` header for GitHub's REST patches, calling
`parsePatchFiles`, and running two MutationObservers (one on the root
`class`, one on `data-bb-code-theme-*`) to keep Pierre's theme in step
with BB's.
That is three copies of one capability, and it made "change how bb
renders code" impossible to express: there was nothing to replace.
## What changed
**One host boundary per capability.** `SourceCodeHost` and `DiffHost`
(`apps/app/src/components/code/`) resolve an exclusive plugin
replacement through the same `resolveReplacement` +
`PluginReplacementSlot` path the sidebar thread list and file openers
already use, and otherwise render BB's own renderer. Both BB renderers
(`BbSourceCode`, `BbDiff`) sit behind `lazy()`, so a replacement that
never delegates never downloads them and `experimental_Original` costs
nothing until it is rendered.
**Public API** (all `experimental_`, with entries in
`docs/api_to_audit.md`):
```ts
experimental_SourceCode: { content, path, overflow?, highlightedLines?, className? }
experimental_Diff: { patch, path, view?, overflow?, showLineNumbers?, className? }
app.slots.experimental_sourceCodeRenderer({ id, title, description?, component })
app.slots.experimental_diffRenderer({ id, title, description?, component })
```
A replacement receives fully resolved semantic props plus a bound
`experimental_Original`, so it can delegate per call without re-entering
resolution. Host-only inputs — the pre-parsed `ParsedGitDiffFile`, the
raw patch text, the highlighter cache key, selection-to-composer — never
cross the boundary, and no `@pierre/diffs`, Shiki, `FileOptions`, or
`ParsedGitDiffFile` type appears in the public contract.
`experimental_Diff` owns patch normalization, so a patch with no `diff
--git` header (GitHub REST, a bare `@@` hunk) renders without the caller
synthesizing one; content that parses to no hunks degrades to plain
monospace text instead of an empty diff.
**Migrations.** The native file preview, timeline file diffs, and the
environment diff panel's file bodies all render through the boundary, so
one registration covers BB's surfaces and plugin surfaces alike.
`plugins/github` renders `experimental_Diff` and drops its
`@pierre/diffs` devDependency along with both MutationObservers; its
bundle no longer references the Pierre runtime shim (417.0 KB → 409.0
KB). The shim itself stays for compatibility with existing plugins.
**User control.** Settings → Appearance gains **Source code** and
**Diffs** rows beside **Sidebar** — Automatic / bb (built-in) / each
registered provider, per client, each row hidden when no plugin supplies
that renderer. A renderer takes over surfaces there is otherwise no
route back from, so this is what keeps "installing activates it"
reversible. `lib/plugin-replacement-preference.ts` now owns that
automatic/built-in/named-provider rule and the thread list consumes it
too, retiring its private copy and the `resolveThreadListReplacement`
wrapper only its own test still called. Registered renderers also appear
in the plugin detail's capability list.
**Two cleanups fell out.** The opaque `diffViewOptions: Record` threaded through five components became the
semantic `DiffPresentation` (`view` / `overflow` / `showLineNumbers`).
The renderers own light/dark selection themselves, which made the
`themeType` prop chain from `ThreadTimelineSurface` down to
`TimelineFileDiffBlock` dead; it and `ThreadTimelineTheme` are removed.
**Docs and generated artifacts.** `docs/api_to_audit.md` gains three
entries (components, slots, `experimental_Original`); the
`bb-plugin-authoring` skill and the `bb guide` plugins chapter now point
at the host components rather than a direct `@pierre/diffs` import, and
the skill's own coverage test is extended so the new slots and their
props stay documented. Bundled SDK declarations, the runtime export
manifest, and the templates bundle were regenerated with the repository
scripts. No wire changes, so no `HOST_DAEMON_PROTOCOL_VERSION` bump.
## How you verified
Regression coverage for what the boundary actually promises — each of
these fails without the corresponding behavior:
- a replacement that never delegates leaves BB's renderer chunk
unloaded; delegating through `experimental_Original` loads it;
- the replacement receives resolved semantic props only — no parsed
file, no cache key, no selection-to-chat;
- with no patch text in hand the host reconstructs a single-file patch
that re-parses to the same file;
- crash and no-registration paths land on BB's renderer;
- BB's diff renderer follows `applyResolvedCodeTheme` live — the
behavior `plugins/github` previously got from a DOM MutationObserver;
- `DiffFileCard`, a first-party surface, renders its text body through
the same boundary;
- a built-in pin renders BB's renderer with the plugin still installed
and enabled, and an explicit pin survives a later plugin whose id sorts
ahead of it (where automatic selection would silently swap the user's
renderer).
Commands run:
- `pnpm exec turbo run typecheck --filter=@bb/app
--filter=@get-bb/plugin-sdk --filter=@bb/plugin-build
--filter=@bb/templates --filter=@bb/server --filter=bb-plugin-github
--filter=@bb/cli` — passed.
- `pnpm exec turbo run test --filter=@bb/app` — 367 files / 2909 tests
passed.
- `pnpm exec turbo run test --filter=@bb/server` — 182 files / 1730
tests passed.
- `pnpm exec turbo run test --filter=@get-bb/plugin-sdk
--filter=@bb/plugin-build --filter=@bb/templates
--filter=bb-plugin-github --filter=@bb/cli` — 631 tests passed.
- `pnpm exec turbo run lint --filter=@bb/app` — 0 errors (the
repository's existing 147 react-compiler warnings; several are carried
over verbatim with the extracted renderer code).
- `pnpm exec turbo run build --filter=bb-plugin-github` — builds; the
bundle contains `experimental_Diff` and no Pierre shim reference.
**Bundle impact.** Boot payload 1655.6 → 1659.1 KB raw and 448.8 → 453.7
KB brotli against the 1671.0 / 456.4 budget; 40 → 43 chunks. I confirmed
this is not new code on the boot path — stubbing out the patch
reconstruction moved it by 0.3 KB — it is the extra chunks compressing
slightly worse than fewer larger ones. All `forbiddenBootPackages` still
pass. New lazy chunks: `BbDiff` 2.6 KB raw / 1.1 KB brotli,
`BbSourceCode` 6.1 KB raw / 2.4 KB brotli. Brotli headroom drops from
~7.6 KB to ~2.7 KB, which is worth knowing before the next feature lands
on that budget.
**Deliberately not migrated.** Markdown fenced code blocks are genuine
source but run `sugar-high` — a synchronous ~2 KB highlighter with no
worker pool, no shadow DOM, and no async settle, which is what a
streaming chat timeline needs. Routing them through the host would
either regress that or require a second per-surface default renderer,
contradicting one host per capability. Raw-log surfaces
(`EventCodeBlock`, terminal output) are monospace styling, not code
rendering, and are untouched.
**Open questions for review**, all recorded in `docs/api_to_audit.md`:
whether a per-client pin is the right scope for something as visible as
every diff (and whether users expect one combined choice rather than
two); whether a plugin should be able to change how *another* plugin's
`experimental_Diff` renders; and whether the silent crash fallback is
right where the thread list toasts.
> AGENT GENERATED: by Claude Opus 5
---------
Co-authored-by: Claude Opus 5 (1M context)
---
apps/app/src/components/code/BbDiff.test.tsx | 138 ++++
apps/app/src/components/code/BbDiff.tsx | 149 ++++
apps/app/src/components/code/BbSourceCode.tsx | 650 ++++++++++++++++
.../app/src/components/code/DiffHost.test.tsx | 306 ++++++++
apps/app/src/components/code/DiffHost.tsx | 108 +++
.../components/code/SourceCodeHost.test.tsx | 167 +++++
.../src/components/code/SourceCodeHost.tsx | 78 ++
.../app/src/components/code/code-rendering.ts | 74 ++
.../components/code/codeRendererProvider.ts | 42 ++
.../src/components/code/source-code-budget.ts | 78 ++
.../git-diff/GitDiffCard.stories.tsx | 26 +-
.../src/components/git-diff/GitDiffCard.tsx | 19 +-
.../components/git-diff/GitDiffCardBody.tsx | 684 ++---------------
.../components/git-diff/git-diff-parsing.ts | 40 +
.../git-diff/git-diff-patch-text.ts | 522 +++++++++++++
apps/app/src/components/plugin/PluginDiff.tsx | 48 ++
.../components/plugin/PluginSourceCode.tsx | 26 +
.../secondary-panel/FilePreview.stories.tsx | 5 -
.../secondary-panel/FilePreview.test.tsx | 18 +-
.../secondary-panel/FilePreview.tsx | 698 +-----------------
.../secondary-panel/GitDiffCard.stories.tsx | 15 +-
.../secondary-panel/ThreadSecondaryPanel.tsx | 17 +-
...econdaryPanelTabContent.panelGate.test.tsx | 6 +-
.../ThreadSecondaryPanelTabContent.tsx | 7 +-
.../DiffFileCard.contextExpansion.test.tsx | 32 +-
.../git-diff/DiffFileCard.stories.tsx | 23 +-
.../git-diff/DiffFileCard.test.tsx | 69 +-
.../secondary-panel/git-diff/DiffFileCard.tsx | 21 +-
.../git-diff/DiffFilesPanel.tsx | 13 +-
.../settings/CodeRendererSettings.test.tsx | 129 ++++
.../settings/CodeRendererSettings.tsx | 145 ++++
.../components/sidebar/threadListProvider.ts | 38 +-
.../thread/timeline/ThreadTimelineRows.tsx | 8 -
.../thread/timeline/ThreadTimelineSurface.tsx | 3 -
.../thread/timeline/TimelineFileDiffBlock.tsx | 26 +-
.../thread/timeline/TimelineRowDetails.tsx | 4 -
.../src/components/thread/timeline/index.ts | 1 -
.../timeline/rows/FileChange.stories.tsx | 36 +-
.../src/components/thread/timeline/types.ts | 2 -
.../components/tools/PluginCapabilities.tsx | 12 +
.../src/lib/plugin-replacement-preference.ts | 57 ++
apps/app/src/lib/plugin-sdk-app-impl.tsx | 7 +
.../app/src/lib/plugin-slot-resolvers.test.ts | 18 -
apps/app/src/lib/plugin-slot-resolvers.ts | 8 -
apps/app/src/lib/plugin-slots.ts | 21 +
apps/app/src/views/SettingsView.tsx | 2 +
.../bb-plugin-authoring/SKILL.md | 71 +-
.../plugins/plugin-authoring-docs.test.ts | 19 +
docs/api_to_audit.md | 115 +++
packages/plugin-sdk/src/app-contract.ts | 170 +++++
packages/plugin-sdk/src/app.ts | 3 +
.../src/internal/plugin-app-collector.ts | 40 +
packages/plugin-sdk/src/testing/app.tsx | 63 ++
.../src/templates/bb-guide-plugins.md | 11 +-
plugins/github/app.tsx | 121 +--
plugins/github/package.json | 1 -
pnpm-lock.yaml | 3 -
57 files changed, 3571 insertions(+), 1642 deletions(-)
create mode 100644 apps/app/src/components/code/BbDiff.test.tsx
create mode 100644 apps/app/src/components/code/BbDiff.tsx
create mode 100644 apps/app/src/components/code/BbSourceCode.tsx
create mode 100644 apps/app/src/components/code/DiffHost.test.tsx
create mode 100644 apps/app/src/components/code/DiffHost.tsx
create mode 100644 apps/app/src/components/code/SourceCodeHost.test.tsx
create mode 100644 apps/app/src/components/code/SourceCodeHost.tsx
create mode 100644 apps/app/src/components/code/code-rendering.ts
create mode 100644 apps/app/src/components/code/codeRendererProvider.ts
create mode 100644 apps/app/src/components/code/source-code-budget.ts
create mode 100644 apps/app/src/components/git-diff/git-diff-patch-text.ts
create mode 100644 apps/app/src/components/plugin/PluginDiff.tsx
create mode 100644 apps/app/src/components/plugin/PluginSourceCode.tsx
create mode 100644 apps/app/src/components/settings/CodeRendererSettings.test.tsx
create mode 100644 apps/app/src/components/settings/CodeRendererSettings.tsx
create mode 100644 apps/app/src/lib/plugin-replacement-preference.ts
diff --git a/apps/app/src/components/code/BbDiff.test.tsx b/apps/app/src/components/code/BbDiff.test.tsx
new file mode 100644
index 0000000000..258a70eb01
--- /dev/null
+++ b/apps/app/src/components/code/BbDiff.test.tsx
@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defaultResolvedCodeTheme } from "@bb/domain";
+import { applyResolvedCodeTheme } from "@/lib/code-theme";
+import { parseGitDiffFiles } from "@/components/git-diff/git-diff-parsing";
+import { BbDiff } from "./BbDiff";
+
+interface RenderedOptions {
+ theme: { dark: string; light: string };
+ diffStyle: string;
+ overflow: string;
+ disableLineNumbers: boolean;
+ disableFileHeader: boolean;
+ expansionLineCount?: number;
+}
+
+const pierre = vi.hoisted(() => ({
+ lastOptions: null as RenderedOptions | null,
+}));
+
+vi.mock("@pierre/diffs/react", async () => {
+ const React = await import("react");
+ return {
+ FileDiff: ({ options }: { options: RenderedOptions }) => {
+ pierre.lastOptions = options;
+ return React.createElement("div", { "data-testid": "pierre-file-diff" });
+ },
+ };
+});
+
+const PATCH = [
+ "diff --git a/src/app.ts b/src/app.ts",
+ "--- a/src/app.ts",
+ "+++ b/src/app.ts",
+ "@@ -1,2 +1,2 @@",
+ "-const b = 2;",
+ "+const b = 3;",
+ "",
+].join("\n");
+
+function fixture() {
+ const file = parseGitDiffFiles(PATCH)[0];
+ if (file === undefined) throw new Error("fixture patch did not parse");
+ return file;
+}
+
+beforeEach(() => {
+ pierre.lastOptions = null;
+ applyResolvedCodeTheme(defaultResolvedCodeTheme);
+});
+
+afterEach(() => {
+ cleanup();
+ applyResolvedCodeTheme(defaultResolvedCodeTheme);
+ vi.restoreAllMocks();
+});
+
+describe("BbDiff", () => {
+ it("follows the resolved code theme without any consumer watching the DOM", async () => {
+ render(
+ (null);
+ const codeTheme = useResolvedCodeThemePair();
+ const themeType = usePreferredTheme();
+ const buildSelectionText = useCallback(
+ (range: SelectedLineRange) =>
+ buildDiffLineSelectionText({
+ displayStyle: view,
+ fileDiff: file,
+ range,
+ }),
+ [file, view],
+ );
+ const buildFallbackSelectionText = useCallback(
+ ({
+ containerElement,
+ }: {
+ containerElement: HTMLElement | null;
+ range: SelectedLineRange;
+ }) => buildDiffDomSelectionText({ containerElement, fileDiff: file }),
+ [file],
+ );
+ const lineSelectionActions = usePierreLineSelectionActions({
+ buildFallbackSelectionText,
+ buildSelectionText,
+ containerRef,
+ enabled: onSelectionAddToChat !== undefined,
+ onSelectionAddToChat,
+ });
+ const baseOptions = useMemo>(
+ () => ({
+ diffStyle: view,
+ overflow,
+ disableLineNumbers: !showLineNumbers,
+ // The card's own header owns the file name, path actions, and stats.
+ disableFileHeader: true,
+ // Only set when the caller can actually supply full file contents:
+ // pierre renders an empty diff when it is handed an expansion budget
+ // for a hunk-only patch, which is what the timeline supplies.
+ ...(expansionLineCount === undefined ? {} : { expansionLineCount }),
+ themeType,
+ theme: codeTheme,
+ enableGutterUtility: onSelectionAddToChat !== undefined,
+ enableLineSelection: onSelectionAddToChat !== undefined,
+ lineHoverHighlight:
+ onSelectionAddToChat === undefined ? "disabled" : "number",
+ onGutterUtilityClick:
+ onSelectionAddToChat === undefined
+ ? undefined
+ : lineSelectionActions.onGutterUtilityClick,
+ onLineSelectionChange: lineSelectionActions.onLineSelectionChange,
+ onLineSelectionEnd: lineSelectionActions.onLineSelectionEnd,
+ onLineSelectionStart: lineSelectionActions.onLineSelectionStart,
+ }),
+ [
+ codeTheme,
+ expansionLineCount,
+ lineSelectionActions.onGutterUtilityClick,
+ lineSelectionActions.onLineSelectionChange,
+ lineSelectionActions.onLineSelectionEnd,
+ lineSelectionActions.onLineSelectionStart,
+ onSelectionAddToChat,
+ overflow,
+ showLineNumbers,
+ themeType,
+ view,
+ ],
+ );
+ const options = usePierreStrictModeRecoveryOptions(baseOptions);
+ // `DiffView` captures the worker pool when it creates its instance, so wait
+ // for the workspace to build the pool before the first render. Asking here
+ // rather than in the host keeps the pool unbuilt when a plugin replacement
+ // owns the render and never delegates.
+ const isWorkerPoolReady = useRequirePierreWorkerPool();
+ if (!isWorkerPoolReady) {
+ return
+
+
+ {lineSelectionActions.menu}
+
+ );
+}
+
+export default BbDiff;
diff --git a/apps/app/src/components/code/BbSourceCode.tsx b/apps/app/src/components/code/BbSourceCode.tsx
new file mode 100644
index 0000000000..ddd0ac8cd2
--- /dev/null
+++ b/apps/app/src/components/code/BbSourceCode.tsx
@@ -0,0 +1,650 @@
+import {
+ type CSSProperties,
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { File as PierreFile, VirtualizerContext } from "@pierre/diffs/react";
+import type { FileOptions } from "@pierre/diffs/react";
+import {
+ DIFFS_TAG_NAME,
+ Virtualizer as PierreVirtualizer,
+ type FileContents as PierreFileContents,
+ type SelectedLineRange,
+ type VirtualFileMetrics,
+} from "@pierre/diffs";
+import { Button } from "@bb/shared-ui/button";
+import { Skeleton } from "@bb/shared-ui/skeleton";
+import { usePierreLineSelectionActions } from "@/components/git-diff/PierreLineSelectionActions.js";
+import { usePreferredTheme } from "@/hooks/useTheme";
+import { useResolvedCodeThemePair } from "@/lib/code-theme";
+import { PierreWorkerPoolBoundary } from "@/lib/pierre-worker-pool-boundary";
+import {
+ usePierreWorkerPool,
+ useRequirePierreWorkerPool,
+} from "@/lib/pierre-worker-pool-gate";
+import { usePierreStrictModeRecoveryOptions } from "@/lib/pierre-strict-mode-recovery";
+import { cn } from "@bb/shared-ui/lib/utils";
+import {
+ hashSourceContents,
+ truncateSourceCode,
+ type SourceCodeTruncation,
+} from "./source-code-budget";
+import type { BbSourceCodeProps } from "./code-rendering";
+
+/**
+ * BB's default source renderer: the `@pierre/diffs` `File` view plus BB's line
+ * selection menu, resolved code theme, worker-pool gating, virtualized
+ * scrolling, the large-file rendering budget, and highlighted-line scrolling.
+ *
+ * Reached only through {@link import("./SourceCodeHost").SourceCodeHost}, and
+ * only lazily — a plugin that replaces the renderer and never delegates never
+ * downloads this module or builds the worker pool.
+ */
+
+function BbSourceCodeSkeleton() {
+ return (
+
+ (
+ DIFFS_TAG_NAME,
+ )) {
+ if (pierreContainer.shadowRoot !== null) {
+ roots.push(pierreContainer.shadowRoot);
+ }
+ }
+ return roots;
+}
+
+function clearTargetLine(container: HTMLElement) {
+ for (const root of getTargetRoots(container)) {
+ const targetLines = root.querySelectorAll(
+ "[data-bb-source-code-target-line]",
+ );
+ for (const targetLine of targetLines) {
+ targetLine.removeAttribute("data-bb-source-code-target-line");
+ targetLine.removeAttribute("data-selected-line");
+ }
+ }
+}
+
+function findTargetLine(
+ container: HTMLElement,
+ lineNumber: number,
+): HTMLElement | null {
+ const roots = getTargetRoots(container);
+ for (const root of roots) {
+ const lines = root.querySelectorAll(`[data-line="${lineNumber}"]`);
+ for (const line of lines) {
+ if (line instanceof HTMLElement && line.dataset.lineIndex !== undefined) {
+ return line;
+ }
+ }
+ }
+ for (const root of roots) {
+ const lines = root.querySelectorAll(`[data-line="${lineNumber}"]`);
+ for (const line of lines) {
+ if (line instanceof HTMLElement) {
+ return line;
+ }
+ }
+ }
+ return null;
+}
+
+function findVirtualizedViewport(
+ container: HTMLElement,
+): HTMLElement | null {
+ return container.querySelector(
+ "[data-bb-source-code-viewport]",
+ );
+}
+
+/**
+ * Nudge the virtualized code viewport toward `lineNumber` when that row is not
+ * realized yet. With rendered rows in hand the distance is measured from the
+ * nearest one (rows are at least one line tall, so the step never overshoots
+ * in `wrap` mode); with none rendered the offset is estimated from the fixed
+ * line metrics. Each call moves at most to the estimate; the caller retries on
+ * the next frame once pierre has rendered the new window.
+ */
+function approachVirtualizedTargetLine(
+ container: HTMLElement,
+ lineNumber: number,
+) {
+ const viewport = findVirtualizedViewport(container);
+ if (viewport === null) return;
+ const viewportRect = viewport.getBoundingClientRect();
+ const centerOffset = viewportRect.height / 2;
+ const renderedBounds = getRenderedLineBounds(container);
+ if (renderedBounds === null) {
+ const estimatedTop =
+ SOURCE_GAP_BLOCK_PX +
+ (lineNumber - 1) * SOURCE_LINE_HEIGHT_PX;
+ viewport.scrollTop = Math.max(0, estimatedTop - centerOffset);
+ return;
+ }
+ const { firstLineNumber, firstTop, lastLineNumber, lastBottom } =
+ renderedBounds;
+ if (lineNumber > lastLineNumber) {
+ const distance =
+ lastBottom -
+ viewportRect.top +
+ (lineNumber - lastLineNumber - 1) * SOURCE_LINE_HEIGHT_PX;
+ viewport.scrollTop += Math.max(0, distance - centerOffset);
+ } else if (lineNumber < firstLineNumber) {
+ const distance =
+ viewportRect.top -
+ firstTop +
+ (firstLineNumber - lineNumber) * SOURCE_LINE_HEIGHT_PX;
+ viewport.scrollTop = Math.max(
+ 0,
+ viewport.scrollTop - distance - centerOffset,
+ );
+ }
+}
+
+interface RenderedPreviewLineBounds {
+ firstLineNumber: number;
+ firstTop: number;
+ lastLineNumber: number;
+ lastBottom: number;
+}
+
+function getRenderedLineBounds(
+ container: HTMLElement,
+): RenderedPreviewLineBounds | null {
+ let bounds: RenderedPreviewLineBounds | null = null;
+ for (const root of getTargetRoots(container)) {
+ for (const line of root.querySelectorAll(
+ "[data-line][data-line-index]",
+ )) {
+ const lineNumber = Number(line.dataset.line);
+ if (!Number.isFinite(lineNumber)) continue;
+ const rect = line.getBoundingClientRect();
+ if (bounds === null) {
+ bounds = {
+ firstLineNumber: lineNumber,
+ firstTop: rect.top,
+ lastLineNumber: lineNumber,
+ lastBottom: rect.bottom,
+ };
+ continue;
+ }
+ if (lineNumber < bounds.firstLineNumber) {
+ bounds.firstLineNumber = lineNumber;
+ bounds.firstTop = rect.top;
+ }
+ if (lineNumber > bounds.lastLineNumber) {
+ bounds.lastLineNumber = lineNumber;
+ bounds.lastBottom = rect.bottom;
+ }
+ }
+ }
+ return bounds;
+}
+
+function findScrollViewport(container: HTMLElement): HTMLElement | null {
+ const virtualizedViewport = findVirtualizedViewport(container);
+ if (virtualizedViewport !== null) {
+ return virtualizedViewport;
+ }
+ const view = container.ownerDocument.defaultView;
+ if (view === null) return null;
+
+ let candidate = container.parentElement;
+ while (candidate !== null) {
+ const overflowY = view.getComputedStyle(candidate).overflowY;
+ if (
+ overflowY === "auto" ||
+ overflowY === "scroll" ||
+ overflowY === "overlay"
+ ) {
+ return candidate;
+ }
+ candidate = candidate.parentElement;
+ }
+ return null;
+}
+
+function scrollTargetLine(container: HTMLElement, line: HTMLElement) {
+ const viewport = findScrollViewport(container);
+ if (viewport === null) return;
+
+ const lineRect = line.getBoundingClientRect();
+ const viewportRect = viewport.getBoundingClientRect();
+ const lineCenter = lineRect.top + lineRect.height / 2;
+ const viewportCenter = viewportRect.top + viewportRect.height / 2;
+ // Adjust only the vertical scroll offset. `scrollIntoView()` can also move
+ // the horizontal axis when a long source line extends beyond the viewport.
+ viewport.scrollTop += lineCenter - viewportCenter;
+}
+
+function formatLineRange(startLineNumber: number, endLineNumber: number) {
+ return startLineNumber === endLineNumber
+ ? String(startLineNumber)
+ : `${startLineNumber}-${endLineNumber}`;
+}
+
+function buildLineSelectionText({
+ contents,
+ path,
+ range,
+}: {
+ contents: string;
+ path: string;
+ range: SelectedLineRange;
+}): string | null {
+ const startLineNumber = Math.max(1, Math.min(range.start, range.end));
+ const endLineNumber = Math.max(
+ startLineNumber,
+ Math.max(range.start, range.end),
+ );
+ const lines = contents.split(/\r\n|\n|\r/);
+ const selectedLines = lines.slice(startLineNumber - 1, endLineNumber);
+ if (selectedLines.length === 0) {
+ return null;
+ }
+ const selectedText = selectedLines.join("\n").trimEnd();
+ if (selectedText.trim().length === 0) {
+ return null;
+ }
+ return `${path}:${formatLineRange(startLineNumber, endLineNumber)}\n${selectedText}`;
+}
+
+export function BbSourceCode({
+ content,
+ path,
+ cacheKey,
+ overflow,
+ highlightedLines,
+ className,
+ scrollToHighlightedLines = false,
+ onSelectionAddToChat,
+}: BbSourceCodeProps) {
+ const file = useMemo(
+ () => ({ name: path, contents: content, cacheKey: cacheKey ?? path }),
+ [cacheKey, content, path],
+ );
+ const preferredTheme = usePreferredTheme();
+ const codeTheme = useResolvedCodeThemePair();
+ const containerRef = useRef(null);
+ // `PierreFile` captures the worker pool when it creates its instance, so
+ // wait for the workspace to build the pool before the first render.
+ const isWorkerPoolReady = useRequirePierreWorkerPool();
+ const workerPool = usePierreWorkerPool();
+ const lastWorkerPoolStatsKeyRef = useRef(null);
+ const [workerPoolStats, setWorkerPoolStats] =
+ useState(null);
+ const [, rerenderAfterWorkerPoolChange] = useState(0);
+ const fileIdentity = file.cacheKey ?? file.name;
+ const truncation = useMemo(
+ () => truncateSourceCode(content),
+ [content],
+ );
+ // Which file the user asked to see in full. Keyed by identity rather than a
+ // boolean so opening a different large file goes back to the capped view
+ // without an effect resetting state.
+ const [fullFileRequestedFor, setFullFileRequestedFor] = useState<
+ string | null
+ >(null);
+ const buildSelectionText = useCallback(
+ (range: SelectedLineRange) =>
+ buildLineSelectionText({ contents: content, path, range }),
+ [content, path],
+ );
+ const lineSelectionActions = usePierreLineSelectionActions({
+ buildSelectionText,
+ containerRef,
+ enabled: onSelectionAddToChat !== undefined,
+ onSelectionAddToChat,
+ });
+ const baseOptions = useMemo>(
+ () => ({
+ themeType: preferredTheme,
+ theme: codeTheme,
+ overflow,
+ disableFileHeader: true,
+ enableGutterUtility: onSelectionAddToChat !== undefined,
+ enableLineSelection:
+ highlightedLines !== null || onSelectionAddToChat !== undefined,
+ lineHoverHighlight:
+ onSelectionAddToChat === undefined ? "disabled" : "number",
+ onGutterUtilityClick:
+ onSelectionAddToChat === undefined
+ ? undefined
+ : lineSelectionActions.onGutterUtilityClick,
+ onLineSelectionChange: lineSelectionActions.onLineSelectionChange,
+ onLineSelectionEnd: lineSelectionActions.onLineSelectionEnd,
+ onLineSelectionStart: lineSelectionActions.onLineSelectionStart,
+ }),
+ [
+ codeTheme,
+ highlightedLines,
+ overflow,
+ lineSelectionActions.onGutterUtilityClick,
+ lineSelectionActions.onLineSelectionChange,
+ lineSelectionActions.onLineSelectionEnd,
+ lineSelectionActions.onLineSelectionStart,
+ onSelectionAddToChat,
+ preferredTheme,
+ ],
+ );
+ const options = usePierreStrictModeRecoveryOptions(baseOptions);
+ const selectedLines = useMemo(() => {
+ if (lineSelectionActions.selectedRange !== null) {
+ return lineSelectionActions.selectedRange;
+ }
+ return highlightedLines === null
+ ? null
+ : { start: highlightedLines.start, end: highlightedLines.end };
+ }, [highlightedLines, lineSelectionActions.selectedRange]);
+ const targetLineNumber = scrollToHighlightedLines
+ ? (selectedLines?.start ?? null)
+ : null;
+ // A deep link past the capped prefix is an implicit request for the whole
+ // file: the target line has to exist in the DOM to be scrolled to.
+ const showsFullFile =
+ truncation === null ||
+ fullFileRequestedFor === fileIdentity ||
+ (targetLineNumber !== null &&
+ targetLineNumber > truncation.renderedLineCount);
+ const renderedFile = useMemo(() => {
+ if (showsFullFile || truncation === null) {
+ return file;
+ }
+ return {
+ ...file,
+ // The worker highlight cache is keyed by `cacheKey`; the capped prefix
+ // must not collide with the full file's entry.
+ cacheKey:
+ file.cacheKey === undefined ? undefined : `${file.cacheKey}:head`,
+ contents: truncation.contents,
+ };
+ }, [file, showsFullFile, truncation]);
+ // Pierre's virtualized file instance keeps the contents it was hydrated
+ // with (`VirtualizedFile.render` ignores a later `file`), so a content swap
+ // — the capped prefix giving way to the full file, or a refetch — needs a
+ // fresh mount. Callers that supply a `cacheKey` already fold the content
+ // hash into it; otherwise hash here.
+ const renderedFileMountKey = useMemo(
+ () =>
+ renderedFile.cacheKey ??
+ `${renderedFile.name}:${hashSourceContents(renderedFile.contents)}`,
+ [renderedFile],
+ );
+ // "Load full file" remounts pierre with the whole file; carry the reader's
+ // scroll offset across so the prefix they were looking at stays put.
+ const pendingViewportScrollTopRef = useRef(null);
+ const handleLoadFullFile = () => {
+ const viewport =
+ containerRef.current === null
+ ? null
+ : findVirtualizedViewport(containerRef.current);
+ pendingViewportScrollTopRef.current = viewport?.scrollTop ?? null;
+ setFullFileRequestedFor(fileIdentity);
+ };
+ useLayoutEffect(() => {
+ const scrollTop = pendingViewportScrollTopRef.current;
+ if (scrollTop === null) return;
+ pendingViewportScrollTopRef.current = null;
+ const viewport =
+ containerRef.current === null
+ ? null
+ : findVirtualizedViewport(containerRef.current);
+ if (viewport === null) return;
+ viewport.scrollTop = scrollTop;
+ // The virtualizer sizes the fresh instance on its next frame; reapply once
+ // that height exists so the offset is not clamped away.
+ const frame = window.requestAnimationFrame(() => {
+ viewport.scrollTop = scrollTop;
+ });
+ return () => window.cancelAnimationFrame(frame);
+ }, [renderedFileMountKey]);
+
+ useEffect(() => {
+ if (!workerPool) {
+ setWorkerPoolStats(null);
+ return;
+ }
+
+ lastWorkerPoolStatsKeyRef.current = null;
+ return workerPool.subscribeToStatChanges((stats) => {
+ setWorkerPoolStats(stats);
+ const statsKey = [
+ stats.managerState,
+ stats.workersFailed,
+ stats.busyWorkers,
+ stats.queuedTasks,
+ stats.activeTasks,
+ stats.fileCacheSize,
+ ].join(":");
+ if (lastWorkerPoolStatsKeyRef.current === statsKey) {
+ return;
+ }
+ lastWorkerPoolStatsKeyRef.current = statsKey;
+ rerenderAfterWorkerPoolChange((version) => version + 1);
+ });
+ }, [file.contents, file.name, workerPool]);
+
+ const shouldWaitForWorkerPool =
+ workerPool !== undefined &&
+ workerPoolStats?.managerState !== "initialized" &&
+ workerPoolStats?.workersFailed !== true;
+ // Pierre can mount an empty zero-height while its worker highlighter is
+ // still initializing, so the code view waits for pool readiness. After that
+ // a single mount is enough: pierre paints the plain-text AST first and
+ // repaints in place when the worker delivers the highlighted one. That
+ // repaint swaps the line elements, so the target-line effect below re-runs
+ // when the highlight cache entry for this file appears.
+ const workerHighlightCacheState =
+ workerPool?.getFileResultCache(renderedFile) !== undefined
+ ? "highlighted"
+ : "plain";
+
+ useEffect(() => {
+ const cleanupContainer = containerRef.current;
+ let animationFrame: number | null = null;
+ let attempts = 0;
+
+ // Retry on the next frame (the target line may not be in the DOM yet). One
+ // rAF channel only: `scrollToLine` overwrites `animationFrame` on each
+ // reschedule, so at most one callback is ever pending and cleanup cancels
+ // it — no doubling or leaked stale callbacks marking the wrong line.
+ function scheduleRetry() {
+ animationFrame = window.requestAnimationFrame(scrollToLine);
+ }
+
+ function scrollToLine() {
+ const container = containerRef.current;
+ if (!container) return;
+ clearTargetLine(container);
+ if (targetLineNumber === null) return;
+
+ const line = findTargetLine(container, targetLineNumber);
+ if (line) {
+ line.setAttribute("data-bb-source-code-target-line", "");
+ line.setAttribute("data-selected-line", "single");
+ scrollTargetLine(container, line);
+ return;
+ }
+
+ // The virtualizer only realizes rows near the scroll window, so a
+ // target outside it is not in the DOM yet. Move the viewport toward the
+ // line's estimated offset and let pierre render that window before the
+ // next attempt.
+ approachVirtualizedTargetLine(container, targetLineNumber);
+ attempts += 1;
+ if (attempts < TARGET_LINE_MAX_ATTEMPTS) {
+ scheduleRetry();
+ }
+ }
+
+ scrollToLine();
+ return () => {
+ if (cleanupContainer) {
+ clearTargetLine(cleanupContainer);
+ }
+ if (animationFrame !== null) {
+ window.cancelAnimationFrame(animationFrame);
+ }
+ };
+ }, [
+ renderedFile.contents,
+ renderedFile.name,
+ shouldWaitForWorkerPool,
+ targetLineNumber,
+ workerHighlightCacheState,
+ ]);
+
+ if (shouldWaitForWorkerPool || !isWorkerPoolReady) {
+ return
+
+
+
+ {lineSelectionActions.menu}
+
+ );
+}
+
+const TARGET_LINE_MAX_ATTEMPTS = 40;
+
+/**
+ * The code view's own scroll container, registered as pierre's virtualizer
+ * root so `PierreFile` mounts a `VirtualizedFile` that renders only the rows
+ * near the viewport. This mirrors `@pierre/diffs/react`'s ``,
+ * inlined so the scroller carries a ref and a data marker the target-line
+ * scrolling can find without walking the tree by class name.
+ */
+function SourceCodeViewport({ children }: { children: ReactNode }) {
+ const [virtualizer] = useState(() =>
+ typeof window === "undefined" ? undefined : new PierreVirtualizer(),
+ );
+ const viewportRef = useCallback(
+ (node: HTMLDivElement | null) => {
+ if (node !== null) {
+ virtualizer?.setup(node);
+ } else {
+ virtualizer?.cleanUp();
+ }
+ },
+ [virtualizer],
+ );
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function SourceCodeTruncationNotice({
+ truncation,
+ onLoadFullFile,
+}: {
+ truncation: SourceCodeTruncation;
+ onLoadFullFile: () => void;
+}) {
+ return (
+
+
+ Showing the first {truncation.renderedLineCount.toLocaleString()} of{" "}
+ {truncation.totalLineCount.toLocaleString()} lines.
+
+
+
+ );
+}
+
+export default BbSourceCode;
diff --git a/apps/app/src/components/code/DiffHost.test.tsx b/apps/app/src/components/code/DiffHost.test.tsx
new file mode 100644
index 0000000000..ad0f229a22
--- /dev/null
+++ b/apps/app/src/components/code/DiffHost.test.tsx
@@ -0,0 +1,306 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { createStore, Provider as JotaiProvider } from "jotai";
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { PluginDiffRendererProps } from "@get-bb/plugin-sdk";
+import { defaultResolvedCodeTheme } from "@bb/domain";
+import { applyResolvedCodeTheme } from "@/lib/code-theme";
+import {
+ resetPluginSlotStoreForTest,
+ setPluginSlotRegistrations,
+} from "@/lib/plugin-slots";
+import { resetAllCrashedPluginSlotsForTest } from "@/components/plugin/PluginSlotMount";
+import { parseGitDiffFiles } from "@/components/git-diff/git-diff-parsing";
+import { PluginDiff } from "@/components/plugin/PluginDiff";
+import {
+ BUILT_IN_REPLACEMENT_PROVIDER,
+ replacementProviderKey,
+} from "@/lib/plugin-replacement-preference";
+import { diffRendererProviderAtom } from "./codeRendererProvider";
+import { DiffHost } from "./DiffHost";
+
+/**
+ * Records whether BB's default renderer chunk was ever pulled. `vi.mock`
+ * factories run on first import of the specifier, and `DiffHost` only reaches
+ * `./BbDiff` through `lazy(() => import(...))`, so a flag set here is exactly
+ * "the default renderer chunk loaded".
+ */
+const bbDiff = vi.hoisted(() => ({
+ loaded: false,
+ lastProps: null as Record | null,
+}));
+
+vi.mock("./BbDiff", async () => {
+ const React = await import("react");
+ bbDiff.loaded = true;
+ return {
+ default: (props: Record) => {
+ bbDiff.lastProps = props;
+ return React.createElement(
+ "div",
+ { "data-testid": "bb-diff" },
+ `bb diff ${String(props.view)}/${String(props.overflow)}`,
+ );
+ },
+ };
+});
+
+const PATCH = [
+ "diff --git a/src/app.ts b/src/app.ts",
+ "--- a/src/app.ts",
+ "+++ b/src/app.ts",
+ "@@ -1,3 +1,3 @@",
+ " const a = 1;",
+ "-const b = 2;",
+ "+const b = 3;",
+ " const c = 4;",
+ "",
+].join("\n");
+
+function parseFixture() {
+ const file = parseGitDiffFiles(PATCH)[0];
+ if (file === undefined) throw new Error("fixture patch did not parse");
+ return file;
+}
+
+const receivedProps: PluginDiffRendererProps[] = [];
+
+function registerDiffRenderer(
+ component: (props: PluginDiffRendererProps) => React.ReactNode,
+) {
+ setPluginSlotRegistrations("demo", {
+ homepageSections: [],
+ settingsSections: [],
+ navPanels: [],
+ threadPanelActions: [],
+ sidebarFooterActions: [],
+ fileOpeners: [],
+ messageDirectives: [],
+ diffRenderers: [
+ { id: "diffs", title: "Demo diffs", component },
+ ],
+ });
+}
+
+beforeEach(() => {
+ bbDiff.loaded = false;
+ bbDiff.lastProps = null;
+ receivedProps.length = 0;
+ resetPluginSlotStoreForTest();
+ applyResolvedCodeTheme(defaultResolvedCodeTheme);
+});
+
+afterEach(() => {
+ cleanup();
+ resetAllCrashedPluginSlotsForTest();
+ resetPluginSlotStoreForTest();
+ vi.restoreAllMocks();
+});
+
+describe("DiffHost", () => {
+ it("keeps BB's renderer chunk unloaded when a replacement never delegates", async () => {
+ registerDiffRenderer((props) => {
+ receivedProps.push(props);
+ return plugin diff;
+ });
+
+ render(
+ {}}
+ />,
+ );
+
+ await screen.findByTestId("plugin-diff");
+ const props = receivedProps.at(-1);
+ expect(props?.patch).toBe(PATCH);
+ expect(props?.path).toBe("src/app.ts");
+ expect(props?.view).toBe("split");
+ expect(props?.overflow).toBe("wrap");
+ expect(props?.showLineNumbers).toBe(false);
+ expect(Object.keys(props ?? {})).not.toContain("onSelectionAddToChat");
+ expect(Object.keys(props ?? {})).not.toContain("file");
+ });
+
+ it("reconstructs a complete single-file patch when the caller has no patch text", async () => {
+ registerDiffRenderer((props) => {
+ receivedProps.push(props);
+ return plugin diff;
+ });
+
+ render(
+ ,
+ );
+
+ expect(await screen.findByTestId("bb-diff")).toBeDefined();
+ expect(receivedProps).toHaveLength(0);
+ });
+
+ it("keeps a pinned provider selected once another plugin sorts ahead of it", async () => {
+ registerDiffRenderer((props) => {
+ receivedProps.push(props);
+ return first plugin;
+ });
+ setPluginSlotRegistrations("aardvark", {
+ homepageSections: [],
+ settingsSections: [],
+ navPanels: [],
+ threadPanelActions: [],
+ sidebarFooterActions: [],
+ fileOpeners: [],
+ messageDirectives: [],
+ diffRenderers: [
+ {
+ id: "diffs",
+ title: "Aardvark diffs",
+ component: () => aardvark,
+ },
+ ],
+ });
+ const store = createStore();
+ // "aardvark" sorts before "demo", so automatic would switch the user's
+ // renderer out from under them; an explicit pin must not.
+ store.set(
+ diffRendererProviderAtom,
+ replacementProviderKey({ pluginId: "demo", id: "diffs" }),
+ );
+
+ render(
+
+ ,
+ );
+
+ expect(await screen.findByTestId("plugin-diff")).toBeDefined();
+ expect(screen.queryByTestId("aardvark-diff")).toBeNull();
+ });
+
+ it("falls back to BB's renderer when the replacement crashes", async () => {
+ vi.spyOn(console, "warn").mockImplementation(() => {});
+ vi.spyOn(console, "error").mockImplementation(() => {});
+ registerDiffRenderer(() => {
+ throw new Error("replacement exploded");
+ });
+
+ render( {
+ /**
+ * The parsed diff to render. Callers parse it anyway for their own header,
+ * and the diff panel additionally enriches it with full file contents so the
+ * renderer can expand context between hunks.
+ */
+ file: ParsedGitDiffFile;
+ /**
+ * The patch text `file` was parsed from, when the caller still has it. A
+ * plugin replacement is handed this verbatim; without it the host
+ * reconstructs an equivalent single-file patch from `file`.
+ */
+ patchText?: string;
+ className?: string;
+ /**
+ * Forwarded to BB's renderer; see {@link BbDiffProps.expansionLineCount}.
+ * Never reaches a plugin replacement — context expansion is a BB renderer
+ * capability, not part of the semantic contract.
+ */
+ expansionLineCount?: number;
+ /** Rendered while BB's renderer chunk loads. */
+ fallback?: ReactNode;
+ onSelectionAddToChat?: (text: string) => void;
+}
+
+/**
+ * The host boundary for diff rendering (plugin design: exclusive replacement
+ * surfaces). Every BB surface that draws a text diff — timeline file changes,
+ * the environment diff panel's file bodies — and every plugin that calls
+ * `experimental_Diff` renders through here, so one
+ * `experimental_diffRenderer` registration replaces them all at once.
+ *
+ * BB's own renderer sits behind `lazy()`. A plugin replacement that never
+ * delegates therefore never downloads it, and `experimental_Original` costs
+ * nothing until it is actually rendered.
+ */
+export function DiffHost({
+ file,
+ patchText,
+ view = DEFAULT_DIFF_VIEW,
+ overflow = DEFAULT_CODE_OVERFLOW,
+ showLineNumbers = true,
+ className,
+ expansionLineCount,
+ fallback = null,
+ onSelectionAddToChat,
+}: DiffHostProps) {
+ const replacement = useDiffRendererReplacement();
+ const isReplaced = replacement.kind === "plugin";
+ // Only reconstructed when a replacement will actually read it: the walk is
+ // proportional to the rendered hunks, and BB's own renderer never needs it.
+ const semanticPatch = useMemo(
+ () =>
+ isReplaced ? (patchText ?? buildFileDiffPatchText(file)) : "",
+ [file, isReplaced, patchText],
+ );
+
+ const original = (
+
+
+ );
+
+ return (
+
+ {(slot, BoundOriginal) => (
+
+
+ );
+}
diff --git a/apps/app/src/components/code/SourceCodeHost.test.tsx b/apps/app/src/components/code/SourceCodeHost.test.tsx
new file mode 100644
index 0000000000..2a010a2213
--- /dev/null
+++ b/apps/app/src/components/code/SourceCodeHost.test.tsx
@@ -0,0 +1,167 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { PluginSourceCodeRendererProps } from "@get-bb/plugin-sdk";
+import {
+ resetPluginSlotStoreForTest,
+ setPluginSlotRegistrations,
+} from "@/lib/plugin-slots";
+import { resetAllCrashedPluginSlotsForTest } from "@/components/plugin/PluginSlotMount";
+import { PluginSourceCode } from "@/components/plugin/PluginSourceCode";
+import { SourceCodeHost } from "./SourceCodeHost";
+
+const bbSourceCode = vi.hoisted(() => ({
+ loaded: false,
+ lastProps: null as Record | null,
+}));
+
+vi.mock("./BbSourceCode", async () => {
+ const React = await import("react");
+ bbSourceCode.loaded = true;
+ return {
+ default: (props: Record) => {
+ bbSourceCode.lastProps = props;
+ return React.createElement(
+ "div",
+ { "data-testid": "bb-source-code" },
+ "bb source",
+ );
+ },
+ };
+});
+
+const CONTENT = "const a = 1;\nconst b = 2;\n";
+const received: PluginSourceCodeRendererProps[] = [];
+
+function registerSourceCodeRenderer(
+ component: (props: PluginSourceCodeRendererProps) => React.ReactNode,
+) {
+ setPluginSlotRegistrations("demo", {
+ homepageSections: [],
+ settingsSections: [],
+ navPanels: [],
+ threadPanelActions: [],
+ sidebarFooterActions: [],
+ fileOpeners: [],
+ messageDirectives: [],
+ sourceCodeRenderers: [{ id: "source", title: "Demo source", component }],
+ });
+}
+
+beforeEach(() => {
+ bbSourceCode.loaded = false;
+ bbSourceCode.lastProps = null;
+ received.length = 0;
+ resetPluginSlotStoreForTest();
+});
+
+afterEach(() => {
+ cleanup();
+ resetAllCrashedPluginSlotsForTest();
+ resetPluginSlotStoreForTest();
+ vi.restoreAllMocks();
+});
+
+describe("SourceCodeHost", () => {
+ it("keeps BB's renderer chunk unloaded when a replacement never delegates", async () => {
+ registerSourceCodeRenderer((props) => {
+ received.push(props);
+ return plugin source;
+ });
+
+ render( {}}
+ />,
+ );
+
+ await screen.findByTestId("plugin-source");
+ const props = received.at(-1);
+ expect(props?.content).toBe(CONTENT);
+ expect(props?.path).toBe("src/app.ts");
+ expect(props?.overflow).toBe("wrap");
+ expect(props?.highlightedLines).toEqual({ start: 2, end: 2 });
+ expect(Object.keys(props ?? {})).not.toContain("cacheKey");
+ expect(Object.keys(props ?? {})).not.toContain("onSelectionAddToChat");
+ expect(Object.keys(props ?? {})).not.toContain("scrollToHighlightedLines");
+ });
+
+ it("loads BB's renderer only when the replacement delegates", async () => {
+ registerSourceCodeRenderer(({ path, experimental_Original: Original }) =>
+ path.endsWith(".md") ? plugin source : {
+ overflow?: BbSourceCodeProps["overflow"];
+ highlightedLines?: BbSourceCodeProps["highlightedLines"];
+ /** Rendered while BB's renderer chunk loads. */
+ fallback?: ReactNode;
+}
+
+/**
+ * The host boundary for source rendering (plugin design: exclusive replacement
+ * surfaces). BB's native file preview and every plugin that calls
+ * `experimental_SourceCode` render through here, so one
+ * `experimental_sourceCodeRenderer` registration replaces them all at once.
+ *
+ * BB's own renderer sits behind `lazy()`; a replacement that never delegates
+ * never downloads it.
+ */
+export function SourceCodeHost({
+ content,
+ path,
+ cacheKey,
+ overflow = DEFAULT_CODE_OVERFLOW,
+ highlightedLines = null,
+ className,
+ fallback = null,
+ scrollToHighlightedLines,
+ onSelectionAddToChat,
+}: SourceCodeHostProps) {
+ const replacement = useSourceCodeRendererReplacement();
+
+ const original = (
+
+
+ );
+
+ return (
+
+ {(slot, BoundOriginal) => (
+
+
+ );
+}
diff --git a/apps/app/src/components/code/code-rendering.ts b/apps/app/src/components/code/code-rendering.ts
new file mode 100644
index 0000000000..fb5c0e8c18
--- /dev/null
+++ b/apps/app/src/components/code/code-rendering.ts
@@ -0,0 +1,74 @@
+import type {
+ CodeOverflowMode,
+ DiffViewMode,
+ SourceCodeLineRange,
+} from "@get-bb/plugin-sdk";
+import type { ParsedGitDiffFile } from "@/components/git-diff/git-diff-parsing";
+
+/**
+ * Internal contracts for the two host-owned code renderers.
+ *
+ * The host boundary splits every render into two halves. The *semantic* half
+ * (`SourceCodePresentation` / `DiffPresentation` plus the content) is what a
+ * plugin replacement receives — fully resolved, with no BB implementation
+ * types in it. The *host-only* half (pre-parsed diff files, selection-to-chat,
+ * layout classes) never leaves BB, so replacing a renderer can never make a
+ * plugin responsible for BB product behavior it cannot implement.
+ *
+ * This module is types plus two literals: importing it must never pull the
+ * renderer graph (`@pierre/diffs` and Shiki behind it) onto a caller's chunk.
+ */
+
+export const DEFAULT_CODE_OVERFLOW: CodeOverflowMode = "scroll";
+export const DEFAULT_DIFF_VIEW: DiffViewMode = "unified";
+
+/** Presentation the host resolved for one source render. */
+export interface SourceCodePresentation {
+ overflow: CodeOverflowMode;
+ highlightedLines: SourceCodeLineRange | null;
+}
+
+/** Presentation the host resolved for one diff render. */
+export interface DiffPresentation {
+ view: DiffViewMode;
+ overflow: CodeOverflowMode;
+ showLineNumbers: boolean;
+}
+
+/** Props BB's default source renderer receives from {@link SourceCodeHost}. */
+export interface BbSourceCodeProps extends SourceCodePresentation {
+ content: string;
+ path: string;
+ /**
+ * Stable identity for the highlighter's result cache. Defaults to `path`;
+ * callers that re-render the same path with different bytes (a file reloaded
+ * at a new revision) pass their own.
+ */
+ cacheKey?: string;
+ className?: string;
+ /**
+ * Scroll the first highlighted line into view once it renders. The file
+ * preview wants it for `?L12` deep links; an inline snippet does not.
+ */
+ scrollToHighlightedLines?: boolean;
+ onSelectionAddToChat?: (text: string) => void;
+}
+
+/** Props BB's default diff renderer receives from {@link DiffHost}. */
+export interface BbDiffProps extends DiffPresentation {
+ /**
+ * The diff to draw. Already parsed — and possibly enriched with full file
+ * contents for context expansion — by the caller, which also needs it for
+ * its own header.
+ */
+ file: ParsedGitDiffFile;
+ className?: string;
+ /**
+ * How many unchanged lines each expand-context click reveals. Set ONLY by a
+ * caller that can attach full file contents to `file`: pierre renders an
+ * empty diff when it is given an expansion budget for a hunk-only patch,
+ * which is what the timeline supplies.
+ */
+ expansionLineCount?: number;
+ onSelectionAddToChat?: (text: string) => void;
+}
diff --git a/apps/app/src/components/code/codeRendererProvider.ts b/apps/app/src/components/code/codeRendererProvider.ts
new file mode 100644
index 0000000000..1a01fa6497
--- /dev/null
+++ b/apps/app/src/components/code/codeRendererProvider.ts
@@ -0,0 +1,42 @@
+import { useAtomValue } from "jotai";
+import {
+ createReplacementPreferenceAtom,
+ resolvePreferredReplacement,
+} from "@/lib/plugin-replacement-preference";
+import type { ResolvedReplacement } from "@/lib/plugin-slot-resolvers";
+import {
+ usePluginSlots,
+ type PluginDiffRendererSlot,
+ type PluginSourceCodeRendererSlot,
+} from "@/lib/plugin-slots";
+
+const SOURCE_CODE_RENDERER_STORAGE_KEY = "bb.appearance.sourceCodeRenderer";
+const DIFF_RENDERER_STORAGE_KEY = "bb.appearance.diffRenderer";
+
+/**
+ * Automatic by default, with an explicit per-client override in Appearance —
+ * the same pin the sidebar thread list offers. A renderer replaces a surface
+ * the user cannot otherwise get back without disabling the whole plugin, so
+ * the pin is what keeps "installing activates it" reversible.
+ */
+export const sourceCodeRendererProviderAtom = createReplacementPreferenceAtom(
+ SOURCE_CODE_RENDERER_STORAGE_KEY,
+);
+
+export const diffRendererProviderAtom = createReplacementPreferenceAtom(
+ DIFF_RENDERER_STORAGE_KEY,
+);
+
+/** The active source renderer, or the owner when none applies. */
+export function useSourceCodeRendererReplacement(): ResolvedReplacement {
+ const { sourceCodeRenderers } = usePluginSlots();
+ const preference = useAtomValue(sourceCodeRendererProviderAtom);
+ return resolvePreferredReplacement(sourceCodeRenderers, preference);
+}
+
+/** The active diff renderer, or the owner when none applies. */
+export function useDiffRendererReplacement(): ResolvedReplacement {
+ const { diffRenderers } = usePluginSlots();
+ const preference = useAtomValue(diffRendererProviderAtom);
+ return resolvePreferredReplacement(diffRenderers, preference);
+}
diff --git a/apps/app/src/components/code/source-code-budget.ts b/apps/app/src/components/code/source-code-budget.ts
new file mode 100644
index 0000000000..2d1ee6a8b2
--- /dev/null
+++ b/apps/app/src/components/code/source-code-budget.ts
@@ -0,0 +1,78 @@
+/**
+ * Rendering budget for BB's source renderer.
+ *
+ * Tokenizing and laying out a 20k-line file is what stalls iOS Safari, so the
+ * renderer paints a leading prefix until the reader asks for the whole file.
+ * The rule lives here, apart from the renderer itself, because it is pure and
+ * the file preview's tests assert it directly — importing it must never pull
+ * the `@pierre/diffs` chunk.
+ */
+
+export const SOURCE_CODE_MAX_LINES = 5_000;
+export const SOURCE_CODE_MAX_CHARS = 512 * 1024;
+
+export interface SourceCodeTruncation {
+ /** The rendered prefix, cut at a line boundary. */
+ contents: string;
+ renderedLineCount: number;
+ totalLineCount: number;
+}
+
+// FNV-1a over the contents; only used to derive a mount key for renders
+// whose caller did not supply a `cacheKey`.
+export function hashSourceContents(contents: string): string {
+ let hash = 0x811c9dc5;
+ for (let index = 0; index < contents.length; index += 1) {
+ hash ^= contents.charCodeAt(index);
+ hash = Math.imul(hash, 0x01000193);
+ }
+ return `${contents.length}:${(hash >>> 0).toString(36)}`;
+}
+
+function countLines(contents: string): number {
+ if (contents.length === 0) return 0;
+ let count = 1;
+ for (let index = contents.indexOf("\n"); index !== -1; ) {
+ count += 1;
+ index = contents.indexOf("\n", index + 1);
+ }
+ return contents.endsWith("\n") ? count - 1 : count;
+}
+
+/**
+ * Decide whether a source render exceeds {@link SOURCE_CODE_MAX_LINES} or
+ * {@link SOURCE_CODE_MAX_CHARS} and, if so, return the leading prefix
+ * that fits both budgets. Returns `null` when the whole file fits.
+ */
+export function truncateSourceCode(
+ contents: string,
+): SourceCodeTruncation | null {
+ const totalLineCount = countLines(contents);
+ if (
+ contents.length <= SOURCE_CODE_MAX_CHARS &&
+ totalLineCount <= SOURCE_CODE_MAX_LINES
+ ) {
+ return null;
+ }
+ let renderedLineCount = 0;
+ let cutIndex = 0;
+ for (
+ let lineStart = 0;
+ lineStart < contents.length &&
+ renderedLineCount < SOURCE_CODE_MAX_LINES;
+ ) {
+ const newlineIndex = contents.indexOf("\n", lineStart);
+ const lineEnd = newlineIndex === -1 ? contents.length : newlineIndex;
+ if (lineEnd > SOURCE_CODE_MAX_CHARS && renderedLineCount > 0) {
+ break;
+ }
+ renderedLineCount += 1;
+ cutIndex = lineEnd;
+ lineStart = lineEnd + 1;
+ }
+ return {
+ contents: contents.slice(0, cutIndex),
+ renderedLineCount,
+ totalLineCount,
+ };
+}
diff --git a/apps/app/src/components/git-diff/GitDiffCard.stories.tsx b/apps/app/src/components/git-diff/GitDiffCard.stories.tsx
index 554a1dc3af..af73c9a104 100644
--- a/apps/app/src/components/git-diff/GitDiffCard.stories.tsx
+++ b/apps/app/src/components/git-diff/GitDiffCard.stories.tsx
@@ -3,10 +3,8 @@ import { builtInThemes, defaultAppTheme, type BuiltInThemeId } from "@bb/domain"
import { cn } from "@bb/shared-ui/lib/utils";
import { Button } from "@bb/shared-ui/button";
import { resolveAppThemeCss } from "@/lib/themes";
-import {
- GitDiffCard,
- GIT_DIFF_VIEW_BASE_OPTIONS,
-} from "@/components/git-diff/GitDiffCard";
+import { GitDiffCard } from "@/components/git-diff/GitDiffCard";
+import type { DiffPresentation } from "@/components/code/code-rendering";
import { parseGitDiffFiles } from "@/components/git-diff/git-diff-parsing";
/**
@@ -85,19 +83,25 @@ function usePaletteCss(themeId: BuiltInThemeId) {
);
}
-function DiffStack({ themeType }: { themeType: "light" | "dark" }) {
+const DIFF_PRESENTATION: DiffPresentation = {
+ view: "unified",
+ overflow: "scroll",
+ showLineNumbers: true,
+};
+
+// Syntax-highlight token colors follow the app's own light/dark preference
+// (Layer 2), so both panes below tokenize the same way. What each pane proves
+// is Layer 1: the surface, gutter, and +/- tints re-resolving through the
+// forced `.light` / `.dark` class.
+function DiffStack() {
const files = useMemo(() => parseGitDiffFiles(SAMPLE_DIFF), []);
- const diffViewOptions = useMemo>(
- () => ({ ...GIT_DIFF_VIEW_BASE_OPTIONS, themeType }),
- [themeType],
- );
return (
{files.map((file, index) => (
;
+ presentation: DiffPresentation;
+ /** Raw per-file patch text, when the caller still has it. */
+ patchText?: string;
filePathRoot?: string | null;
onOpenFileInEditor?: (path: string) => void;
onOpenFilePreview?: (path: string) => void;
@@ -99,7 +94,8 @@ function buildGitDiffCardHeaderModel(
export const GitDiffCard = memo(function GitDiffCard({
fileDiff,
- diffViewOptions,
+ presentation,
+ patchText,
filePathRoot,
onOpenFileInEditor,
onOpenFilePreview,
@@ -124,6 +120,7 @@ export const GitDiffCard = memo(function GitDiffCard({
changeKind: headerModel.changeKind,
isRendering,
onRequestFileContents,
+ patchText,
});
const [svgDisplayMode, setSvgDisplayMode] =
useState("preview");
@@ -202,7 +199,7 @@ export const GitDiffCard = memo(function GitDiffCard({
{!isBodyHidden ? (
;
-
-interface GitDiffCardRawDiffBodyProps {
- fileDiff: ParsedGitDiffFile;
- fileDiffOptions: DiffViewOptions;
- onSelectionAddToChat?: (text: string) => void;
-}
-
-type DiffPatchDisplayStyle = "unified" | "split";
-type DiffPatchLinePrefix = " " | "+" | "-";
-
-interface DiffPatchLine {
- hunkIndex: number;
- newLineNumber: number | null;
- oldLineNumber: number | null;
- prefix: DiffPatchLinePrefix;
- selectionSide: SelectionSide | null;
- splitLineIndex: number;
- text: string;
- unifiedLineIndex: number;
-}
-
-function getDiffPatchDisplayStyle(
- fileDiffOptions: DiffViewOptions,
-): DiffPatchDisplayStyle {
- return fileDiffOptions.diffStyle === "split" ? "split" : "unified";
-}
-
-function trimDiffLineEnding(line: string) {
- return line.replace(/(?:\r\n|\n|\r)$/u, "");
-}
-
-function getDiffLineNumberFromIndex({
- hunkLineIndex,
- hunkStart,
- lineIndex,
-}: {
- hunkLineIndex: number;
- hunkStart: number;
- lineIndex: number;
-}) {
- return hunkStart + (lineIndex - hunkLineIndex);
-}
-
-function formatPrefixedDiffPath(path: string, prefix: "a" | "b") {
- if (path === "/dev/null") {
- return path;
- }
- return path.startsWith(`${prefix}/`) ? path : `${prefix}/${path}`;
-}
-
-function getDiffPatchPaths(fileDiff: ParsedGitDiffFile) {
- const currentPath = normalizeGitDiffPath(fileDiff.name) ?? fileDiff.name;
- const previousPath = normalizeGitDiffPath(fileDiff.prevName) ?? currentPath;
- const gitOldPath = previousPath === "/dev/null" ? currentPath : previousPath;
- const gitNewPath = currentPath === "/dev/null" ? previousPath : currentPath;
- return {
- diffGitOldPath: formatPrefixedDiffPath(gitOldPath, "a"),
- diffGitNewPath: formatPrefixedDiffPath(gitNewPath, "b"),
- oldHeaderPath:
- fileDiff.type === "new"
- ? "/dev/null"
- : formatPrefixedDiffPath(previousPath, "a"),
- newHeaderPath:
- fileDiff.type === "deleted"
- ? "/dev/null"
- : formatPrefixedDiffPath(currentPath, "b"),
- };
-}
-
-function collectDiffPatchLines(fileDiff: ParsedGitDiffFile): DiffPatchLine[] {
- const patchLines: DiffPatchLine[] = [];
-
- fileDiff.hunks.forEach((hunk, hunkIndex) => {
- let unifiedLineIndex = hunk.unifiedLineStart;
- let splitLineIndex = hunk.splitLineStart;
- let deletionLineIndex = hunk.deletionLineIndex;
- let additionLineIndex = hunk.additionLineIndex;
-
- for (const content of hunk.hunkContent) {
- if (content.type === "context") {
- for (let offset = 0; offset < content.lines; offset += 1) {
- const oldLineIndex = deletionLineIndex + offset;
- const newLineIndex = additionLineIndex + offset;
- const lineText =
- fileDiff.additionLines[newLineIndex] ??
- fileDiff.deletionLines[oldLineIndex];
- if (lineText === undefined) {
- continue;
- }
- patchLines.push({
- hunkIndex,
- newLineNumber: getDiffLineNumberFromIndex({
- hunkLineIndex: hunk.additionLineIndex,
- hunkStart: hunk.additionStart,
- lineIndex: newLineIndex,
- }),
- oldLineNumber: getDiffLineNumberFromIndex({
- hunkLineIndex: hunk.deletionLineIndex,
- hunkStart: hunk.deletionStart,
- lineIndex: oldLineIndex,
- }),
- prefix: " ",
- selectionSide: null,
- splitLineIndex: splitLineIndex + offset,
- text: trimDiffLineEnding(lineText),
- unifiedLineIndex: unifiedLineIndex + offset,
- });
- }
- unifiedLineIndex += content.lines;
- splitLineIndex += content.lines;
- deletionLineIndex += content.lines;
- additionLineIndex += content.lines;
- continue;
- }
-
- const splitCount = Math.max(content.deletions, content.additions);
- const unifiedCount = content.deletions + content.additions;
- for (let offset = 0; offset < content.deletions; offset += 1) {
- const oldLineIndex = deletionLineIndex + offset;
- const lineText = fileDiff.deletionLines[oldLineIndex];
- if (lineText === undefined) {
- continue;
- }
- patchLines.push({
- hunkIndex,
- newLineNumber: null,
- oldLineNumber: getDiffLineNumberFromIndex({
- hunkLineIndex: hunk.deletionLineIndex,
- hunkStart: hunk.deletionStart,
- lineIndex: oldLineIndex,
- }),
- prefix: "-",
- selectionSide: "deletions",
- splitLineIndex: splitLineIndex + offset,
- text: trimDiffLineEnding(lineText),
- unifiedLineIndex: unifiedLineIndex + offset,
- });
- }
- for (let offset = 0; offset < content.additions; offset += 1) {
- const newLineIndex = additionLineIndex + offset;
- const lineText = fileDiff.additionLines[newLineIndex];
- if (lineText === undefined) {
- continue;
- }
- patchLines.push({
- hunkIndex,
- newLineNumber: getDiffLineNumberFromIndex({
- hunkLineIndex: hunk.additionLineIndex,
- hunkStart: hunk.additionStart,
- lineIndex: newLineIndex,
- }),
- oldLineNumber: null,
- prefix: "+",
- selectionSide: "additions",
- splitLineIndex: splitLineIndex + offset,
- text: trimDiffLineEnding(lineText),
- unifiedLineIndex: unifiedLineIndex + content.deletions + offset,
- });
- }
- unifiedLineIndex += unifiedCount;
- splitLineIndex += splitCount;
- deletionLineIndex += content.deletions;
- additionLineIndex += content.additions;
- }
- });
-
- return patchLines;
-}
-
-function getDiffPatchLineSelectionIndex(
- line: DiffPatchLine,
- displayStyle: DiffPatchDisplayStyle,
-) {
- return displayStyle === "split" ? line.splitLineIndex : line.unifiedLineIndex;
-}
-
-function getDiffPatchSelectionPointIndex({
- displayStyle,
- lineNumber,
- patchLines,
- side,
-}: {
- displayStyle: DiffPatchDisplayStyle;
- lineNumber: number;
- patchLines: DiffPatchLine[];
- side: SelectionSide | undefined;
-}) {
- const sides: SelectionSide[] =
- side === undefined ? ["additions", "deletions"] : [side];
- for (const candidateSide of sides) {
- const line = patchLines.find((patchLine) =>
- candidateSide === "additions"
- ? patchLine.newLineNumber === lineNumber
- : patchLine.oldLineNumber === lineNumber,
- );
- if (line !== undefined) {
- return getDiffPatchLineSelectionIndex(line, displayStyle);
- }
- }
- return null;
-}
-
-function isDiffPatchLineSelectedInSplitView({
- line,
- range,
-}: {
- line: DiffPatchLine;
- range: SelectedLineRange;
-}) {
- const startSide = range.side ?? range.endSide ?? "additions";
- const endSide = range.endSide ?? startSide;
- if (startSide !== endSide || line.selectionSide === null) {
- return true;
- }
- return line.selectionSide === startSide;
-}
-
-function getSelectedDiffPatchLines({
- displayStyle,
- patchLines,
- range,
-}: {
- displayStyle: DiffPatchDisplayStyle;
- patchLines: DiffPatchLine[];
- range: SelectedLineRange;
-}) {
- const startIndex = getDiffPatchSelectionPointIndex({
- displayStyle,
- lineNumber: range.start,
- patchLines,
- side: range.side,
- });
- const endIndex = getDiffPatchSelectionPointIndex({
- displayStyle,
- lineNumber: range.end,
- patchLines,
- side: range.endSide ?? range.side,
- });
- if (startIndex === null || endIndex === null) {
- return [];
- }
-
- const firstIndex = Math.min(startIndex, endIndex);
- const lastIndex = Math.max(startIndex, endIndex);
- return patchLines.filter((line) => {
- const lineIndex = getDiffPatchLineSelectionIndex(line, displayStyle);
- if (lineIndex < firstIndex || lineIndex > lastIndex) {
- return false;
- }
- if (displayStyle === "unified") {
- return true;
- }
- return isDiffPatchLineSelectedInSplitView({ line, range });
- });
-}
-
-function formatUnifiedDiffRange(start: number, count: number) {
- return count === 1 ? String(start) : `${start},${count}`;
-}
-
-function getMinimumLineNumber(lineNumbers: number[]) {
- return lineNumbers.length > 0 ? Math.min(...lineNumbers) : null;
-}
-
-function buildDiffPatchHunkHeader(lines: DiffPatchLine[]) {
- const oldLineNumbers = lines
- .map((line) => line.oldLineNumber)
- .filter((lineNumber) => lineNumber !== null);
- const newLineNumbers = lines
- .map((line) => line.newLineNumber)
- .filter((lineNumber) => lineNumber !== null);
- const oldStart =
- getMinimumLineNumber(oldLineNumbers) ??
- Math.max(0, (getMinimumLineNumber(newLineNumbers) ?? 1) - 1);
- const newStart =
- getMinimumLineNumber(newLineNumbers) ??
- Math.max(0, (getMinimumLineNumber(oldLineNumbers) ?? 1) - 1);
- return `@@ -${formatUnifiedDiffRange(
- oldStart,
- oldLineNumbers.length,
- )} +${formatUnifiedDiffRange(newStart, newLineNumbers.length)} @@`;
-}
-
-function groupDiffPatchLinesByHunk(lines: DiffPatchLine[]) {
- const groups: DiffPatchLine[][] = [];
- for (const line of lines) {
- const previousGroup = groups.at(-1);
- if (previousGroup?.at(-1)?.hunkIndex === line.hunkIndex) {
- previousGroup.push(line);
- } else {
- groups.push([line]);
- }
- }
- return groups;
-}
-
-function buildUnifiedDiffPatchText({
- fileDiff,
- lines,
-}: {
- fileDiff: ParsedGitDiffFile;
- lines: DiffPatchLine[];
-}) {
- const paths = getDiffPatchPaths(fileDiff);
- const patchTextLines = [
- `diff --git ${paths.diffGitOldPath} ${paths.diffGitNewPath}`,
- `--- ${paths.oldHeaderPath}`,
- `+++ ${paths.newHeaderPath}`,
- ];
- for (const group of groupDiffPatchLinesByHunk(lines)) {
- patchTextLines.push(
- buildDiffPatchHunkHeader(group),
- ...group.map((line) => `${line.prefix}${line.text}`),
- );
- }
- return patchTextLines.join("\n");
-}
-
-function buildDiffLineSelectionText({
- displayStyle,
- fileDiff,
- range,
-}: {
- displayStyle: DiffPatchDisplayStyle;
- fileDiff: ParsedGitDiffFile;
- range: SelectedLineRange;
-}): string | null {
- const patchLines = collectDiffPatchLines(fileDiff);
- const selectedLines = getSelectedDiffPatchLines({
- displayStyle,
- patchLines,
- range,
- });
- if (selectedLines.length === 0) {
- return null;
- }
- return buildUnifiedDiffPatchText({ fileDiff, lines: selectedLines });
-}
-
-function getDiffShadowRoots(containerElement: HTMLElement | null) {
- if (containerElement === null) {
- return [];
- }
- return Array.from(containerElement.querySelectorAll("diffs-container"))
- .map((container) => container.shadowRoot)
- .filter((root) => root !== null);
-}
-
-function getDiffDomLineSide(lineElement: HTMLElement): SelectionSide {
- const codeElement = lineElement.closest("[data-deletions],[data-additions]");
- if (codeElement?.hasAttribute("data-deletions")) {
- return "deletions";
- }
- if (codeElement?.hasAttribute("data-additions")) {
- return "additions";
- }
- return lineElement.dataset.lineType === "change-deletion"
- ? "deletions"
- : "additions";
-}
-
-function getDiffDomLineNumber(lineElement: HTMLElement): number | null {
- const lineNumber = Number.parseInt(lineElement.dataset.line ?? "", 10);
- return Number.isFinite(lineNumber) ? lineNumber : null;
-}
-
-function getDiffDomLineText(lineElement: HTMLElement): string {
- return (lineElement.textContent ?? "").trimEnd();
-}
-
-function getDiffDomLineIndex(lineElement: HTMLElement) {
- const [unifiedLineIndex, splitLineIndex] = (
- lineElement.dataset.lineIndex ?? ""
- )
- .split(",")
- .map((value) => Number.parseInt(value, 10));
- if (
- unifiedLineIndex === undefined ||
- splitLineIndex === undefined ||
- !Number.isFinite(unifiedLineIndex) ||
- !Number.isFinite(splitLineIndex)
- ) {
- return null;
- }
- return { splitLineIndex, unifiedLineIndex };
-}
-
-function getDiffDomPatchPrefix(lineElement: HTMLElement): DiffPatchLinePrefix {
- switch (lineElement.dataset.lineType) {
- case "change-deletion":
- return "-";
- case "change-addition":
- return "+";
- default:
- return " ";
- }
-}
-
-function getDiffDomPatchLine({
- hunkIndex,
- lineElement,
-}: {
- hunkIndex: number;
- lineElement: HTMLElement;
-}): DiffPatchLine | null {
- const lineIndex = getDiffDomLineIndex(lineElement);
- if (lineIndex === null) {
- return null;
- }
- const lineNumber = getDiffDomLineNumber(lineElement);
- const prefix = getDiffDomPatchPrefix(lineElement);
- const side = getDiffDomLineSide(lineElement);
- return {
- hunkIndex,
- newLineNumber:
- lineNumber !== null &&
- (prefix === "+" || (prefix === " " && side === "additions"))
- ? lineNumber
- : null,
- oldLineNumber:
- lineNumber !== null &&
- (prefix === "-" || (prefix === " " && side === "deletions"))
- ? lineNumber
- : null,
- prefix,
- selectionSide: prefix === " " ? null : side,
- splitLineIndex: lineIndex.splitLineIndex,
- text: getDiffDomLineText(lineElement),
- unifiedLineIndex: lineIndex.unifiedLineIndex,
- };
-}
-
-function mergeDiffDomContextLine(
- existingLine: DiffPatchLine,
- nextLine: DiffPatchLine,
-) {
- return {
- ...existingLine,
- newLineNumber: existingLine.newLineNumber ?? nextLine.newLineNumber,
- oldLineNumber: existingLine.oldLineNumber ?? nextLine.oldLineNumber,
- };
-}
-
-function buildDiffDomSelectionText({
- containerElement,
- fileDiff,
-}: {
- containerElement: HTMLElement | null;
- fileDiff: ParsedGitDiffFile;
-}): string | null {
- if (containerElement === null) {
- return null;
- }
-
- const selectedRows: HTMLElement[] = [];
- const seenRows = new Set();
- for (const root of getDiffShadowRoots(containerElement)) {
- for (const row of root.querySelectorAll(
- "[data-selected-line][data-line]",
- )) {
- const text = getDiffDomLineText(row);
- const lineIndex = row.dataset.lineIndex ?? "";
- const side = getDiffDomLineSide(row);
- const key = `${lineIndex}:${side}:${text}`;
- if (seenRows.has(key)) {
- continue;
- }
- seenRows.add(key);
- selectedRows.push(row);
- }
- }
-
- if (selectedRows.length === 0) {
- return null;
- }
-
- const patchLineMap = new Map();
- for (const row of selectedRows) {
- const patchLine = getDiffDomPatchLine({ hunkIndex: 0, lineElement: row });
- if (patchLine === null) {
- continue;
- }
- const key = [
- patchLine.unifiedLineIndex,
- patchLine.splitLineIndex,
- patchLine.prefix,
- patchLine.text,
- ].join(":");
- const existingLine = patchLineMap.get(key);
- patchLineMap.set(
- key,
- existingLine !== undefined && patchLine.prefix === " "
- ? mergeDiffDomContextLine(existingLine, patchLine)
- : (existingLine ?? patchLine),
- );
- }
- const patchLines = Array.from(patchLineMap.values()).sort((lineA, lineB) => {
- if (lineA.unifiedLineIndex !== lineB.unifiedLineIndex) {
- return lineA.unifiedLineIndex - lineB.unifiedLineIndex;
- }
- return lineA.prefix.localeCompare(lineB.prefix);
- });
- return patchLines.length > 0
- ? buildUnifiedDiffPatchText({ fileDiff, lines: patchLines })
- : null;
-}
-
-function GitDiffCardRawDiffBody({
- fileDiff,
- fileDiffOptions,
- onSelectionAddToChat,
-}: GitDiffCardRawDiffBodyProps) {
- const containerRef = useRef(null);
- const displayStyle = getDiffPatchDisplayStyle(fileDiffOptions);
- const buildSelectionText = useCallback(
- (range: SelectedLineRange) =>
- buildDiffLineSelectionText({ displayStyle, fileDiff, range }),
- [displayStyle, fileDiff],
- );
- const buildFallbackSelectionText = useCallback(
- ({
- containerElement,
- }: {
- containerElement: HTMLElement | null;
- range: SelectedLineRange;
- }) => buildDiffDomSelectionText({ containerElement, fileDiff }),
- [fileDiff],
- );
- const lineSelectionActions = usePierreLineSelectionActions({
- buildFallbackSelectionText,
- buildSelectionText,
- containerRef,
- enabled: onSelectionAddToChat !== undefined,
- onSelectionAddToChat,
- });
- const baseOptions = useMemo>(
- () => ({
- ...fileDiffOptions,
- enableGutterUtility: onSelectionAddToChat !== undefined,
- enableLineSelection: onSelectionAddToChat !== undefined,
- lineHoverHighlight:
- onSelectionAddToChat === undefined ? "disabled" : "number",
- onGutterUtilityClick:
- onSelectionAddToChat === undefined
- ? undefined
- : lineSelectionActions.onGutterUtilityClick,
- onLineSelectionChange: lineSelectionActions.onLineSelectionChange,
- onLineSelectionEnd: lineSelectionActions.onLineSelectionEnd,
- onLineSelectionStart: lineSelectionActions.onLineSelectionStart,
- }),
- [
- fileDiffOptions,
- lineSelectionActions.onGutterUtilityClick,
- lineSelectionActions.onLineSelectionChange,
- lineSelectionActions.onLineSelectionEnd,
- lineSelectionActions.onLineSelectionStart,
- onSelectionAddToChat,
- ],
- );
- const options = usePierreStrictModeRecoveryOptions(baseOptions);
- // `DiffView` captures the worker pool when it creates its instance, so wait
- // for the workspace to build the pool before the first render.
- const isWorkerPoolReady = useRequirePierreWorkerPool();
- if (!isWorkerPoolReady) {
- return
-
-
- {lineSelectionActions.menu}
-
- );
-}
-
interface GitDiffCardSvgBodyProps {
displayMode: GitDiffCardSvgDisplayMode;
enrichment: DiffFileEnrichmentState;
fileDiff: ParsedGitDiffFile;
fileDiffLabel: string;
- fileDiffOptions: DiffViewOptions;
+ patchText: string | undefined;
+ presentation: DiffPresentation;
+ expansionLineCount: number | undefined;
onSelectionAddToChat?: (text: string) => void;
}
@@ -1371,7 +785,9 @@ function GitDiffCardSvgBody({
enrichment,
fileDiff,
fileDiffLabel,
- fileDiffOptions,
+ patchText,
+ presentation,
+ expansionLineCount,
onSelectionAddToChat,
}: GitDiffCardSvgBodyProps) {
return displayMode === "preview" ? (
@@ -1381,9 +797,11 @@ function GitDiffCardSvgBody({
fitToFrame
/>
) : (
- ;
+ presentation: DiffPresentation;
svgDisplayMode: GitDiffCardSvgDisplayMode;
/**
* Whether the surrounding card reserves a collapse-chevron gutter. The deleted
@@ -1403,16 +821,18 @@ export interface GitDiffCardBodyProps {
/**
* The single shared diff-card body for both the timeline ({@link GitDiffCard})
- * and the diff tab (`DiffFileCard`). It renders the lazily-enriched
- * `@pierre/diffs` `FileDiff` (with context expansion), the deleted-file load
+ * and the diff tab (`DiffFileCard`). It owns everything around the text diff —
+ * the lazy enrichment that unlocks context expansion, the deleted-file load
* gate, the in-viewport render skeleton, and inline `![]()
` previews for binary
- * image changes or SVGs. The data layer lives in {@link useGitDiffCardBody};
- * both callers feed its result in as `state` so the card can also read the image
- * header stat synchronously.
+ * image changes or SVGs — and hands the text diff itself to
+ * {@link DiffHost}, so an `experimental_diffRenderer` replacement covers this
+ * surface too. The data layer lives in {@link useGitDiffCardBody}; both callers
+ * feed its result in as `state` so the card can also read the image header stat
+ * synchronously.
*/
export function GitDiffCardBody({
state,
- diffViewOptions,
+ presentation,
svgDisplayMode,
reservesCollapseGutter,
onSelectionAddToChat,
@@ -1428,16 +848,15 @@ export function GitDiffCardBody({
shouldRenderDiffView,
loadDeletedDiff,
contextExpansion,
+ patchText,
} = state;
- const codeTheme = useResolvedCodeThemePair();
- const fileDiffOptions = useMemo(
- () => ({
- ...diffViewOptions,
- disableFileHeader: true,
- theme: codeTheme,
- }),
- [codeTheme, diffViewOptions],
- );
+ // pierre renders an empty diff when it gets an expansion budget for a
+ // hunk-only patch, so only a card that can fetch full contents sends one.
+ // The timeline never can; the diff panel can, through its fetcher.
+ const expansionLineCount =
+ contextExpansion.status === "unavailable"
+ ? undefined
+ : DIFF_EXPANSION_LINE_COUNT;
return (
) : (
<>
- {
+ let unifiedLineIndex = hunk.unifiedLineStart;
+ let splitLineIndex = hunk.splitLineStart;
+ let deletionLineIndex = hunk.deletionLineIndex;
+ let additionLineIndex = hunk.additionLineIndex;
+
+ for (const content of hunk.hunkContent) {
+ if (content.type === "context") {
+ for (let offset = 0; offset < content.lines; offset += 1) {
+ const oldLineIndex = deletionLineIndex + offset;
+ const newLineIndex = additionLineIndex + offset;
+ const lineText =
+ fileDiff.additionLines[newLineIndex] ??
+ fileDiff.deletionLines[oldLineIndex];
+ if (lineText === undefined) {
+ continue;
+ }
+ patchLines.push({
+ hunkIndex,
+ newLineNumber: getDiffLineNumberFromIndex({
+ hunkLineIndex: hunk.additionLineIndex,
+ hunkStart: hunk.additionStart,
+ lineIndex: newLineIndex,
+ }),
+ oldLineNumber: getDiffLineNumberFromIndex({
+ hunkLineIndex: hunk.deletionLineIndex,
+ hunkStart: hunk.deletionStart,
+ lineIndex: oldLineIndex,
+ }),
+ prefix: " ",
+ selectionSide: null,
+ splitLineIndex: splitLineIndex + offset,
+ text: trimDiffLineEnding(lineText),
+ unifiedLineIndex: unifiedLineIndex + offset,
+ });
+ }
+ unifiedLineIndex += content.lines;
+ splitLineIndex += content.lines;
+ deletionLineIndex += content.lines;
+ additionLineIndex += content.lines;
+ continue;
+ }
+
+ const splitCount = Math.max(content.deletions, content.additions);
+ const unifiedCount = content.deletions + content.additions;
+ for (let offset = 0; offset < content.deletions; offset += 1) {
+ const oldLineIndex = deletionLineIndex + offset;
+ const lineText = fileDiff.deletionLines[oldLineIndex];
+ if (lineText === undefined) {
+ continue;
+ }
+ patchLines.push({
+ hunkIndex,
+ newLineNumber: null,
+ oldLineNumber: getDiffLineNumberFromIndex({
+ hunkLineIndex: hunk.deletionLineIndex,
+ hunkStart: hunk.deletionStart,
+ lineIndex: oldLineIndex,
+ }),
+ prefix: "-",
+ selectionSide: "deletions",
+ splitLineIndex: splitLineIndex + offset,
+ text: trimDiffLineEnding(lineText),
+ unifiedLineIndex: unifiedLineIndex + offset,
+ });
+ }
+ for (let offset = 0; offset < content.additions; offset += 1) {
+ const newLineIndex = additionLineIndex + offset;
+ const lineText = fileDiff.additionLines[newLineIndex];
+ if (lineText === undefined) {
+ continue;
+ }
+ patchLines.push({
+ hunkIndex,
+ newLineNumber: getDiffLineNumberFromIndex({
+ hunkLineIndex: hunk.additionLineIndex,
+ hunkStart: hunk.additionStart,
+ lineIndex: newLineIndex,
+ }),
+ oldLineNumber: null,
+ prefix: "+",
+ selectionSide: "additions",
+ splitLineIndex: splitLineIndex + offset,
+ text: trimDiffLineEnding(lineText),
+ unifiedLineIndex: unifiedLineIndex + content.deletions + offset,
+ });
+ }
+ unifiedLineIndex += unifiedCount;
+ splitLineIndex += splitCount;
+ deletionLineIndex += content.deletions;
+ additionLineIndex += content.additions;
+ }
+ });
+
+ return patchLines;
+}
+
+function getDiffPatchLineSelectionIndex(
+ line: DiffPatchLine,
+ displayStyle: DiffPatchDisplayStyle,
+) {
+ return displayStyle === "split" ? line.splitLineIndex : line.unifiedLineIndex;
+}
+
+function getDiffPatchSelectionPointIndex({
+ displayStyle,
+ lineNumber,
+ patchLines,
+ side,
+}: {
+ displayStyle: DiffPatchDisplayStyle;
+ lineNumber: number;
+ patchLines: DiffPatchLine[];
+ side: SelectionSide | undefined;
+}) {
+ const sides: SelectionSide[] =
+ side === undefined ? ["additions", "deletions"] : [side];
+ for (const candidateSide of sides) {
+ const line = patchLines.find((patchLine) =>
+ candidateSide === "additions"
+ ? patchLine.newLineNumber === lineNumber
+ : patchLine.oldLineNumber === lineNumber,
+ );
+ if (line !== undefined) {
+ return getDiffPatchLineSelectionIndex(line, displayStyle);
+ }
+ }
+ return null;
+}
+
+function isDiffPatchLineSelectedInSplitView({
+ line,
+ range,
+}: {
+ line: DiffPatchLine;
+ range: SelectedLineRange;
+}) {
+ const startSide = range.side ?? range.endSide ?? "additions";
+ const endSide = range.endSide ?? startSide;
+ if (startSide !== endSide || line.selectionSide === null) {
+ return true;
+ }
+ return line.selectionSide === startSide;
+}
+
+function getSelectedDiffPatchLines({
+ displayStyle,
+ patchLines,
+ range,
+}: {
+ displayStyle: DiffPatchDisplayStyle;
+ patchLines: DiffPatchLine[];
+ range: SelectedLineRange;
+}) {
+ const startIndex = getDiffPatchSelectionPointIndex({
+ displayStyle,
+ lineNumber: range.start,
+ patchLines,
+ side: range.side,
+ });
+ const endIndex = getDiffPatchSelectionPointIndex({
+ displayStyle,
+ lineNumber: range.end,
+ patchLines,
+ side: range.endSide ?? range.side,
+ });
+ if (startIndex === null || endIndex === null) {
+ return [];
+ }
+
+ const firstIndex = Math.min(startIndex, endIndex);
+ const lastIndex = Math.max(startIndex, endIndex);
+ return patchLines.filter((line) => {
+ const lineIndex = getDiffPatchLineSelectionIndex(line, displayStyle);
+ if (lineIndex < firstIndex || lineIndex > lastIndex) {
+ return false;
+ }
+ if (displayStyle === "unified") {
+ return true;
+ }
+ return isDiffPatchLineSelectedInSplitView({ line, range });
+ });
+}
+
+function formatUnifiedDiffRange(start: number, count: number) {
+ return count === 1 ? String(start) : `${start},${count}`;
+}
+
+function getMinimumLineNumber(lineNumbers: number[]) {
+ return lineNumbers.length > 0 ? Math.min(...lineNumbers) : null;
+}
+
+function buildDiffPatchHunkHeader(lines: DiffPatchLine[]) {
+ const oldLineNumbers = lines
+ .map((line) => line.oldLineNumber)
+ .filter((lineNumber) => lineNumber !== null);
+ const newLineNumbers = lines
+ .map((line) => line.newLineNumber)
+ .filter((lineNumber) => lineNumber !== null);
+ const oldStart =
+ getMinimumLineNumber(oldLineNumbers) ??
+ Math.max(0, (getMinimumLineNumber(newLineNumbers) ?? 1) - 1);
+ const newStart =
+ getMinimumLineNumber(newLineNumbers) ??
+ Math.max(0, (getMinimumLineNumber(oldLineNumbers) ?? 1) - 1);
+ return `@@ -${formatUnifiedDiffRange(
+ oldStart,
+ oldLineNumbers.length,
+ )} +${formatUnifiedDiffRange(newStart, newLineNumbers.length)} @@`;
+}
+
+function groupDiffPatchLinesByHunk(lines: DiffPatchLine[]) {
+ const groups: DiffPatchLine[][] = [];
+ for (const line of lines) {
+ const previousGroup = groups.at(-1);
+ if (previousGroup?.at(-1)?.hunkIndex === line.hunkIndex) {
+ previousGroup.push(line);
+ } else {
+ groups.push([line]);
+ }
+ }
+ return groups;
+}
+
+export function buildUnifiedDiffPatchText({
+ fileDiff,
+ lines,
+}: {
+ fileDiff: ParsedGitDiffFile;
+ lines: DiffPatchLine[];
+}) {
+ const paths = getDiffPatchPaths(fileDiff);
+ const patchTextLines = [
+ `diff --git ${paths.diffGitOldPath} ${paths.diffGitNewPath}`,
+ `--- ${paths.oldHeaderPath}`,
+ `+++ ${paths.newHeaderPath}`,
+ ];
+ for (const group of groupDiffPatchLinesByHunk(lines)) {
+ patchTextLines.push(
+ buildDiffPatchHunkHeader(group),
+ ...group.map((line) => `${line.prefix}${line.text}`),
+ );
+ }
+ return patchTextLines.join("\n");
+}
+
+/**
+ * Reconstruct a complete single-file unified patch from a parsed diff. The
+ * host diff boundary uses it to hand a plugin replacement real patch text when
+ * the caller no longer has the bytes the file was parsed from.
+ */
+export function buildFileDiffPatchText(fileDiff: ParsedGitDiffFile): string {
+ return buildUnifiedDiffPatchText({
+ fileDiff,
+ lines: collectDiffPatchLines(fileDiff),
+ });
+}
+
+export function buildDiffLineSelectionText({
+ displayStyle,
+ fileDiff,
+ range,
+}: {
+ displayStyle: DiffPatchDisplayStyle;
+ fileDiff: ParsedGitDiffFile;
+ range: SelectedLineRange;
+}): string | null {
+ const patchLines = collectDiffPatchLines(fileDiff);
+ const selectedLines = getSelectedDiffPatchLines({
+ displayStyle,
+ patchLines,
+ range,
+ });
+ if (selectedLines.length === 0) {
+ return null;
+ }
+ return buildUnifiedDiffPatchText({ fileDiff, lines: selectedLines });
+}
+
+function getDiffShadowRoots(containerElement: HTMLElement | null) {
+ if (containerElement === null) {
+ return [];
+ }
+ return Array.from(containerElement.querySelectorAll("diffs-container"))
+ .map((container) => container.shadowRoot)
+ .filter((root) => root !== null);
+}
+
+function getDiffDomLineSide(lineElement: HTMLElement): SelectionSide {
+ const codeElement = lineElement.closest("[data-deletions],[data-additions]");
+ if (codeElement?.hasAttribute("data-deletions")) {
+ return "deletions";
+ }
+ if (codeElement?.hasAttribute("data-additions")) {
+ return "additions";
+ }
+ return lineElement.dataset.lineType === "change-deletion"
+ ? "deletions"
+ : "additions";
+}
+
+function getDiffDomLineNumber(lineElement: HTMLElement): number | null {
+ const lineNumber = Number.parseInt(lineElement.dataset.line ?? "", 10);
+ return Number.isFinite(lineNumber) ? lineNumber : null;
+}
+
+function getDiffDomLineText(lineElement: HTMLElement): string {
+ return (lineElement.textContent ?? "").trimEnd();
+}
+
+function getDiffDomLineIndex(lineElement: HTMLElement) {
+ const [unifiedLineIndex, splitLineIndex] = (
+ lineElement.dataset.lineIndex ?? ""
+ )
+ .split(",")
+ .map((value) => Number.parseInt(value, 10));
+ if (
+ unifiedLineIndex === undefined ||
+ splitLineIndex === undefined ||
+ !Number.isFinite(unifiedLineIndex) ||
+ !Number.isFinite(splitLineIndex)
+ ) {
+ return null;
+ }
+ return { splitLineIndex, unifiedLineIndex };
+}
+
+function getDiffDomPatchPrefix(lineElement: HTMLElement): DiffPatchLinePrefix {
+ switch (lineElement.dataset.lineType) {
+ case "change-deletion":
+ return "-";
+ case "change-addition":
+ return "+";
+ default:
+ return " ";
+ }
+}
+
+function getDiffDomPatchLine({
+ hunkIndex,
+ lineElement,
+}: {
+ hunkIndex: number;
+ lineElement: HTMLElement;
+}): DiffPatchLine | null {
+ const lineIndex = getDiffDomLineIndex(lineElement);
+ if (lineIndex === null) {
+ return null;
+ }
+ const lineNumber = getDiffDomLineNumber(lineElement);
+ const prefix = getDiffDomPatchPrefix(lineElement);
+ const side = getDiffDomLineSide(lineElement);
+ return {
+ hunkIndex,
+ newLineNumber:
+ lineNumber !== null &&
+ (prefix === "+" || (prefix === " " && side === "additions"))
+ ? lineNumber
+ : null,
+ oldLineNumber:
+ lineNumber !== null &&
+ (prefix === "-" || (prefix === " " && side === "deletions"))
+ ? lineNumber
+ : null,
+ prefix,
+ selectionSide: prefix === " " ? null : side,
+ splitLineIndex: lineIndex.splitLineIndex,
+ text: getDiffDomLineText(lineElement),
+ unifiedLineIndex: lineIndex.unifiedLineIndex,
+ };
+}
+
+function mergeDiffDomContextLine(
+ existingLine: DiffPatchLine,
+ nextLine: DiffPatchLine,
+) {
+ return {
+ ...existingLine,
+ newLineNumber: existingLine.newLineNumber ?? nextLine.newLineNumber,
+ oldLineNumber: existingLine.oldLineNumber ?? nextLine.oldLineNumber,
+ };
+}
+
+export function buildDiffDomSelectionText({
+ containerElement,
+ fileDiff,
+}: {
+ containerElement: HTMLElement | null;
+ fileDiff: ParsedGitDiffFile;
+}): string | null {
+ if (containerElement === null) {
+ return null;
+ }
+
+ const selectedRows: HTMLElement[] = [];
+ const seenRows = new Set();
+ for (const root of getDiffShadowRoots(containerElement)) {
+ for (const row of root.querySelectorAll(
+ "[data-selected-line][data-line]",
+ )) {
+ const text = getDiffDomLineText(row);
+ const lineIndex = row.dataset.lineIndex ?? "";
+ const side = getDiffDomLineSide(row);
+ const key = `${lineIndex}:${side}:${text}`;
+ if (seenRows.has(key)) {
+ continue;
+ }
+ seenRows.add(key);
+ selectedRows.push(row);
+ }
+ }
+
+ if (selectedRows.length === 0) {
+ return null;
+ }
+
+ const patchLineMap = new Map();
+ for (const row of selectedRows) {
+ const patchLine = getDiffDomPatchLine({ hunkIndex: 0, lineElement: row });
+ if (patchLine === null) {
+ continue;
+ }
+ const key = [
+ patchLine.unifiedLineIndex,
+ patchLine.splitLineIndex,
+ patchLine.prefix,
+ patchLine.text,
+ ].join(":");
+ const existingLine = patchLineMap.get(key);
+ patchLineMap.set(
+ key,
+ existingLine !== undefined && patchLine.prefix === " "
+ ? mergeDiffDomContextLine(existingLine, patchLine)
+ : (existingLine ?? patchLine),
+ );
+ }
+ const patchLines = Array.from(patchLineMap.values()).sort((lineA, lineB) => {
+ if (lineA.unifiedLineIndex !== lineB.unifiedLineIndex) {
+ return lineA.unifiedLineIndex - lineB.unifiedLineIndex;
+ }
+ return lineA.prefix.localeCompare(lineB.prefix);
+ });
+ return patchLines.length > 0
+ ? buildUnifiedDiffPatchText({ fileDiff, lines: patchLines })
+ : null;
+}
diff --git a/apps/app/src/components/plugin/PluginDiff.tsx b/apps/app/src/components/plugin/PluginDiff.tsx
new file mode 100644
index 0000000000..b56c8a48ed
--- /dev/null
+++ b/apps/app/src/components/plugin/PluginDiff.tsx
@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import type { DiffProps } from "@get-bb/plugin-sdk";
+import { DiffHost } from "@/components/code/DiffHost";
+import { normalizeFilePatch } from "@/components/git-diff/git-diff-parsing";
+import { cn } from "@bb/shared-ui/lib/utils";
+
+/**
+ * The public `experimental_Diff` component. It normalizes whatever patch shape
+ * the caller has (a `git diff` patch, a GitHub REST patch, a single `@@` hunk)
+ * into one the renderer understands, then hands it to the host boundary.
+ * Content that does not parse as a patch degrades to plain monospace text
+ * rather than to an empty diff.
+ */
+export function PluginDiff({
+ patch,
+ path,
+ view,
+ overflow,
+ showLineNumbers,
+ className,
+}: DiffProps) {
+ const normalized = useMemo(
+ () => normalizeFilePatch({ patch, path }),
+ [patch, path],
+ );
+ if (normalized === null) {
+ return (
+
+ {patch}
+
+ );
+ }
+ return (
+ (
- "[data-file-preview-code-viewport]",
+ "[data-bb-source-code-viewport]",
);
expect(codeViewport).not.toBeNull();
await waitFor(() => {
@@ -368,7 +368,7 @@ describe("FilePreview", () => {
expect(
pierreFile.shadowRoot
?.querySelector('[data-line="2"]')
- ?.hasAttribute("data-file-preview-target-line"),
+ ?.hasAttribute("data-bb-source-code-target-line"),
).toBe(true);
});
@@ -417,7 +417,7 @@ describe("FilePreview", () => {
});
it("caps oversized code previews to a leading prefix until the full file is requested", async () => {
- const totalLineCount = FILE_PREVIEW_CODE_MAX_LINES + 1_500;
+ const totalLineCount = SOURCE_CODE_MAX_LINES + 1_500;
const contents = Array.from(
{ length: totalLineCount },
(_, index) => `line ${index + 1}`,
@@ -442,7 +442,7 @@ describe("FilePreview", () => {
await screen.findByTestId("pierre-file");
expect(pierreMock.state.lastFile?.contents.split("\n")).toHaveLength(
- FILE_PREVIEW_CODE_MAX_LINES,
+ SOURCE_CODE_MAX_LINES,
);
// The capped prefix must not share the full file's highlight cache slot.
expect(pierreMock.state.lastFile?.cacheKey).toBe(
@@ -450,7 +450,7 @@ describe("FilePreview", () => {
);
expect(
screen.getByText(
- `Showing the first ${FILE_PREVIEW_CODE_MAX_LINES.toLocaleString()} of ${totalLineCount.toLocaleString()} lines.`,
+ `Showing the first ${SOURCE_CODE_MAX_LINES.toLocaleString()} of ${totalLineCount.toLocaleString()} lines.`,
),
).toBeTruthy();
@@ -488,7 +488,7 @@ describe("FilePreview", () => {
});
it("shows the whole file when a line link points past the capped prefix", async () => {
- const totalLineCount = FILE_PREVIEW_CODE_MAX_LINES + 20;
+ const totalLineCount = SOURCE_CODE_MAX_LINES + 20;
const contents = Array.from(
{ length: totalLineCount },
(_, index) => `line ${index + 1}`,
@@ -502,8 +502,8 @@ describe("FilePreview", () => {
kind: "ready",
file: { name: "generated.ts", contents },
lineRange: {
- startLineNumber: FILE_PREVIEW_CODE_MAX_LINES + 10,
- endLineNumber: FILE_PREVIEW_CODE_MAX_LINES + 10,
+ startLineNumber: SOURCE_CODE_MAX_LINES + 10,
+ endLineNumber: SOURCE_CODE_MAX_LINES + 10,
},
textPreviewKind: null,
}}
diff --git a/apps/app/src/components/secondary-panel/FilePreview.tsx b/apps/app/src/components/secondary-panel/FilePreview.tsx
index aa11f18503..179b1b4d69 100644
--- a/apps/app/src/components/secondary-panel/FilePreview.tsx
+++ b/apps/app/src/components/secondary-panel/FilePreview.tsx
@@ -1,25 +1,7 @@
-import {
- type CSSProperties,
- type ReactNode,
- useCallback,
- useEffect,
- useLayoutEffect,
- useMemo,
- useRef,
- useState,
-} from "react";
-import { File as PierreFile, VirtualizerContext } from "@pierre/diffs/react";
-import type { FileOptions } from "@pierre/diffs/react";
-import {
- DIFFS_TAG_NAME,
- Virtualizer as PierreVirtualizer,
- type SelectedLineRange,
- type SupportedLanguages,
- type VirtualFileMetrics,
-} from "@pierre/diffs";
+import { type CSSProperties, useEffect, useMemo, useState } from "react";
import type { UrlTransform } from "react-markdown";
import { Button } from "@bb/shared-ui/button";
-import { usePierreLineSelectionActions } from "@/components/git-diff/PierreLineSelectionActions.js";
+import { SourceCodeHost } from "@/components/code/SourceCodeHost";
import { COARSE_POINTER_TEXT_SM_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
import { EmptyStatePanel } from "@bb/shared-ui/empty-state";
import { CopyButton } from "@/components/ui/copy-button.js";
@@ -37,14 +19,7 @@ import {
TooltipTrigger,
} from "@bb/shared-ui/tooltip";
import { TruncateStart } from "@/components/ui/truncate-start.js";
-import { usePreferredTheme } from "@/hooks/useTheme";
-import { useResolvedCodeThemePair } from "@/lib/code-theme";
import { copyToClipboardWithToast } from "@/lib/clipboard";
-import { PierreWorkerPoolBoundary } from "@/lib/pierre-worker-pool-boundary";
-import {
- usePierreWorkerPool,
- useRequirePierreWorkerPool,
-} from "@/lib/pierre-worker-pool-gate";
import type {
FilePreviewLineRange,
WorkspaceFilePreviewStatusLabel,
@@ -61,7 +36,6 @@ export interface FilePreviewFile {
cacheKey?: string;
name: string;
contents: string;
- lang?: SupportedLanguages;
}
export type IframePreviewSandbox = "allow-scripts";
@@ -185,18 +159,6 @@ interface FilePreviewCodeProps {
path: string;
}
-interface FilePreviewWorkerPoolStats {
- managerState: "waiting" | "initializing" | "initialized";
- workersFailed: boolean;
- totalWorkers: number;
- busyWorkers: number;
- queuedTasks: number;
- activeTasks: number;
- themeSubscribers: number;
- fileCacheSize: number;
- diffCacheSize: number;
-}
-
interface GetInitialFilePreviewViewModeArgs {
lineRange: FilePreviewLineRange | null;
toggleKind: FilePreviewToggleKind | null;
@@ -224,101 +186,6 @@ const CSV_PREVIEW_MAX_ROWS = 500;
* file is what stalls iOS Safari; the prefix keeps the first paint bounded and
* the full file stays one tap away.
*/
-export const FILE_PREVIEW_CODE_MAX_LINES = 5_000;
-export const FILE_PREVIEW_CODE_MAX_CHARS = 512 * 1024;
-
-const FILE_PREVIEW_CODE_LINE_HEIGHT_PX = 18;
-const FILE_PREVIEW_CODE_GAP_BLOCK_PX = 16;
-
-const FILE_PREVIEW_VIEW_STYLE = {
- "--diffs-font-size": "12px",
- "--diffs-line-height": `${FILE_PREVIEW_CODE_LINE_HEIGHT_PX}px`,
- // Pierre paints its theme bg inside this gap, so the top breathing room of
- // the code body lives on Pierre's bg — not on the panel's bg-background.
- // Without this, the gap above Pierre would show a visible bg-color seam.
- "--diffs-gap-block": `${FILE_PREVIEW_CODE_GAP_BLOCK_PX}px`,
-} as CSSProperties;
-
-// Pierre's virtualizer estimates row positions from these before it measures
-// them; they mirror the CSS variables above so the first layout guess is exact
-// in `scroll` overflow mode (fixed-height rows) and close in `wrap` mode.
-const FILE_PREVIEW_VIRTUAL_FILE_METRICS: VirtualFileMetrics = {
- hunkLineCount: 50,
- lineHeight: FILE_PREVIEW_CODE_LINE_HEIGHT_PX,
- diffHeaderHeight: 0,
- spacing: FILE_PREVIEW_CODE_GAP_BLOCK_PX,
-};
-
-export interface FilePreviewCodeTruncation {
- /** The rendered prefix, cut at a line boundary. */
- contents: string;
- renderedLineCount: number;
- totalLineCount: number;
-}
-
-// FNV-1a over the contents; only used to derive a mount key for previews
-// whose caller did not supply a `cacheKey`.
-function hashFilePreviewContents(contents: string): string {
- let hash = 0x811c9dc5;
- for (let index = 0; index < contents.length; index += 1) {
- hash ^= contents.charCodeAt(index);
- hash = Math.imul(hash, 0x01000193);
- }
- return `${contents.length}:${(hash >>> 0).toString(36)}`;
-}
-
-function countLines(contents: string): number {
- if (contents.length === 0) return 0;
- let count = 1;
- for (let index = contents.indexOf("\n"); index !== -1; ) {
- count += 1;
- index = contents.indexOf("\n", index + 1);
- }
- return contents.endsWith("\n") ? count - 1 : count;
-}
-
-/**
- * Decide whether a code preview exceeds {@link FILE_PREVIEW_CODE_MAX_LINES} or
- * {@link FILE_PREVIEW_CODE_MAX_CHARS} and, if so, return the leading prefix
- * that fits both budgets. Returns `null` when the whole file fits.
- */
-export function truncateFilePreviewCode(
- contents: string,
-): FilePreviewCodeTruncation | null {
- const totalLineCount = countLines(contents);
- if (
- contents.length <= FILE_PREVIEW_CODE_MAX_CHARS &&
- totalLineCount <= FILE_PREVIEW_CODE_MAX_LINES
- ) {
- return null;
- }
- let renderedLineCount = 0;
- let cutIndex = 0;
- for (
- let lineStart = 0;
- lineStart < contents.length &&
- renderedLineCount < FILE_PREVIEW_CODE_MAX_LINES;
- ) {
- const newlineIndex = contents.indexOf("\n", lineStart);
- const lineEnd = newlineIndex === -1 ? contents.length : newlineIndex;
- if (lineEnd > FILE_PREVIEW_CODE_MAX_CHARS && renderedLineCount > 0) {
- break;
- }
- renderedLineCount += 1;
- cutIndex = lineEnd;
- lineStart = lineEnd + 1;
- }
- return {
- contents: contents.slice(0, cutIndex),
- renderedLineCount,
- totalLineCount,
- };
-}
-
-// `--md-content-w` tells MarkdownPreview the surrounding text-column width so
-// narrow tables sit flush with the prose on the left instead of centering in
-// the panel. `100cqi` resolves against the `@container/page` scope on the
-// wrapper below — i.e. the panel width.
const FILE_PREVIEW_WRAPPER_STYLE = {
"--md-content-w": "100cqi",
} as CSSProperties;
@@ -1203,216 +1070,6 @@ function IframeFilePreview({ sandbox, title, url }: IframeFilePreviewTarget) {
);
}
-function getPreviewTargetRoots(container: HTMLElement): ParentNode[] {
- const roots: ParentNode[] = [container];
- // Pierre owns its rendered line elements inside an open shadow root, which
- // normal descendant queries on the React wrapper cannot cross.
- for (const pierreContainer of container.querySelectorAll(
- DIFFS_TAG_NAME,
- )) {
- if (pierreContainer.shadowRoot !== null) {
- roots.push(pierreContainer.shadowRoot);
- }
- }
- return roots;
-}
-
-function clearPreviewTargetLine(container: HTMLElement) {
- for (const root of getPreviewTargetRoots(container)) {
- const targetLines = root.querySelectorAll(
- "[data-file-preview-target-line]",
- );
- for (const targetLine of targetLines) {
- targetLine.removeAttribute("data-file-preview-target-line");
- targetLine.removeAttribute("data-selected-line");
- }
- }
-}
-
-function findPreviewTargetLine(
- container: HTMLElement,
- lineNumber: number,
-): HTMLElement | null {
- const roots = getPreviewTargetRoots(container);
- for (const root of roots) {
- const lines = root.querySelectorAll(`[data-line="${lineNumber}"]`);
- for (const line of lines) {
- if (line instanceof HTMLElement && line.dataset.lineIndex !== undefined) {
- return line;
- }
- }
- }
- for (const root of roots) {
- const lines = root.querySelectorAll(`[data-line="${lineNumber}"]`);
- for (const line of lines) {
- if (line instanceof HTMLElement) {
- return line;
- }
- }
- }
- return null;
-}
-
-function findVirtualizedCodeViewport(
- container: HTMLElement,
-): HTMLElement | null {
- return container.querySelector(
- "[data-file-preview-code-viewport]",
- );
-}
-
-/**
- * Nudge the virtualized code viewport toward `lineNumber` when that row is not
- * realized yet. With rendered rows in hand the distance is measured from the
- * nearest one (rows are at least one line tall, so the step never overshoots
- * in `wrap` mode); with none rendered the offset is estimated from the fixed
- * line metrics. Each call moves at most to the estimate; the caller retries on
- * the next frame once pierre has rendered the new window.
- */
-function approachVirtualizedTargetLine(
- container: HTMLElement,
- lineNumber: number,
-) {
- const viewport = findVirtualizedCodeViewport(container);
- if (viewport === null) return;
- const viewportRect = viewport.getBoundingClientRect();
- const centerOffset = viewportRect.height / 2;
- const renderedBounds = getRenderedPreviewLineBounds(container);
- if (renderedBounds === null) {
- const estimatedTop =
- FILE_PREVIEW_CODE_GAP_BLOCK_PX +
- (lineNumber - 1) * FILE_PREVIEW_CODE_LINE_HEIGHT_PX;
- viewport.scrollTop = Math.max(0, estimatedTop - centerOffset);
- return;
- }
- const { firstLineNumber, firstTop, lastLineNumber, lastBottom } =
- renderedBounds;
- if (lineNumber > lastLineNumber) {
- const distance =
- lastBottom -
- viewportRect.top +
- (lineNumber - lastLineNumber - 1) * FILE_PREVIEW_CODE_LINE_HEIGHT_PX;
- viewport.scrollTop += Math.max(0, distance - centerOffset);
- } else if (lineNumber < firstLineNumber) {
- const distance =
- viewportRect.top -
- firstTop +
- (firstLineNumber - lineNumber) * FILE_PREVIEW_CODE_LINE_HEIGHT_PX;
- viewport.scrollTop = Math.max(
- 0,
- viewport.scrollTop - distance - centerOffset,
- );
- }
-}
-
-interface RenderedPreviewLineBounds {
- firstLineNumber: number;
- firstTop: number;
- lastLineNumber: number;
- lastBottom: number;
-}
-
-function getRenderedPreviewLineBounds(
- container: HTMLElement,
-): RenderedPreviewLineBounds | null {
- let bounds: RenderedPreviewLineBounds | null = null;
- for (const root of getPreviewTargetRoots(container)) {
- for (const line of root.querySelectorAll(
- "[data-line][data-line-index]",
- )) {
- const lineNumber = Number(line.dataset.line);
- if (!Number.isFinite(lineNumber)) continue;
- const rect = line.getBoundingClientRect();
- if (bounds === null) {
- bounds = {
- firstLineNumber: lineNumber,
- firstTop: rect.top,
- lastLineNumber: lineNumber,
- lastBottom: rect.bottom,
- };
- continue;
- }
- if (lineNumber < bounds.firstLineNumber) {
- bounds.firstLineNumber = lineNumber;
- bounds.firstTop = rect.top;
- }
- if (lineNumber > bounds.lastLineNumber) {
- bounds.lastLineNumber = lineNumber;
- bounds.lastBottom = rect.bottom;
- }
- }
- }
- return bounds;
-}
-
-function findPreviewScrollViewport(container: HTMLElement): HTMLElement | null {
- const virtualizedViewport = findVirtualizedCodeViewport(container);
- if (virtualizedViewport !== null) {
- return virtualizedViewport;
- }
- const view = container.ownerDocument.defaultView;
- if (view === null) return null;
-
- let candidate = container.parentElement;
- while (candidate !== null) {
- const overflowY = view.getComputedStyle(candidate).overflowY;
- if (
- overflowY === "auto" ||
- overflowY === "scroll" ||
- overflowY === "overlay"
- ) {
- return candidate;
- }
- candidate = candidate.parentElement;
- }
- return null;
-}
-
-function scrollPreviewTargetLine(container: HTMLElement, line: HTMLElement) {
- const viewport = findPreviewScrollViewport(container);
- if (viewport === null) return;
-
- const lineRect = line.getBoundingClientRect();
- const viewportRect = viewport.getBoundingClientRect();
- const lineCenter = lineRect.top + lineRect.height / 2;
- const viewportCenter = viewportRect.top + viewportRect.height / 2;
- // Adjust only the vertical scroll offset. `scrollIntoView()` can also move
- // the horizontal axis when a long source line extends beyond the viewport.
- viewport.scrollTop += lineCenter - viewportCenter;
-}
-
-function formatLineRange(startLineNumber: number, endLineNumber: number) {
- return startLineNumber === endLineNumber
- ? String(startLineNumber)
- : `${startLineNumber}-${endLineNumber}`;
-}
-
-function buildFilePreviewLineSelectionText({
- contents,
- path,
- range,
-}: {
- contents: string;
- path: string;
- range: SelectedLineRange;
-}): string | null {
- const startLineNumber = Math.max(1, Math.min(range.start, range.end));
- const endLineNumber = Math.max(
- startLineNumber,
- Math.max(range.start, range.end),
- );
- const lines = contents.split(/\r\n|\n|\r/);
- const selectedLines = lines.slice(startLineNumber - 1, endLineNumber);
- if (selectedLines.length === 0) {
- return null;
- }
- const selectedText = selectedLines.join("\n").trimEnd();
- if (selectedText.trim().length === 0) {
- return null;
- }
- return `${path}:${formatLineRange(startLineNumber, endLineNumber)}\n${selectedText}`;
-}
-
function FilePreviewLoading() {
return (
@@ -1434,6 +1091,12 @@ function FilePreviewMessage({ message, role }: FilePreviewMessageProps) {
);
}
+/**
+ * The preview's source body. Everything here is chrome and policy — which
+ * lines to highlight, whether to scroll to them, the selection-to-chat hook —
+ * while the render itself goes through the shared host boundary, so an
+ * `experimental_sourceCodeRenderer` replacement covers the file preview too.
+ */
function FilePreviewCode({
file,
lineOverflowMode,
@@ -1441,336 +1104,27 @@ function FilePreviewCode({
onSelectionAddToChat,
path,
}: FilePreviewCodeProps) {
- const preferredTheme = usePreferredTheme();
- const codeTheme = useResolvedCodeThemePair();
- const containerRef = useRef(null);
- // `PierreFile` captures the worker pool when it creates its instance, so
- // wait for the workspace to build the pool before the first render.
- const isWorkerPoolReady = useRequirePierreWorkerPool();
- const workerPool = usePierreWorkerPool();
- const lastWorkerPoolStatsKeyRef = useRef