Skip to content

U03: Docked resizable right panel column (Dock) - #881

Merged
LinuxDevil merged 2 commits into
mainfrom
fb-u03-docked-panel
Nov 7, 2026
Merged

LinuxDevil merged 2 commits into
mainfrom
fb-u03-docked-panel

Conversation

@LinuxDevil

Copy link
Copy Markdown
Owner

What changed

AppShell can now host a third grid column on the right: a docked panel that pushes the screen narrower (not an overlay), opens/closes, resizes from its left edge (360–640px, capped at 45vw), and remembers width + open state in localStorage. Below 860px the same content renders as a right-side sheet over a scrim. The panel's content is a prop; the Agent Author fills it in a later ticket.

  • src/shell/dockState.ts (new): width constants/limits, dockMaxWidth, clampDockWidth, readDockWidth, readDockOpen on top of readStored/writeStored (forge.dock.width, forge.dock.open).
  • src/shell/Dock.tsx (new): DockProvider / useDock (open + width state, lazy restore, re-clamp on viewport resize), Dock component (renders nothing while closed), useDockResize (pointer-capture drag, keyboard splitter), opener-focus capture/restore, sheet focus, Escape handling.
  • src/shell/dock.css (new): third grid column rules, resize handle, sheet + scrim, reduced-motion handling.
  • src/shell/AppShell.tsx: wraps the layout in DockProvider; ShellLayout sets data-dock/--dock-width and renders <Dock label="Agent Author"> when the dock prop is defined; opening the narrow nav drawer closes the dock (one drawer at a time). App.tsx does not pass dock, so nothing changes visually yet.

How tested

  • npm test --workspace apps/agent-forge -- --run — 985 tests, 90 files, all green (incl. new dockState.test.ts 6 cases and Dock.test.tsx 8 cases)
  • npm run typecheck --workspace apps/agent-forge + typecheck:server — clean; npm run test:server — 1121 tests green
  • npm run lint --workspace apps/agent-forge — 0 errors (31 pre-existing warnings in server files, none in this diff)
  • Root npx tsc --noEmit, npm run lint, npm run test:coverage (483 files green), npm run fallow (0 dead code, 0 above threshold), npm run docs:ratchet, npm run api:check, npm run docs:llms:check, npm run size-check — all clean

Acceptance criteria

  • With dock undefined the shell renders exactly as before (2 columns, no data-dock) — covered by test + all existing AppShell tests stay green
  • Open docked: grid has 3 columns, the screen narrows (push, not overlay), the dock card lines up with the floating screen card (8px gaps via --space-2 padding)
  • Dragging the handle resizes between 360 and min(640, 45vw); release persists to forge.dock.width (live preview writes nothing mid-drag)
  • Arrow keys resize by 16px; Home/End jump to the limits; the separator announces aria-valuenow / aria-valuemin / aria-valuemax
  • Reload restores width and open state; broken storage falls back to closed / 490px without throwing
  • ≤ 860px the content opens as a right sheet with a scrim; scrim click and Esc close it
  • Reduced motion: no slide-in animation, no width transition (shell.css grid transition already gated; .dock-resize transition and sheet animation gated on prefers-reduced-motion)

Generated with Devin

LinuxDevil and others added 2 commits November 4, 2026 14:58
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@LinuxDevil
LinuxDevil changed the base branch from fb-u02-card-shell to main November 7, 2026 12:51
@LinuxDevil
LinuxDevil merged commit aff3bd6 into main Nov 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant