Skip to content

feat(demo): day-zero onboarding scenario (deferred setup)#4329

Open
rafaelgcrespo wants to merge 37 commits into
vibegui/turtles-demofrom
baby/day-zero
Open

feat(demo): day-zero onboarding scenario (deferred setup)#4329
rafaelgcrespo wants to merge 37 commits into
vibegui/turtles-demofrom
baby/day-zero

Conversation

@rafaelgcrespo

@rafaelgcrespo rafaelgcrespo commented Jul 6, 2026

Copy link
Copy Markdown

Continues @vibegui's #4327 — the day-zero onboarding scenario the data-room meeting assigned to me. Targets vibegui/turtles-demo so both scenarios ship together and play from /demo.

Built entirely on the turtles primitives (Director/Track: say, caption, tool, showCard, setSender, setPreview) and reusing its HTML app builders + chrome — no changes under the real app.

The story — deferred setup

/demo/day-zero, 5 beats:

  1. Sign-up = the filter. "Who's setting this up?" → the setup person connects GitHub + Storefront URL + Analytics (ghost-typed, each connects live with a spinner→check).
  2. First diagnosis fans out. The pilot reads the site, the code and 90 days of GA4 in parallel (real chat pipeline + tool cards).
  3. The org assembles itself. Preview fills with the operations dashboard; the backlog lands as an inline plan card, then the kanban pre-populates — "like a month with an agency, prioritized overnight."
  4. "Your operation is ready." A ping on WhatsApp + email (inline card).
  5. Invite the brand. Michelle is invited as Brand Manager — she lands on agents already set up and never sees GitHub.

Changes

  • new demo/scenarios/day-zero.tsx — the scenario (Stage + screenplay).
  • demo/scenarios/index.ts — registered in SCENARIOS (shows on /demo).
  • demo/scenarios/turtles.tsxadditive exports only (orgDashboard, tasksKanban, storeOpsApp, settingsApp, velaPreview, FloatCard, HomeCorners, Composer) so day-zero reuses them; no logic touched.
  • demo/voiceover.tsx — 9 narration lines (dz-01..09) + estimated hold windows. Clips still to be recorded (@vibegui — same Maya1 pipeline).

Checks

bun run fmt · bun run --cwd apps/mesh check (0 errors) · bun run lint (0 errors) — verified by running bun run dev and playing /demo/day-zero end-to-end (setup → connect cascade → shell + diagnosis → assemble). Demo-only; no DB changes.

Note: fixed a hooks-count violation caught while verifying (a useDemoInput was called inside a short-circuiting .every()), now called unconditionally.

🤖 Generated with Claude Code


Summary by cubic

Adds a day‑zero onboarding demo at /demo/day-zero showing deferred setup: connect GitHub, site URL, and GA once; deco diagnoses, builds an ops dashboard and backlog, and invites the brand. Runs on turtles demo primitives; no app logic changes.

  • New Features

    • Added day-zero scenario in SCENARIOS with 5 beats: sign-up filter → connect cascade → diagnosis fan‑out → ops dashboard + kanban → ready ping + brand invite.
    • Exported turtles builders for reuse: orgDashboard, tasksKanban, settingsApp, velaPreview, FloatCard, Composer, HomeCorners (additive exports only).
    • Added 9 narrated voiceover clips (dz-01..09) and mapped measured hold windows in voiceover.tsx.
  • Bug Fixes

    • Used cn() for app-switcher conditional classes in demo chrome for correct styling and lint compliance.

Written for commit bef6774. Summary will update on new commits.

Review in cubic

vibegui and others added 30 commits July 5, 2026 00:48
Add a public, fully-mocked walkthrough that drives the REAL Studio chat
components from a recorded stream — no backend, MCP transport, or auth.

Framework (apps/mesh/src/web/demo/):
- Director: a non-React class that owns all timing via @decocms/std sleep
  and mutates external Stores; components subscribe via useSyncExternalStore,
  so no useEffect is needed to animate. Screenplays read as a storyboard
  (await d.user/stream/think/tool/parallel/endTurn) and support multiple
  parallel chat tracks plus org switching, previews, a ghost cursor, and a
  typed terminal.
- Chat seam: DemoChatStreamProvider supplies a scripted ChatStreamContextValue
  (via an exported DemoChatStreamContext) so the real renderers paint it
  identically to a live stream.
- DemoProviders: mock ProjectContext + a network-free QueryClient.

