Merge origin/master into worktree/sidebar-scrollbar-reveal

#1381 landed the bar's horizontal position; this branch decides when it is
drawn. The e2e keeps both scenarios and the golden carries both palettes'
pointer-state readings alongside the new edge-offset lines.

apps/web/stress-tests/reasoning-chunks.stress.ts

@@ -0,0 +1,153 @@
+/**
+ * Opt-in browser stress reproduction for reasoning-stream renderer stalls.
+ * The fixture emits 100,000 individual chunks through the normal async
+ * carrier; the test measures event-loop and scheduled-interaction delay while
+ * the assembled React surface keeps a collapsed Think row live.
+ */
+import type { Browser, Page } from 'playwright'
+import { chromium } from 'playwright'
+import { expect, it, onTestFailed } from 'vitest'
+import { launchWebScaffold, watchConsole, type WebScaffold } from '../tests/scaffold.ts'
+import { newEnglishPage, saveFailureShot } from '../tests/support.ts'
+
+const CHUNK_COUNT = 100_000
+const CHUNKS_PER_INTERVAL = 128
+const CHUNK_INTERVAL_MS = 16
+const MAIN_THREAD_DELAY_BUDGET_MS = 250
+
+interface ReasoningChunkStormState {
+  sessionId: string
+  chunkCount: number
+  chunksPerInterval: number
+  intervalMs: number
+  emitted: number
+  marker: string
+  emitting: boolean
+}
+
+interface StressProbe {
+  intervalId: number
+  intervalMs: number
+  lastTickAt: number
+  maxDelayMs: number
+  samples: number
+  interactionDueAt: number
+  interactionHandledAt: number | null
+}
+
+interface StressWindow extends Window {
+  __fxTiming?: {
+    startReasoningChunkStorm(id: string, chunkCount: number, chunksPerInterval: number, intervalMs: number): string
+    reasoningChunkStormState(): ReasoningChunkStormState | null
+  }
+  __reasoningStressProbe?: StressProbe
+}
+
+it('keeps the browser responsive while rendering 100,000 reasoning chunks', async () => {
+  let scaffold: WebScaffold | undefined
+  let browser: Browser | undefined
+  let page: Page | undefined
+  try {
+    scaffold = await launchWebScaffold()
+    browser = await chromium.launch({ headless: process.env.DSH_WEB_STRESS_HEADFUL !== '1' })
+    page = await newEnglishPage(browser)
+    const activePage = page
+    await activePage.addInitScript(() => {
+      localStorage.setItem('dsh.sessions.current', JSON.stringify({ sessionId: 'fx-alpha' }))
+    })
+    const tripwire = watchConsole(activePage)
+    onTestFailed(() => saveFailureShot(activePage, 'web-stress-reasoning-chunks'))
+    await activePage.goto(`${scaffold.baseUrl}?fixture`, { waitUntil: 'load' })
+    await activePage.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+    // Fixture settings deliberately reject writes, so its welcome notice
+    // cannot acknowledge. Hide only that test overlay; the assembled chat
+    // tree beneath it remains mounted and exercises the production renderer.
+    await activePage.addStyleTag({ content: '[class*="onboardingOverlay"] { display: none !important; }' })
+    await activePage.locator('[data-sample="bash"]').first().waitFor({ timeout: 30_000 })
+
+    await activePage.evaluate(() => {
+      const intervalMs = 50
+      const now = performance.now()
+      const probe: StressProbe = {
+        intervalId: 0,
+        intervalMs,
+        lastTickAt: now,
+        maxDelayMs: 0,
+        samples: 0,
+        interactionDueAt: now + 1_000,
+        interactionHandledAt: null,
+      }
+      probe.intervalId = window.setInterval(() => {
+        const tickAt = performance.now()
+        probe.maxDelayMs = Math.max(probe.maxDelayMs, tickAt - probe.lastTickAt - intervalMs)
+        probe.lastTickAt = tickAt
+        probe.samples++
+      }, intervalMs)
+      document.body.addEventListener('reasoning-stress-interaction', () => {
+        probe.interactionHandledAt = performance.now()
+      }, { once: true })
+      window.setTimeout(() => {
+        document.body.dispatchEvent(new CustomEvent('reasoning-stress-interaction'))
+      }, 1_000)
+      ;(window as StressWindow).__reasoningStressProbe = probe
+    })
+
+    const marker = await activePage.evaluate(({ chunkCount, chunksPerInterval, intervalMs }) => {
+      const hooks = (window as StressWindow).__fxTiming
+      if (hooks === undefined) throw new Error('reasoning stress fixture hooks unavailable')
+      return hooks.startReasoningChunkStorm('fx-alpha', chunkCount, chunksPerInterval, intervalMs)
+    }, {
+      chunkCount: CHUNK_COUNT,
+      chunksPerInterval: CHUNKS_PER_INTERVAL,
+      intervalMs: CHUNK_INTERVAL_MS,
+    })
+
+    const liveThink = activePage.locator('[data-variant="think"][data-state="running"]').last()
+    await liveThink.waitFor({ timeout: 60_000 })
+    await expect.poll(async () => await activePage.evaluate(() => {
+      const hooks = (window as StressWindow).__fxTiming
+      return hooks?.reasoningChunkStormState()?.emitted ?? 0
+    }), { timeout: 540_000, interval: 100 }).toBe(CHUNK_COUNT)
+    await expect.poll(() => liveThink.textContent(), { timeout: 60_000, interval: 100 }).toContain(marker)
+
+    const report = await activePage.evaluate(() => {
+      const win = window as StressWindow
+      const probe = win.__reasoningStressProbe
+      const state = win.__fxTiming?.reasoningChunkStormState()
+      if (probe === undefined || state === undefined || state === null) {
+        throw new Error('reasoning stress metrics unavailable')
+      }
+      window.clearInterval(probe.intervalId)
+      const interactionDelayMs = probe.interactionHandledAt === null
+        ? null
+        : probe.interactionHandledAt - probe.interactionDueAt
+      return {
+        chunkCount: state.chunkCount,
+        chunksPerInterval: state.chunksPerInterval,
+        intervalMs: state.intervalMs,
+        emitted: state.emitted,
+        maxMainThreadDelayMs: Math.max(0, probe.maxDelayMs),
+        interactionDelayMs,
+        heartbeatSamples: probe.samples,
+      }
+    })
+    process.stdout.write(`reasoning-chunk stress report: ${JSON.stringify(report)}\n`)
+
+    expect(report).toMatchObject({
+      chunkCount: CHUNK_COUNT,
+      chunksPerInterval: CHUNKS_PER_INTERVAL,
+      intervalMs: CHUNK_INTERVAL_MS,
+      emitted: CHUNK_COUNT,
+    })
+    expect(report.heartbeatSamples).toBeGreaterThan(0)
+    const interactionDelayMs = report.interactionDelayMs
+    if (interactionDelayMs === null) throw new Error(`scheduled interaction was not handled: ${JSON.stringify(report)}`)
+    expect(report.maxMainThreadDelayMs, JSON.stringify(report)).toBeLessThan(MAIN_THREAD_DELAY_BUDGET_MS)
+    expect(interactionDelayMs, JSON.stringify(report)).toBeLessThan(MAIN_THREAD_DELAY_BUDGET_MS)
+    expect(tripwire.pageErrors).toEqual([])
+    expect(tripwire.warnings).toEqual([])
+  } finally {
+    await browser?.close()
+    await scaffold?.close()
+  }
+}, 600_000)

