feat(app): demo session in the debug bar

packages/app/component-tests/timeline-pretext.fixture.tsx

@@ -0,0 +1,158 @@
+import type { SessionDocument } from "@opencode/session-ui/document"
+import { CurrentSessionProviders, STORY_MODEL, STORY_TIME } from "@opencode/session-ui/storybook"
+import { createReactiveTimelineProjection, TimelineRow } from "@opencode/session-ui/timeline/projection"
+import { createSessionTimelineRowRenderer } from "@opencode/session-ui/timeline/row"
+import type { TimelineRowLayout } from "@opencode/session-ui/timeline/text-layout"
+import { DialogProvider } from "@opencode/ui/context/dialog"
+import { createStore } from "solid-js/store"
+import { render } from "solid-js/web"
+import { LanguageProvider } from "../src/runtime/i18n/language"
+import { createTimelineVirtualizer } from "../src/session/timeline/virtualizer"
+
+let report = () => ({
+  count: 0,
+  fallbacks: 0,
+  expected: 0,
+  extent: 0,
+  offset: 0,
+  viewport: 0,
+  mounted: 0,
+  mismatches: [] as string[],
+})
+let reveal = (_id: string) => {}
+
+export function mountLongTimeline(count = 1800) {
+  const host = document.createElement("main")
+  host.dataset.testid = "pretext-long-timeline"
+  host.style.cssText =
+    "position:fixed;inset:24px;width:744px;height:640px;z-index:1000;background:var(--v2-background-bg-base)"
+  document.body.append(host)
+  const fixture: SessionDocument = {
+    sessionID: "pretext-long-session",
+    status: { type: "idle" },
+    diffs: [],
+    messages: Array.from({ length: count }, (_, index) => index).flatMap((index) => [
+      {
+        id: `long-user-${index}`,
+        type: "user" as const,
+        text: `Question ${index + 1}: ${"Explain how this part of the timeline works. ".repeat(1 + (index % 4))}`,
+        metadata: { agent: "build", model: STORY_MODEL },
+        time: { created: STORY_TIME + index * 2 },
+      },
+      {
+        id: `long-assistant-${index}`,
+        type: "assistant" as const,
+        agent: "build",
+        model: STORY_MODEL,
+        content: [
+          {
+            type: "text" as const,
+            text:
+              index % 3 === 0
+                ? `## Result ${index + 1}\n\n${"The prepared text preserves **strong words** and `inline code`. ".repeat(1 + (index % 7))}`
+                : index % 3 === 1
+                  ? `A concrete implementation.\n\n\`\`\`ts\nconst result = ${index};\nconsole.log(result);\n\`\`\`\n\nThe source stays selectable.`
+                  : `These are the steps.\n\n- Prepare the text once.\n- Reuse its measured advances when the viewport changes.\n- Paint the same revision.\n\nReady.`,
+          },
+        ],
+        time: { created: STORY_TIME + index * 2, completed: STORY_TIME + index * 2 + 1 },
+      },
+    ]),
+  }
+  function Fixture() {
+    const [state, setState] = createStore({ pinned: true })
+    const sizes = new Map<string, TimelineRowLayout>()
+    let viewport: HTMLDivElement | undefined
+    const projection = createReactiveTimelineProjection({
+      sessionMessages: () => fixture.messages,
+      status: () => fixture.status,
+      reasoningMode: () => "compact",
+      shellToolDefaultOpen: () => false,
+      editToolDefaultOpen: () => false,
+    })
+    const timeline = createTimelineVirtualizer({
+      sessionKey: () => fixture.sessionID,
+      projection,
+      showHeader: () => false,
+      layout: (row, environment) => {
+        const value = renderer.layout(row, environment)
+        sizes.set(TimelineRow.key(row), value)
+        return value
+      },
+      pinned: () => state.pinned,
+      scroll: () => ({ overflow: true, jump: !state.pinned }),
+      setScrollRef: (element) => {
+        viewport = element
+      },
+      setContentRef: () => {},
+      onPin: () => setState("pinned", true),
+      onUnpin: () => setState("pinned", false),
+      onScheduleScrollState: () => {},
+      onResumeScroll: () => {},
+      onSelectionInteraction: () => {},
+      onUserScroll: () => {},
+      onHistoryScroll: () => {},
+      canRenderImmediately: () => true,
+      setRevealMessage: (callback) => {
+        reveal = callback
+      },
+    })
+    const renderer = createSessionTimelineRowRenderer({
+      sessionID: () => fixture.sessionID,
+      status: () => fixture.status,
+      projection,
+      presentation: () => undefined,
+      reasoningMode: () => "compact",
+      shellToolDefaultOpen: () => false,
+      editToolDefaultOpen: () => false,
+      disclosure: timeline.disclosure,
+    })
+    report = () => {
+      const mounted = [...host.querySelectorAll<HTMLElement>("[data-timeline-key]")]
+      return {
+        count: projection.rows().length,
+        fallbacks: projection.rows().filter((row) => sizes.get(TimelineRow.key(row))?.source === "dom").length,
+        expected: [...sizes.values()].reduce((sum, value) => sum + (value.source === "dom" ? 0 : value.height), 82),
+        extent: viewport?.scrollHeight ?? 0,
+        offset: viewport?.scrollTop ?? 0,
+        viewport: viewport?.clientHeight ?? 0,
+        mounted: mounted.length,
+        mismatches: mounted.flatMap((element) => {
+          const key = element.dataset.timelineKey!
+          const size = sizes.get(key)
+          const natural = element.firstElementChild!.getBoundingClientRect().height
+          return size && size.source !== "dom" && Math.abs(natural - size.height) > 1
+            ? [`${key}: ${natural} != ${size.height}`]
+            : []
+        }),
+      }
+    }
+    return (
+      <timeline.View
+        header={null}
+        deferred={() => false}
+        renderRow={(row, onSizeChange) => <renderer.Row row={row} onSizeChange={onSizeChange} />}
+      />
+    )
+  }
+  render(
+    () => (
+      <LanguageProvider locale="en">
+        <DialogProvider>
+          <CurrentSessionProviders document={fixture}>
+            <Fixture />
+          </CurrentSessionProviders>
+        </DialogProvider>
+      </LanguageProvider>
+    ),
+    host,
+  )
+}
+
+export function longTimelineReport() {
+  return report()
+}
+export function jumpLongTimeline(index: number) {
+  reveal(`long-user-${index}`)
+  return report()
+}

