@cueloop/client 0.1.0-alpha.89 → 0.1.0-alpha.90

package/src/components/ThreadView.tsx

@@ -12,7 +12,7 @@
  * dismisses · tab folds · cmd+[ / cmd+] cycle discussions · blur-save on click.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTerminalDimensions } from "@opentui/react";
 import type { KeyEvent, ScrollBoxRenderable } from "@opentui/core";
 import type { Annotation, Thread } from "@cueloop/schema";
@@ -40,12 +40,30 @@ import { useAnnotationSurface, type LineSource } from "../use-annotation-surface
 import { NavModeHint } from "./NavModeHint";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
 import { useComponentTheme } from "./theme-context";
+import { colorForSyntaxGroup } from "./syntax-highlight";
+import { highlightThreadCodeBlocks, type SyntaxSpan } from "../thread-code-syntax";
 
 /** Blocks kept mounted beyond the viewport, so a scroll step or a drag past the edge never shows a gap. */
 const OVERSCAN_BLOCKS = 8;
 
 export { lighten } from "../annotation-palette";
 
+interface CodeSyntaxState {
+  display: DisplayBlock[];
+  byBlock: Map<number, SyntaxSpan[]>;
+}
+
+function syntaxSpansForBlock(
+  block: DisplayBlock,
+  blockIndex: number,
+  display: DisplayBlock[],
+  codeSyntax: CodeSyntaxState | null,
+): readonly SyntaxSpan[] {
+  if (block.type === "del" || codeSyntax?.display !== display) return [];
+
+  return codeSyntax.byBlock.get(blockIndex) ?? [];
+}
+
 /**
  * How a block's rows are painted: heading weight, muted kinds, and the list or
  * quote marker. A cut block reads dim and struck through; other edits are
@@ -222,6 +240,24 @@ export function ThreadView({
     (left, right) => left === right,
     0,
   );
+  const [codeSyntax, setCodeSyntax] = useState<CodeSyntaxState | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    void highlightThreadCodeBlocks(display).then(
+      (byBlock) => {
+        if (active) setCodeSyntax({ display, byBlock });
+      },
+      (error) => {
+        if (active) console.error("thread code syntax highlighting failed", error);
+      },
+    );
+
+    return () => {
+      active = false;
+    };
+  }, [display]);
 
   // only the viewport's blocks (plus an overscan) mount; a block is estimated at its wrapped-line
   // count until its box, cards included, is measured. The initial viewport seeds the first render so a
@@ -257,6 +293,7 @@ export function ThreadView({
     marker: string;
     baseFg: string;
     baseAttributes: number;
+    syntaxSpans: readonly SyntaxSpan[];
   }
 
   const paintedSpan = (
@@ -267,7 +304,11 @@ export function ThreadView({
   ) => (
     <span
       key={runIndex}
-      fg={roleForeground(run.role, baseFg, tokens)}
+      fg={
+        run.role === "plain" && run.syntaxGroup
+          ? (colorForSyntaxGroup(run.syntaxGroup, tokens) ?? baseFg)
+          : roleForeground(run.role, baseFg, tokens)
+      }
       bg={run.caretOnly ? palette.caretCell : run.marked ? palette.markBackdrop : undefined}
       attributes={roleAttributes(run.role, baseAttributes) | (run.marked ? UNDERLINE : 0)}
     >
@@ -276,8 +317,17 @@ export function ThreadView({
   );
 
   const lineRowFor = (context: LineContext): React.ReactNode => {
-    const { blockIndex, roleRuns, line, lineIndex, ranges, marker, baseFg, baseAttributes } =
-      context;
+    const {
+      blockIndex,
+      roleRuns,
+      line,
+      lineIndex,
+      ranges,
+      marker,
+      baseFg,
+      baseAttributes,
+      syntaxSpans,
+    } = context;
 
     return (
       <box key={`line-${lineIndex}`} style={{ flexDirection: "row" }}>
@@ -291,7 +341,7 @@ export function ThreadView({
           ref={surface.registerLine(blockIndex, lineIndex, line)}
           onMouseDown={surface.onLineMouseDown}
         >
-          {styledRunsFor(roleRuns, line, ranges).map((run, runIndex) =>
+          {styledRunsFor(roleRuns, line, ranges, syntaxSpans).map((run, runIndex) =>
             paintedSpan(run, runIndex, baseFg, baseAttributes),
           )}
         </text>
@@ -365,6 +415,7 @@ export function ThreadView({
     const roleRuns = renderedStyleRuns(block);
     const ranges = surface.rangesFor(blockIndex);
     const lines = wrapLines(renderedText(block), viewWidth > 0 ? viewWidth - marker.length - 6 : 0);
+    const syntaxSpans = syntaxSpansForBlock(block, blockIndex, display, codeSyntax);
     const lineRows: React.ReactNode[] = [];
 
     for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
@@ -381,6 +432,7 @@ export function ThreadView({
           marker,
           baseFg,
           baseAttributes,
+          syntaxSpans,
         }),
       );
       if (isLastLine) lineRows.push(headingRule(block));

package/src/components/WorkspacePanels.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ClientExtensionRegistry } from "../client-extension-registry";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { WorkspacePanels } from "./WorkspacePanels";
+
+export const meta: StoryMeta = { title: "Extensions/WorkspacePanels" };
+
+const registry = new ClientExtensionRegistry();
+
+void registry.load("example", (api) => {
+  api.registerView({
+    id: "details",
+    zone: "workspace.panels",
+    title: "Details",
+    Component: () => <text>Extension details</text>,
+  });
+});
+
+export const RegisteredView: Story = {
+  render: () => (
+    <WorkspacePanels
+      width={32}
+      projectMode="tree"
+      projectPanel={<text>Project files</text>}
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      onFocus={() => {}}
+      registry={registry}
+      context={{ workspace: "/repo", threadId: "thread-1" }}
+      theme={DARK}
+    />
+  ),
+  size: { width: 32, height: 10 },
+};

package/src/components/WorkspacePanels.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
+import type { ClientExtensionRegistry } from "../client-extension-registry";
+import type { Theme } from "../theme";
+import type { ProjectPanelMode } from "./AppShell";
+import { ExtensionZone, useClientExtensionSnapshot, visibleContributions } from "./ExtensionZone";
+import { FileTab, PanelColumn } from "./PanelColumn";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+/** The existing right pane owns built-in modes and selectable extension views. */
+export function WorkspacePanels(props: {
+  width: number;
+  projectMode: ProjectPanelMode;
+  projectPanel: React.ReactNode;
+  onToggleChanges: () => void;
+  onToggleProject: () => void;
+  onToggleRight: () => void;
+  onFocus: () => void;
+  focused?: boolean;
+  registry: ClientExtensionRegistry;
+  context: ExtensionUIContext;
+  theme: Theme;
+  onExtensionError?: (message: string) => void;
+}): React.ReactNode {
+  const { registry, context, theme, onExtensionError } = props;
+  const snapshot = useClientExtensionSnapshot(registry);
+  const { workspace, threadId } = context;
+  const visibility = useMemo(
+    () => visibleContributions(snapshot.views, { workspace, threadId }),
+    [snapshot.views, workspace, threadId],
+  );
+
+  useEffect(() => {
+    for (const error of visibility.errors) onExtensionError?.(error);
+  }, [visibility, onExtensionError]);
+
+  const views = visibility.items;
+  const [selectedView, setSelectedView] = useState<(typeof views)[number] | null>(null);
+  const selected = views.find(
+    ({ key, value }) => key === selectedView?.key && value === selectedView.value,
+  );
+
+  const showBuiltIn = (toggle: () => void): void => {
+    setSelectedView(null);
+    toggle();
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused || (key.name !== "[" && key.name !== "]")) return;
+    const choices = [null, ...views];
+    const current = selected ? views.indexOf(selected) + 1 : 0;
+    const step = key.name === "]" ? 1 : -1;
+
+    setSelectedView(choices[(current + step + choices.length) % choices.length] ?? null);
+  });
+
+  const toggles = (
+    <box style={{ flexDirection: "row", flexShrink: 0, alignItems: "center" }}>
+      <IconButton
+        glyph="changes"
+        active={!selected && props.projectMode === "changes"}
+        onPress={() => showBuiltIn(props.onToggleChanges)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph="project"
+        active={!selected && props.projectMode === "tree"}
+        onPress={() => showBuiltIn(props.onToggleProject)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph={NERD.sidebarRight}
+        onPress={props.onToggleRight}
+        tip="Toggle Sidebar"
+        theme={theme}
+      />
+    </box>
+  );
+
+  return (
+    <PanelColumn
+      width={props.width}
+      border="left"
+      header={
+        views.length > 0 ? (
+          <box style={{ flexDirection: "row", minWidth: 0 }}>
+            {views.map(({ key, value }) => (
+              <box key={key} onMouseUp={() => setSelectedView({ key, value })}>
+                <FileTab label={value.title} active={key === selected?.key} theme={theme} />
+              </box>
+            ))}
+          </box>
+        ) : null
+      }
+      headerRight={toggles}
+      onFocus={props.onFocus}
+      theme={theme}
+    >
+      {selected ? (
+        <ExtensionZone
+          zone="workspace.panels"
+          registry={registry}
+          context={context}
+          selectedViewId={selected.key}
+          onError={props.onExtensionError}
+        />
+      ) : (
+        props.projectPanel
+      )}
+    </PanelColumn>
+  );
+}

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -591,6 +591,18 @@ exports[`stories catalog Surfaces/EditorGrid/SplitGroups renders, snapshots, and
                                                   │                                                 
                                                   │                                                 
                                                   │                                                 
+"
+`;
+
+exports[`stories catalog Extensions/ExtensionZone/SidebarSection renders, snapshots, and carries its colors: Extensions/ExtensionZone/SidebarSection 1`] = `
+"Summary                         
+Two pending Threads             
+                                
+                                
+                                
+                                
+                                
+                                
 "
 `;
 
@@ -1593,6 +1605,20 @@ exports[`stories catalog Surfaces/WelcomePlayground/Welcome renders, snapshots,
   17   - docs        https://cueloop.dev/docs/                          
   18                                                                    
    type to comment · esc for nav mode                                   
+"
+`;
+
+exports[`stories catalog Extensions/WorkspacePanels/RegisteredView renders, snapshots, and carries its colors: Extensions/WorkspacePanels/RegisteredView 1`] = `
+"│ Details   changes  project   
+│‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
+│Project files                  
+                                
+                                
+                                
+                                
+                                
+                                
+                                
 "
 `;
 

package/src/intent-dispatch.test.ts

@@ -82,7 +82,7 @@ function baseController(): ReviewController {
     repoFiles: mock(() => Promise.resolve<string[]>([])),
     repoReadFile: mock(() => Promise.resolve<string | null>(null)),
     repoChanges: mock(() => Promise.resolve([])),
-    refreshPullRequest: mock(() => Promise.resolve()),
+    refreshDiff: mock(() => Promise.resolve()),
     open: mock(),
     deleteSession: mock(),
     renameSession: mock(),

package/src/run.ts

@@ -10,6 +10,10 @@ import { loadConfig } from "./config";
 import { perfMark } from "./perf/perf-timings";
 import { reportPerfMarks } from "./perf/perf-report";
 import { defaultLayout, type LaunchLayout } from "./launch-layout";
+import {
+  ClientExtensionRegistry,
+  loadInstalledClientExtensions,
+} from "./client-extension-registry";
 
 export interface RunClientOptions {
   sessionId?: string;
@@ -31,6 +35,11 @@ export async function runClient(options: RunClientOptions): Promise<number> {
     options.layout ??
     (options.sessionId === undefined ? (loadConfig().ui.layout ?? defaultLayout()) : undefined);
   const renderer = await createCliRenderer({ enableMouseMovement: true });
+  const extensionRegistry = new ClientExtensionRegistry();
+
+  void loadInstalledClientExtensions(extensionRegistry).catch((error) => {
+    extensionRegistry.reportError(`Client extension discovery: ${String(error)}`);
+  });
   // a full screen of measured elements each holds a frame listener; lift the default-10 ceiling so a
   // busy view does not trip a false leak warning, while a runaway subscription still would
   renderer.setMaxListeners(64);
@@ -66,6 +75,7 @@ export async function runClient(options: RunClientOptions): Promise<number> {
           sessionId: options.sessionId,
           appearance,
           layout,
+          extensionRegistry,
           onExit: shutdown,
           onReady: () => {
             perfMark("firstFrame");

package/src/serve.ts

@@ -45,7 +45,7 @@ async function captureFrozenArtifact(
 
     if (thread === undefined) return undefined;
 
-    const snapshot = await snapshotWorkbench(thread, (root) => probe.repoDiff(root));
+    const snapshot = await snapshotWorkbench(thread, (root, vcs) => probe.repoDiff(root, vcs));
 
     return snapshot === thread ? undefined : snapshot.artifact;
   } finally {

package/src/thread-code-syntax.ts

@@ -0,0 +1,45 @@
+/** Tree-sitter colors for fenced code blocks in a Thread, in rendered-text offsets. */
+
+import { getTreeSitterClient } from "@opentui/core";
+import type { DisplayBlock } from "./view-plan";
+import { renderedText } from "./view-plan";
+import { spansByLine, type SyntaxSpan } from "./diff-syntax";
+import { filetypeFor } from "./components/syntax-highlight";
+
+export type { SyntaxSpan } from "./diff-syntax";
+
+/** Highlight whole code blocks so multi-line syntax stays intact. */
+export async function highlightThreadCodeBlocks(
+  display: DisplayBlock[],
+): Promise<Map<number, SyntaxSpan[]>> {
+  const jobs = display.flatMap((block, blockIndex) => {
+    if (block.kind !== "code") return [];
+    const filetype = filetypeFor(block.work?.lang ?? block.base?.lang);
+
+    return filetype ? [{ blockIndex, filetype, source: renderedText(block) }] : [];
+  });
+  const byBlock = new Map<number, SyntaxSpan[]>();
+
+  if (jobs.length === 0) return byBlock;
+  const client = getTreeSitterClient();
+
+  await client.initialize();
+  for (const job of jobs) {
+    const result = await client.highlightOnce(job.source, job.filetype);
+
+    if (!result.highlights) continue;
+    const spans: SyntaxSpan[] = [];
+    let offset = 0;
+    const lines = job.source.split("\n");
+
+    spansByLine(job.source, result.highlights).forEach((lineSpans, lineIndex) => {
+      for (const span of lineSpans) {
+        spans.push({ start: offset + span.start, end: offset + span.end, group: span.group });
+      }
+      offset += lines[lineIndex]!.length + 1;
+    });
+    byBlock.set(job.blockIndex, spans);
+  }
+
+  return byBlock;
+}

package/src/thread-controller.ts

@@ -311,7 +311,7 @@ export interface ReviewController {
   /** The launch repo's working-tree changed files for the no-session welcome Changes tree. */
   repoChanges(): Promise<readonly DiffFileContents[]>;
   /** Explicitly pull a PR diff after its head moved. */
-  refreshPullRequest(): Promise<void>;
+  refreshDiff(): Promise<void>;
   /** Open a session from the inbox. */
   open(id: string): void;
   /** Delete a session for good (inbox delete); the inbox refreshes on the event. */
@@ -843,14 +843,29 @@ class Controller implements ReviewController {
     if (readsFrozenDiff(session)) return session!.artifact.files ?? [];
     // eager: capture the live working-tree diff so the Changes navigator and its file tabs render a real diff
     if (this.client?.repoDiff !== undefined) {
-      const diff = await this.client.repoDiff(this.sidebarRepoRoot());
+      const diff = await this.client.repoDiff(
+        this.sidebarRepoRoot(),
+        session?.artifact.meta.workbench ? (session.artifact.meta.vcs ?? "git") : undefined,
+      );
       // a thread switch during the request would let this response overwrite the new thread's diff,
       // showing changes from the wrong repo; compare the thread id, not the object, so an unrelated
       // re-render that replaced the snapshot for the SAME thread does not drop its diff to "No changes"
       if (this.snapshot.session?.id !== session?.id) return diff.files;
-      this.liveDiff = diff;
-      // rows() derive from the fresh patch; re-render so an open diff tab repaints
-      this.update({});
+      const changed =
+        this.liveDiff?.patch !== diff.patch ||
+        this.liveDiff.files.length !== diff.files.length ||
+        this.liveDiff.files.some(
+          (file, index) =>
+            file.path !== diff.files[index]?.path ||
+            file.status !== diff.files[index]?.status ||
+            file.oldContents !== diff.files[index]?.oldContents ||
+            file.newContents !== diff.files[index]?.newContents,
+        );
+      if (changed) {
+        this.liveDiff = diff;
+        // rows() derive from the fresh patch; re-render so an open diff tab repaints
+        this.update({});
+      }
 
       return diff.files;
     }
@@ -866,10 +881,10 @@ class Controller implements ReviewController {
     }));
   }
 
-  async refreshPullRequest(): Promise<void> {
+  async refreshDiff(): Promise<void> {
     const session = this.snapshot.session;
 
-    if (!session?.artifact.meta.prRefreshHeadSha || !this.client?.sessionRefreshDiff) return;
+    if (session?.artifact.type !== "diff" || !this.client?.sessionRefreshDiff) return;
     try {
       await this.client.sessionRefreshDiff(session.id);
     } catch (cause) {
@@ -1701,7 +1716,7 @@ class Controller implements ReviewController {
     const repoDiff = this.client?.repoDiff;
 
     return repoDiff
-      ? snapshotWorkbench(session, (root) => repoDiff.call(this.client, root))
+      ? snapshotWorkbench(session, (root, vcs) => repoDiff.call(this.client, root, vcs))
       : Promise.resolve(session);
   }
 

package/src/use-repo-changes.ts

@@ -0,0 +1,87 @@
+import { useEffect, useEffectEvent, useState } from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+
+const CHANGES_REFRESH_MS = 2000;
+const EMPTY_CHANGED_FILES: readonly DiffFileContents[] = [];
+
+interface RepoChangesOptions {
+  loadChanges: () => Promise<readonly DiffFileContents[]>;
+  visible: boolean;
+  diffSourceKey: string;
+  refreshAutomatically?: boolean;
+}
+
+interface RepoChangesSnapshot {
+  diffSourceKey: string;
+  files: readonly DiffFileContents[];
+}
+
+function sameChangedFiles(a: readonly DiffFileContents[], b: readonly DiffFileContents[]): boolean {
+  return (
+    a.length === b.length &&
+    a.every(
+      (file, index) =>
+        file.path === b[index]?.path &&
+        file.status === b[index]?.status &&
+        file.oldContents === b[index]?.oldContents &&
+        file.newContents === b[index]?.newContents,
+    )
+  );
+}
+
+/** Refresh the visible Changes tree from the working repo; keep captured diff reviews fixed. */
+export function useRepoChanges({
+  loadChanges,
+  visible,
+  diffSourceKey,
+  refreshAutomatically = true,
+}: RepoChangesOptions): readonly DiffFileContents[] {
+  const [snapshot, setSnapshot] = useState<RepoChangesSnapshot | null>(null);
+  const loadLatestChanges = useEffectEvent(loadChanges);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    let cancelled = false;
+    let requestInFlight = false;
+
+    const refreshChanges = async (): Promise<void> => {
+      if (requestInFlight) return;
+      requestInFlight = true;
+
+      try {
+        const files = await loadLatestChanges();
+
+        if (!cancelled) {
+          setSnapshot((previous) =>
+            previous?.diffSourceKey === diffSourceKey && sameChangedFiles(previous.files, files)
+              ? previous
+              : { diffSourceKey, files },
+          );
+        }
+      } catch {
+        if (!cancelled) {
+          setSnapshot((previous) =>
+            previous?.diffSourceKey === diffSourceKey && previous.files.length === 0
+              ? previous
+              : { diffSourceKey, files: EMPTY_CHANGED_FILES },
+          );
+        }
+      } finally {
+        requestInFlight = false;
+      }
+    };
+
+    void refreshChanges();
+    const timer = refreshAutomatically
+      ? setInterval(() => void refreshChanges(), CHANGES_REFRESH_MS)
+      : null;
+
+    return () => {
+      cancelled = true;
+      if (timer !== null) clearInterval(timer);
+    };
+  }, [visible, diffSourceKey, refreshAutomatically]);
+
+  return snapshot?.diffSourceKey === diffSourceKey ? snapshot.files : EMPTY_CHANGED_FILES;
+}

package/src/view-plan.test.ts

@@ -518,4 +518,28 @@ describe("rendered-text projection (markers concealed)", () => {
     expect(link.marked).toBe(true);
     expect(runs.find((run) => run.text === "see ")!.marked).toBe(false);
   });
+
+  test("syntax tokens split painted code runs without moving annotation marks", () => {
+    const roles = [{ text: "export value", role: "plain" as const, start: 0 }];
+    const runs = styledRunsFor(
+      roles,
+      { start: 0, end: 12 },
+      [{ start: 5, end: 9 }],
+      [{ start: 0, end: 6, group: "keyword" }],
+    );
+
+    expect(runs.map((run) => run.text).join("")).toBe("export value");
+    expect(
+      runs
+        .filter((run) => run.syntaxGroup === "keyword")
+        .map((run) => run.text)
+        .join(""),
+    ).toBe("export");
+    expect(
+      runs
+        .filter((run) => run.marked)
+        .map((run) => run.text)
+        .join(""),
+    ).toBe("t va");
+  });
 });

package/src/view-plan.ts

@@ -23,6 +23,7 @@ import {
 import { wordLevelChanges } from "./diff-intraline";
 import { spanRangeInBlock, type CharRange, type TextSpan } from "./thread-selection";
 import type { MarkRange, VisualLine } from "./mark-runs";
+import type { SyntaxSpan } from "./diff-syntax";
 
 // ── display model ─────────────────────────────
 
@@ -618,6 +619,26 @@ export interface StyledRun {
   marked: boolean;
   caretOnly: boolean;
   href?: string;
+  syntaxGroup?: string;
+}
+
+function addSyntaxBoundaries(
+  cuts: Set<number>,
+  line: VisualLine,
+  syntaxSpans: readonly SyntaxSpan[],
+): void {
+  for (const span of syntaxSpans) {
+    if (span.start > line.start && span.start < line.end) cuts.add(span.start);
+    if (span.end > line.start && span.end < line.end) cuts.add(span.end);
+  }
+}
+
+function syntaxGroupForRun(
+  syntaxSpans: readonly SyntaxSpan[],
+  start: number,
+  end: number,
+): string | undefined {
+  return syntaxSpans.find((span) => span.start <= start && end <= span.end)?.group;
 }
 
 /**
@@ -630,6 +651,7 @@ export function styledRunsFor(
   roleRuns: RenderedRun[],
   line: VisualLine,
   markRanges: MarkRange[],
+  syntaxSpans: readonly SyntaxSpan[] = [],
 ): StyledRun[] {
   const cuts = new Set<number>([line.start, line.end]);
 
@@ -648,6 +670,7 @@ export function styledRunsFor(
       cuts.add(end);
     }
   }
+  addSyntaxBoundaries(cuts, line, syntaxSpans);
   const edges = [...cuts].toSorted((left, right) => left - right);
   const runs: StyledRun[] = [];
 
@@ -668,6 +691,9 @@ export function styledRunsFor(
     };
 
     if (roleRun?.href !== undefined) styled.href = roleRun.href;
+    const syntaxGroup = syntaxGroupForRun(syntaxSpans, start, end);
+
+    if (syntaxGroup) styled.syntaxGroup = syntaxGroup;
     runs.push(styled);
   }
 

package/src/workbench-snapshot.test.ts

@@ -69,6 +69,24 @@ describe("snapshotWorkbench", () => {
     expect(viewFollowing(frozen).artifact.content).toBe("FRESH PATCH");
   });
 
+  test("pins the captured source and revision in a shared workbench", async () => {
+    const frozen = await snapshotWorkbench(
+      diffThread({ workbench: true, vcs: "jj", vcsRevisionId: "old" }),
+      async () => ({
+        ...LIVE,
+        vcs: "jj",
+        source: { changeId: "change", revisionId: "new" },
+      }),
+    );
+
+    expect(frozen.artifact.meta.vcsRevisionId).toBe("new");
+    expect(frozen.revisions[0]).toMatchObject({
+      content: LIVE.patch,
+      files: LIVE.files,
+      source: { vcs: "jj", changeId: "change", revisionId: "new" },
+    });
+  });
+
   test("passes a plain diff review through untouched and never queries the tree", async () => {
     const session = diffThread({ title: "PR #7" });
     const repoDiff = mock(async () => LIVE);