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

.github/workflows/ci.yml

@@ -363,6 +363,33 @@ jobs:
           retention-days: 7
           path: packages/ui/.artifacts/unit/junit.xml
 
+  storybook-smoke:
+    needs: changes
+    if: needs.changes.outputs.docs_only != 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: step-security/harden-runner@9af89fc71515a100421586dfdb3dc9c984fbf411 # step-security/harden-runner@v2.19.4
+        with:
+          egress-policy: audit
+
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - uses: ./.github/actions/setup
+
+      - uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # actions/cache@v5
+        with:
+          path: .turbo/cache
+          key: turbo-${{ runner.os }}-build-storybook-${{ hashFiles('turbo.json', '**/package.json', 'bun.lock') }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-build-storybook-${{ hashFiles('turbo.json', '**/package.json', 'bun.lock') }}-
+            turbo-${{ runner.os }}-build-storybook-
+
+      - name: build-storybook
+        run: bun turbo build-storybook --filter=@opencode-ai/ui
+
   unit-opencode:
     needs: changes
     if: needs.changes.outputs.docs_only != 'true'
@@ -541,6 +568,7 @@ jobs:
       - typecheck
       - frontend-architecture
       - unit-ui
+      - storybook-smoke
       - unit-app
       - unit-opencode
       - unit-desktop
@@ -553,6 +581,7 @@ jobs:
           TYPECHECK_RESULT: ${{ needs.typecheck.result }}
           FRONTEND_ARCHITECTURE_RESULT: ${{ needs['frontend-architecture'].result }}
           UNIT_UI_RESULT: ${{ needs['unit-ui'].result }}
+          STORYBOOK_SMOKE_RESULT: ${{ needs['storybook-smoke'].result }}
           UNIT_APP_RESULT: ${{ needs['unit-app'].result }}
           UNIT_OPENCODE_RESULT: ${{ needs['unit-opencode'].result }}
           UNIT_DESKTOP_RESULT: ${{ needs['unit-desktop'].result }}
@@ -568,13 +597,15 @@ jobs:
           if [ "$TYPECHECK_RESULT" != "success" ] ||
              [ "$FRONTEND_ARCHITECTURE_RESULT" != "success" ] ||
              [ "$UNIT_UI_RESULT" != "success" ] ||
+             [ "$STORYBOOK_SMOKE_RESULT" != "success" ] ||
              [ "$UNIT_APP_RESULT" != "success" ] ||
              [ "$UNIT_OPENCODE_RESULT" != "success" ] ||
              [ "$UNIT_DESKTOP_RESULT" != "success" ] ||
              [ "$UNIT_REMOTE_BRIDGE_RESULT" != "success" ]; then
             echo "typecheck=$TYPECHECK_RESULT"
             echo "frontend-architecture=$FRONTEND_ARCHITECTURE_RESULT"
             echo "unit-ui=$UNIT_UI_RESULT"
+            echo "storybook-smoke=$STORYBOOK_SMOKE_RESULT"
             echo "unit-app=$UNIT_APP_RESULT"
             echo "unit-opencode=$UNIT_OPENCODE_RESULT"
             echo "unit-desktop=$UNIT_DESKTOP_RESULT"

packages/opencode/test/github/ci-workflow.test.ts

@@ -36,6 +36,7 @@ const hardenRunnerJobs = [
   lintJobName,
   frontendArchitectureJobName,
   "unit-ui",
+  "storybook-smoke",
   "unit-app",
   "unit-opencode",
   "unit-desktop",
@@ -350,6 +351,7 @@ describe("ci workflow", () => {
       "typecheck",
       lintJobName,
       frontendArchitectureJobName,
+      "storybook-smoke",
       ...linuxUnitJobs.map((item) => item.jobName),
     ]
 
@@ -833,6 +835,7 @@ describe("ci workflow", () => {
       "typecheck",
       frontendArchitectureJobName,
       "unit-ui",
+      "storybook-smoke",
       "unit-app",
       "unit-opencode",
       "unit-desktop",
@@ -850,12 +853,14 @@ describe("ci workflow", () => {
     expect(validate?.env?.TYPECHECK_RESULT).toBe("${{ needs.typecheck.result }}")
     expect(validate?.env?.FRONTEND_ARCHITECTURE_RESULT).toBe("${{ needs['frontend-architecture'].result }}")
     expect(validate?.env?.UNIT_UI_RESULT).toBe("${{ needs['unit-ui'].result }}")
+    expect(validate?.env?.STORYBOOK_SMOKE_RESULT).toBe("${{ needs['storybook-smoke'].result }}")
     expect(validate?.env?.UNIT_APP_RESULT).toBe("${{ needs['unit-app'].result }}")
     expect(validate?.env?.UNIT_OPENCODE_RESULT).toBe("${{ needs['unit-opencode'].result }}")
     expect(validate?.env?.UNIT_DESKTOP_RESULT).toBe("${{ needs['unit-desktop'].result }}")
     expect(validate?.env?.UNIT_REMOTE_BRIDGE_RESULT).toBe("${{ needs['unit-remote-bridge'].result }}")
     expect(validate?.run).toContain("Docs-only change, daily CI skipped.")
     expect(validate?.run).toContain("FRONTEND_ARCHITECTURE_RESULT")
+    expect(validate?.run).toContain("STORYBOOK_SMOKE_RESULT")
     expect(validate?.run).toContain("UNIT_UI_RESULT")
     expect(validate?.run).toContain("UNIT_APP_RESULT")
     expect(validate?.run).toContain("UNIT_OPENCODE_RESULT")

packages/ui/.gitignore

@@ -3,6 +3,7 @@ dist
 .output
 .vercel
 .netlify
+storybook-static
 
 # Environment
 .env

packages/ui/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "storybook-solidjs-vite"
+import tailwindcss from "@tailwindcss/vite"
+
+const config: StorybookConfig = {
+  framework: "storybook-solidjs-vite",
+  // App-level components (message-part, session-turn, timeline-playground) that
+  // need runtime data (sdk messages, tool registry, server context) are not
+  // previewable in isolation; their fork stories were removed rather than kept
+  // as dead .skip files.
+  stories: ["../src/components/*.stories.tsx"],
+  viteFinal: async (viteConfig) => {
+    const drop = (name?: string) =>
+      name?.startsWith("icon-spritesheet-generator") || name === "provider-icons-plugin"
+    const kept = (viteConfig.plugins ?? []).flatMap(function walk(p: unknown): unknown[] {
+      if (Array.isArray(p)) return p.flatMap(walk)
+      if (p === false || p == null) return []
+      const name = (p as { name?: string })?.name
+      return drop(name) ? [] : [p]
+    })
+    viteConfig.plugins = [tailwindcss(), ...kept]
+    return viteConfig
+  },
+}
+
+export default config

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import { createJSXDecorator, type Preview } from "storybook-solidjs-vite"
+import { MetaProvider } from "@solidjs/meta"
+import { ThemeProvider } from "../src/theme/context"
+import { DialogProvider } from "../src/context/dialog"
+import { MarkedProvider } from "../src/context/marked"
+import "../src/styles/tailwind/index.css"
+
+// Mirrors the app nesting order (Meta > Theme > Dialog > Marked) so components
+// relying on useDialog inside markdown-rendered content resolve the same
+// context as in production. FileComponentProvider is omitted: no standalone UI
+// story renders file content, and wiring it would require an app-level File
+// component that does not belong in the ui package.
+const preview: Preview = {
+  decorators: [
+    createJSXDecorator((Story) => (
+      <MetaProvider>
+        <ThemeProvider defaultTheme="pawwork">
+          <DialogProvider>
+            <MarkedProvider>
+              <Story />
+            </MarkedProvider>
+          </DialogProvider>
+        </ThemeProvider>
+      </MetaProvider>
+    )),
+  ],
+}
+
+export default preview

packages/ui/package.json

@@ -32,7 +32,9 @@
     "test": "bun test",
     "test:ci": "mkdir -p .artifacts/unit && bun test --reporter=junit --reporter-outfile=.artifacts/unit/junit.xml",
     "dev": "vite",
-    "generate:tailwind": "bun run script/tailwind.ts"
+    "generate:tailwind": "bun run script/tailwind.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.0.11",
@@ -46,7 +48,9 @@
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plugin-icons-spritesheet": "3.0.1",
-    "vite-plugin-solid": "catalog:"
+    "vite-plugin-solid": "catalog:",
+    "storybook": "10.4.6",
+    "storybook-solidjs-vite": "10.5.2"
   },
   "dependencies": {
     "@kobalte/core": "catalog:",