/60 Stream Redesign — Full Plan

Goal: redesign the /60 chat surface to the V3 "stream" design system — answer-as-typography, evidence racks, receipts, the proactive pulse layer — on the 60 brand palette, mobile-first, with zero vertical card clipping as a structural invariant.

Mockup: https://claude.ai/code/artifact/8295536e-b850-49b5-8cda-72ae6858e0a4 (scene 5)

1. What we must cover (codebase inventory)

• ~200 response component files, 48 canonical response types (~70 v3 registry entries) across 12 archetypes: entity cards, lists/tables, drafts/composers, approvals/HITL, analytics/charts, calendar/meetings, campaign/workflow, prospecting/enrichment/search, disambiguation/clarification, status/receipts, relationship/comms, errors/gating.
• 40 canonical sixty_* MCP tools (semantic layer over the action registry). Writes never auto-execute: plan → check_permission → run_write_workflow(execute) with explicit approval; email = Gmail draft only.
• 10 proactive judgement domains (deal, email, meeting, contact, task, enrich, proposal, ops, outreach, other) across 3 landing sections (need / did / brain); NeedItem carries confidence, rationale, approve/edit/reject, auto-skip 24h; AgentDraftCard has the confidence dial + per-domain auto-approve thresholds.
• 5 skill categories (writing, research, pipeline, outreach, coaching) via the Mission Control slash palette; long-running UX via ToolCallIndicator / AgentWorkingIndicator / EnrichmentScanningCard.
• Voice: Gemini Live "Call 60" + Web Speech dictation; 6 call states; voice reuses structured cards via projectToChatVoice.

Key files: src/components/copilot/responses/ (+ CLAUDE.md, ../types.ts), src/components/copilot/hitl/{AgentDraftCard,ApprovalCard}.tsx, src/components/single-surface/{preChatDeck,preChatNextBestAction}.ts, SkillCommandDropdown.tsx, CopilotInput2.tsx, supabase/functions/_shared/mcp/tools/use60CanonicalTools.ts, src/pages/platform/DesignGallery/shared/tokens.ts.

2. Design system spec

Foundation: navy #070A12 ground with #141B33 radial; emerald #10B981 primary; brand gradient 92deg, #2DD4BF → #60A5FA 45% → #8B5CF6; tri-accent violet #8B5CF6 (intelligence), emerald (done/commit), blue #38BDF8 (needs-you); glass rgba(20,26,44,.62) + blur 24; text #EAF0FA / dim #8A94AB / muted #5A6478; line rgba(138,148,171,.16); Cabinet Grotesk display, Inter body, mono for timestamps/slugs.

Core thesis: the answer is typography, not a bubble. Evidence extends sideways, never down. History compresses; the present gets the stage. Nothing is ever vertically clipped — a structural invariant, not a QA goal.

2.1 Stream primitives

The Spine. 1px vertical gradient line (teal→violet), every entry owns a node. Node states: past (7px muted dot), live (emerald + ring glow, 2s pulse, exactly one at a time), working (teal, 1.2s, concentric rings), attention (blue + count badge — proactive), error (red, static). Nodes clickable (jump/expand); spine itself decorative.

Headline Answer. Ask-line (mono 11px YOU · 18:06 — "…"; voice turns say VOICE) → headline (Cabinet Grotesk 700, clamp 21–29px, ≤2 lines hard rule, model prompted to ≤140 chars, exactly 0 or 1 gradient-highlighted span) → subline of source chips (receipts of work actually done; click opens source; max 4 + +N). Loading = skeleton headline resolving word-final. Not for clarifying questions (quiet prompt row) or pure acks (straight to Receipt).

Evidence Rack. Horizontal snap-scroll; fixed cards 252×170 (224×164 mobile): eyebrow (tinted 10px caps) → title 14.5/600 → 2-line clamped body → footer pinned bottom (status fact + tinted verb). Accents: violet=intelligence, emerald=commitments, blue=CRM/context. Height immutable; overflow → Focus Sheet. 0–6 cards; >6 = "view all →" tail. Never wraps, never for tabular data (Ledger) or editable content (Draft Sheet).

Receipt. Collapsed exchange: mono timestamp + icon + ≤64-char model-generated summary + chevron. Collapses 400ms after a newer entry goes live; tap re-inflates in place (240ms spring), one expanded past entry at a time. Variants: receipt-progress (radial progress icon), receipt-attention (blue rail), receipt-error. Mono day dividers; the stream is continuous, sessions never end.

Action Ribbon. 1 emerald primary (model-selected single best next action) + ≤3 ghosts. Write primaries open the Approval Card, never execute. Executing = inline spinner + label swap; success = emerald check morph → entry collapses to receipt.

Composer. Onyx capsule, two rows. Row 1: USING + teal context chips (the honesty layer — exactly what grounds the next turn; removable; tapping a rack card adds a chip; max 4+overflow) + intent switch Ask | Do | Draft (sets the response contract; model may suggest, never auto-switches; sticky per session; ≤640px behind long-press send). Row 2: mic · field · emerald send (→ stop-square while working). / docks Mission Control flush above (square joined corners, category tints, mono slugs).

2.2 Archetype adapters (every response type maps to exactly one)

