@cueloop/client 0.1.0-alpha.68 → 0.1.0-alpha.69

package/src/app-screens.tsx

@@ -1,7 +1,9 @@
+import { ScrollArea } from "./components/ScrollArea";
 import React, { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import type { DiffFileContents, ReviewSession, VerdictKind } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
+import type { QuickAction } from "./config";
 import type { Mode, TreeAsk } from "./intent-dispatch";
 import type { Intent } from "./keymap";
 import type { ReviewController, ToastState } from "./session-controller";
@@ -15,13 +17,13 @@ import { ThemeProvider } from "./components/theme-context";
 import type { InboxRow } from "./components/session-tree";
 import { SettingsDialog } from "./components/SettingsDialog";
 import { CompletionOverlay } from "./components/CompletionOverlay";
-import { InboxList } from "./components/InboxList";
-import { WelcomeSurface } from "./components/WelcomeSurface";
+import { ThreadTree } from "./components/ThreadTree";
+import { WelcomePlayground } from "./components/WelcomePlayground";
 import { AppShell, type ProjectPanelMode } from "./components/AppShell";
 import { EditorGrid } from "./components/EditorGrid";
 import { ProjectTreeView } from "./components/ProjectTreeView";
 import { ChangesFileTree } from "./components/ChangesColumn";
-import { FileContentsView } from "./components/FileContentsView";
+import { BareWorkbenchFileView } from "./components/BareWorkbenchFileView";
 import { useChangesWorkbench } from "./use-changes-workbench";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
@@ -150,6 +152,10 @@ export function NoThreadShell(props: {
   pinnedIds: ReadonlySet<string>;
   onPin: (id: string) => void;
   onRename: (id: string, title: string) => void;
+  /** Drives the "/" quick actions and skills in the welcome playground's composer. */
+  quickActions: QuickAction[];
+  /** Reports the welcome composer's open state, so the shell suspends its inbox keys while typing. */
+  onWelcomeComposingChange: (composing: boolean) => void;
 }): React.ReactNode {
   const {
     rows,
@@ -165,6 +171,8 @@ export function NoThreadShell(props: {
     pinnedIds,
     onPin,
     onRename,
+    quickActions,
+    onWelcomeComposingChange,
   } = props;
   const confirming = mode.type === "confirmDelete" ? mode : null;
   // The bare-launch shell is the same four panes as a thread: the Thread pane waits in its empty state
@@ -179,8 +187,8 @@ export function NoThreadShell(props: {
         onToggleSidebar={onToggleSidebar}
         onOpenMenu={onOpenMenu}
         threadsPanel={
-          <scrollbox style={{ flexGrow: 1 }} focused={false}>
-            <InboxList
+          <ScrollArea>
+            <ThreadTree
               rows={rows}
               cursor={inboxCursor}
               pinnedIds={pinnedIds}
@@ -193,7 +201,7 @@ export function NoThreadShell(props: {
               onRename={onRename}
               theme={theme}
             />
-          </scrollbox>
+          </ScrollArea>
         }
         threadTitle=""
         threadPanel={
@@ -205,7 +213,7 @@ export function NoThreadShell(props: {
               justifyContent: "center",
             }}
           >
-            <text fg={theme.textDim}>Select a thread</text>
+            <text fg={theme.textDim}>{rows.length === 0 ? "no threads" : "Select a thread"}</text>
           </box>
         }
         changesOpen={workbench.changesOpen}
@@ -227,11 +235,19 @@ export function NoThreadShell(props: {
             zoomed={workbench.zoomed}
             renderTab={(tab) =>
               tab.kind === "welcome" ? (
-                <WelcomeSurface version={CLIENT_VERSION} theme={theme} />
+                <WelcomePlayground
+                  version={CLIENT_VERSION}
+                  quickActions={quickActions}
+                  onComposingChange={onWelcomeComposingChange}
+                  theme={theme}
+                />
               ) : (
-                <FileContentsView
+                <BareWorkbenchFileView
                   path={tab.path ?? ""}
-                  loadContents={(path) => controller.repoReadFile(path)}
+                  controller={controller}
+                  quickActions={quickActions}
+                  onComposingChange={onWelcomeComposingChange}
+                  onExit={() => {}}
                   theme={theme}
                 />
               )

package/src/app-view-model.ts

@@ -29,6 +29,19 @@ export function isWalking(isDiff: boolean, walk: { index: number } | null): bool
   return isDiff && walk !== null;
 }
 
+/**
+ * A prototype renders as a kitty pixel mockup only in the opt-in experimental mode:
+ * the flag is on and the artifact carries an HTML entry. Otherwise it is the default
+ * markdown design doc, rendered through the thread/markdown path.
+ */
+export function isPixelPrototypeMode(
+  isPrototype: boolean,
+  prototypePixels: boolean,
+  prototypePath: string | undefined,
+): boolean {
+  return isPrototype && prototypePixels && Boolean(prototypePath);
+}
+
 export function resolveOverlay(
   mode: Mode,
   completionPhase: Completion["phase"],
@@ -92,19 +105,20 @@ export function buildRenderFlags(params: {
   session: ReviewSession;
   isOwner: boolean;
   isDiff: boolean;
-  isPrototype: boolean;
+  isPixelPrototype: boolean;
   resolved: boolean;
   menuDialog: "keybinds" | "settings" | null;
   resolvedIds: Set<string>;
 }) {
-  const { session, isOwner, isDiff, isPrototype, resolved, menuDialog, resolvedIds } = params;
+  const { session, isOwner, isDiff, isPixelPrototype, resolved, menuDialog, resolvedIds } = params;
 
   return {
     showOwnerActions: isOwner && !isDiff && !resolved,
     prototypeCanComment: isOwner && !resolved,
     chromeHidden: menuDialog !== null,
     prototypePath: session.artifact.meta.prototypePath ?? "",
-    railResolvedIds: isDiff || isPrototype ? null : resolvedIds,
+    // a markdown prototype interleaves resolved cards like a plan; only the pixel mockup opts out
+    railResolvedIds: isDiff || isPixelPrototype ? null : resolvedIds,
   };
 }
 

package/src/components/AnnotatableFileView.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { SCHEMA_VERSION, type ReviewSession } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+
+export const meta: StoryMeta = { title: "Surfaces/AnnotatableFileView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+const SESSION: ReviewSession = {
+  schemaVersion: SCHEMA_VERSION,
+  id: "ses_story",
+  workspace: { repoRoot: "/repo", branch: "main" },
+  artifact: { type: "plan", content: "# Plan\n", meta: {} },
+  revisions: [{ revision: 1, content: "# Plan\n", submittedAt: "2026-01-01T00:00:00Z" }],
+  annotations: [],
+  verdict: null,
+  status: "pending",
+  createdAt: "2026-01-01T00:00:00Z",
+};
+
+const noop = (): void => {};
+
+export const Loaded: Story = {
+  render: () => (
+    <AnnotatableFileView
+      path="src/add.ts"
+      loadContents={() => Promise.resolve(SAMPLE)}
+      session={SESSION}
+      quickActions={[]}
+      observer={false}
+      onAddComment={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/components/AnnotatableFileView.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * A project file is its own annotation surface: selecting a line and typing leaves a comment whose
+ * anchor quotes that file line, handed up as an Anchor the app persists with a file target.
+ */
+
+import { describe, expect, mock, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { SCHEMA_VERSION, type Anchor, type ReviewSession } from "@cueloop/schema";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+import { DARK } from "../theme";
+import { dragText, typeText, pressKey, waitForText } from "../test-support";
+
+const SAMPLE = "export function add(a: number, b: number) {\n  return a + b;\n}\n";
+
+function planSession(): ReviewSession {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "ses_plan",
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: "# Plan\n", meta: {} },
+    revisions: [{ revision: 1, content: "# Plan\n", submittedAt: "2026-01-01T00:00:00Z" }],
+    annotations: [],
+    verdict: null,
+    status: "pending",
+    createdAt: "2026-01-01T00:00:00Z",
+  };
+}
+
+const noop = (): void => {};
+
+describe("AnnotatableFileView", () => {
+  test("commenting a file line hands up an anchor that quotes the line", async () => {
+    const onAddComment = mock((_anchor: Anchor, _body: string) => {});
+    const setup = await testRender(
+      <AnnotatableFileView
+        path="src/add.ts"
+        loadContents={() => Promise.resolve(SAMPLE)}
+        session={planSession()}
+        quickActions={[]}
+        observer={false}
+        onAddComment={onAddComment}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+        theme={DARK}
+      />,
+      { width: 64, height: 12 },
+    );
+
+    // Act - select the middle line, type a comment, send it
+    await waitForText(setup, "return a + b");
+    await dragText(setup, "return a + b", "return a + b", "return a + b".length);
+    await typeText(setup, "why not reduce?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert - the surface built an anchor quoting the file line and handed it up with the body
+    expect(onAddComment).toHaveBeenCalled();
+    const [anchor, body] = onAddComment.mock.calls[0]!;
+    expect(anchor.quote).toContain("return a + b");
+    expect(body).toContain("why not reduce?");
+
+    setup.renderer.destroy();
+  });
+
+  test("a head-side (deleted-line) note never rebinds onto the current file", async () => {
+    const session = planSession();
+    // a note left on the removed side of this file: the worktree view must not show it
+    session.annotations = [
+      {
+        id: "h1",
+        kind: "comment",
+        anchor: { quote: "return a + b", prefix: "", suffix: "" },
+        target: { kind: "file", path: "src/add.ts", rev: "head" },
+        body: "deleted-side note",
+        createdAt: "2026-01-01T00:00:00Z",
+      },
+    ];
+    const setup = await testRender(
+      <AnnotatableFileView
+        path="src/add.ts"
+        loadContents={() => Promise.resolve(SAMPLE)}
+        session={session}
+        quickActions={[]}
+        observer={false}
+        onAddComment={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+        theme={DARK}
+      />,
+      { width: 64, height: 12 },
+    );
+
+    await waitForText(setup, "return a + b");
+
+    // Assert - the current file shows, but the head-side note is not attached to it
+    expect(setup.captureCharFrame()).not.toContain("deleted-side note");
+
+    setup.renderer.destroy();
+  });
+});

package/src/components/AnnotatableFileView.tsx

@@ -0,0 +1,126 @@
+// A project file shown as its own annotatable surface: the file's lines render through the diff
+// sheet as context rows (one line-number gutter, no +/- sign), so selecting text leaves a comment
+// anchored to the file exactly as a plan or diff comment is. Used where a review session exists to
+// hold the notes; the bare-launch welcome shell uses the read-only FileContentsView instead.
+
+import React, { useEffect, useRef, useState } from "react";
+import { makeAnchor, annotationTarget, type Anchor, type ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { useComponentTheme } from "./theme-context";
+import { DiffContentView } from "./DiffContentView";
+import { diffRowBlocks, fileContentsRows, marksByRows } from "../view-diff";
+
+export interface AnnotatableFileViewProps {
+  path: string;
+  loadContents: (path: string) => Promise<string | null>;
+  session: ReviewSession;
+  quickActions: QuickAction[];
+  observer: boolean;
+  resolved?: boolean;
+  suspended?: boolean;
+  focusedAnnotationId?: string;
+  onFocusAnnotation?: (annotationId: string | undefined) => void;
+  onComposingChange?: (composing: boolean) => void;
+  onCursorChange?: (rowIndex: number) => void;
+  onObserverBlocked?: (reason: "observer" | "resolved") => void;
+  /** Persist a comment on this file; the view built the anchor against the file's own lines. */
+  onAddComment: (anchor: Anchor, body: string) => void;
+  onReply: (rootAnnotationId: string, body: string) => void;
+  onUpdateAnnotation: (id: string, body: string) => void;
+  onExit: () => void;
+  theme?: Theme;
+}
+
+/** A finished read for a specific path; `lines` is null when the file could not be read. */
+interface FileLoad {
+  path: string;
+  lines: string[] | null;
+}
+
+export function AnnotatableFileView(props: AnnotatableFileViewProps): React.ReactNode {
+  const tokens = useComponentTheme(props.theme);
+  const [loaded, setLoaded] = useState<FileLoad | null>(null);
+  const loadRef = useRef(props.loadContents);
+  useEffect(() => {
+    loadRef.current = props.loadContents;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current(props.path).then(
+      (contents) => {
+        if (alive)
+          setLoaded({ path: props.path, lines: contents === null ? null : contents.split("\n") });
+      },
+      () => {
+        if (alive) setLoaded({ path: props.path, lines: null });
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [props.path]);
+
+  if (loaded === null || loaded.path !== props.path) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (loaded.lines === null) {
+    return (
+      <box
+        style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", paddingBottom: 2 }}
+      >
+        <text fg={tokens.textDim}>File deleted</text>
+      </box>
+    );
+  }
+
+  const rows = fileContentsRows(props.path, loaded.lines.join("\n"));
+  // the file's worktree notes: these rows are the current file, so a head-side (deleted-line) note
+  // must stay orphaned here rather than rebind to similar surviving text
+  const fileNotes = props.session.annotations.filter((annotation) => {
+    const target = annotationTarget(annotation);
+
+    return target.kind === "file" && target.path === props.path && target.rev === "worktree";
+  });
+
+  return (
+    <DiffContentView
+      rows={rows}
+      session={props.session}
+      marks={marksByRows(fileNotes, rows, props.focusedAnnotationId)}
+      quickActions={props.quickActions}
+      observer={props.observer}
+      commentsEnabled
+      resolved={props.resolved}
+      suspended={props.suspended}
+      fileView
+      onComposingChange={props.onComposingChange}
+      onObserverBlocked={props.onObserverBlocked}
+      onCursorChange={props.onCursorChange}
+      focusedAnnotationId={props.focusedAnnotationId}
+      onFocusAnnotation={props.onFocusAnnotation}
+      onAnnotate={(span, body) =>
+        props.onAddComment(
+          makeAnchor(
+            diffRowBlocks(rows),
+            span.start.blockIndex,
+            span.start.char,
+            span.end.char,
+            span.end.blockIndex,
+          ),
+          body,
+        )
+      }
+      onReply={props.onReply}
+      onUpdateAnnotation={props.onUpdateAnnotation}
+      onExit={props.onExit}
+      theme={props.theme}
+    />
+  );
+}

package/src/components/AnnotationCards.tsx

@@ -116,19 +116,19 @@ function SlashList({
 
   if (items.length === 0) return <text fg={tokens.textDim}>no matching actions</text>;
 
+  const nameColumn = Math.min(36, Math.max(16, ...visible.map((item) => item.name.length + 5)));
+
   return (
     <box style={{ flexDirection: "column" }}>
       {visible.map((item, offset) => {
         const index = start + offset;
         const isSelected = index === selected;
+        const name = `${isSelected ? "→ " : "  "}/${item.name}`.padEnd(nameColumn);
 
         return (
-          <text key={item.name} style={{ flexShrink: 1 }}>
-            <span fg={isSelected ? tokens.accent : tokens.textDim}>{isSelected ? "→ " : "  "}</span>
-            <span fg={isSelected ? tokens.text : tokens.textMuted}>
-              {`action:${item.name}`.padEnd(34)}
-            </span>
-            <span fg={tokens.textDim}>{item.description.slice(0, 52)}</span>
+          <text key={item.name} style={{ flexShrink: 0, wrapMode: "none" }}>
+            <span fg={isSelected ? tokens.accent : tokens.textMuted}>{name}</span>
+            <span fg={tokens.textDim}>{item.description}</span>
           </text>
         );
       })}

package/src/components/AppShell.tsx

@@ -47,6 +47,34 @@ export interface AppShellProps {
   projectWidth?: number;
 }
 
+/** The right region's reserved width: the open project pane, nothing when the region is closed, else the collapsed rail. */
+function rightRegionColumns(
+  projectOpen: boolean,
+  projectWidth: number,
+  rightRegionClosed: boolean,
+  collapsedRailWidth: number,
+): number {
+  if (projectOpen) return projectWidth;
+
+  return rightRegionClosed ? 0 : collapsedRailWidth;
+}
+
+/** The Thread header's right cluster: the owner actions, plus the reopen control when the region is closed. */
+function threadHeaderRight(
+  threadActions: React.ReactNode,
+  reopenControl: React.ReactNode,
+  showReopen: boolean,
+): React.ReactNode {
+  if (!showReopen) return threadActions;
+
+  return (
+    <box style={{ flexDirection: "row", alignItems: "center" }}>
+      {threadActions ? <box style={{ paddingRight: 2 }}>{threadActions}</box> : null}
+      {reopenControl}
+    </box>
+  );
+}
+
 export function AppShell({
   sidebarOpen,
   onToggleSidebar,
@@ -72,15 +100,21 @@ export function AppShell({
 }: AppShellProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const { width: terminalWidth } = useTerminalDimensions();
+  // with both panels closed the right region collapses to nothing: the reopen toggle
+  // rides the thread header, and the middle reclaims the width the rail would have taken
+  const rightRegionClosed = !projectOpen && !changesOpen;
   // Thread and Changes would otherwise split the middle as two flexBasis-0 items, and Yoga adds the
   // Changes left border on top of its share: at even widths the halves come out fractional, the
   // Changes side rounds up, and the row overflows a cell under the Project border. Sizing the Thread
   // pane to a whole number leaves Changes the lone flex item, which lays out exactly.
   const collapsedRailWidth = 4;
-  const middleWidth =
-    terminalWidth -
-    (sidebarOpen ? threadsWidth : 0) -
-    (projectOpen ? projectWidth : collapsedRailWidth);
+  const rightRegionWidth = rightRegionColumns(
+    projectOpen,
+    projectWidth,
+    rightRegionClosed,
+    collapsedRailWidth,
+  );
+  const middleWidth = terminalWidth - (sidebarOpen ? threadsWidth : 0) - rightRegionWidth;
   const threadPaneWidth =
     changesOpen && !zoomHideThread ? Math.max(20, Math.floor(middleWidth / 2)) : undefined;
 
@@ -127,6 +161,21 @@ export function AppShell({
     </box>
   );
 
+  // the reopen control - a divider tick then the toggle - shared by the collapsed
+  // rail and, when the rail is suppressed, the thread header
+  const reopenRightControl = (
+    <>
+      <text fg={tokens.border}>{"│"}</text>
+      <IconButton
+        glyph={NERD.sidebarRightOff}
+        onPress={onToggleRight}
+        tip="Toggle Right Sidebar"
+        marginLeft={1}
+        theme={tokens}
+      />
+    </>
+  );
+
   return (
     <box
       style={{
@@ -153,7 +202,12 @@ export function AppShell({
                     {threadTitle ? <text fg={tokens.textDim}>{threadTitle}</text> : null}
                   </box>
                 }
-                headerRight={threadActions}
+                // with the region closed, the reopen toggle rides the thread header instead of an empty column
+                headerRight={threadHeaderRight(
+                  threadActions,
+                  reopenRightControl,
+                  rightRegionClosed,
+                )}
                 theme={tokens}
               >
                 {threadPanel}
@@ -186,8 +240,8 @@ export function AppShell({
               >
                 {projectPanel}
               </PanelColumn>
-            ) : (
-              // collapsed: a divider tick above the continuous header underline holds the reopen toggle;
+            ) : rightRegionClosed ? null : (
+              // Changes open but Project closed: a divider tick above the continuous header underline holds the reopen toggle;
               // the rule lives in the header only, never running the pane's full height. The extra column
               // of right padding keeps the reopen icon off the terminal's last column, which squeezes it
               <box style={{ flexDirection: "column", width: 4 }}>
@@ -204,14 +258,7 @@ export function AppShell({
                     borderColor: tokens.border,
                   }}
                 >
-                  <text fg={tokens.border}>{"│"}</text>
-                  <IconButton
-                    glyph={NERD.sidebarRightOff}
-                    onPress={onToggleRight}
-                    tip="Toggle Right Sidebar"
-                    marginLeft={1}
-                    theme={tokens}
-                  />
+                  {reopenRightControl}
                 </box>
               </box>
             )}

package/src/components/BareWorkbenchFileView.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { BareWorkbenchFileView, type WorkbenchCommenter } from "./BareWorkbenchFileView";
+
+export const meta: StoryMeta = { title: "Surfaces/BareWorkbenchFileView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+const controller: WorkbenchCommenter = {
+  repoReadFile: () => Promise.resolve(SAMPLE),
+  commentOnWorkbench: () => Promise.resolve(),
+};
+
+export const Loaded: Story = {
+  render: () => (
+    <BareWorkbenchFileView
+      path="src/add.ts"
+      controller={controller}
+      quickActions={[]}
+      onExit={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/components/BareWorkbenchFileView.tsx

@@ -0,0 +1,69 @@
+// A project file in the bare launch shell: annotatable like any file, but no thread exists yet. The
+// first comment find-or-creates the per-repo workbench thread (controller.commentOnWorkbench), which
+// opens it - so this ephemeral view lives only until that first note promotes it to a real thread.
+
+import React from "react";
+import {
+  SCHEMA_VERSION,
+  type Anchor,
+  type AnnotationTarget,
+  type ReviewSession,
+} from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+
+/** The controller slice this view needs: read a file, and route a comment to the workbench thread. */
+export interface WorkbenchCommenter {
+  repoReadFile(path: string): Promise<string | null>;
+  commentOnWorkbench(anchor: Anchor, target: AnnotationTarget, body: string): Promise<void>;
+}
+
+/** An empty, unsaved thread: it holds no notes, just enough shape for the annotation surface. */
+function draftThread(): ReviewSession {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "workbench-draft",
+    workspace: { repoRoot: "", branch: "main" },
+    artifact: { type: "diff", content: "", meta: {} },
+    revisions: [],
+    annotations: [],
+    verdict: null,
+    status: "pending",
+    createdAt: "1970-01-01T00:00:00.000Z",
+  };
+}
+
+export interface BareWorkbenchFileViewProps {
+  path: string;
+  controller: WorkbenchCommenter;
+  quickActions: QuickAction[];
+  /** Reports whether the composer is open, so the shell suspends its inbox keys while typing. */
+  onComposingChange?: (composing: boolean) => void;
+  onExit: () => void;
+  theme?: Theme;
+}
+
+export function BareWorkbenchFileView(props: BareWorkbenchFileViewProps): React.ReactNode {
+  return (
+    <AnnotatableFileView
+      path={props.path}
+      loadContents={(path) => props.controller.repoReadFile(path)}
+      session={draftThread()}
+      quickActions={props.quickActions}
+      observer={false}
+      onComposingChange={props.onComposingChange}
+      onAddComment={(anchor: Anchor, body: string) =>
+        void props.controller.commentOnWorkbench(
+          anchor,
+          { kind: "file", path: props.path, rev: "worktree" },
+          body,
+        )
+      }
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={props.onExit}
+      theme={props.theme}
+    />
+  );
+}