apps/web/tests/built-boot.snapshot.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 // The built-bundle boot smoke: the ONE assembled-jsdom test that loads the
 // real `packages/client/*/lib/client.js` artifacts through AppWebEntry's
-// ModuleLoader path (fetchBundle/executeBundle) and proves the boot graph
+// ModuleLoader path (loadBundle) and proves the boot graph
 // assembles — staged activation across the immediately tier and the inject
 // layers, per-plugin CSS injection, and a rendered journey reaching chat
 // content from the keyless FixtureApiClient transport.
@@ -91,11 +91,11 @@ it('boots the built plugin graph and renders a fixture session end to end', asyn
   win.__DSH_BOOT__ = { rev: 'fx', entries: PLUGINS.map(({ dir: _dir, ...plugin }) => plugin) }
   act(() => {
     const entry = new AppWebEntry(root, {
-      fetchBundle: (url) => {
+      loadBundle: async (url) => {
         const code = bundles.get(url)
-        return code === undefined ? Promise.reject(new Error(`missing built bundle ${url}`)) : Promise.resolve(code)
+        if (code === undefined) throw new Error(`missing built bundle ${url}`)
+        ;(0, eval)(code)
       },
-      executeBundle: (code) => { (0, eval)(code) },
     })
     void entry.run()
     unmount = () => { entry.dispose() }

apps/web/tests/lifecycle-chrome.e2e.ts

@@ -33,6 +33,7 @@ const RELOADED_EXPECTED = join(SNAPSHOT_DIR, 'reloaded.expected.md')
 const MODE = webSnapshotMode()
 
 const PROMPT = 'Reply with the single word LIGHTHOUSE and stop.'
+const REPLAY_PACE_MS = 100
 
 describe('web e2e: lifecycle & chrome (workspace flow / reload / dark mode)', () => {
   let scaffold: WebScaffold
@@ -42,7 +43,7 @@ describe('web e2e: lifecycle & chrome (workspace flow / reload / dark mode)', ()
   const sessionEvents: SessionEvent[] = []
 
   beforeAll(async () => {
-    scaffold = await launchWebScaffold(MODE === 'record' ? {} : { replayFixture: FIXTURE, paceMs: 15 })
+    scaffold = await launchWebScaffold(MODE === 'record' ? {} : { replayFixture: FIXTURE, paceMs: REPLAY_PACE_MS })
     scaffold.ctx.on('session/event', (_session, event: SessionEvent) => { sessionEvents.push(event) })
     browser = await chromium.launch()
     page = await newEnglishPage(browser)

apps/web/tests/search-card.snapshot.ts

@@ -128,11 +128,11 @@ describe('assembled search card', () => {
     win.__DSH_BOOT__ = { rev: 'fx', entries: PLUGINS.map(({ dir: _dir, ...plugin }) => plugin) }
     act(() => {
       const entry = new AppWebEntry(root, {
-        fetchBundle: (url) => {
+        loadBundle: async (url) => {
           const code = bundles.get(url)
-          return code === undefined ? Promise.reject(new Error(`missing built bundle ${url}`)) : Promise.resolve(code)
+          if (code === undefined) throw new Error(`missing built bundle ${url}`)
+          ;(0, eval)(code)
         },
-        executeBundle: (code) => { (0, eval)(code) },
       })
       void entry.run()
       unmount = () => { entry.dispose() }

apps/web/tests/sidebar-scrollbar.e2e.ts

@@ -112,6 +112,10 @@ interface ListMetrics {
   overflows: boolean
   /** Border-box width minus client width: the space the scrollbar takes out of the content area. */
   band: number
+  /** Distance from the scrollbar's right edge to the sidebar edge. */
+  scrollbarEdgeOffset: number
+  /** Distance from the first row background's right edge to the sidebar edge. */
+  rowEdgeInset: number
   /** Client-area right edge in viewport coordinates (`clientWidth` excludes the scrollbar band). */
   clientRight: number
   /** Border-box right edge in viewport coordinates. */
@@ -139,6 +143,8 @@ function measureList(page: Page): Promise<ListMetrics> {
     if (list === null) throw new Error('sidebar session list not in the DOM')
     const time = list.querySelector<HTMLElement>('[class*="time"]')
     if (time === null) throw new Error('no row relative-time element in the sidebar list')
+    const row = list.querySelector<HTMLElement>('[role="treeitem"]')
+    if (row === null) throw new Error('no row in the sidebar list')
     // Each indirection variable is resolved through its own throwaway probe
     // appended to the list: `var()` substitution then happens where the list
     // sits in the cascade, which is the claim, and `color` normalizes whatever
@@ -173,6 +179,9 @@ function measureList(page: Page): Promise<ListMetrics> {
     const style = getComputedStyle(list)
     const pseudoWidth = getComputedStyle(list, '::-webkit-scrollbar').width
     const barWidth = pseudoWidth === 'auto' ? 15 : Number.parseFloat(pseudoWidth)
+    const listRect = list.getBoundingClientRect()
+    const sidebarEdge = list.parentElement?.getBoundingClientRect().right
+    if (sidebarEdge === undefined) throw new Error('sidebar session list has no layout parent')
     return {
       gutter: style.scrollbarGutter,
       width: pseudoWidth,
@@ -183,9 +192,11 @@ function measureList(page: Page): Promise<ListMetrics> {
       token: resolve('--dsh-scrollbar-thumb'),
       hoverToken: resolve('--dsh-scrollbar-thumb-hover'),
       overflows: list.scrollHeight > list.clientHeight,
-      band: list.getBoundingClientRect().width - list.clientWidth,
-      clientRight: list.getBoundingClientRect().left + list.clientWidth,
-      borderRight: list.getBoundingClientRect().right,
+      band: listRect.width - list.clientWidth,
+      scrollbarEdgeOffset: sidebarEdge - listRect.right,
+      rowEdgeInset: sidebarEdge - row.getBoundingClientRect().right,
+      clientRight: listRect.left + list.clientWidth,
+      borderRight: listRect.right,
       timeRight: time.getBoundingClientRect().right,
       // The bar is drawn in the rightmost `barWidth` of the border box, whether
       // or not that space was reserved. Its width comes from the sheet where the
@@ -194,7 +205,28 @@ function measureList(page: Page): Promise<ListMetrics> {
       // absent. Taking the UA width as the fallback is what keeps the assertion
       // honest: assuming 0 there would report no occlusion precisely in the
       // state that has it.
-      timeCoveredBy: Math.max(0, time.getBoundingClientRect().right - (list.getBoundingClientRect().right - barWidth)),
+      timeCoveredBy: Math.max(0, time.getBoundingClientRect().right - (listRect.right - barWidth)),
+    }
+  })
+}
+
+/**
+ * Measure only overflow and row inset, which remain observable when every
+ * session is hidden under a collapsed workspace group.
+ * @param page - the page under test.
+ * @returns the list overflow state and first row's trailing inset.
+ */
+function measureRowInset(page: Page): Promise<Pick<ListMetrics, 'overflows' | 'rowEdgeInset'>> {
+  return page.evaluate(() => {
+    const list = document.querySelector<HTMLElement>('[role="tree"][aria-label="Sessions"]')
+    if (list === null) throw new Error('sidebar session list not in the DOM')
+    const row = list.querySelector<HTMLElement>('[role="treeitem"]')
+    if (row === null) throw new Error('no row in the sidebar list')
+    const sidebarEdge = list.parentElement?.getBoundingClientRect().right
+    if (sidebarEdge === undefined) throw new Error('sidebar session list has no layout parent')
+    return {
+      overflows: list.scrollHeight > list.clientHeight,
+      rowEdgeInset: sidebarEdge - row.getBoundingClientRect().right,
     }
   })
 }
@@ -257,6 +289,8 @@ function renderGeometry(light: PaletteMetrics, dark: PaletteMetrics): string {
     `- --dsh-scrollbar-thumb-hover, pointer over the list: ${metrics.hoverToken}`,
     `- list overflows: ${String(metrics.overflows)}`,
     `- reserved band: ${String(metrics.band)}px`,
+    `- scrollbar inset from the sidebar edge: ${String(metrics.scrollbarEdgeOffset)}px`,
+    `- row background inset from the sidebar edge: ${String(metrics.rowEdgeInset)}px`,
     `- relative time covered by the bar: ${String(metrics.timeCoveredBy)}px`,
     `- relative time ends inside the content area: ${String(metrics.timeRight <= metrics.clientRight)}`,
     `- content area ends before the border box: ${String(metrics.clientRight < metrics.borderRight)}`,
@@ -380,6 +414,8 @@ describe('web e2e: sidebar session list scrollbar (reserved gutter / themed thum
     // drawn over it. Removing the declaration makes it exactly 0. The value
     // itself is not pinned — it tracks `scrollbar-width` and the platform.
     expect(metrics.band).toBeGreaterThan(0)
+    expect(metrics.scrollbarEdgeOffset).toBe(2)
+    expect(metrics.rowEdgeInset).toBe(12)
     // The reported symptom, stated directly: no part of the row's relative time
     // lies under the bar. Measures 7 on clean master — the `h` of `1h` is the
     // covered part. Unlike the client-edge comparison below it does not go
@@ -426,6 +462,20 @@ describe('web e2e: sidebar session list scrollbar (reserved gutter / themed thum
     expect(tripwire.pageErrors).toEqual([])
   }, 60_000)
 
+  it('keeps the row background inset when overflow disappears', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-sidebar-scrollbar-stable-inset'))
+    expect(await measureRowInset(page)).toEqual({ overflows: true, rowEdgeInset: 12 })
+    const bucket = page.getByText('Ungrouped', { exact: true }).locator('..').locator('..')
+    await bucket.click()
+    try {
+      await expect.poll(async () => (await measureRowInset(page)).overflows, { timeout: 10_000 }).toBe(false)
+      expect(await measureRowInset(page)).toEqual({ overflows: false, rowEdgeInset: 12 })
+    } finally {
+      await expandSeededSessions(page)
+    }
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
   it('renders the themed thumb through the WebKit path in both palettes', async () => {
     onTestFailed(() => saveFailureShot(page, 'web-e2e-sidebar-scrollbar-theme'))
     const light = await measureList(page)

apps/web/tests/snapshots/sidebar-scrollbar/geometry.expected.md

@@ -13,6 +13,8 @@
 - --dsh-scrollbar-thumb-hover, pointer over the list: rgb(212, 212, 212)
 - list overflows: true
 - reserved band: 8px
+- scrollbar inset from the sidebar edge: 2px
+- row background inset from the sidebar edge: 12px
 - relative time covered by the bar: 0px
 - relative time ends inside the content area: true
 - content area ends before the border box: true
@@ -30,6 +32,8 @@
 - --dsh-scrollbar-thumb-hover, pointer over the list: rgb(84, 85, 87)
 - list overflows: true
 - reserved band: 8px
+- scrollbar inset from the sidebar edge: 2px
+- row background inset from the sidebar edge: 12px
 - relative time covered by the bar: 0px
 - relative time ends inside the content area: true
 - content area ends before the border box: true

apps/web/vite.config.ts

@@ -20,6 +20,9 @@ function rejectStandaloneServe(): Plugin {
 
 export default defineConfig({
   plugins: [rejectStandaloneServe(), react()],
+  build: {
+    sourcemap: true,
+  },
   resolve: {
     // Workspace packages resolve to SOURCE: package.json exports point at lib
     // for Node/type consumers, but the browser bundle must compile src directly