Two demos, each on its own URL (/demo chooser, /demo/<id>), light mode:
- /demo/storefront — business user drops in a URL and gets an accurate
  perf+SEO diagnosis scorecard, a fix plan, parallel fixes, and a re-audit.
- /demo/agents — Studio as a web Conductor: ghost cursor opens the connect-
  desktop modal, a mocked iTerm runs `bunx decocms link` then minimizes to
  "connected", then work runs across two orgs in parallel (chat + live
  preview) while switching context.

The autoplay runner is guarded by a per-stores singleton with deferred
teardown so the dev runtime's spurious effect re-runs can't restart a
scenario mid-play.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reworked the scripted demos for rhythm and a real ending.

- Pacing: deliberate beats with anticipation captions, reading holds after
  big content (diagnosis / result tables), staggered parallel fixes, and
  smoother typing speeds.
- Transitions: caption fade/slide, org-workspace crossfade on switch, preview
  iframe fade-in on change, and cursor-driven org switching (the ghost cursor
  glides to and clicks the org tab) instead of hard cuts.
- Ending: the demo no longer loops silently — after a full play-through it
  shows an end card ("Get started free" / "Watch again"). The runner plays
  once, then awaits a replay signal.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Storefront demo:
- The agent now proposes a real WORK PLAN inline in the chat — a sprint of
  task cards — and waits for the viewer to approve (ghost cursor clicks
  "Approve & start"). Tasks then tick live; the first deliverable is a
  pull-request card (checks → merge), then deploy + re-audit.
- Ends with a "get this every morning" card to connect Slack / Teams for a
  daily automated audit.
- Inline cards render via a tiny part-renderer registry
  (chat/message/parts/extra-part-renderers.ts) the demo registers into — the
  core chat renderer stays demo-agnostic (empty registry in normal use).

Agents demo:
- Replaced the top org tabs with a real Studio-style sidebar of agents. You
  switch agents from the sidebar; background work keeps running and a
  notification dot appears on an agent's icon when its task finishes.

Fix: card outputs are replaced immutably on each update so the compiler-memoized
cards actually re-render (in-place mutation was silently dropped).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the threads-nested-under-agents sidebar with three structural
sections: a collapsed "Team threads" accordion (other members' threads,
with a "See all" jump to the monitoring Threads tab), a flat chronological
"My threads" list, and a flat "Agents" list where clicking an agent opens
its most-recent thread (or a new one).

Removes the buried "Mine only / All members" filter toggle entirely — the
member split is now structural. The Type filter and group-by-status toggle
stay. Makes TaskRow's onArchive optional so team/agent rows are read-only
(archiving hides a thread org-wide). Reuses the existing DnD layout for the
agent list so pinning/ordering survive. Deletes the now-dead TaskGroup /
SortableTaskGroups.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Restyle the Team threads header to match the other section labels (small
uppercase, chevron + count, hover "See all"), and give My threads and Agents
the same collapsible affordance. Extract a shared SidebarSectionHeader so all
three read as peers. Team collapsed by default; My threads and Agents open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…crumb, your-deco home, share-a-scope

One continuous scripted walkthrough of the simplified navigation model:
path = context. Breadcrumb (deco > org > agent) is the only nav and the
chat's scope selector; org cards report as agents; every level has a
Share that mints the MCP URL for exactly that scope.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…e away to

Removes the Library sidebar item (full route swap that lost your chat
context) in favor of a Chat-style toolbar toggle revealing a right-side
panel on any org-shell screen. Browse state stays in the URL (?path=,
route-agnostic); open state is per-user localStorage; /$org/files stays
for deep links. Mobile gets a full-screen sheet.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…re beside breadcrumb

The stage now copies the real shell's vocabulary: bg-sidebar cream body,
card-shadow float cards, the home hero + capybara + corner art, the
composer's Tools/scope/model chrome, colored tile avatars, real deco
logo. Share moved from far-right to right beside the breadcrumb (it
shares THAT scope). Library panel: give the floating card its cream
backdrop + top breathing room so its rounded top isn't clipped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ligns with chat

The Library already renders its own title inside its floating card, and
that card shares the chat card's shell padding — the extra panel header
double-labeled it and pushed it out of alignment. Close X now floats
over the card corner.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Home goes back to the vertical right rail — each org card now carries
three metric squares (stat + delta, single-hue 12-point sparkline,
watched number that updates live when work ships). Org agents also list
directly under AGENTS in the home sidebar. Sparkline hues are the 700
steps of each org's hue, validated >=3:1 on the light surface.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… in the header row

