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,  };} // 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<string | null>(null);  const [renamingTitle, setRenamingTitle] = useState("");  const [confirmingArchiveThreadKey, setConfirmingArchiveThreadKey] = useState<string | null>(null);  const renamingInputRef = useRef<HTMLInputElement | null>(null);  const renamingCommittedRef = useRef(false);  const confirmArchiveButtonRefs = useRef(new Map<string, HTMLButtonElement>());   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 (    <AppAtomRegistryProvider>      <ul>        <SidebarThreadRow          thread={buildThread(title)}          projectCwd={null}          orderedProjectThreadKeys={[]}          isActive={false}          jumpLabel={null}          appSettingsConfirmThreadArchive={false}          renamingThreadKey={renamingThreadKey}          renamingTitle={renamingTitle}          setRenamingTitle={setRenamingTitle}          startThreadRename={startThreadRename}          renamingInputRef={renamingInputRef}          renamingCommittedRef={renamingCommittedRef}          confirmingArchiveThreadKey={confirmingArchiveThreadKey}          setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}          confirmArchiveButtonRefs={confirmArchiveButtonRefs}          handleThreadClick={spies.handleThreadClick}          navigateToThread={spies.navigateToThread}          handleMultiSelectContextMenu={spies.handleMultiSelectContextMenu}          handleThreadContextMenu={spies.handleThreadContextMenu}          clearSelection={spies.clearSelection}          commitRename={commitRename}          cancelRename={cancelRename}          attemptArchiveThread={spies.attemptArchiveThread}          openPrLink={spies.openPrLink}        />      </ul>    </AppAtomRegistryProvider>  );} 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(<Harness />);     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(<Harness />);     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(<Harness />);     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(<Harness />);     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(<Harness />);     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(<Harness />);     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(<Harness />);     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);  });});