feat(app): add dialog stories and Components Lab previews (#60264)

Author: usrnk1

packages/app/src/components-lab/dialog-story-runtime.tsx

@@ -58,12 +58,14 @@ const themeIcon = `<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.5" fill="
 
 const gridIcon = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="9" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="2.5" y="9" width="4.5" height="4.5" rx="1"/><rect x="9" y="9" width="4.5" height="4.5" rx="1"/></svg>`
 
+// Standalone stories mount fixture runtimes that must not access the live app's storage.
 // Vite needs the patterns as literals in each call.
 const modules = import.meta.glob<StoryModule>([
   "../**/*.stories.tsx",
   "../../../ui/src/**/*.stories.tsx",
   "../../../session-ui/src/**/*.stories.tsx",
   "../../../gui-plugins/src/**/*.stories.tsx",
+  "!../**/*.standalone.stories.tsx",
 ])
 
 // Each file's text, for the order its states were written in.
@@ -73,6 +75,7 @@ const sources = import.meta.glob<string>(
     "../../../ui/src/**/*.stories.tsx",
     "../../../session-ui/src/**/*.stories.tsx",
     "../../../gui-plugins/src/**/*.stories.tsx",
+    "!../**/*.standalone.stories.tsx",
   ],
   { query: "?raw", import: "default" },
 )
