zenchantlive d335e5bf71 fix: orchestrator button + Pi SDK session error

- Move leftSidebarMode from URL state to local useState in unified-shell,
    avoiding force-dynamic router round-trip that made the button appear broken                                           - Replace fileURLToPath(new URL(..., import.meta.url)) with process.cwd()
    in bb-pi-bootstrap.ts — import.meta.url is a webpack:// URL in Next.js,
    causing cross-realm TypeError when passed to Node.js fileURLToPath()

2026-03-24 19:02:04 -05:00

3.7 KiB

Raw Blame History

Phase 4 - Multi-Surface Launch-Anywhere UX

Status: Planning Created: 2026-03-07 Goal: Add spawn affordances to all UI surfaces so users can launch agents from anywhere

Current Surfaces

Surface	Location	Purpose
Social cards	`src/components/social/`	Show beads with status, labels, assignments
Graph nodes	`src/components/graph/`	Show beads in dependency graph
Right panel	`src/components/shared/right-panel.tsx`	Contextual details when bead selected
Agent status panel	`src/components/agents/agent-status-panel.tsx`	Show active agents (already has spawn in orchestrator)

Discovery Tasks

Find all social card components
Identify current actions/buttons
Determine where spawn button fits
Document available context (beadId, status, assignee, labels)

Task 2: Analyze Graph Node Components

Find all graph node components
Identify current interactions
Determine where spawn button fits
Document available context

Task 3: Analyze Right Panel

Find contextual details components
Identify where spawn makes sense
Document available context

Implementation Plan

Step 1: Create Spawn Button Component

Create reusable spawn button that:

Accepts beadId and context
Shows agent type selector dropdown
Calls orchestrator to spawn agent
Shows loading state
Links to Agent Status panel

File: src/components/shared/spawn-agent-button.tsx

Add spawn button to social card
Pass beadId from card data
Show when status is "open" or "in_progress" with no assignee

Files: src/components/social/social-card.tsx

Step 3: Add to Graph Nodes

Add spawn button to graph node context menu or hover
Pass beadId from node data
Show for unassigned beads

Files: src/components/graph/graph-view.tsx, node components

Step 4: Add to Right Panel

Add spawn section when viewing bead details
Show spawn options for task/epic beads

Files: src/components/shared/right-panel.tsx

Step 5: Wire Spawn Actions to Orchestrator

Create API endpoint or event for spawn requests from UI
Orchestrator receives spawn request and executes
Update agent status panel

Files: src/app/api/runtime/spawn/route.ts or extend existing

UI/UX Considerations

Spawn Button Placement

Social card: Bottom of card, next to status badge
Graph node: Context menu on right-click, or hover tooltip
Right panel: New section above details, when bead is unassigned

Spawn Flow

User clicks "Spawn Agent" button
Dropdown shows agent types (Engineer, Reviewer, etc.)
User selects type or "Auto" (let orchestrator decide)
Button shows spawning state
Agent appears in status panel
Button changes to "View Agent" link

Context Packaging

When spawning from a surface, package:

beadId
bead title/description
bead status
current assignee (if any)
relevant labels

Blocked Items

None identified yet.

Success Criteria

Spawn button appears on social cards for unassigned beads
Spawn option available on graph nodes
Right panel shows spawn section for task details
Spawning from any surface creates bead and agent
Agent status panel updates with new agent
User can continue chatting with orchestrator while agent works

Estimated Effort

4-6 hours

Next Steps

✅ Create plan document
🔲 Run discovery on social card components
🔲 Run discovery on graph node components
🔲 Run discovery on right panel components
🔲 Create spawn button component
🔲 Integrate into surfaces

3.7 KiB Raw Blame History