diff --git a/NEXT_SESSION_PROMPT.md b/NEXT_SESSION_PROMPT.md new file mode 100644 index 0000000..ee56adb --- /dev/null +++ b/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 --status in_progress --notes ""` +2. Write failing tests first (TDD) +3. Implement minimal code to pass +4. Run verification gates +5. Close bead: `bd close --reason ""` +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 +