The toggle panel caps at ~560px, so the browse|preview split is never
usable there — an open preview now fills the entire panel (the full
/files route keeps the split, where there is real horizontal space).
The panel close button moves INSIDE the Library's own header row
(title · refresh · upload · close) instead of floating above it, which
also stops it intercepting clicks. Adds the missing aria-label on the
preview close button.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Wider canvas, bigger presence: larger metric values, taller squares,
roomier cards. The orgs are the home's co-protagonist.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Home sidebar carries example my-threads; the org sidebar gets the full
Team threads / My threads / Agents structure with teammate attribution
— you can see what teammates are working on in each org, and the demo
points at it. The morning brief now ends with an inline 'Vela Store
needs you' card whose button navigates into the org, landing in a
thread where the pilot has already asked the question — you answer and
work proceeds. New generic showCard primitive on the Director.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…th status chips; breadcrumb icons per level

The guiding caption moves to the top (was lost over the composer),
grows, gains backdrop blur and a violet tint — it reads as the
narrator, not a product component. The org CTA card gets a real
app-UI body: status chips (Assets approved ✓ / QA passed ✓ / Hero not
shipped) beside the navigate button. Every breadcrumb level now
carries its own icon tile, not just the deco logo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ecomes a sales question

Nobody asks their teammate to 'keep LCP under 1.5s' — and the site
shouldn't ship slow in the first place. Vela's pilot now audits before
deploying, catches the regression the new hero introduced, subtasks
Storefront Bot to fix it, then continues to deploy — the user only says
'ship it'. The agent-level zoom is now Store Ops with a question a
human actually asks: how were yesterday's sales? (orders/revenue/AOV
recap, drop converting at 2.1x).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…s, explorable end state

Every assistant turn now carries its speaker (avatar tile/logo + name)
via Track.setSender. Settings becomes what the model says it should be:
an AGENT — always the bottom one in / and /{org} — whose screens are
MCP apps rendered in the preview panel ('Make Rafa an admin' → tool
call → the Members app updates). No special settings screen: chat +
preview, everywhere. The end card is dismissible into explore mode —
crumbs, agent rows, org cards and Share are genuinely clickable on the
final state, with floating Replay/Get-started pills.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… affordances, narration trial, cadence fixes

