feat(app): a two-column sidebar in labs, your projects beside the tasks of the one you pick

[sean-brydon]

A two-column sidebar, in Labs and off by default: your projects in one column, and the tasks of the one you pick in the next.

Builds on #146 (the quiet sidebar and the type scale), so this branch contains its commits. Merge #146 first and this diff shrinks to the columns work.

What you get

• Settings → Labs → "Two-column sidebar" (sidebarLayout: "list" | "columns" in prefs). With it off, the sidebar renders the same DOM as before.
• First column (220px):
  • The window strip, then the places with the same More menu (add project/box/section, Show, Group by).
  • One 28px row per project. Its end shows amber when something inside needs you, blue while something works, and nothing otherwise.
  • Sections keep their labels and folds. Group by Box shows boxes with their projects under them.
  • A project whose boxes are all away is dimmed and says "offline".
  • ↑/↓/Home/End move between projects; the picked one has aria-current.
• Second column:
  • A region labelled by the project's name, with its box as a quiet note and its + and ⋯.
  • The project's tasks use the existing rows, so open, ⌥-click, drag onto panes, the hover buttons, menus, F2, Shift+F10 and tips all work unchanged.
  • An empty project offers "New task" and "Open the main checkout".
• Which project shows: the last one you picked. Opening a worktree from anywhere (the list, ⌘K, the rail, a notification) picks its project. The pick survives a reload.
• Widths:
  • The second column resizes with its own handle (200–380px, keyboard too), folds with « and comes back with ».
  • Both columns together stay within 40% of the window.
  • ⌘\ and the rail are unchanged.
• The foot (skills notices, the boxes line, Settings) runs under both columns, so nothing in it is cut off.

Where it lives

• components/sidebar/columns.tsx (new).
• components/sidebar/projects.tsx: per-project logic moved into hooks and rows that both layouts share.
• components/app-sidebar.tsx: strip, places and foot split out, plus ColumnsSidebar.
• lib/sidebar-columns.ts (with tests).
• lib/sidebar-width.ts and lib/prefs.ts.

Proof (mock data)

Light	Dark

The Labs switch:

Checks

• tsc, check:titles, check:type, check:csp, check:themes, typecheck:plugins, pnpm test (523), pnpm build, npx tsc -p e2e, docs build.
• New e2e/sidebar-columns.spec.ts (10 tests) and an a11y scene.
• After the foot change: sidebar-columns, sidebar-fleet, sidebar-boxes, skills-notice, a11y and keyboard, 113 passed.
• Before it, the wider set: sidebar-*, workspace, look, first-run, guided-install and rail, 145 passed.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
berth	Ready	Preview	Oct 17, 2026 9:26pm UTC
berth-docs	Ready	Preview	Oct 17, 2026 9:26pm UTC

[linear-code]

ENG-6401