[Neonforge98]

Problem

Loading a Claude Code session can move a browser screenshot below the last assistant reply. The raw JSONL and parser associate the image with its earlier tool result, but the shared chat projection attaches turn images to the final surviving row. Expanded and collapsed histories therefore show the wrong chronology.

Solution

Attach galleries to their producing chat items before turn collapse. Keep gallery-only rows at those positions when tool text is collapsed, preserving image-only turns, compact tool stacks, and user-message attachments. The native regression fixture imports a Claude Code JSONL through the actual app and asserts that the loaded screenshot precedes the final reply. No transcript or persistence format changes.

Potential risks

Collapsed turns with several image-producing items now have several gallery rows; virtualized row counts and search mappings use those rows. Repeated image references from different producing items remain separate occurrences. Desktop scroll anchoring after lazy hydration, reload/restart, and CPU/RSS remain unverified. The pre-existing lazy-replay E2E has a stale pagination expectation and fails before reaching its media assertions; the focused native import scenario passes. The local native run required an uncommitted development-server proxy compatibility shim because the installed webpack-dev-server rejected the repository's object-shaped proxy config; CI does not run that native scenario. Rollback is a code revert; original history is untouched.

Verification

• pnpm test src/engines/ChatPanel/ChatHistory src/engines/ChatPanel/rendering — 74 files / 668 tests passed
• pnpm typecheck:fast, changed-file ESLint with --max-warnings 0, pnpm check:circular, pnpm check:test-placement, and git diff --check — passed
• Read-only inspection of the reported Claude transcript confirmed that the screenshot belongs to the tool result before the assistant reply
• Projection/gallery regressions cover expanded and collapsed order, screenshots after replies, multiple producers, repeated references, image-only turns, unloaded previews, compact stacks, and user attachments
• Playwright component fixtures: light 1040×980 and dark 420×900; loaded images precede the reply in both collapse states with no horizontal overflow
• Isolated macOS Tauri/WebDriver run: E2E_CHAT_RENDERING_SCENARIOS=claude-imported-image-order pnpm test -- --spec './specs/core/chat-rendering-ui.spec.mjs' — passed locally with the temporary development-server proxy shim (1 scenario); the app discovered on-disk Claude Code JSONL, opened it through the rendered sidebar, and showed the loaded image at flat index 9 before the reply at index 10
• claude-imported-lazy-replay — failed before image checks because current UI renders all ten fixture rounds and no longer shows turn-pagination-current-round; tracked separately from this ordering fix
• Source/AST inspection found no new raw button, input, or clickable-element bypass

Visual evidence

The native screenshot shows the isolated Tauri app after Claude Code JSONL ingestion. The component screenshots cover light desktop and narrow dark framing. Fixture media and text contain no private transcript data.

Architecture and lifecycle details: docs/org2-performance-guard-2026-09-26/HistoryImageOrder.md.