perf+polish: chat re-render isolation, unified chat/file/diff headers

[Scoteezy]

Summary

App + CLI follow-up to #1205 — perf work to kill typing-induced re-renders across the chat and new-session screens, header consolidation so the file viewer / diff viewer publish their controls into the chat header instead of stacking a second top bar, small polish on the file overlay + files sidebar, plus a batch of bugs that surfaced once the perf changes landed: reconnect was replaying chat history as new user messages, permission prompts could orphan the chat after a process restart, drag-and-drop file attachments never worked, and Skill/local slash commands were leaking SDK internals (raw <command-name> tags, 17k-character skill prompt bodies) into the chat.

Changes (happy-app)

Tool call grouping

• Consecutive tool calls collapse into a single container. When an agent runs many tool calls between text responses (common with background agents), consecutive tool calls are now grouped into a collapsible summary row showing e.g. "Edited 4 files, ran 2 commands". Tap/click to expand and see individual tool cards inside. Groups with running tools default to expanded and auto-collapse when all tools complete. User-sent file/image attachments are never grouped. Agent events (mode switches, "aborted by user") stay visible as standalone messages. Hidden tools (ToolSearch, thinking) are excluded entirely. Summary text auto-categorizes tools into edit/read/terminal/search/web/task buckets. i18n support for all 10 languages.

Performance

• Chat input no longer re-renders the whole session view. Lifted the live message + useDraft autosave into a new ChatComposer subcomponent and exposed an imperative handle for send/clear. SessionViewLoaded keeps a stable tree on every keystroke. MultiTextInput is React.memo so the JSX diff is skipped when the parent rerenders without changed props. AgentInput was already memoized but every render passed it freshly-allocated connectionStatus / usageData / onSend / onAbort / onFileViewerPress / autocompleteSuggestions / autocompletePrefixes — memo always saw a "new" prop set. Now: autocompletePrefixes hoisted to module scope, useMemo for the primitive-derived objects, useCallback for the handlers reading the live message + selectedImages through refs so the callbacks don't change on every keystroke. Net effect: typing in chat re-renders only ChatComposer → AgentInput → MultiTextInput. SessionViewLoaded, ChatList, ChatHeaderView, and the file/diff sidebars stay stable.
• Uncontrolled textarea on top of the memo pass. Even with the prop pipeline cleaned, typing felt chunky on a busy main thread because every keystroke round-tripped through React state before reaching the DOM. MultiTextInput (both native and web variants) now accepts defaultValue and reads the live text through an imperative getText() handle; React state updates derived from typing wrap in React.startTransition. Deletion no longer batches into 3–4 character chunks; fast typists see each character at native input latency.
• Zen-mode toggle on web (~15fps → snap). The right diff-sidebar's width animation went through Reanimated withTiming(250) which on web becomes a JS-driven layout animation that re-flows the chat flex-row sibling on every frame, forcing the FlatList tree to re-measure 60 times per toggle. The left navigation drawer used a CSS width transition with the same effect. Both now snap on web (duration 0 / no transitionProperty); native keeps the smooth animation. Chat reflows once instead of 60 times. Defense-in-depth contain: 'layout style paint' added on the chat flex-1 wrapper (web only) so the subtree stays layout-isolated even if a width animation comes back later.
• New-session screen: typing no longer churns the whole config UI. The screen subscribed to the entire useNewSessionDraft zustand store, so each input flip re-ran useAllMachines(), useSessions(), the agent-input setting hook, and every memo-derived picker item. Now the parent narrows to a useShallow selector that excludes input, a separate primitive selector (s.input.trim().length > 0) feeds the auto-collapse effect, and MultiTextInput is wrapped in a memoized PromptInput child that owns the input subscription. handleSend reads the live prompt via useNewSessionDraft.getState() on demand instead of closing over it, so the callback no longer depends on input.
• Sidebar session list: stop cloning data on every navigation. The sidebar rebuilt the full session-list data array (and renderItem callback) on every pathname change to bake in a selected flag. That defeated FlatList virtualization and forced every visible row to re-render on each nav. Selection is derived once via useMemo from pathname; renderItem computes selected per row inline; FlatList gets extraData so it re-evaluates correctly; SessionItem's existing React.memo ensures only the previously- and newly-selected rows actually re-render. Also removes a rules-of-hooks violation where useMemo was called inside a ternary (selectable ? useMemo(...) : data).
• Chat list scroll no longer drifts during streaming. maintainVisibleContentPosition was set with minIndexForVisible: 0 and autoscrollToTopThreshold: 10. In the inverted FlatList, index 0 is the newest message — anchoring on it meant every agent token destabilised the anchor, dragging the user's viewport up while reading older messages. Plus a redundant onContentSizeChange was issuing its own scrollToOffset(0) that fought with MVCP. Now: minIndexForVisible: 1 anchors on the second-newest (stable across tokens), autoscrollToTopThreshold: 50 for the inverted-list stick-to-bottom behaviour, and the manual scroll callback is gone. Viewport stays put when scrolled up; sticks to the bottom only when the user is already near it.
• MessageView memoised. Previously a plain function — every parent re-render walked every visible message item. Now React.memo; combined with the stable renderItem callback in ChatList, only items whose props actually changed re-render. Also scoped renderToHardwareTextureAndroid to native (no-op on web, was set unconditionally).
• setShowScrollButton no longer fires on every scroll frame. onScroll runs at 60Hz; the previous code called the setter on every frame even when the value didn't change, re-rendering the whole ChatListInternal. Guarded with a ref so the setter only fires on threshold crossings.
• Changes page no longer flashes a global spinner on every agent message. Two-level fix. (1) applyGitStatusFiles in storage does a structural-equality short-circuit (via fast-deep-equal): when gitStatusSync.invalidate() fires for every mutable-tool message but the file list is identical, the store doesn't update and subscribers don't re-render. (2) AllFilesDiffView previously did reset+spinner+refetch on every change; now it keyed-reconciles via a Map<fullPath, FileDiffResult> — only files whose signature (status + isStaged + linesAdded + linesRemoved) actually changed get re-fetched, the rest stay rendered. Scroll position inside the diff overlay survives streaming; the global spinner appears only on the very first mount.