1. Single entity — headline = the insight; rack = entity + satellites; tap → Focus Sheet (400px right column desktop / 92svh bottom sheet mobile) holding the full V2-style card. Stream terse, sheet deep.
2. Lists/tables — the Ledger — ≥7 rows: full-width block, fixed min(320px,38svh), internal scroll (the ONE sanctioned inner scroll), sticky header, mono tabular-nums, 8 cols desktop / 3 mobile, row tap → Focus Sheet, filter chips, "Open in App ↗" >100 rows.
3. Analytics — headline = the finding; rack of stat cards (26px tabular number, delta pill, sparkline); max ONE full-width 220px chart block; more = report artifact.
4. Drafts — the Draft Sheet — never editable inline. Preview card in rack; "Review & approve" opens sheet: locked To/Subject, editable body, tone ghosts, diff on regenerate. Approval creates a Gmail draft — 60 never sends (stated verbatim under the button).
5. HITL approvals — full-width blue Approval Card: verb-first title, change-set diff rows, confidence dial, rationale; Approve (blue — approvals are blue, emerald is done) / Edit / Not now. Server-side single-use token; disarms if consumed elsewhere; batch = checklist rows "Approve 4 of 6".
6. Workflows — one living-checklist entry that mutates (never entry-per-step); paused steps inline an Approval Card; collapses to receipt-progress; node badge when it needs you.
7. Clarification — quiet prompt row: dim question + 2–4 choice chips (keys 1–9) + "None of these". Never a modal.
8. Long-running jobs — working entry ≤10s then detaches to a pinned receipt-progress ("Enriching 240 leads — 12% · ~4 min"); tap to expand; completion flips emerald + ripple; resumable across devices (server state).
9. Errors/empty/no-permission — headline is the plain failure + one retry card; empty = headline owns the next move; no-permission = blue connect card with scopes, round-trips back and auto-retries.
10. Voice — composer swaps to live waveform; rolling transcript line on the current entry; spoken replies are normal stream entries (voice and text are one stream).
11. Artifacts — violet rack card with live thumbnail → Focus Sheet preview; regenerations version inside the card (v3 ▾), never new entries.

Coverage contract: every MCP tool and skill output maps to one archetype. A skill may not invent a bespoke layout.

2.3 Proactive teammate layer

• The Pulse: judgement calls never inject into the stream. Blue attention node at spine top + one-line pulse toast sliding from the gutter (auto-retracts 6s to badge). No sound, no focus steal, no modal, ever.
• Etiquette (hard rules): never move the caret; never reflow under cursor/thumb; batch arrivals within 60s; urgency changes rail color only; working state suppresses toasts (badge only).
• Deck: pulse tap → triage deck slides over the stream (same swipeable component as home; items ARE Approval Cards). Actioned items append receipts to the stream — the stream is the single audit trail.
• Confidence tiers: ≥0.92 auto-act (emerald "did" receipt + 30s undo); 0.65–0.92 judgement call (deck+pulse, confidence dial); <0.65 clarification row. Per-domain, user-tunable.
• Morning brief: greeting hero + status line; deck beneath; the brief is stream entry #1 (headline + rack of top moments + receipts for everything auto-done); greeting shrinks into header on first interaction.

2.4 Working state

Entry mounts instantly: working node, skeleton headline, real narration lines (live teal pulse → emerald checks; max 5 + fold), skeleton rack filling in place, muted "already know" fact-chip strip. Composer stays hot for steering (pills become steer verbs; steering appends ↳ steered: to the same entry). Stop keeps partials + "stopped early" chip. Completion: narration collapses into the headline, node → live, single dot ripple. >10s → detach.

2.5 Mobile rules

Thumb zone owns action: composer bottom-docked above safe-area; ribbon above composer ≤640 (read up, act down); primary ≥44px leftmost. Rack = swipe with 24px next-card peek. Deck swipe-native (right approve / left skip / tap edit). Sheets = 92svh bottom sheets, the only vertical card scroll anywhere. Collapses ≤640: intent switch, avatars, optional KVs, autoskip, "New chat" text, context chips → "Using 3 sources". Ledger: 3 cols, sticky first. Type floor 10px, headline floor 20px. CI invariant: at 390×844, a full single-entity entry fits between header and composer with ≥16px clearance — a Playwright bounding-box assertion.

2.6 Motion & dots

Idle: 44px grid, slow twinkle (.05–.16, 2.6s), size breathe, ±1.6px drift, ambient full-field wave every 7s. Thinking: hue 230→173 (color carries the state — no position convergence). Completion/deck swipe: single ripple from the live node. Entry mount 12px rise 240ms; collapse 400ms spring. Reduced motion: dots static, no waves, 120ms fades — zero exceptions. One rAF loop; transform/opacity only; nothing animates during scroll.

3. Delivery phases (each = one draft PR)

Maps 1:1: tokens, GlassCards, deck/NeedSection, AgentDraftCard→Approval Card, Mission Control, V2 entity cards (as sheet content), approval backend. Net-new: StreamView/spine/receipts, headline envelope, rack, Ledger, Focus/Draft Sheets, context chips, intent switch, pulse system, narration-in-entry.

Risks: headline quality (envelope validation + first-sentence fallback); receipt drift (generate at answer time, store server-side); Phase-3 tail (legacy adapter keeps it non-blocking); inner-scroll temptation (lint rule: no overflow-y in entry children except Ledger/sheets); iOS svh/keyboard (test early); dual UI during rollout (per-user flags; both write the same conversation store).

4. Overnight run — acceptance criteria

Each phase lands as a draft PR off main, build-gate clean, with:

1. Typecheck + build green; no modification to gateway/edge functions except the additive envelope (Phase 3, separate PR).
2. Feature-flagged; legacy path untouched when flag off.
3. The mobile CI invariant test included from Phase 2 onward.
4. PR description: phase scope, screenshots (desktop + 390px), flag name, rollback = flag off.
5. Nothing merged, nothing deployed.