void handleTabContextMenu(event, surface)}
className={cn(
"group flex h-7 min-w-25 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-sm",
active
@@ -383,6 +458,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
) : null}
+ {props.layoutControls}
{props.activeSurfaceId === null ? (
diff --git a/apps/web/src/components/Sidebar.dblclick.browser.tsx b/apps/web/src/components/Sidebar.dblclick.browser.tsx
new file mode 100644
index 00000000000..a4e6baaee9b
--- /dev/null
+++ b/apps/web/src/components/Sidebar.dblclick.browser.tsx
@@ -0,0 +1,256 @@
+import "../index.css";
+
+import { EnvironmentId, ProjectId, ThreadId } from "@t3tools/contracts";
+import { useCallback, useRef, useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+import { cleanup, render } from "vitest-browser-react";
+
+import { AppAtomRegistryProvider } from "../rpc/atomRegistry";
+import { DEFAULT_INTERACTION_MODE } from "../types";
+import type { SidebarThreadSummary } from "../types";
+import { SidebarThreadRow } from "./Sidebar";
+
+// Double-click-to-rename is a desktop affordance; force the non-mobile path so
+// the rename input is reachable regardless of the test browser viewport.
+vi.mock("~/hooks/useMediaQuery", () => ({
+ useIsMobile: () => false,
+ useMediaQuery: () => false,
+}));
+
+const THREAD_ID = ThreadId.make("thread-1");
+const ENVIRONMENT_ID = EnvironmentId.make("environment-local");
+const PROJECT_ID = ProjectId.make("project-1");
+const INITIAL_TITLE = "Original title";
+
+const ROW_TESTID = `thread-row-${THREAD_ID}`;
+const TITLE_TESTID = `thread-title-${THREAD_ID}`;
+
+// Spies live at module scope so their call history survives the row's
+// re-renders; reset between tests.
+const spies = {
+ handleThreadClick: vi.fn(),
+ startThreadRename: vi.fn(),
+ navigateToThread: vi.fn(),
+ handleMultiSelectContextMenu: vi.fn(async () => {}),
+ handleThreadContextMenu: vi.fn(async () => {}),
+ clearSelection: vi.fn(),
+ commitRename: vi.fn(),
+ attemptArchiveThread: vi.fn(async () => {}),
+ openPrLink: vi.fn(),
+};
+
+function buildThread(title: string): SidebarThreadSummary {
+ return {
+ id: THREAD_ID,
+ environmentId: ENVIRONMENT_ID,
+ projectId: PROJECT_ID,
+ title,
+ interactionMode: DEFAULT_INTERACTION_MODE,
+ session: null,
+ createdAt: "2024-01-01T00:00:00.000Z",
+ archivedAt: null,
+ updatedAt: undefined,
+ latestTurn: null,
+ branch: null,
+ worktreePath: null,
+ latestUserMessageAt: null,
+ hasPendingApprovals: false,
+ hasPendingUserInput: false,
+ hasActionableProposedPlan: false,
+ goal: null,
+ };
+}
+
+// Mirrors the real parent (`SidebarProjectItem`): holds the rename state, wires
+// `startThreadRename`, and commits by clearing the rename state and persisting
+// the new title back onto the thread so the row re-renders with it.
+function Harness() {
+ const [title, setTitle] = useState(INITIAL_TITLE);
+ const [renamingThreadKey, setRenamingThreadKey] = useState
(null);
+ const [renamingTitle, setRenamingTitle] = useState("");
+ const [confirmingArchiveThreadKey, setConfirmingArchiveThreadKey] = useState(null);
+ const renamingInputRef = useRef(null);
+ const renamingCommittedRef = useRef(false);
+ const confirmArchiveButtonRefs = useRef(new Map());
+
+ const startThreadRename = useCallback((threadKey: string, nextTitle: string) => {
+ spies.startThreadRename(threadKey, nextTitle);
+ setRenamingThreadKey(threadKey);
+ setRenamingTitle(nextTitle);
+ renamingCommittedRef.current = false;
+ }, []);
+
+ const commitRename = useCallback(
+ async (threadRef: unknown, newTitle: string, originalTitle: string) => {
+ spies.commitRename(threadRef, newTitle, originalTitle);
+ const trimmed = newTitle.trim();
+ if (trimmed.length > 0) {
+ setTitle(trimmed);
+ }
+ setRenamingThreadKey(null);
+ renamingInputRef.current = null;
+ },
+ [],
+ );
+
+ const cancelRename = useCallback(() => {
+ setRenamingThreadKey(null);
+ renamingInputRef.current = null;
+ }, []);
+
+ return (
+
+
+
+ );
+}
+
+describe("SidebarThreadRow double-click rename", () => {
+ beforeEach(() => {
+ for (const spy of Object.values(spies)) spy.mockClear();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ it("double-clicking a row starts the inline rename, focused with text selected", async () => {
+ render();
+
+ await expect.element(page.getByTestId(TITLE_TESTID)).toBeVisible();
+
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+
+ const input = page.getByRole("textbox");
+ await expect.element(input).toBeVisible();
+
+ const element = input.element() as HTMLInputElement;
+ expect(element.value).toBe(INITIAL_TITLE);
+ // The existing rename-input ref focuses + selects the whole title.
+ expect(document.activeElement).toBe(element);
+ expect(element.selectionStart).toBe(0);
+ expect(element.selectionEnd).toBe(INITIAL_TITLE.length);
+ });
+
+ it("Enter commits the rename and the new title persists on the row", async () => {
+ render();
+
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+ const input = page.getByRole("textbox");
+ await expect.element(input).toBeVisible();
+
+ await userEvent.fill(input, "Renamed thread");
+ await userEvent.keyboard("{Enter}");
+
+ // commitRename was invoked with (threadRef, newTitle, originalTitle).
+ expect(spies.commitRename).toHaveBeenCalledTimes(1);
+ expect(spies.commitRename).toHaveBeenCalledWith(
+ expect.anything(),
+ "Renamed thread",
+ INITIAL_TITLE,
+ );
+
+ // Input is gone and the row now shows the persisted title.
+ const title = page.getByTestId(TITLE_TESTID);
+ await expect.element(title).toBeVisible();
+ await expect.element(title).toHaveTextContent("Renamed thread");
+ });
+
+ it("Escape cancels the rename without committing", async () => {
+ render();
+
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+ await expect.element(page.getByRole("textbox")).toBeVisible();
+
+ await userEvent.keyboard("{Escape}");
+
+ expect(spies.commitRename).not.toHaveBeenCalled();
+ const title = page.getByTestId(TITLE_TESTID);
+ await expect.element(title).toBeVisible();
+ await expect.element(title).toHaveTextContent(INITIAL_TITLE);
+ });
+
+ it("double-clicking inside the rename input keeps the edit (does not reset to the title)", async () => {
+ render();
+
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+ const input = page.getByRole("textbox");
+ await expect.element(input).toBeVisible();
+
+ await userEvent.fill(input, "Edited but not committed");
+ // Double-clicking inside the input (e.g. to select a word) must not bubble
+ // to the row and restart the rename, which would wipe the edit.
+ await userEvent.dblClick(input);
+
+ expect((input.element() as HTMLInputElement).value).toBe("Edited but not committed");
+ expect(spies.commitRename).not.toHaveBeenCalled();
+ });
+
+ it("double-clicking the row chrome while already renaming does not restart/reset it", async () => {
+ render();
+
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+ const input = page.getByRole("textbox");
+ await expect.element(input).toBeVisible();
+ await userEvent.fill(input, "Edited");
+ expect(spies.startThreadRename).toHaveBeenCalledTimes(1);
+
+ // Double-click the row element itself (chrome, not the input).
+ const rowEl = page.getByTestId(ROW_TESTID).element();
+ rowEl.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true, detail: 2 }));
+
+ // Guard short-circuits: rename is not restarted and the edit is preserved.
+ expect(spies.startThreadRename).toHaveBeenCalledTimes(1);
+ expect((input.element() as HTMLInputElement).value).toBe("Edited");
+ });
+
+ it("modifier double-click is multi-select intent and does not start a rename", async () => {
+ render();
+
+ await userEvent.keyboard("{Shift>}");
+ await userEvent.dblClick(page.getByTestId(ROW_TESTID));
+ await userEvent.keyboard("{/Shift}");
+
+ await expect.element(page.getByTestId(TITLE_TESTID)).toBeVisible();
+ expect(page.getByRole("textbox").elements()).toHaveLength(0);
+ });
+
+ it("single click routes through the navigation handler and does not start a rename", async () => {
+ render();
+
+ await userEvent.click(page.getByTestId(ROW_TESTID));
+
+ expect(spies.handleThreadClick).toHaveBeenCalledTimes(1);
+ // No rename input: the title span is still shown.
+ await expect.element(page.getByTestId(TITLE_TESTID)).toBeVisible();
+ expect(page.getByRole("textbox").elements()).toHaveLength(0);
+ });
+});
diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 8172ef2d807..731b0674300 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -11,6 +11,7 @@ import {
getProjectSortTimestamp,
hasUnseenCompletion,
isContextMenuPointerDown,
+ isTrailingDoubleClick,
orderItemsByPreferredIds,
resolveProjectStatusIndicator,
resolveSidebarNewThreadSeedContext,
@@ -171,6 +172,24 @@ describe("shouldClearThreadSelectionOnMouseDown", () => {
});
});
+describe("isTrailingDoubleClick", () => {
+ it("treats a single click as a normal activation", () => {
+ expect(isTrailingDoubleClick(1)).toBe(false);
+ });
+
+ it("treats synthetic/keyboard activations (detail 0) as a normal activation", () => {
+ expect(isTrailingDoubleClick(0)).toBe(false);
+ });
+
+ it("ignores the second click of a double-click so it does not navigate", () => {
+ expect(isTrailingDoubleClick(2)).toBe(true);
+ });
+
+ it("ignores further clicks of a triple-click", () => {
+ expect(isTrailingDoubleClick(3)).toBe(true);
+ });
+});
+
describe("resolveSidebarNewThreadEnvMode", () => {
it("uses the app default when the caller does not request a specific mode", () => {
expect(
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index b9dd27dfb03..41f4e39bb73 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -160,6 +160,15 @@ export function shouldClearThreadSelectionOnMouseDown(target: HTMLElement | null
return !target.closest(THREAD_SELECTION_SAFE_SELECTOR);
}
+// A double-click dispatches two `click` events before `dblclick`: the first has
+// `detail === 1`, the second `detail === 2`. The second click must not run the
+// row's single-click navigation, otherwise double-click-to-rename would also
+// navigate. `MouseEvent.detail` is 0 for synthetic/keyboard activations, which
+// still count as a normal single activation.
+export function isTrailingDoubleClick(detail: number): boolean {
+ return detail > 1;
+}
+
export function resolveSidebarNewThreadEnvMode(input: {
requestedEnvMode?: SidebarNewThreadEnvMode;
defaultEnvMode: SidebarNewThreadEnvMode;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index ac79cd36631..da4d4647c91 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -164,6 +164,7 @@ import {
getSidebarThreadIdsToPrewarm,
resolveAdjacentThreadId,
isContextMenuPointerDown,
+ isTrailingDoubleClick,
resolveProjectStatusIndicator,
resolveSidebarNewThreadSeedContext,
resolveSidebarNewThreadEnvMode,
@@ -178,6 +179,7 @@ import {
import { sortThreads } from "../lib/threadSort";
import { SidebarUpdatePill } from "./sidebar/SidebarUpdatePill";
import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+import { useIsMobile } from "~/hooks/useMediaQuery";
import { CommandDialogTrigger } from "./ui/command";
import { readEnvironmentApi } from "../environmentApi";
import { useSettings, useUpdateSettings } from "~/hooks/useSettings";
@@ -292,6 +294,7 @@ interface SidebarThreadRowProps {
renamingThreadKey: string | null;
renamingTitle: string;
setRenamingTitle: (title: string) => void;
+ startThreadRename: (threadKey: string, title: string) => void;
renamingInputRef: React.RefObject;
renamingCommittedRef: React.RefObject;
confirmingArchiveThreadKey: string | null;
@@ -319,7 +322,7 @@ interface SidebarThreadRowProps {
openPrLink: (event: React.MouseEvent, prUrl: string) => void;
}
-const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowProps) {
+export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowProps) {
const {
orderedProjectThreadKeys,
isActive,
@@ -328,6 +331,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
renamingThreadKey,
renamingTitle,
setRenamingTitle,
+ startThreadRename,
renamingInputRef,
renamingCommittedRef,
confirmingArchiveThreadKey,
@@ -352,6 +356,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
environmentId: thread.environmentId,
threadId: thread.id,
});
+ const isMobile = useIsMobile();
const discoveredPorts = useThreadDiscoveredPorts({
environmentId: thread.environmentId,
threadId: thread.id,
@@ -451,6 +456,24 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
},
[discoveredPorts, navigateToThread, threadRef],
);
+ const handleRowDoubleClick = useCallback(
+ (event: React.MouseEvent) => {
+ // Already renaming this row: a double-click on the row chrome (outside the
+ // input) must not restart and discard the in-progress edit.
+ if (renamingThreadKey === threadKey) return;
+ // On mobile the first tap navigates and closes the sidebar sheet, so the
+ // inline rename can't be shown. Renaming there stays on the context menu.
+ if (isMobile) return;
+ // cmd/ctrl/shift double-clicks are multi-select intent, not rename.
+ if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+ // Ignore double-clicks bubbling from nested controls (PR status, port,
+ // archive buttons) โ only the row body should enter inline rename.
+ if ((event.target as HTMLElement).closest("button, a")) return;
+ event.preventDefault();
+ startThreadRename(threadKey, thread.title);
+ },
+ [isMobile, renamingThreadKey, startThreadRename, threadKey, thread.title],
+ );
const handleRowKeyDown = useCallback(
(event: React.KeyboardEvent) => {
if (event.key !== "Enter" && event.key !== " ") return;
@@ -524,6 +547,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
void commitRename(threadRef, renamingTitle, thread.title);
}
}, [commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef]);
+ // Keep clicks/double-clicks inside the rename input from bubbling to the row.
+ // Without stopping `dblclick`, double-clicking to select a word would re-fire
+ // the row's rename handler and reset the in-progress edit back to the title.
const handleRenameInputClick = useCallback((event: React.MouseEvent) => {
event.stopPropagation();
}, []);
@@ -592,6 +618,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
onClick={handleRowClick}
onMouseDown={handleRowMouseDown}
onAuxClick={handleRowAuxClick}
+ onDoubleClick={handleRowDoubleClick}
onKeyDown={handleRowKeyDown}
onContextMenu={handleRowContextMenu}
>
@@ -623,6 +650,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
onKeyDown={handleRenameInputKeyDown}
onBlur={handleRenameInputBlur}
onClick={handleRenameInputClick}
+ onDoubleClick={handleRenameInputClick}
/>
) : (
@@ -805,6 +833,7 @@ interface SidebarProjectThreadListProps {
renamingThreadKey: string | null;
renamingTitle: string;
setRenamingTitle: (title: string) => void;
+ startThreadRename: (threadKey: string, title: string) => void;
renamingInputRef: React.RefObject;
renamingCommittedRef: React.RefObject;
confirmingArchiveThreadKey: string | null;
@@ -855,6 +884,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
renamingThreadKey,
renamingTitle,
setRenamingTitle,
+ startThreadRename,
renamingInputRef,
renamingCommittedRef,
confirmingArchiveThreadKey,
@@ -906,6 +936,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
renamingThreadKey={renamingThreadKey}
renamingTitle={renamingTitle}
setRenamingTitle={setRenamingTitle}
+ startThreadRename={startThreadRename}
renamingInputRef={renamingInputRef}
renamingCommittedRef={renamingCommittedRef}
confirmingArchiveThreadKey={confirmingArchiveThreadKey}
@@ -1642,6 +1673,13 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
return;
}
+ // Ignore the trailing click of a plain double-click so it doesn't navigate
+ // while a double-click is starting an inline rename. Placed after the
+ // modifier branches so cmd/shift selection still processes every click.
+ if (isTrailingDoubleClick(event.detail)) {
+ return;
+ }
+
if (currentSelectionCount > 0) {
clearSelection();
}
@@ -1836,6 +1874,12 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
renamingInputRef.current = null;
}, []);
+ const startThreadRename = useCallback((threadKey: string, title: string) => {
+ setRenamingThreadKey(threadKey);
+ setRenamingTitle(title);
+ renamingCommittedRef.current = false;
+ }, []);
+
const commitRename = useCallback(
async (threadRef: ScopedThreadRef, newTitle: string, originalTitle: string) => {
const threadKey = scopedThreadKey(threadRef);
@@ -1995,9 +2039,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
);
if (clicked === "rename") {
- setRenamingThreadKey(threadKey);
- setRenamingTitle(thread.title);
- renamingCommittedRef.current = false;
+ startThreadRename(threadKey, thread.title);
return;
}
@@ -2045,6 +2087,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
markThreadUnread,
memberProjectByScopedKey,
project.cwd,
+ startThreadRename,
],
);
@@ -2167,6 +2210,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
renamingThreadKey={renamingThreadKey}
renamingTitle={renamingTitle}
setRenamingTitle={setRenamingTitle}
+ startThreadRename={startThreadRename}
renamingInputRef={renamingInputRef}
renamingCommittedRef={renamingCommittedRef}
confirmingArchiveThreadKey={confirmingArchiveThreadKey}
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 28cb120571c..d840f916ab8 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -56,6 +56,7 @@ import {
import { useComposerPathSearch } from "../../lib/composerPathSearchState";
import { type ElementContextDraft } from "../../lib/elementContext";
import { ComposerPendingElementContexts } from "./ComposerPendingElementContexts";
+import { ComposerPendingReviewComments } from "./ComposerPendingReviewComments";
import { ComposerPreviewAnnotationCards } from "./ComposerPreviewAnnotationCards";
import {
shouldUseCompactComposerPrimaryActions,
@@ -117,6 +118,7 @@ import {
import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
import { searchProviderSkills } from "../../providerSkillSearch";
import { useMediaQuery } from "../../hooks/useMediaQuery";
+import type { ReviewCommentContext } from "../../reviewCommentContext";
const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
@@ -406,6 +408,7 @@ export interface ChatComposerHandle {
terminalContexts: TerminalContextDraft[];
elementContexts: ElementContextDraft[];
previewAnnotations: PreviewAnnotationPayload[];
+ reviewComments: ReviewCommentContext[];
selectedPromptEffort: string | null;
selectedModelOptionsForDispatch: unknown;
selectedModelSelection: ModelSelection;
@@ -617,6 +620,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
const composerTerminalContexts = composerDraft.terminalContexts;
const composerElementContexts = composerDraft.elementContexts;
const composerPreviewAnnotations = composerDraft.previewAnnotations;
+ const composerReviewComments = composerDraft.reviewComments;
const nonPersistedComposerImageIds = composerDraft.nonPersistedImageIds;
const setComposerDraftPrompt = useComposerDraftStore((store) => store.setPrompt);
@@ -638,6 +642,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
const removeComposerDraftPreviewAnnotation = useComposerDraftStore(
(store) => store.removePreviewAnnotation,
);
+ const removeComposerDraftReviewComment = useComposerDraftStore(
+ (store) => store.removeReviewComment,
+ );
const clearComposerDraftPersistedAttachments = useComposerDraftStore(
(store) => store.clearPersistedAttachments,
);
@@ -898,12 +905,16 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
prompt,
imageCount: composerImages.length,
terminalContexts: composerTerminalContexts,
- elementContextCount: composerElementContexts.length + composerPreviewAnnotations.length,
+ elementContextCount:
+ composerElementContexts.length +
+ composerPreviewAnnotations.length +
+ composerReviewComments.length,
}),
[
composerElementContexts.length,
composerImages.length,
composerPreviewAnnotations.length,
+ composerReviewComments.length,
composerTerminalContexts,
prompt,
],
@@ -2039,6 +2050,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
terminalContexts: composerTerminalContextsRef.current,
elementContexts: composerElementContextsRef.current,
previewAnnotations: composerPreviewAnnotations,
+ reviewComments: composerReviewComments,
selectedPromptEffort,
selectedModelOptionsForDispatch,
selectedModelSelection,
@@ -2058,6 +2070,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
composerTerminalContextsRef,
composerElementContextsRef,
composerPreviewAnnotations,
+ composerReviewComments,
isConnecting,
isComposerApprovalState,
pendingUserInputs.length,
@@ -2313,6 +2326,19 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
/>
)}
+ {!isComposerCollapsedMobile &&
+ !isComposerApprovalState &&
+ pendingUserInputs.length === 0 &&
+ composerReviewComments.length > 0 && (
+
+ removeComposerDraftReviewComment(composerDraftTarget, commentId)
+ }
+ className="mb-3"
+ />
+ )}
+
{!isComposerCollapsedMobile &&
!isComposerApprovalState &&
pendingUserInputs.length === 0 &&
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index db694644a06..2bfc204cec7 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -72,15 +72,15 @@ export const ChatHeader = memo(function ChatHeader({
primaryEnvironmentId,
});
return (
-
-
+
+
{activeThreadTitle}
@@ -92,7 +92,7 @@ export const ChatHeader = memo(function ChatHeader({
diff --git a/apps/web/src/components/chat/ComposerPendingReviewComments.browser.tsx b/apps/web/src/components/chat/ComposerPendingReviewComments.browser.tsx
new file mode 100644
index 00000000000..a5aa6e224e8
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerPendingReviewComments.browser.tsx
@@ -0,0 +1,41 @@
+import "../../index.css";
+
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+import { render } from "vitest-browser-react";
+
+import { ComposerPendingReviewComments } from "./ComposerPendingReviewComments";
+
+describe("ComposerPendingReviewComments", () => {
+ afterEach(() => {
+ document.body.innerHTML = "";
+ });
+
+ it("renders a removable file comment pill", async () => {
+ const onRemove = vi.fn();
+ const screen = await render(
+
,
+ );
+
+ await expect.element(page.getByText("src/app.ts L2 to L3")).toBeVisible();
+ await page.getByRole("button", { name: "Remove comment on src/app.ts L2 to L3" }).click();
+ expect(onRemove).toHaveBeenCalledWith("comment-1");
+
+ await screen.unmount();
+ });
+});
diff --git a/apps/web/src/components/chat/ComposerPendingReviewComments.tsx b/apps/web/src/components/chat/ComposerPendingReviewComments.tsx
new file mode 100644
index 00000000000..0a47b02357a
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerPendingReviewComments.tsx
@@ -0,0 +1,60 @@
+import { MessageCircle, X } from "lucide-react";
+
+import {
+ COMPOSER_INLINE_CHIP_CLASS_NAME,
+ COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME,
+ COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
+ COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
+} from "../composerInlineChip";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import type { ReviewCommentContext } from "~/reviewCommentContext";
+import { cn } from "~/lib/utils";
+
+interface ComposerPendingReviewCommentsProps {
+ comments: ReadonlyArray
;
+ onRemove: (commentId: string) => void;
+ className?: string;
+}
+
+export function ComposerPendingReviewComments({
+ comments,
+ onRemove,
+ className,
+}: ComposerPendingReviewCommentsProps) {
+ if (comments.length === 0) return null;
+
+ return (
+
+ {comments.map((comment) => {
+ const label = `${comment.filePath} ${comment.rangeLabel}`;
+ return (
+
+
+
+ {label}
+
+
+ }
+ />
+
+ {comment.text}
+
+
+ );
+ })}
+
+ );
+}
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 743de5aa6ca..f7da222f441 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -296,6 +296,42 @@ describe("MessagesTimeline", () => {
expect(markup).not.toContain("</review_comment>");
});
+ it("renders file review comments as source code instead of diffs", async () => {
+ const { MessagesTimeline } = await import("./MessagesTimeline");
+ const markup = renderToStaticMarkup(
+ ',
+ "Clarify this.",
+ "```md",
+ "# Plan",
+ "- Step one",
+ "```",
+ "",
+ ].join("\n"),
+ createdAt: "2026-03-17T19:12:28.000Z",
+ streaming: false,
+ },
+ },
+ ]}
+ />,
+ );
+
+ expect(markup).toContain("plan.md");
+ expect(markup).toContain("Clarify this.");
+ expect(markup).toContain("# Plan");
+ expect(markup).not.toContain('data-testid="file-diff"');
+ });
+
it("renders a failure marker for failed tool lifecycle entries", async () => {
const { MessagesTimeline } = await import("./MessagesTimeline");
const markup = renderToStaticMarkup(
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 3377d80b8ae..3ed72bea84c 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -103,6 +103,7 @@ import { SkillInlineText } from "./SkillInlineText";
import { formatWorkspaceRelativePath } from "../../filePathDisplay";
import {
buildReviewCommentRenderablePatch,
+ formatReviewCommentFence,
parseReviewCommentMessageSegments,
type ReviewCommentContext,
} from "../../reviewCommentContext";
@@ -1275,6 +1276,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
function UserMessageReviewCommentCard({ comment }: { comment: ReviewCommentContext }) {
const ctx = use(TimelineRowCtx);
+ const fenceLanguage = comment.fenceLanguage ?? "diff";
const renderablePatch = getRenderablePatch(
buildReviewCommentRenderablePatch(comment),
`review-comment:${comment.id}`,
@@ -1295,6 +1297,15 @@ function UserMessageReviewCommentCard({ comment }: { comment: ReviewCommentConte
) : relativePath && file.data ? (
- file.data.truncated ? (
+ isMarkdown && renderMarkdown ? (
+
+ ) : file.data.truncated ? (
@@ -267,8 +828,11 @@ export default function FilePreviewPanel({
environmentId={environmentId}
cwd={cwd}
relativePath={relativePath}
+ composerDraftTarget={composerDraftTarget}
contents={file.data.contents}
resolvedTheme={resolvedTheme}
+ revealRequestId={revealRequestId}
+ onPostRender={onFilePostRender}
onPendingChange={onPendingChange}
/>
)
diff --git a/apps/web/src/components/files/LocalCommentAnnotation.tsx b/apps/web/src/components/files/LocalCommentAnnotation.tsx
new file mode 100644
index 00000000000..a2765b02d37
--- /dev/null
+++ b/apps/web/src/components/files/LocalCommentAnnotation.tsx
@@ -0,0 +1,90 @@
+import { MessageCircle, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import { Textarea } from "~/components/ui/textarea";
+
+interface LocalCommentAnnotationProps {
+ kind: "draft" | "comment";
+ rangeLabel: string;
+ text: string;
+ onCancel: () => void;
+ onComment: (text: string) => void;
+ onDelete: () => void;
+}
+
+export function LocalCommentAnnotation({
+ kind,
+ rangeLabel,
+ text: savedText,
+ onCancel,
+ onComment,
+ onDelete,
+}: LocalCommentAnnotationProps) {
+ const [text, setText] = useState("");
+
+ if (kind === "comment") {
+ return (
+
event.stopPropagation()}
+ >
+
+
+ Local comment
+ {rangeLabel}
+
+
+
+ {savedText}
+
+
+ );
+ }
+
+ return (
+
event.stopPropagation()}
+ >
+
+
+ Local comment
+
+
Comment on lines {rangeLabel}
+