feat(app): add prompt input story (#32308)

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -1,6 +1,6 @@
 import { Show, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useNavigate } from "@solidjs/router"
+import { useNavigate, useSearchParams } from "@solidjs/router"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { useLayout } from "@/context/layout"
 import { PromptInput } from "@/components/prompt-input"
@@ -18,6 +18,17 @@ import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
 import type { FollowupDraft } from "@/components/prompt-input/submit"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { createQuery } from "@tanstack/solid-query"
+import { useQueryOptions } from "@/context/server-sync"
+import { useSDK } from "@/context/sdk"
+import { pathKey } from "@/utils/path-key"
+import { useLocal } from "@/context/local"
+import { useProviders } from "@/hooks/use-providers"
+import { useSettings } from "@/context/settings"
+import { useServer } from "@/context/server"
+import { useTabs } from "@/context/tabs"
+import { useDirectoryPicker } from "@/components/directory-picker"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 
 export function SessionComposerRegion(props: {
   state: SessionComposerState
@@ -54,8 +65,68 @@ export function SessionComposerRegion(props: {
   const language = useLanguage()
   const route = useSessionKey()
   const sync = useSync()
+  const sdk = useSDK()
+  const queryOptions = useQueryOptions()
+  const local = useLocal()
+  const providers = useProviders()
+  const settings = useSettings()
+  const server = useServer()
+  const tabs = useTabs()
+  const pickDirectory = useDirectoryPicker()
+  const [search] = useSearchParams<{ draftId?: string }>()
   const view = layout.view(route.sessionKey)
 
+  const agentsQuery = createQuery(() => queryOptions().agents(pathKey(sdk().directory)))
+  const globalProvidersQuery = createQuery(() => queryOptions().providers(null))
+  const providersQuery = createQuery(() => queryOptions().providers(pathKey(sdk().directory)))
+  const selectProject = (worktree: string) => {
+    layout.projects.open(worktree)
+    server.projects.touch(worktree)
+    if (search.draftId) {
+      tabs.updateDraft(search.draftId, { server: server.key, directory: worktree })
+      return
+    }
+    navigate(`/${base64Encode(worktree)}/session`)
+  }
+  const addProject = (title: string) => {
+    if (!server.current) return
+    pickDirectory({
+      server: server.current,
+      title,
+      onSelect: (result) => {
+        const directory = Array.isArray(result) ? result[0] : result
+        if (directory) selectProject(directory)
+      },
+    })
+  }
+  const controls = createMemo(() => ({
+    agents: {
+      available: sync().data.agent,
+      options: local.agent.list().map((agent) => agent.name),
+      current: local.agent.current()?.name ?? "",
+      loading: agentsQuery.isLoading,
+      visible: settings.visibility.customAgents(),
+      select: local.agent.set,
+    },
+    model: {
+      selection: local.model,
+      paid: providers.paid().length > 0,
+      loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
+    },
+    projects: {
+      available: layout.projects.list(),
+      directory: sdk().directory,
+      select: selectProject,
+      add: addProject,
+    },
+    session: {
+      id: route.params.id,
+      tabs: layout.tabs(route.sessionKey),
+      reviewPanel: view.reviewPanel,
+    },
+    newLayoutDesigns: settings.general.newLayoutDesigns(),
+  }))
+
   const handoffPrompt = createMemo(() => getSessionHandoff(route.sessionKey())?.prompt)
   const info = createMemo(() => (route.params.id ? sync().session.get(route.params.id) : undefined))
   const parentID = createMemo(() => info()?.parentID)
@@ -263,6 +334,7 @@ export function SessionComposerRegion(props: {
                 fallback={
                   <Show when={!props.state.blocked()}>
                     <PromptInput
+                      controls={controls()}
                       variant={props.placement === "inline" ? "new-session" : undefined}
                       ref={props.inputRef}
                       newSessionWorktree={props.newSessionWorktree}