Slash commands + skills UX

• Strip Claude SDK local-command XML out of the chat. When the user runs /foo, the SDK injects synthetic "user" messages whose content is raw tags like <local-command-caveat>…</local-command-caveat> and <command-message>foo</command-message><command-name>/foo</command-name>. MarkdownView rendered them as literal HTML text. A new parseLocalCommandMessage() helper runs every user-text payload through three branches before the bubble renders: caveat-only payloads hide entirely; command-message + command-name payloads collapse into a compact monospace chip showing /foo; mixed content keeps the surrounding text and drops the tags.
• Autocomplete dropdown reaches everything. Slash-command and file-mention lookups were both capped at limit: 5, so even when the metadata exposed 80+ commands the user only ever saw five. Arrow-key navigation also walked selectedIndex past the visible window without scrolling the inner ScrollView, so anything past row 5 was unreachable by keyboard. Bumped both limits to 50, replaced FloatingOverlay in AgentInputAutocomplete with an inline ScrollView whose ref drives scroll-into-view on selectedIndex change (reads the underlying div's scroll offsets on web, falls back to scrollTo on native), and raised maxHeight from 240→320 so ~8 rows are visible at once.

Image attachments

• Drag-and-drop now works on web. pasteImages.web.ts already exposed getImagesFromDrop() but nothing ever called it — only the paste path was wired in AgentInput. The composer now attaches dragover (with preventDefault, required for drop to fire) and drop listeners alongside the existing paste effect. Both gate on dataTransfer.types.includes('Files') so non-file drags elsewhere in the app keep working. Drop events run files through getImagesFromDrop → fileToAttachmentPreview and forward the result through the same props.onAddImages callback the paste path uses.

Header consolidation + browser-style back/forward

• AllFilesDiffView and FileViewPanel no longer render their own top bars; they publish right-slot controls into ChatHeaderView, which gains optional extraPathSegment + rightSlot props. Diff overlay contributes file count + Unified|Split toggle; file view contributes Edit|Preview + Save (Save disabled until changes are detected, same gating as before).
• The close X is gone. Overlay open/close + diff file traversal is driven by a browser-style intra-session history stack bridged to the global SidebarNavigator back/forward arrows via a new zustand store (sessionOverlayNav). canBack / canForward fall through to the router when no overlay history is present, so navigation feels uniform whether you're flipping between sessions or between files within a session.
• Scroll-to-file in the diff overlay now uses requestAnimationFrame + retry instead of a fixed 50ms timer, so back/forward navigation visibly scrolls between previously-selected files even when layout settles late.

Diff overlay reliability

• Untracked-file content reads work on Windows. AllFilesDiffView was running cat -- "<path>" via sessionBash to read untracked files for the diff view. On Windows + PowerShell, cat is an alias for Get-Content that doesn't accept the -- separator, so .md / .ps1 / any new files surfaced as command failed: cat -- "..." errors instead of content. Swapped to the native sessionReadFile RPC (already used by FileViewPanel for the standalone file view) which reads via the CLI's Node fs — no shell, fully cross-platform, faster too. Base64 content decoded with atob + TextDecoder, same pattern as FileViewPanel.
• Sidebar-click after silent diff updates lands on the correct file. With the new keyed reconciliation in AllFilesDiffView, files silently appear/disappear in the list without resetting the diff. But the per-section Y-offset cache (fileOffsets, populated by each section's onLayout) became stale when insertions pushed sections downward: clicking a file in the right sidebar took the user to where an old file used to be. Cache is now cleared on every results-list change; the existing RAF-retry tryScroll loop waits for fresh onLayout values before scrolling, so clicks always land on the section the file currently occupies.

File overlay + files sidebar polish

• File overlay inherits the chat surface end-to-end. CodeEditor and the markdown preview no longer paint their own dark/light backgrounds, so the overlay no longer shows a nested darker box on top of the chat. The first pass went too far and made every layer transparent — letting the chat (and the empty-messages placeholder) bleed through behind the file — so the surface fill is back on the overlay wrapper while the editor + preview themselves stay transparent. Net result: same visual treatment as the chat, no nested box.
• Files sidebar selection matches chat-list selection. Dropped the blue accent border on selected rows in the files sidebar; highlight is now the same surfaceSelected fill the left sessions sidebar uses for the active chat row.
• Files sidebar: vertical scrollbar visible. Removed showsVerticalScrollIndicator={false} on both the changes and all-files scroll views — falls back to the platform default so users can see when there's more content below, matching the FlatList in the left sessions sidebar.
• Active-sessions section header style. Match the inactive-session row style: folder icon + last path segment instead of the full home-relative path. Keeps the existing section-header text size and color.

Hygiene

• Untrack the .supervibe/ artifacts that snuck in and add the directory to .gitignore so it stays local.

Changes (happy-cli)

Reconnect / lifecycle reliability

• Don't replay JSONL history when the scanner learns the session id late. On happy-reconnect, metadata.claudeSessionId isn't loaded by the time createSessionScanner is built, so it inits with sessionId: null and pre-marks nothing. Seconds later the SessionStart:resume hook fires onNewSession with the resume id, the first sync.invalidate() walks the full JSONL, and every historical user message gets forwarded to the server — they all re-appear in the chat from the user's account. Added a treatExistingAsProcessed flag to onNewSession and pass it from the remote-mode hook handler; the offline-reconnect path in runClaude.ts and the local launcher keep the existing forward-everything semantics.
• Clear orphaned permission requests on session resume. If the CLI process is killed while a tool prompt is open (browser close, daemon-stop, crash) the in-memory pendingRequests map dies but the server still holds agentState.requests[id]. The app keeps showing the spinner + "Permission required" banner forever, and clicking Yes/No is a no-op — the response RPC lands on a fresh CLI whose pendingRequests has never heard of the id, and agent state is never updated. Each backend (Claude remote, ACP, Codex) now calls permissionHandler.reset(reason) right after constructing the handler; the existing reset() already moves stale requests to completedRequests with status canceled, so the UI updates as soon as the new session attaches.

Skill prompt hiding

• Drop SDK-injected synthetic user messages in the envelope mapper. When Claude invokes the Skill tool, the SDK feeds the skill's prompt body back into the conversation as a synthetic "user" message — context for the model, not chat content. Previously mapClaudeLogMessageToSessionEnvelopes iterated the content blocks and emitted each text chunk as an agent text envelope, producing 10–20k-character walls of raw skill instructions in the chat right after the user's request. The mapper now short-circuits when the message carries the meta flag.
• Propagate SDK isSynthetic as isMeta in sdkToLogConverter. The SDK uses two different field names for the same signal: isSynthetic on the in-memory SDKUserMessage stream and isMeta only after the message is persisted to JSONL on disk. Our SDK pipeline runs against the in-memory shape, so isMeta was never set on the log message and the mapper's skip didn't fire. Forward either flag as isMeta when building the RawJSONLines payload so both the SDK pipeline and the on-disk JSONL scanner end up with a consistent signal.

Notes

• App + CLI changes; no server or wire changes.
• New translation keys added for toolGroup section (tool call grouping summaries) across all 10 languages.
• sessionOverlayNav is a new zustand store local to sources/-session/; no schema or persistence implications.
• The CLI fixes are all behavioral, no new RPCs or message types — existing fields (isMeta, agent-state requests / completedRequests) are used consistently across both pipelines.