[Bug]: Focusing a collapsed project folder's new-thread action overprints its hidden-thread count #35482

#!/bin/sh
# Run from the top-level checkout with locked dependencies and Playwright Chromium installed:
#   sh repro.sh            (optionally OUT=<dir> to keep the four row screenshots)
# Writes a temporary browser test under apps/web/src/components, runs it from apps/web,
# and removes the test, screenshots and private state on exit. Exits 0 only when the
# folder overlap and the working thread-card control are both observed.
set -eu
CHECKOUT="${CHECKOUT:-$(pwd)}"
CHECKOUT=$(cd "$CHECKOUT" && pwd -P)
fixture=$(mktemp -d "${TMPDIR:-/tmp}/focus-fixture.XXXXXX")
TEST_REL=src/components/tmpFolderFocusRepro.browser.test.tsx
TEST_ABS="$CHECKOUT/apps/web/$TEST_REL"
[ ! -e "$TEST_ABS" ] || { echo 'Refusing to overwrite existing test'; exit 1; }
evidence="$CHECKOUT/apps/web/src/components/tmp-repro-evidence"
[ ! -e "$evidence" ] || { echo 'Refusing to overwrite evidence directory'; exit 1; }
mkdir -p "$evidence"
trap 'rm -f "$TEST_ABS"; rm -rf "$evidence" "$fixture"' EXIT INT TERM
mkdir -p "$fixture/user-home" "$fixture/tmp" "$fixture/t3"
# Reuse installed browser binaries read-only; runtime profile and state are private.
if [ -n "${PLAYWRIGHT_BROWSERS_PATH:-}" ]; then browsers=$PLAYWRIGHT_BROWSERS_PATH
elif [ -d "$HOME/Library/Caches/ms-playwright" ]; then browsers="$HOME/Library/Caches/ms-playwright"
else browsers="$HOME/.cache/ms-playwright"; fi
cat > "$fixture/test.tsx" <<'TS'
import "~/index.css";
import { createMemoryHistory } from "@tanstack/react-router";
import { DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts/settings";
import type * as Context from "effect/Context";
import { expect, it, vi } from "vite-plus/test";
import { commands, page, userEvent } from "vite-plus/test/browser";
import { AppRoot } from "~/AppRoot";
import "~/components/ChatView";
import { __setClientSettingsForTests, persistClientSettingsPatch } from "~/hooks/useSettings";
import { getRouter } from "~/router";
import { ENVIRONMENT_ID, installFakeEnvironment, threadWithHistory, type FakeDriver } from "../../test/fakeEnvironment";
import { act, render } from "../../test/render";
vi.mock("../../../../packages/client-runtime/src/connection/driver.ts", async (importOriginal) => {
  const [actual, { fakeDriver }, Layer] = await Promise.all([
    importOriginal<{ readonly ConnectionDriver: Context.Key<unknown, FakeDriver> }>(),
    import("../../test/fakeEnvironment"), import("effect/Layer"),
  ]);
  const [Effect, Stream] = await Promise.all([import("effect/Effect"),import("effect/Stream")]);
  // Ordinary server setting: start drafts in local mode, so no unresolved project-file RPC can hold the click.
  const localConfig = (config: any) => ({...config, settings:{...config.settings, defaultThreadEnvMode:"local"}});
  const configuredDriver = {...fakeDriver, connect:(entry: any) => Effect.map(fakeDriver.connect(entry),lease => ({...lease,session:{...lease.session,
    initialConfig:Effect.map(lease.session.initialConfig,localConfig),
    subscribeServerConfig:() => Stream.map(lease.session.subscribeServerConfig(),event => event.type === "snapshot" ? {...event,config:localConfig(event.config)} : event),
  }}))};
  return { ...actual, layer: Layer.succeed(actual.ConnectionDriver, configuredDriver) };
});
vi.mock(import("~/rpc/requestLatencyState"), async (original) => ({ ...(await original()), trackRpcRequestSent: () => {} }));
function rect(el: Element) {
  const r = el.getBoundingClientRect();
  return { left:r.left, right:r.right, top:r.top, bottom:r.bottom };
}
function folderState(row: Element, count: Element, action: HTMLElement) {
  const c = rect(count), a = rect(action);
  const hit = document.elementFromPoint((c.left+c.right)/2, (c.top+c.bottom)/2);
  return {
    focusedIsAction: document.activeElement === action,
    focusVisible: action.matches(":focus-visible"), rowHovered: row.matches(":hover"),
    countText: count.textContent?.trim(), countVisibility: getComputedStyle(count).visibility,
    actionOpacity: getComputedStyle(action.parentElement!).opacity,
    countBox:c, actionBox:a,
    intersects:c.left<a.right && a.left<c.right && c.top<a.bottom && a.top<c.bottom,
    hitIsAction: hit === action || action.contains(hit),
  };
}
it("production sidebar: keyboard folder overlap beside a working thread card control", async () => {
  await page.viewport(1400,900);
  const threads = ["active", "hidden-one", "hidden-two"].map(name => threadWithHistory(name,1));
  using _environment = installFakeEnvironment(threads);
  __setClientSettingsForTests({ ...DEFAULT_CLIENT_SETTINGS, boringSidebarEnabled:true, onboardingCompletedAt:"2026-01-01T00:00:00.000Z" });
  const router = getRouter(createMemoryHistory({initialEntries:[`/${ENVIRONMENT_ID}/${threads[0]!.id}`]}));
  await router.load();
  await using screen = await render(<AppRoot router={router}/>, {router:false});
  const folder = page.getByRole("button",{name:/^render/});
  await expect.element(folder).toHaveAttribute("aria-expanded","true");
  await userEvent.click(folder);
  await expect.element(folder).toHaveAttribute("aria-expanded","false");
  const row = folder.element().closest("li")!;
  const count = row.querySelector("span.tabular-nums")!;
  const action = row.querySelector<HTMLElement>("[data-sidebar-action-for]")!;
  await commands.resetPointer();
  const initial = folderState(row,count,action);
  console.log("ENVIRONMENT",JSON.stringify({userAgent:navigator.userAgent,platform:navigator.platform}));
  await page.screenshot({element:row,path:EVIDENCE_PATH+"/folder-rest.png"});
  console.log("FOLDER_REST",JSON.stringify(initial));
  expect(initial.countText).toBe("2"); expect(initial.countVisibility).toBe("visible"); expect(initial.actionOpacity).toBe("0");
  // The folder was focused by its collapse click. Native Tab reaches its production action.
  await userEvent.tab();
  const keyboard = folderState(row,count,action);
  console.log("FOLDER_TAB",JSON.stringify(keyboard));
  expect(keyboard.focusedIsAction).toBe(true); expect(keyboard.focusVisible).toBe(true);
  expect(keyboard.rowHovered).toBe(false); expect(keyboard.countVisibility).toBe("visible");
  expect(keyboard.actionOpacity).toBe("1"); expect(keyboard.intersects).toBe(true); expect(keyboard.hitIsAction).toBe(true);
  await page.screenshot({element:row,path:EVIDENCE_PATH+"/folder-tab.png"});
  await userEvent.tab();
  const away = folderState(row,count,action);
  console.log("FOLDER_TAB_AWAY",JSON.stringify(away));
  expect(away.focusedIsAction).toBe(false); expect(away.countVisibility).toBe("visible"); expect(away.actionOpacity).toBe("0");
  // Real production callback, including route/composer effects; do not replace it with a no-op.
  await userEvent.hover(action);
  await userEvent.click(action);
  await commands.resetPointer();
  console.log("FOLDER_CLICK_IMMEDIATE",JSON.stringify(folderState(row,count,action)));
  await new Promise(resolve => setTimeout(resolve,1000));
  console.log("FOLDER_CLICK_SETTLED",JSON.stringify({...folderState(row,count,action), activeTag:document.activeElement?.tagName, activeLabel:document.activeElement?.getAttribute("aria-label")}));
  await vi.waitFor(() => expect(router.state.location.pathname.startsWith("/draft/")).toBe(true));
  console.log("NEW_THREAD_NAVIGATED",true);
  await page.screenshot({element:row,path:EVIDENCE_PATH+"/folder-click.png"});
  // Reusing the already-open empty draft returns without navigation or composer focus.
  await userEvent.hover(action);
  await userEvent.click(action);
  await commands.resetPointer();
  await new Promise(resolve => setTimeout(resolve,1000));
  const repeated = folderState(row,count,action);
  console.log("FOLDER_CLICK_REUSE_DRAFT",JSON.stringify(repeated));
  expect(repeated.focusedIsAction).toBe(true); expect(repeated.focusVisible).toBe(false);
  expect(repeated.countVisibility).toBe("visible"); expect(repeated.actionOpacity).toBe("1"); expect(repeated.intersects).toBe(true);
  await page.screenshot({element:row,path:EVIDENCE_PATH+"/folder-repeat-click.png"});
  await userEvent.tab();
  const repeatedAway = folderState(row,count,action);
  console.log("FOLDER_REUSE_TAB_AWAY",JSON.stringify(repeatedAway));
  expect(repeatedAway.actionOpacity).toBe("0"); expect(repeatedAway.countVisibility).toBe("visible");
  // Switch to the real thread card variant fixed in #4574, without replacing the row.
  await act(() => persistClientSettingsPatch({boringSidebarEnabled:false},async () => {}));
  await expect.element(page.getByText("Thread active",{exact:true}).first()).toBeVisible();
  const slot = await vi.waitFor(() => {
    const el = screen.container.querySelector<HTMLElement>('[class*="group/sidebar-status-slot"]');
    expect(el).not.toBeNull(); return el!;
  });
  const status = slot.firstElementChild!;
  const controls = slot.lastElementChild!;
  const threadAction = controls.querySelector<HTMLElement>("button")!;
  expect(threadAction).not.toBeNull();
  await commands.resetPointer();
  console.log("THREAD_REST",JSON.stringify({statusOpacity:getComputedStyle(status).opacity, controlsOpacity:getComputedStyle(controls).opacity}));
  expect(getComputedStyle(status).opacity).toBe("1"); expect(getComputedStyle(controls).opacity).toBe("0");
  // Set the native Tab starting point at the row; keyboard (not synthetic focus) enters the action.
  const threadRow = slot.closest('[data-sidebar-row]') ?? slot.closest('li')!.querySelector('[data-sidebar-row]')!;
  await act(() => (threadRow as HTMLElement).focus());
  for (let n=0; n<5 && !controls.contains(document.activeElement); n++) await userEvent.tab();
  console.log("THREAD_TAB",JSON.stringify({focusInsideControls:controls.contains(document.activeElement),focusVisible:document.activeElement?.matches(":focus-visible"),statusOpacity:getComputedStyle(status).opacity,controlsOpacity:getComputedStyle(controls).opacity}));
  expect(controls.contains(document.activeElement)).toBe(true);
  expect(getComputedStyle(status).opacity).toBe("0"); expect(getComputedStyle(controls).opacity).toBe("1");
  await act(() => (document.activeElement as HTMLElement).blur());
  console.log("THREAD_BLUR",JSON.stringify({statusOpacity:getComputedStyle(status).opacity,controlsOpacity:getComputedStyle(controls).opacity}));
  expect(getComputedStyle(status).opacity).toBe("1"); expect(getComputedStyle(controls).opacity).toBe("0");
},60000);
TS
python3 - "$fixture/test.tsx" "$TEST_ABS" "$evidence" <<'PYCODE'
import sys,json
s=open(sys.argv[1]).read()
s=s.replace('import "~/index.css";', 'import "~/index.css";\nconst EVIDENCE_PATH='+json.dumps(sys.argv[3])+';')
open(sys.argv[2],'w').write(s)
PYCODE
cd "$CHECKOUT/apps/web"
set +e
env -u NODE_ENV HOME="$fixture/user-home" TMPDIR="$fixture/tmp" T3CODE_HOME="$fixture/t3" PLAYWRIGHT_BROWSERS_PATH="$browsers" PATH="$CHECKOUT/node_modules/.bin:$PATH" vp test run --project browser --silent=false "$TEST_REL"

result=$?
set -e
if [ -n "${OUT:-}" ]; then for png in "$evidence"/*.png; do [ ! -f "$png" ] || cp "$png" "$OUT/"; done; fi
exit "$result"