[Bug]: Prompt Stash draws over the draft when the bottom terminal leaves little space above the composer #35429

#!/bin/sh
# Run from the top-level checkout with locked dependencies and Playwright Chromium installed:
#   sh repro.sh            (optionally OUT=<dir> to keep the 1366x768 screenshots)
# Writes a temporary browser test under apps/web/src/components, runs each viewport case
# in its own process, and removes the test, screenshots and private state on exit.
set -eu
checkout=$(pwd)
fixture=$(mktemp -d "${TMPDIR:-/tmp}/stash-layer-proof.XXXXXX")
name="verifyStashLayer$$"
test_file="$checkout/apps/web/src/components/$name.browser.test.tsx"
cleanup() {
  rm -f "$test_file" "$checkout/apps/web/src/components/$name-stash.png" "$checkout/apps/web/src/components/$name-slash.png"
  rm -rf "$fixture"
}
trap cleanup EXIT HUP INT TERM
mkdir -p "$fixture/user-home" "$fixture/tmp" "$fixture/t3-home"
if [ -n "${PLAYWRIGHT_BROWSERS_PATH:-}" ]; then browser_cache=$PLAYWRIGHT_BROWSERS_PATH
elif [ -d "$HOME/Library/Caches/ms-playwright" ]; then browser_cache="$HOME/Library/Caches/ms-playwright"
else browser_cache="$HOME/.cache/ms-playwright"; fi
cat > "$fixture/fixture.browser.test.tsx" <<'TSX'
import "~/index.css";
import { createMemoryHistory } from "@tanstack/react-router";
import { scopeThreadRef } from "@t3tools/client-runtime/environment";
import { DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts/settings";
import type * as Context from "effect/Context";
import { expect, it, vi } from "vite-plus/test";
import { page } from "vite-plus/test/browser";
import { AppRoot } from "~/AppRoot";
import "~/components/ChatView";
import { useComposerDraftStore } from "~/composerDraftStore";
import { usePromptStashStore } from "~/promptStashStore";
import { useTerminalUiStateStore } from "~/terminalUiStateStore";
import { __setClientSettingsForTests } from "~/hooks/useSettings";
import { getRouter } from "~/router";
import { ENVIRONMENT_ID, installFakeEnvironment, threadWithHistory, type FakeDriver } from "../../test/fakeEnvironment";
import { render } from "../../test/render";

vi.mock("../../../../packages/client-runtime/src/connection/driver.ts", async (importOriginal) => {
  const [actual, { fakeDriver }, Layer, Effect, Stream] = await Promise.all([
    importOriginal<{ readonly ConnectionDriver: Context.Key<unknown, FakeDriver> }>(),
    import("../../test/fakeEnvironment"), import("effect/Layer"), import("effect/Effect"), import("effect/Stream"),
  ]);
  const withSkills = (config) => ({...config, providers: config.providers.map(provider => ({...provider,
    skills: Array.from({length:20},(_,i)=>({name:`layout-skill-${i}`,description:`Layout skill ${i}`,path:`/workspace/render/.agents/skills/layout-${i}/SKILL.md`,enabled:true}))
  }))});
  const driver = {...fakeDriver, connect: (...args) => Effect.map(fakeDriver.connect(...args), lease => ({...lease, session: {...lease.session,
    initialConfig: Effect.map(lease.session.initialConfig, withSkills),
    subscribeServerConfig: () => Stream.map(lease.session.subscribeServerConfig(), event => ({...event,config:withSkills(event.config)}))
  }}))};
  return { ...actual, layer: Layer.succeed(actual.ConnectionDriver, driver) };
});
vi.mock(import("~/rpc/requestLatencyState"), async (original) => ({ ...(await original()), trackRpcRequestSent: () => {} }));

function rect(selector: string) {
  const el = document.querySelector<HTMLElement>(selector);
  expect(el, selector).not.toBeNull();
  const r = el!.getBoundingClientRect();
  return { top: r.top, bottom: r.bottom, height: r.height, left: r.left, right: r.right };
}
function measure(kind: string, viewport: string) {
  const layer = rect('[data-composer-drawer-layer="true"]');
  const content = rect(kind === "stash" ? '[data-composer-stash-drawer="true"]' : '[data-composer-command-drawer="true"]');
  const composer = rect('[data-chat-composer-main-surface="true"]');
  const editor = rect('[data-testid="composer-editor"]');
  const terminal = rect('[data-thread-terminal-drawer]');
  const x = (editor.left + editor.right) / 2;
  const y = Math.max(editor.top + 8, Math.min(content.bottom - 8, editor.bottom - 8));
  const hit = document.elementFromPoint(x, y);
  const data = { kind, viewport, composer, editor, terminal, layer, content,
    spill: Math.round(content.bottom - layer.bottom),
    editorOverlap: Math.round(Math.max(0, Math.min(content.bottom, editor.bottom) - Math.max(content.top, editor.top))),
    pointerHitsStashInsideEditor: !!hit?.closest('[data-composer-stash-drawer="true"]'),
    bottomPastViewport: Math.max(0, Math.round(content.bottom - window.innerHeight)),
    visibleStashRows: [...document.querySelectorAll('[data-stash-entry]')].filter(el => { const r=el.getBoundingClientRect(); return r.bottom>content.top && r.top<content.bottom; }).length,
  };
  console.log('MEASURE ' + JSON.stringify(data));
  return data;
}

for (const [width, height, terminalHeight] of [[1440,900,320],[1366,768,320],[1280,720,320],[1024,600,320],[1440,900,400],[1920,1080,320]] as const) {
  it(`production composer ${width}x${height} terminal=${terminalHeight}`, async () => {
    await page.viewport(width, height);
    const thread = threadWithHistory(`stash-${width}-${height}-${terminalHeight}`, 1);
    using _environment = installFakeEnvironment([thread]);
    __setClientSettingsForTests({ ...DEFAULT_CLIENT_SETTINGS, onboardingCompletedAt: "2026-01-01T00:00:00.000Z", composerRichTextEnabled: false });
    const ref = scopeThreadRef(ENVIRONMENT_ID, thread.id);
    const draft = Array.from({length: 10}, (_, i) => `Draft line ${i+1}: preserve these instructions while choosing a stashed prompt.`).join('\n');
    useComposerDraftStore.getState().setPrompt(ref, draft);
    usePromptStashStore.setState({entries: []});
    for (let i=0;i<20;i++) usePromptStashStore.getState().stashEntry({id:`entry-${i}`,createdAt:"2026-10-01T00:00:00.000Z",prompt:`Saved prompt ${i}: investigate the UI layout`,attachments:[],droppedImageNames:[]});
    useTerminalUiStateStore.getState().setTerminalHeight(ref, terminalHeight);
    useTerminalUiStateStore.getState().setTerminalOpen(ref, true);
    const router = getRouter(createMemoryHistory({initialEntries:[`/${ENVIRONMENT_ID}/${thread.id}`]}));
    await router.load();
    // AppRoot supplies the real app router.
    await using _app = await render(<AppRoot router={router}/>, {router:false});
    await expect.element(page.getByTestId('composer-editor')).toBeVisible();
    await vi.waitFor(() => expect(rect('[data-thread-terminal-drawer]').height).toBeGreaterThan(100));
    await page.getByRole('button',{name:'Stashed prompts: 20. Open stash.'}).click();
    await expect.element(page.getByRole('list',{name:'Stashed prompts'})).toBeVisible();
    await vi.waitFor(() => expect(rect('[data-composer-drawer-layer="true"]').height).toBeGreaterThan(0));
    const stash = measure('stash',`${width}x${height},terminal=${terminalHeight}`);
    if (height===768) await page.screenshot({path:'__PROOF_PREFIX__-stash.png',fullPage:false});
    const scroll = document.querySelector<HTMLElement>('[data-composer-stash-drawer] [data-slot="scroll-area-viewport"]')!;
    expect(scroll).not.toBeNull();
    scroll.scrollTop = scroll.scrollHeight;
    await vi.waitFor(() => expect(scroll.scrollTop).toBeGreaterThan(0));
    await page.getByRole('button',{name:'Restore stashed prompt: Saved prompt 0: investigate the UI layout',exact:true}).click();
    await expect.element(page.getByRole('list',{name:'Stashed prompts'})).not.toBeInTheDocument();
    await vi.waitFor(() => expect(useComposerDraftStore.getState().getComposerDraft(ref)?.prompt).toBe(draft + '\n\nSaved prompt 0: investigate the UI layout'));
    console.log(`RESTORE ${width}x${height} pointer restore last scrolled entry succeeded; draft preserved and prompt appended`);
    await _app.unmount();
    // Remount the production composer with the slash trigger at its real initial cursor.
    useComposerDraftStore.getState().setPrompt(ref, draft + '\n/');
    const controlRouter = getRouter(createMemoryHistory({initialEntries:[`/${ENVIRONMENT_ID}/${thread.id}`]}));
    await controlRouter.load();
    await using _control = await render(<AppRoot router={controlRouter}/>, {router:false});
    await expect.element(page.getByRole('listbox')).toBeVisible();
    await vi.waitFor(() => expect(rect('[data-thread-terminal-drawer]').height).toBeGreaterThan(100));
    const command = measure('command',`${width}x${height},terminal=${terminalHeight}`);
    expect(command.spill).toBeLessThanOrEqual(1);
    expect(command.composer.height).toBe(stash.composer.height);
    expect(command.terminal.height).toBe(stash.terminal.height);
    if (height===768) await page.screenshot({path:'__PROOF_PREFIX__-slash.png',fullPage:false});
    if (height===768) { expect(stash.spill).toBeGreaterThan(50); expect(stash.editorOverlap).toBeGreaterThan(50); expect(stash.pointerHitsStashInsideEditor).toBe(true); }
  });
}
TSX
sed "s/__PROOF_PREFIX__/$name/g" "$fixture/fixture.browser.test.tsx" > "$test_file"
export HOME="$fixture/user-home" TMPDIR="$fixture/tmp" T3CODE_HOME="$fixture/t3-home" PLAYWRIGHT_BROWSERS_PATH="$browser_cache"
export PATH="$checkout/node_modules/.bin:$PATH"
cd "$checkout/apps/web"
printf 'REVISION '; git rev-parse HEAD
printf 'RUNTIME '; node --version
cases=${CASES:-'1440x900 terminal=320|1366x768 terminal=320|1280x720 terminal=320|1024x600 terminal=320|1440x900 terminal=400|1920x1080 terminal=320'}
old_ifs=$IFS
IFS='|'
for case_name in $cases; do
  IFS=$old_ifs
  if env -u NODE_ENV vp test run --project browser "src/components/$name.browser.test.tsx" -t "production composer $case_name" --silent=false > "$fixture/run.out" 2>&1; then
    sed -n '/MEASURE /p; /RESTORE /p; /Tests .*passed/p' "$fixture/run.out"
    cat "$fixture/run.out" >> "$fixture/all.out"
  else
    cat "$fixture/run.out"
    exit 1
  fi
  IFS='|'
done
IFS=$old_ifs
if [ -n "${OUT:-}" ]; then
  for kind in stash slash; do
    if [ -f "src/components/$name-$kind.png" ]; then cp "src/components/$name-$kind.png" "$OUT/$kind-1366x768.png"; fi
  done
fi
node - "$fixture/all.out" <<'JS'
const fs = require('node:fs');
const text = fs.readFileSync(process.argv[2], 'utf8');
const rows = text.split('\n').filter(l => l.includes('MEASURE ')).map(l => JSON.parse(l.split('MEASURE ')[1]));
const stash = rows.filter(r => r.kind === 'stash');
const control = rows.filter(r => r.kind === 'command');
if (!stash.length || stash.length !== control.length) throw Error('Missing failing input or working control');
for (const c of control) if (c.spill > 1) throw Error('Slash control also overflowed');
if (!stash.some(r => r.spill > 50 && r.editorOverlap > 50 && r.pointerHitsStashInsideEditor)) throw Error('Defect not observed');
console.log('DEFECT PRESENT: stash rows paint over the real editor; slash controls stay within the layer; pointer restoration of the last scrolled stash entry succeeds.');
JS