Every Surface Matches the Copilot
4 waves of parallel AI agents systematically polished 50+ components across every view in Orbiter — teams, discover, serendipity, outcomes, leverage loops, command palette, settings, and more. Merged cleanly to dev with zero tech debt.
Live Screenshots
FROM DEV BRANCH
Captured from localhost:3003 running the merged dev branch. Click any screenshot to zoom in. Every view now speaks the copilot visual language.
Wave Timeline
4 WAVESWave 1 — Core Views
6 AGENTSFirst pass applied the copilot recipe to every major canvas: leverage loops, outcomes, discover + serendipity, person sheet, company sheet, and notes modal. Each agent owned a feature folder and ran browser tests to verify.
A1 Leverage Loops
Canvas, response section, response suggestions. Full copilot glass recipe with indigo accent, polish-card-enter animation, stroke-punch hover.
A2 Outcomes
Mode-picker sidebar rows, eyebrow chip gold standard, hero empty state. Purple accent throughout.
A3 Discover + Serendipity
Mode-picker sidebar, hero empty state, eyebrow headers with magenta/emerald accents.
A4 Person Sheet + Deep Bio
17-file overhaul: sheet header, tabs, deep bio dialog, contact details, all matching copilot glass.
A5 Company Sheet
Profile, details, financials tabs. Amber accent for company surfaces, glass containers, shimmer lines.
A6 Notes Modal
Fixed upper-right button stacking by moving DialogClose inline. Matched copilot baseline.
Wave 2 — Feedback-Driven Polish
6 AGENTSFired from 10 specific feedback items captured via browser page-feedback tool. Each agent tackled a targeted complaint — cramped padding, misaligned widths, truncated text, invisible Clerk settings text.
A7 PersonCard + OutcomesItem
PersonCard px-[18px] py-4, NodesGrid gap-5, OutcomesItem split-button with border separator and size-7 meta buttons.
A8 TopNav Pixel-Match
Collapsed 40px centered, expanded 249.59px pixel-exact match to SideNav column. cubic-bezier(0.22,1,0.36,1) easing. Active state with indigo glow.
A9 QueryInput Rewrite
Full rewrite to pixel-mirror copilot composer: rgba(0,0,0,0.20) glass, rounded-[16px], 40×40 gradient submit button with arrow SVG.
A10 Header Widgets
32×32 accent icon containers per feature. Count badges as rounded-[5px] pills. active:scale-[0.97] click feedback.
A11 Clerk + Serendipity
SerendipitySearch placeholder fix. Clerk v5 appearance.elements mapping. CSS --accent scoping fix for invisible text bug.
A12 Outcome Response Rows
32×32 purple/amber icon containers, eyebrow stacks, ml-11 left-border quote panels for AI context. polish-card-enter animation.
Wave 3 — New Surface: Context Panel
NEW COMPONENTContextPanel — Right-Side Milestones
New component born from the April 8 Mark + Josh conversation. The right column of leverage loops and outcomes canvases is no longer empty — it now shows a context milestones panel with two modes. Not a chat. Robert was explicit: “Now you have two chats next to each other. That’s confusing.”
Inspired by Anthropic Claude Code’s “cowork” right panel — static milestones showing what understanding was reached during the creating interview.
Context Mode (Default)
Read-only milestone bullets from the creating interview. Scrollable. Shows “CONTEXT MILESTONES” eyebrow with accent-colored bullet points. Static, not streaming.
Modify Mode
Textarea for dispatching additive refinements. Never overwrites existing suggestions — new ones layer on top. Currently a stub (toasts “Coming soon”) until backend ships milestone storage.
Files: src/components/global/context-panel.tsx (393 LOC) + wiring in network.index.tsx (65 lines changed)
Wave 4 — Close Remaining Gaps
7 AGENTSFinal wave: 7 parallel agents dogfooded every remaining surface in headed browsers. Fixed teams, discover, serendipity, outcomes, command palette, context panel header, and copilot shimmer. Evaluated Crayon SDK migration for serendipity/outcomes — deferred (current canvas architecture is correct per April 8 direction to move away from Crayon for non-chat flows).
A14 Teams
Canvas, list, manager modal (list/members/edit/person views), badge. Copilot glass recipe on all team surfaces.
A15 Discover
Canvas, list, search, response header. Spinner prominence, filter panel, hover stroke-punch with magenta accent.
A16 Serendipity
Response header + nodes to copilot baseline. Emerald stroke-punch, polish-card-enter, ambient glow. Crayon SDK deferred — scope too large.
A17 Outcomes Rows
Response section, trajectory, action, context. Purple/amber border accents, typography micro-polish.
A18 Command Palette
Glass recipe, stroke-punch hover, rounded corners, border accents on Cmd+K items.
A19 Context Panel Fix
Replaced stale “Context” heading with dynamic LEVERAGE LOOP / OUTCOME eyebrow + selected item title.
A20 Copilot Shimmer
Shimmer sweep 1.8s → 2.5s (slower, more elegant). Fork-in-the-road delays confirmed at target (0.8s total reveal).
Clean Merge to Dev
ZERO TECH DEBTDev had diverged with 23 commits from Charles (voice settings, event card layout, glassmorphic tooltips, funding K format, activity filters). Our polish branch had 57 commits. The merge produced 11 conflicts — all resolved by keeping both sides’ changes.
Strategy: Keep dev’s structural/feature changes (new props, logic, components) AND our polish visual changes (CSS, hover states, glass recipe). When both sides modified the same tailwind class on the same element, polish wins — it’s the newer, deliberate visual decision.
The Copilot Recipe
DESIGN LANGUAGEEvery surface now speaks this exact vocabulary. These are the CSS tokens applied universally across all 50+ components:
Glass Container
backdrop-filter: blur(20px) saturate(180%)
border: 1px solid rgba(255,255,255,0.10)
border-radius: 16px / 14px / 12px
Shadow Stack
0 2px 8px rgba(0,0,0,0.30),
inset 0 1px 0 rgba(255,255,255,0.05)
Stroke-Punch Hover
transition: [border-color,box-shadow] 200ms
ease: cubic-bezier(0.22,1,0.36,1)
+ elevated shadow on hover
Typography
tracking: 0.08em
Scale: 9/10/11/13/14/16/24/28
polish-card-enter entrance anim