<!-- Once this directory changes, update this README.md -->

# Components/Layout

Core layout primitives for the application shell.
These components define the spatial structure (sidebar, center, aside, panel).
Place domain-specific content components in `features/` instead.

## Files

- **app-footer.tsx**: Slim footer bar mirroring the AppHeader chrome pattern; Jarvis session entries use sibling native buttons for activation and close actions without nested interactive controls, and pass the active Jarvis entry ref to the Jarvis popover so anchor measurement does not require footer state updates during resize; the Ask Jarvis entry exposes a stable E2E anchor for keyboard-activated popover coverage.
- **app-footer.test.tsx**: Regression tests for AppFooter Jarvis session activation and close button semantics.
- **app-header.tsx**: Slim top chrome with the route-backed surface capsule bar, Settings route active presentation, workspace/title/git breadcrumb slot rendering, and browser/bottom-panel/right-aside toggles driven by active layout slot capabilities; chat surfaces project server-backed session unread state into the surface badge slot while preserving Meta-key number hints as the higher-priority leading-slot overlay; the BrowserPanel toggle reads and writes the active surface owner-scoped browser panel visibility; layout state subscriptions are scoped to fields the header renders so resize-only updates do not repaint the surface chrome; interactive regions are marked `no-drag`, key toggles expose accessible names / pressed states, Settings route mode hides panel toggles without changing their stored open state, tear-off windows reserve macOS traffic-light space while hiding the main-window sidebar control, session-scoped windows suppress new-chat and nested tear-off actions, successful chat tear-off opens from the surface bar's release-distance threshold before reserving the chat session until the tear-off closes, browser panel and bottom-panel terminal code are preloaded from header intent, the browser panel, chat Files aside, and bottom-panel shell open intents record first-render performance start marks, and stable `data-testid` anchors remain available for E2E
- **app-header.test.tsx**: Regression tests for AppHeader toggle accessible names, pressed states, callback wiring, and browser/bottom-panel shell performance intent marking.
- **app-layout.tsx**: Pure three-column layout shell — sidebar (via AppSidebar), center column (header/main/footer/panel), and aside. Reads dynamic layout slots through the layout slots store, projects the active surface id into the Right Dock owner state, keeps the Electron BrowserPanel host mounted at the layout boundary, and renders visibility from the owner-scoped dock store rather than shell layout state. Surface cleanup releases native browser/TUI resources while restorable dock metadata remains available for the same thread; the shell still owns resizing, Motion width transitions, React Activity retention, browser-use bridge installation, Settings suppression, and stable E2E anchors.
- **bottom-panel-visibility.tsx**: Visibility context for retained bottom panels. Terminal content uses it to suspend input/focus while hidden without letting React Activity tear down xterm effects.
- **app-sidebar.tsx**: Workspace sidebar wrapper with settings navigation button. Handles keyboard shortcuts for toggling the settings route and sidebar collapse, preloads settings content before navigating, keeps sidebar content behind a memoized render boundary during width drags, commits persisted layout width once at pointer-up, applies collapsed width directly rather than animating layout width, and exposes stable sidebar mode / collapsed-state anchors for E2E assertions.
  Extracted from AppLayout to keep layout concerns separate from sidebar orchestration.
- **dev-bottom-bar.tsx**: Dev-only slim footer inside `AppLayout` that shows the active Router location, React diagnostics toggle, DevTools, hard reload, Electron UserData directory, and resource diagnostics actions
- **layout-geometry-context.tsx**: Explicit layout geometry contract that registers the center column and footer elements through stable callbacks, letting overlays measure DOM nodes only while active without broadcasting resize-driven rect state through React context
- **layout-contract.ts**: Route-first layout chrome contract that derives right-aside, browser panel, and bottom panel identity synchronously from the active surface plus cached session/workspace metadata, including CLI-TUI workspace chats, while only accepting matching active-surface slots for panel content.
- **layout-contract.test.ts**: Regression tests for ignoring stale slots during route surface replacement and preserving CLI-TUI layout capability semantics.
- **layout-slots-context.tsx**: Layout-owned Zustand store for route surface layout slot injection (asideSessionId, asideWorkspaceId, panel, hasAside, hasPanel, hasBrowserPanel, title, workspace, gitBranch). `AppLayout` and command surfaces consume the active slot through scoped selectors while route content registers through `useRegisterLayoutSlots`, preventing active-slot changes from repainting unrelated app regions such as the workspace sidebar; the slot scope accepts active/valid surface slot ids, prunes slots for closed surfaces, and relies on route remount plus feature-owned cache instead of retained app frames.
- **layout-slots-context.test.tsx**: Regression tests for stable layout slot output when switching surfaces and pruning stale slots.
- **resize-handle.tsx**: Draggable handle for resizing sidebar, aside, and panel widths/heights; accepts eager numeric bounds or lazy readers for DOM-measured drag constraints and can separate high-frequency drag updates from the final committed value.
- **right-aside.tsx**: Tabbed right side panel with File Tree, Environment, Changes, Git, Issue, Runtime, and Feed tabs; accepts either a chat session or workspace id, derives workspace details and session runtime metadata as needed, and exposes Environment for every session rather than only Work surfaces. Environment composes session notes, pins, markers, usage, PR, automation, checkpoints, handoff provenance, and local servers, with Work-owned objective/readiness sections when a `workId` is present. The aside renders Git working-tree changes through the Git-owned Changes panel, chat runtime progress/status through the Chat-owned runtime panel, auto-sizes active tab labels from translated text, animates click-driven tab changes with a Motion layout indicator and horizontal panel slide transitions, and exposes stable tab/content `data-testid` anchors for E2E navigation.
- **use-layout-slots.ts**: `useLayoutSlotsCtx`, `useRegisterLayoutSlots`, and `useSyncLayoutSlotScope` hooks for reading, registering, and pruning layout slots from route content components; hidden route surfaces unmount by default, so active slot scope pruning is driven by valid surface slot ids instead of retained app frames.
