docs: add next session prompt for bb-ui2.6, .7, .8

NEXT_SESSION_PROMPT.md

@@ -0,0 +1,133 @@
+# Next Session: bb-ui2.6, bb-ui2.7, bb-ui2.8 - Shell Layout Components
+
+## Context: Recovery from Corruption Incident
+
+Last session we recovered from a catastrophic file corruption event where null bytes overwrote dozens of files. We:
+- Recovered tracked files from git stash commits
+- Reinstalled node_modules and regenerated shadcn components
+- Recreated earthy-dark tokens from bead specifications
+- Committed all work with story-driven commit messages
+- Created PR #10: https://github.com/zenchantlive/beadboard/pull/10
+
+**Current branch:** `feat/bb-ui2` (branched from recovery branch)
+
+## Beads to Complete This Session
+
+### bb-ui2.6: TopBar (1.3)
+**Location:** `src/components/shared/top-bar.tsx`
+**Dependency:** ✅ bb-ui2.5 (UnifiedShell) is CLOSED
+
+Create top navigation bar with:
+- Three view tabs: Social, Graph, Swarm
+- Active state indicator (bold text, accent underline)
+- Placeholder filter/search inputs
+- Wire tab clicks to `useUrlState.setView`
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [Social] [Graph] [Swarm]    │ [🔍 filter] [⚙ settings] │
+└─────────────────────────────────────────────────────────┘
+```
+
+### bb-ui2.7: LeftPanel (1.4)
+**Location:** `src/components/shared/left-panel.tsx`
+**Dependency:** ✅ bb-ui2.5 (UnifiedShell) is CLOSED
+
+Create left sidebar with:
+- Channel tree for epic filtering
+- Fetch epics from bd API
+- Expandable tree structure
+- Project scope controls
+- Responsive collapse (desktop: 13rem, tablet: collapsed, mobile: hidden)
+
+```
+┌──────────────┐
+│ CHANNELS     │
+├──────────────┤
+│ ▼ bb-ui2     │
+│   ▶ bb-ui2.0 │
+│ ▼ bb-buff    │
+├──────────────┤
+│ SCOPE        │
+└──────────────┘
+```
+
+### bb-ui2.8: RightPanel (1.5)
+**Location:** `src/components/shared/right-panel.tsx`
+**Dependency:** ✅ bb-ui2.5 (UnifiedShell) is CLOSED
+
+Create right panel with responsive behavior:
+- Desktop (>=1024px): Fixed sidebar 17rem, always visible
+- Tablet (768-1024px): Slide-over from right, backdrop
+- Mobile (<768px): Full-screen drawer
+
+Also create: `src/hooks/use-responsive.ts`
+
+## Existing Components (Do Not Recreate)
+
+- `src/components/shared/unified-shell.tsx` - Main 3-panel grid layout ✅
+- `src/components/shared/base-card.tsx` - Card primitive ✅
+- `src/components/shared/agent-avatar.tsx` - Avatar with liveness ✅
+- `src/components/shared/status-badge.tsx` - Status display ✅
+- `src/hooks/use-url-state.ts` - URL state management ✅
+- `src/lib/social-cards.ts` - Social data builder ✅
+- `src/lib/swarm-cards.ts` - Swarm data builder ✅
+- `src/components/shared/workflow-graph.tsx` - Graph component ✅
+
+## Key Hooks to Use
+
+- `useUrlState` from `src/hooks/use-url-state.ts` for view/tab state
+- Create `useResponsive` for breakpoint detection (bb-ui2.8)
+
+## Design Tokens
+
+Earthy-dark tokens are in `src/app/globals.css`:
+- `--color-accent-green: #7CB97A`
+- `--color-accent-amber: #D4A574`
+- `--color-accent-teal: #5BA8A0`
+- `--liveness-active/stale/stuck/dead` for agent states
+
+## Verification Commands
+
+After each bead:
+```bash
+npm run typecheck
+npm run lint
+npm run test
+```
+
+## Workflow
+
+1. Claim bead: `bd update <id> --status in_progress --notes "<plan>"`
+2. Write failing tests first (TDD)
+3. Implement minimal code to pass
+4. Run verification gates
+5. Close bead: `bd close <id> --reason "<what was completed>"`
+6. Commit with story-driven message
+
+## Session Start Commands
+
+```bash
+# Check current branch
+git branch
+
+# Verify we're on feat/bb-ui2
+# If not: git checkout feat/bb-ui2
+
+# Check bead status
+bd show bb-ui2.6
+bd show bb-ui2.7
+bd show bb-ui2.8
+
+# Claim first bead
+bd update bb-ui2.6 --status in_progress --notes "Starting TopBar implementation"
+```
+
+## Important Reminders
+
+1. **Commit frequently** - The corruption incident taught us that uncommitted work is at risk
+2. **Run gates before closing beads** - typecheck, lint, test must all pass
+3. **Use closed beads for commit messages** - Reference the bead ID and describe the story
+4. **Test responsive behavior** - Check at 390px, 768px, 1440px widths
+5. **Wire to useUrlState** - URL is the single source of truth for view state
+