refactor(ui): isolate session components (#33670)

packages/storybook/.storybook/main.ts

@@ -6,6 +6,7 @@ import { playgroundCss } from "./playground-css-plugin"
 
 const here = path.dirname(fileURLToPath(import.meta.url))
 const ui = path.resolve(here, "../../ui")
+const sessionUi = path.resolve(here, "../../session-ui")
 const app = path.resolve(here, "../../app/src")
 const mocks = path.resolve(here, "./mocks")
 
@@ -21,7 +22,11 @@ export default defineMain({
     "@storybook/addon-a11y",
     "@storybook/addon-vitest",
   ],
-  stories: ["../../ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)", "../../app/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../../ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../../session-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../../app/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
   async viteFinal(config) {
     const { mergeConfig, searchForWorkspaceRoot } = await import("vite")
     return mergeConfig(config, {
@@ -59,7 +64,7 @@ export default defineMain({
       },
       server: {
         fs: {
-          allow: [searchForWorkspaceRoot(process.cwd()), ui, app, mocks],
+          allow: [searchForWorkspaceRoot(process.cwd()), ui, sessionUi, app, mocks],
         },
       },
     })

packages/storybook/.storybook/playground-css-plugin.ts

@@ -7,7 +7,7 @@
  *
  * For each edit the plugin finds `anchor` in the file, then locates the
  * next `prop: <anything>;` after it and replaces the value portion.
- * `file` is a basename resolved relative to packages/ui/src/components/.
+ * `file` is a basename resolved against the UI component packages.
  */
 import type { Plugin } from "vite"
 import type { IncomingMessage, ServerResponse } from "node:http"
@@ -16,7 +16,7 @@ import path from "node:path"
 import { fileURLToPath } from "node:url"
 
 const here = path.dirname(fileURLToPath(import.meta.url))
-const root = path.resolve(here, "../../ui/src/components")
+const roots = [path.resolve(here, "../../session-ui/src/components"), path.resolve(here, "../../ui/src/components")]
 
 const ENDPOINT = "/__playground/apply-css"
 
@@ -97,8 +97,8 @@ export function playgroundCss(): Plugin {
           const grouped = new Map<string, Edit[]>()
           for (const edit of payload.edits) {
             if (!edit.file || !edit.anchor || !edit.prop || edit.value === undefined) continue
-            const abs = path.resolve(root, edit.file)
-            if (!abs.startsWith(root)) continue
+            const abs = roots.map((root) => path.resolve(root, edit.file)).find((file) => fs.existsSync(file))
+            if (!abs || !roots.some((root) => abs.startsWith(root))) continue
             const key = abs
             if (!grouped.has(key)) grouped.set(key, [])
             grouped.get(key)!.push(edit)

packages/storybook/.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import "@opencode-ai/ui/styles/tailwind"
+import "@opencode-ai/session-ui/styles"
 import "@opencode-ai/ui/v2/styles/tailwind.css"
 
 import { createEffect, onCleanup, onMount } from "solid-js"

packages/storybook/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "catalog:",
+    "@opencode-ai/session-ui": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
     "@solidjs/meta": "catalog:",
     "@storybook/addon-a11y": "^10.2.13",