133 lines
4.4 KiB
Markdown
133 lines
4.4 KiB
Markdown
# 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
|
|
|