Demo design pass: viz first-load fixes, theme handling, chat chrome cleanup by davidkpiano · Pull Request #114 · statelyai/agent

davidkpiano · 2026-08-31T23:04:12Z

What

A design pass over the demo app, verified live against the running app.

Viz panel

Machines render before the first run: scenario init was sending raw TS source as the embed's machine; it now sends the serialized config (scenarioVizConfig) the embed actually accepts.
Camera fits automatically: the editor never fits on its own, so fresh content sat off-viewport until a manual fit click. The panel now posts @statelyai.camera.fit after init / machine switch / live system init and on the editor's @statelyai.loaded signal (covers cold loads).
Theme flips no longer blank the pane: theme was part of the iframe key, so toggling remounted the embed and dropped camera + inspection state. It now posts @statelyai.setTheme to the live embed.

Chat panel

Action bubbles show only the action label; the literal-backtick \EVENT`` suffix is gone (the transition log already names the event).
Checkpoint chips use the full rail width before truncating.
Inert assistant-ui actions removed (edit, retry, branch picker, export menu) — the external-store runtime never wired them, so they were dead buttons. Copy stays.
Empty state is vertically centered, long starter chips wrap instead of clipping, and a one-line hint states the split-pane premise (hidden on mobile).

Header

Key badges live in switcher group labels ("Interactive · no key needed", "agent workflow · API key") instead of repeating on every row.
Placeholder logo replaced with the real Stately mark (inline SVG, theme-safe).

Deps

@statelyai/sdk ^0.22.1 → ^0.26.1 (its setTheme protocol support enables the theme fix).

Verification

pnpm --dir demo typecheck and all 64 demo tests pass; root typecheck clean.
Verified in the browser: fresh load shows the fitted statechart with no interaction, theme toggle keeps the same iframe, chips wrap, only Copy remains on messages.

Not included (upstream candidates)

sky.stately.ai websocket warning when a viewer joins a room with no producer (being handled in a separate session against studio/viz).
Editor-side auto-fit on init, which would make the demo's fit messages redundant.

Summary by CodeRabbit

New Features
- Added an explanatory hint beneath the scenario start form.
- Updated branding with the Stately logo and clearer API-key status labels.
Improvements
- Simplified conversation controls for a cleaner chat experience.
- Improved welcome-panel spacing and responsive starter buttons.
- Enhanced visualization loading and camera fitting.
- Theme changes now apply without reloading the visualization.
- Improved layout for checkpoint indicators and small-screen displays.

- Send serialized machine config (not TS source) to the embed so scenarios render before the first run - Fit the embed camera on init, machine switch, system init, and the editor's loaded signal; the editor never fits on its own - Flip embed theme via @statelyai.setTheme instead of remounting the iframe - Drop the literal-backtick event suffix from action bubbles - Let checkpoint chips use the full rail width before truncating - Move key badges into switcher group labels; drop per-row repetition - Center the empty state, add a one-line premise hint, wrap long starter chips instead of clipping - Remove inert assistant-ui actions (edit, retry, branch picker, export menu); keep Copy - Replace the placeholder header logo with the Stately mark - Bump @statelyai/sdk to ^0.26.1

changeset-bot · 2026-08-31T23:04:19Z

⚠️ No Changeset found

Latest commit: b442cee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-08-31T23:05:05Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 4b7d67d7-583f-4d16-a2a8-e63474b0c7cd

📥 Commits

Reviewing files that changed from the base of the PR and between 302deb5 and b442cee.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

demo/package.json
demo/src/components/app-panel.tsx
demo/src/components/assistant-ui/thread.tsx
demo/src/components/demo-shell.tsx
demo/src/components/site-header.tsx
demo/src/components/viz-panel.tsx
demo/src/lib/viz-panel-store.ts
demo/src/styles/chat.css
package.json

💤 Files with no reviewable changes (1)

demo/src/components/assistant-ui/thread.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

The demo updates chat controls and welcome content, replaces header branding, changes scenario visualization input, improves Viz camera fitting and theme updates, and upgrades the @statelyai/sdk dependency.

Changes

Demo experience

Layer / File(s)	Summary
Chat presentation and controls `demo/src/components/assistant-ui/thread.tsx`, `demo/src/components/app-panel.tsx`, `demo/src/styles/chat.css`	Chat messages no longer expose editing, branching, reload, export, or user action controls. User messages omit event types. Welcome content and responsive styles were updated.
Viz configuration and iframe lifecycle `demo/src/components/demo-shell.tsx`, `demo/src/lib/viz-panel-store.ts`, `demo/src/components/viz-panel.tsx`, `demo/package.json`, `package.json`	Scenario panels receive serialized visualization configuration. Viz tracks content changes, fits the camera after loading, applies themes through `@statelyai.setTheme`, and avoids iframe remounts on theme changes. The SDK dependency changes to `^0.26.1`.
Demo branding and example metadata `demo/src/components/site-header.tsx`	The header uses the Stately brand SVG. API-key status appears in group labels instead of individual example rows.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to b442c

This change is merge-ready after normal checks and review; no actionable merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant DemoShell
  participant VizPanel
  participant VizPanelStore
  participant VizIframe
  DemoShell->>VizPanel: pass scenarioVizConfig
  VizPanel->>VizPanelStore: initialize and track fitEpoch
  VizPanelStore->>VizIframe: initialize embed content
  VizIframe-->>VizPanel: `@statelyai.loaded`
  VizPanel->>VizIframe: `@statelyai.camera.fit`
  VizPanel->>VizIframe: `@statelyai.setTheme`

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 5 files. (3 skipped: 3…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: visualization first-load fixes, theme handling, and chat interface cleanup. It is concise and specific enough for the project history.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 5 files. (3 skipped: 3 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch davidkpiano/demo-app-design-review-22a1b0

_{Comment @coderabbitai help to get the list of available commands.}

devin-ai-integration

Devin Review found 1 potential issue.

devin-ai-integration Bot reviewed Aug 31, 2026

View reviewed changes

Comment thread demo/src/components/viz-panel.tsx

Navigation Menu

Uh oh!

Demo design pass: viz first-load fixes, theme handling, chat chrome cleanup - #114

Demo design pass: viz first-load fixes, theme handling, chat chrome cleanup#114
davidkpiano wants to merge 1 commit into
nextfrom
davidkpiano/demo-app-design-review-22a1b0

davidkpiano commented Aug 31, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Aug 31, 2026

Uh oh!

coderabbitai Bot commented Aug 31, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

davidkpiano commented Aug 31, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Viz panel

Chat panel

Header

Deps

Verification

Not included (upstream candidates)

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Aug 31, 2026

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

davidkpiano commented Aug 31, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 31, 2026 •

edited

Loading