@@ -230,7 +233,7 @@ export default function ComponentsLab() {
       when={!grid()}
       fallback={
         <Grid
-          entries={entries().filter((entry) => entry.title.startsWith("UI/"))}
+          entries={entries().filter((entry) => entry.title.startsWith("UI/") || isDialogEntry(entry))}
           scheme={untrack(scheme)}
           onOpen={open}
         />
@@ -613,21 +616,25 @@ function Grid(props: { entries: LabEntry[]; scheme: "dark" | "light"; onOpen: (f
     const board = canvas(element, {
       theme: props.scheme,
       label: language.t("lab.grid"),
-      // Neighbours share the library's folder: actions, forms, overlays and so on.
+      // Neighbours share the library's folder: actions, forms, overlays, then app dialogs.
       items: props.entries
         .toSorted((a, b) => folderOf(a).localeCompare(folderOf(b)))
-        .map((entry) => ({
-          id: entry.file,
-          title: entry.title.split("/").at(-1),
-          w: 320,
-          h: 240,
-          render: (card: HTMLElement) =>
-            createRoot((dispose) => {
-              insert(card, () => <Tile entry={entry} />)
-
-              return dispose
-            }, owner ?? undefined),
-        })),
+        .map((entry) => {
+          const size = tileSize(entry)
+
+          return {
+            id: entry.file,
+            title: entry.title.split("/").at(-1),
+            w: size.w,
+            h: size.h,
+            render: (card: HTMLElement) =>
+              createRoot((dispose) => {
+                insert(card, () => <Tile entry={entry} />)
+
+                return dispose
+              }, owner ?? undefined),
+          }
+        }),
     })
 
     // The canvas captures the pointer to pan, so a card never sees its click: a press that ends where it began opens
@@ -667,30 +674,54 @@ function Tile(props: { entry: LabEntry }) {
     <div
       ref={setCanvas}
       data-lab-story={props.entry.file}
-      class="relative flex size-full cursor-pointer items-center justify-center overflow-hidden bg-v2-background-bg-base p-4 [contain:layout]"
+      class="relative flex size-full cursor-pointer overflow-hidden bg-v2-background-bg-base [contain:layout]"
+      classList={{
+        "items-center justify-center p-4": !props.entry.fullscreen,
+        "flex-col": props.entry.fullscreen,
+      }}
     >
       {/* The provider waits for the card, so a story that opens a dialog at once opens it inside. */}
       <Show when={canvas()}>
         {(container) => (
           <div class="pointer-events-none contents">
-            <DialogProvider container={container()}>
-              <ErrorBoundary
-                fallback={(error) => <pre class="font-mono text-[11px] text-v2-state-fg-danger">{String(error)}</pre>}
-              >
-                {render
-                  ? untrack(() => render(stateArgs(props.entry, 0)))
-                  : component && <Dynamic component={component} {...stateArgs(props.entry, 0)} />}
-              </ErrorBoundary>
-            </DialogProvider>
+            <Plugin file={props.entry.file}>
+              <DialogProvider container={container()}>
+                <ErrorBoundary
+                  fallback={(error) => <pre class="font-mono text-[11px] text-v2-state-fg-danger">{String(error)}</pre>}
+                >
+                  {render
+                    ? untrack(() => render(stateArgs(props.entry, 0)))
+                    : component && <Dynamic component={component} {...stateArgs(props.entry, 0)} />}
+                </ErrorBoundary>
+              </DialogProvider>
+            </Plugin>
           </div>
         )}
       </Show>
     </div>
   )
 }
 
+function isDialogEntry(entry: LabEntry) {
+  return (
+    entry.title.startsWith("App/Dialogs/") ||
+    entry.file.endsWith("/beta-dialog.stories.tsx") ||
+    entry.file.endsWith("/overlays/dialog/dialog.stories.tsx")
+  )
+}
+
+function tileSize(entry: LabEntry) {
+  if (entry.fullscreen) return { w: 1120, h: 720 }
+
+  if (isDialogEntry(entry)) return { w: 720, h: 820 }
+
+  return { w: 320, h: 240 }
+}
+
 function folderOf(entry: LabEntry) {
-  return entry.file.match(/ui\/src\/([^/]+)\//)?.[1] ?? ""
+  if (isDialogEntry(entry)) return `1:dialogs:${entry.title}`
+
+  return `0:${entry.file.match(/ui\/src\/([^/]+)\//)?.[1] ?? ""}`
 }
 
 function typing(target: EventTarget | null) {

packages/app/src/components-lab/lab.tsx

@@ -0,0 +1,67 @@
+import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode/ui/dialog"
+import { onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/runtime/i18n/language"
+import { sessionTitle } from "@/session/title"
+
+function DeleteSessionStory(props: { sessionTitle?: string }) {
+  const dialog = useDialog()
+
+  const language = useLanguage()
+
+  const [store, setStore] = createStore({ status: "Session active" })
+
+  const open = () =>
+    void dialog.show(() => (
+      <Dialog fit>
+        <DialogHeader hideClose>
+          <DialogTitleGroup
+            title={language.t("session.delete.title")}
+            description={language.t("session.delete.confirm", {
+              name: sessionTitle(props.sessionTitle) ?? language.t("command.session.new"),
+            })}
+          />
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" autofocus onClick={() => dialog.close()}>
+            {language.t("common.cancel")}
+          </Button>
+          <Button
+            variant="danger"
+            onClick={() => {
+              setStore("status", "Session deleted")
+              dialog.close()
+            }}
+          >
+            {language.t("session.delete.button")}
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    ))
+
+  onMount(open)
+
+  return (
+    <div class="flex flex-col items-start gap-3">
+      <Button variant="neutral" onClick={open}>
+        Open delete session dialog
+      </Button>
+      <p role="status">{store.status}</p>
+    </div>
+  )
+}
+
+export default {
+  title: "App/Dialogs/Delete Session",
+  id: "app-dialog-delete-session",
+}
+
+export const Default = {
+  render: () => <DeleteSessionStory sessionTitle="Refactor the dialog primitives" />,
+}
+
+export const Untitled = {
+  render: () => <DeleteSessionStory />,
+}

packages/app/src/home/sessions/delete-dialog.stories.tsx

@@ -0,0 +1,122 @@
+import { Button } from "@opencode/ui/button"
+import { onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import {
+  DialogStoryRuntime,
+  STORY_DIRECTORY,
+  STORY_PROJECTS,
+  STORY_SERVER,
+} from "@/components-lab/dialog-story-runtime"
+import { createPromptProjectController, type PromptProject, type PromptServer } from "@/new-session/project/selector"
+import { createNewSessionWorkspaceController } from "@/new-session/workspace/controller"
+import { ServerConnection } from "@/runtime/server/registry"
+import { useNewSessionLocationDialog } from "./dialog"
+
+const currentServer: PromptServer = {
+  key: ServerConnection.key(STORY_SERVER),
+  name: "MacBook-Pro",
+  hint: "This computer",
+  kind: "current",
+}
+
+const sshServer: PromptServer = {
+  key: "ssh:devbox",
+  name: "devbox",
+  kind: "plugin",
+  label: "SSH",
+}
+
+function LocationDialogStory(props: { multipleServers?: boolean }) {
+  const [store, setStore] = createStore<{
+    directory: string
+    worktree?: string
+    branch?: string
+  }>({
+    directory: STORY_DIRECTORY,
+  })
+
+  const available = (): PromptProject[] => [
+    ...STORY_PROJECTS.map((project, index) => ({
+      id: project.id,
+      name: project.name,
+      worktree: project.worktree,
+      vcs: "git",
+      sandboxes: project.sandboxes,
+      worktrees: project.sandboxes.map((directory) => ({ directory, strategy: "git" })),
+      used: index === 0,
+      server: currentServer,
+      time: { active: project.time.active },
+    })),
+    ...(props.multipleServers
+      ? [
+          {
+            id: "prj_remote_api",
+            name: "cloud-api",
+            worktree: "/home/dev/cloud-api",
+            vcs: "git",
+            used: true,
+            server: sshServer,
+            time: { active: Date.now() - 3_600_000 },
+          },
+        ]
+      : []),
+  ]
+
+  const project = createPromptProjectController({
+    controls: () => ({
+      available: available(),
+      servers: props.multipleServers ? [currentServer, sshServer] : [currentServer],
+      directory: store.directory,
+      projectID: STORY_PROJECTS[0].id,
+      server: currentServer.key,
+      select: (directory, _server, workspace) => {
+        setStore({ directory, worktree: workspace })
+      },
+      add: () => {},
+    }),
+  })
+
+  const workspace = createNewSessionWorkspaceController({
+    selectedWorktree: () => store.worktree,
+    selectedBranch: () => store.branch,
+    setSelectedWorktree: (worktree) => setStore("worktree", worktree),
+    setSelectedBranch: (branch) => setStore("branch", branch),
+  })
+
+  const openLocation = useNewSessionLocationDialog({
+    project,
+    workspace,
+    onDone: () => {},
+  })
+
+  const open = () => openLocation()
+
+  onMount(open)
+
+  return (
+    <Button variant="neutral" onClick={open}>
+      Open session location dialog
+    </Button>
+  )
+}
+
+export default {
+  title: "App/Dialogs/New Session Location",
+  id: "app-dialog-new-session-location",
+}
+
+export const Default = {
+  render: () => (
+    <DialogStoryRuntime>
+      <LocationDialogStory />
+    </DialogStoryRuntime>
+  ),
+}
+
+export const MultipleServers = {
+  render: () => (
+    <DialogStoryRuntime>
+      <LocationDialogStory multipleServers />
+    </DialogStoryRuntime>
+  ),
+}