packages/app/component-tests/timeline-virtualizer.fixture.tsx

@@ -1,11 +1,19 @@
 import { TimelineRow } from "@opencode/session-ui/timeline/projection"
-import { onCleanup } from "solid-js"
+import { createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { render } from "solid-js/web"
 import { LanguageProvider } from "../src/runtime/i18n/language"
 import { createTimelineVirtualizer } from "../src/session/timeline/virtualizer"
 
-export function mountTimelineVirtualizer(input: { count: number; rowHeight: number; immediate?: boolean }) {
+export function mountTimelineVirtualizer(input: {
+  count: number
+  rowHeight: number
+  immediate?: boolean
+  modeled?: number
+  growthRows?: number
+  viewportHeight?: number
+  insertedHeight?: number
+}) {
   const host = document.createElement("main")
   host.dataset.testid = "timeline-virtualizer-fixture"
   host.dataset.scrolls = "0"
@@ -14,30 +22,46 @@ export function mountTimelineVirtualizer(input: { count: number; rowHeight: numb
   document.body.appendChild(host)
 
   function Fixture() {
-    const [state, setState] = createStore({ pinned: true, ready: false })
+    const [state, setState] = createStore({ pinned: true, ready: false, growth: 0, inserted: false, removed: false })
 
-    const rows = Array.from(
+    const initial = Array.from(
       { length: input.count },
       (_, index) => new TimelineRow.UserMessage({ userMessageID: `message-${index}` }),
     )
 
-    const rowByKey = new Map(rows.map((row) => [TimelineRow.key(row), row]))
-    const indexes = new Map(rows.map((row, index) => [row.userMessageID, index]))
+    const inserted = new TimelineRow.UserMessage({ userMessageID: "inserted" })
+    const rows = createMemo(() =>
+      (state.inserted ? [...initial.slice(0, -1), inserted, initial.at(-1)!] : initial).filter(
+        (row) => !state.removed || row.userMessageID !== `message-${input.count - 3}`,
+      ),
+    )
+    const rowByKey = createMemo(() => new Map(rows().map((row) => [TimelineRow.key(row), row])))
+    const indexes = new Map([...initial, inserted].map((row, index) => [row.userMessageID, index]))
+    const height = (id: string) =>
+      (id === "inserted" ? (input.insertedHeight ?? input.rowHeight) : input.rowHeight) +
+      (indexes.get(id)! >= input.count - 1 - (input.growthRows ?? 1) && indexes.get(id)! < input.count - 1
+        ? state.growth
+        : 0)
+    let scrollToEnd = (_behavior?: ScrollBehavior) => {}
     let viewport!: HTMLDivElement
     let content!: HTMLDivElement
     let container!: HTMLDivElement
 
     const timeline = createTimelineVirtualizer({
       sessionKey: () => "cold-reveal-fixture",
       projection: {
-        rows: () => rows,
-        rowByKey: () => rowByKey,
+        rows,
+        rowByKey,
         activeMessageID: () => undefined,
         messageByID: () => new Map(),
         messageRowIndex: () => indexes,
         messageLastRowIndex: () => indexes,
       },
       showHeader: () => false,
+      layout: (row) =>
+        row._tag === "UserMessage" && indexes.get(row.userMessageID)! < (input.modeled ?? 0)
+          ? { source: "fixed", height: height(row.userMessageID) }
+          : { source: "dom", reason: "deferred fixture content" },
       pinned: () => state.pinned,
       scroll: () => ({ overflow: false, jump: false }),
       setScrollRef: (element) => {
@@ -50,6 +74,7 @@ export function mountTimelineVirtualizer(input: { count: number; rowHeight: numb
         reveal.observe(element, { attributes: true, attributeFilter: ["style"] })
       },
       onPin: () => setState("pinned", true),
+      setScrollToEnd: (scroll) => (scrollToEnd = scroll),
       onUnpin: () => setState("pinned", false),
       onScheduleScrollState: (element) => {
         host.dataset.scrolls = String(Number(host.dataset.scrolls) + 1)
@@ -94,6 +119,35 @@ export function mountTimelineVirtualizer(input: { count: number; rowHeight: numb
         <button type="button" onClick={() => setState("ready", true)}>
           Complete Markdown
         </button>
+        <button type="button" data-testid="grow-row" onClick={() => setState("growth", 120)}>
+          Grow penultimate row
+        </button>
+        <button type="button" data-testid="insert-row" onClick={() => setState("inserted", true)}>
+          Insert row
+        </button>
+        <button type="button" data-testid="remove-row" onClick={() => setState("removed", true)}>
+          Remove row
+        </button>
+        <button
+          type="button"
+          data-testid="follow"
+          onClick={() => {
+            setState("pinned", true)
+            scrollToEnd()
+          }}
+        >
+          Follow latest
+        </button>
+        <button
+          type="button"
+          data-testid="resume"
+          onClick={() => {
+            setState("pinned", true)
+            scrollToEnd("smooth")
+          }}
+        >
+          Resume following
+        </button>
         <button type="button" onClick={() => (container.style.display = "none")}>
           Hide viewport
         </button>
@@ -112,15 +166,15 @@ export function mountTimelineVirtualizer(input: { count: number; rowHeight: numb
         >
           Reconnect ready rows
         </button>
-        <div ref={container} style={{ height: "180px", width: "400px" }}>
+        <div ref={container} style={{ height: `${input.viewportHeight ?? 180}px`, width: "400px" }}>
           <timeline.View
             header={null}
             deferred={() => false}
             renderRow={(row) => (
               <div
                 data-component="markdown"
                 data-markdown-ready={state.ready ? "" : undefined}
-                style={{ height: `${input.rowHeight}px` }}
+                style={{ height: `${height(row().userMessageID)}px` }}
               >
                 {row().userMessageID}
               </div>