Entering an org lands on its OPERATIONS dashboard (KPIs with anomaly
flags, diagnosed anomalies, agent-proposed opportunities, review queue
— after Rafael's mocks), not a site preview. Store Ops gets a sales
app; the pilot's follow-ups land on a tasks kanban; Settings' Members
app gains an invite box and 'Invite your team' pins to every sidebar.
The CTA card now lands WITH the digest (no dead wait). Cadence fixes:
the team-threads beat moves to after the ship (was an urgency-killing
detour, and its display:contents target sent the ghost cursor to the
top-left corner); Share moves to Store Ops (take THIS agent to
WhatsApp); explore-mode clicks now set the right per-agent preview —
fixes 'settings shows nothing'. Trial narration: two caption clips
(macOS say, Samantha Enhanced) with a mute toggle on the caption row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…y default

The captions are now the narrator's script: 17 lines that lead the tale
(present tense, written for the ear) instead of labeling UI. Every line
has a Zoe (Premium) clip keyed by exact caption text. Narration is ON
by default — the first pointer/keydown anywhere unlocks autoplay and
re-speaks the line on screen; the toggle mutes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The show now opens with a start card — 'Play with narration' / 'Watch
muted'. That click is the browser's audio unlock, so the FIRST line
narrates (autoplay policy made cold-start narration impossible). Esc
toggles a pausable clock: every Director/Track wait runs on chunked
unpaused-time sleep (~150ms response), the in-flight clip pauses with
it, and a pill says how to resume. Start/mute choices survive replays.
Clips regenerated at 176wpm (186 was too fast).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ts pill changes

Audited all 17 captions against clip durations: added a dashboard beat
so line 5 completes, extended the two settings holds. Line 4 is now
'One brief, three orgs — and exactly one thing that actually needs you.'

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…o fit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
caption() is now duration-aware: it awaits the previous line's clip
window (from an exported VO_MS table) before replacing it, so no
narration is ever cropped — regardless of voice or rate. All visible
'org(s)' become 'team(s)' (narration, rail label, digest header, helper
text, end card). Clips regenerated with Isha @160wpm.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…2wpm

- Captions now behave like subtitles: auto-clear when their narration
  window ends (no more idle pills over long tool sequences) and a fixed
  700ms metronome gap before the next line. Verified with a
  MutationObserver run: 10/16 transitions at ~250ms pill-free, none over
  ~2.5s.
- Script pass: "your deco Studio", proactive morning line, pilot→agent
  everywhere, "team context" framing, positive triage line, closing
  "same intelligence, only the context changes".
- Every agent is a LOOP over goals: new minified SLO card (SLI, target,
  error budget, trend) in the Store Ops app; caption 11 says it.
- All 17 clips regenerated at Isha @182wpm; VO_MS from afinfo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces macOS `say` clips with Maya1 (Apache 2.0) generated on-device:
LM on MPS, sampling + SNAC decode on CPU (works around two PyTorch MPS
bugs). Voice designed by description; all 17 clips whisper-verified
word-for-word. VO_MS from sample-accurate wav lengths; final beat
extended so markEnded() no longer crops the closing line.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Line 5 loses "nothing to rebuild"; line 15 ("Setup is one person's
  job") removed entirely; logo line now "back home — to your agents".
- vo-09 re-taken (5.6s -> 4.1s, the slow read), vo-11 re-taken without
  the mid-phrase pause (and whisper-verified "loop", not "looped").
- Clips renumbered to vo-01..16; all takes whisper-verified; cadence
  re-measured end to end (every clip plays fully, ~250ms metronome).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Voice picked from a 3-way bake-off (Maya US female/male, Chatterbox).
"No settings screens anywhere" line removed; clips renumbered
vo-01..15, all whisper-verified (one slurred take re-rolled), beats
retimed to the shorter reads, cadence re-measured end to end.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
vibegui and others added 7 commits July 6, 2026 10:05
- PreviewFrame gains an app switcher (top right): the current screen is
  explicitly ONE MCP app of this agent among many. The kanban beat now
  CLICKS the Tasks chip; chips are clickable in explore mode too.
- Kanban restyled to brand: column wells, white cards, brand chips,
  agent/human avatar rows.
- Org/agent level split is chat 40 / preview 60.
- Lines 1-2 re-taken cheerful (viewer-picked take B); line 1 is now
  "This is deco Studio — the home for your AI agents!"

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Plain `2fr` tracks have min-width:auto — the reasoning row's long
single line stretched the chat column over the preview.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- New line 6: "Top left is your context" — the breadcrumb gets a violet
  spotlight while it plays; the crumb is named as scope + agent selector.
- Share arc rebuilt: agent scope goes to "Claude Code, Codex, or
  anywhere"; a new beat walks UP the breadcrumb and shares the whole
  team as one MCP; back home, a new beat connects Claude to your deco
  ("all your teams at once"). Codex added to client chips.
- Kanban rebuilt with Studio's real tokens (warm neutrals, 6px radius,
  ring-shadow cards) and story-connected tasks: the Winter Drop ship
  sits in "Done · today", follow-ups mirror the sidebar team threads.
- Script is 18 lines; 4 new clips generated + whisper-verified (one
  "Cloud Code" mispronunciation re-rolled); cadence verified end to end.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The onboarding companion to /demo/turtles, on the same branch so both
play from /demo. Thesis: setup is one technical person's job — connect
GitHub + site + Analytics once, deco reads everything, and the org
assembles itself (operations dashboard + pre-populated backlog). Then
the brand person (Michelle) is invited onto agents already set up and
never sees GitHub.

- new scenarios/day-zero.tsx: 5 beats (sign-up filter → connect cascade →
  diagnosis fan-out → org assembles: dashboard + kanban → "ready" ping →
  invite the brand), built on the Director/Track primitives.
- reuses turtles builders/chrome (orgDashboard, tasksKanban, settingsApp,
  velaPreview, FloatCard, Composer, HomeCorners) — exported additively.
- registered in scenarios/index.ts; 9 narration lines added to the VO map
  (dz-01..09 placeholders + estimated holds — clips to be recorded).

fmt + `--cwd apps/mesh check` + lint all pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Same voice/pipeline as turtles (Maya1 US female, on-device). All 9
takes whisper-verified word-for-word; estimated VO_MS hold windows
replaced with sample-accurate measurements. Verified headless: every
line plays fully, no console errors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@vibegui vibegui force-pushed the vibegui/turtles-demo branch from f00259e to 8c41cca Compare July 11, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants