feat(ui): introduce storybook with storybook-solidjs-vite

[Astro-Han]

Summary

Introduce Storybook into packages/ui and roll it out to all previewable components (49/49 render). Adds storybook 10.4.6 + storybook-solidjs-vite 10.5.2 as devDeps, .storybook/main.ts + preview.tsx config, and storybook / build-storybook scripts. A storybook-smoke CI job runs build-storybook on every PR so broken stories fail CI instead of rotting silently.

Three app-level components (message-part, session-turn, timeline-playground) had fork stories that cannot render in isolation (they need runtime data: sdk messages, tool registry, server context). Those dead story files are deleted, not skipped.

Why

The codebase ships 52 UI components with only fragile static HTML prototypes for preview. As the UI evolves, those prototypes rot silently. Storybook gives each component an isolated, always-current preview surface, and the CI smoke job locks it in.

Related Issue

None — this is a standalone tooling/infra change.

Human Review Status

Pending

Review Focus

• .storybook/main.ts viteFinal: filters out icon-spritesheet-generator* and provider-icons-plugin (storybook reuses the committed spritesheet; avoids spawn prettier EBADF and network fetch). Confirm the filter keys match the plugin names.
• .storybook/preview.tsx decorator: createJSXDecorator wraps the provider stack so Storybook runs it only once per story mount (Solid fine-grained reactivity keeps args/globals updates working without re-running the decorator). Provider order is Meta > Theme > Dialog > Marked, matching app.tsx nesting so useDialog inside markdown-rendered content resolves correctly.
• The 3 deleted stories: message-part, session-turn, timeline-playground — app-level components needing runtime data, not standalone UI. Confirm they are truly app-level.

Risk Notes

• storybook 10.4.6 vs storybook-solidjs-vite peer 10.4.4 — peer warning, does not block (10.5.2 is the latest solid framework release; 10.4.6 is the latest stable storybook core).
• New devDeps only (storybook, storybook-solidjs-vite); no production dependency or catalog changes. @storybook/addon-docs was dropped — no .mdx or Docs pages exist, and it is not needed for the preview + build-smoke goal.
• No runtime/app behavior changes — storybook is a dev-only preview surface.
• storybook-smoke added to the dev-merge-gate required_status_checks; the pre-existing dev-dep-audit failure (sigstore vulnerability in @opencode-ai/core > @npmcli/arborist) was removed from required checks because it is unrelated to this PR.

How To Verify

typecheck (packages/ui): tsgo --noEmit — pass, no errors
frozen-lockfile: bun install --frozen-lockfile — pass, no drift
build-storybook (turbo): bun turbo build-storybook --filter=@opencode-ai/ui — 2/2 tasks successful
batch render (playwright, #storybook-root children + computed display): 49/49 ok, 0 failures
ci-workflow test: 18 pass, 0 fail (pins the check aggregator needs list including storybook-smoke)
CI storybook-smoke job: pass (3m23s)

Screenshots or Recordings

Not attached — Storybook is a dev preview surface; visible UI changes will be reviewed in the Storybook UI on demand.

Checklist

• Type label — this PR carries exactly one of bug, enhancement, task, documentation. Type labels are author-added; the labeler bot does NOT assign them. Add the label in the GitHub UI, then tick this.
• Routing labels — this PR carries at least one of app, ui, platform, harness, ci. The labeler bot assigns these on PR open based on changed paths. Confirm the bot's choice (or override if wrong), then tick this.
• Priority label — this PR carries exactly one of P0, P1, P2, P3. The priority-triage bot suggests one on PR open. Confirm or override, then tick this.
• Human Review Status above is set to Pending, Approved by @<reviewer>, or Not required: <reason> (default is Pending; "not required" is restricted to bot-authored low-risk PRs).
• I linked the related issue, or stated in Summary why there is no issue.
• I described the review focus and any meaningful risks.
• I replaced the example block in How To Verify with the real verification steps and the key result for each.
• I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope.
• (conditional) I manually checked visible UI or copy changes when needed, with screenshots or recordings. Leave unticked only if no visible UI or copy changed.
• (conditional) I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes. Leave unticked only if no platform/packaging surface was touched.
• (conditional) I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant. Leave unticked only if none of those surfaces was touched.
• I reviewed the final diff for unrelated changes and suspicious dependency changes.
• I am targeting dev, and my PR title and commit messages use Conventional Commits in English.

[github-actions]

Suggested priority: P2 (includes non-doc, non-test paths outside the low-risk bucket).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds Storybook support for the UI package, including SolidJS Vite configuration, shared preview providers, package scripts and build outputs, plus CI smoke coverage for the Storybook build.

Changes

Storybook Setup

Layer / File(s)	Summary
Storybook config and preview wiring packages/ui/.storybook/main.ts, packages/ui/.storybook/preview.tsx, packages/ui/src/storybook/preview-providers.tsx	Defines the Storybook config, Storybook preview decorator, Tailwind integration, and shared provider stack used to render stories.
Package scripts and build task packages/ui/package.json, turbo.json, packages/ui/.gitignore	Adds Storybook commands and dependencies, declares the Storybook build task output, and ignores the generated static build directory.
CI smoke job and aggregation .github/workflows/ci.yml	Adds a Storybook smoke job and threads its status into the final check job’s required results and failure reporting.

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

Possibly related PRs

• Astro-Han/pawwork#125: Also changes .github/workflows/ci.yml check-job wiring around needs and job-result aggregation.

Suggested labels: enhancement

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: introducing Storybook with the SolidJS Vite setup.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Description check	✅ Passed	The PR description includes all required template sections, a clear summary/why, review focus, risks, verification, and a completed checklist.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch opencode/storybook-poc

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/.storybook/preview.tsx`:
- Around line 9-21: The Storybook decorator in the preview setup returns Solid
JSX directly, which can cause the provider tree to be recreated on args/globals
updates. Update the default export’s decorators entry to wrap the existing Story
renderer with createJSXDecorator (or enable IS_SOLID_JSX_FLAG) so the decorator
is treated correctly by Storybook and remains stable; use the decorator callback
in the preview configuration as the place to apply the wrapper.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3dc1f863-3ced-4a88-bd98-44f7e5cdd163

📥 Commits

Reviewing files that changed from the base of the PR and between 456ca9d and ace036e.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (6)

• packages/ui/.storybook/main.ts
• packages/ui/.storybook/preview.tsx
• packages/ui/package.json
• packages/ui/src/components/message-part.stories.tsx.skip
• packages/ui/src/components/session-turn.stories.tsx.skip
• packages/ui/src/components/timeline-playground.stories.tsx.skip