@neurocode-ai/app 1.18.8

package/src/pages/new-session.tsx

@@ -0,0 +1,282 @@
+import { Show, createEffect, createMemo, createResource, createSignal, onCleanup, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import { useSearchParams } from "@solidjs/router"
+import { Tooltip } from "@neurocode-ai/ui/tooltip"
+import { useDialog } from "@neurocode-ai/ui/context/dialog"
+import { Icon as IconV2 } from "@neurocode-ai/ui/v2/icon"
+import { TooltipV2 } from "@neurocode-ai/ui/v2/tooltip-v2"
+import { NewSessionDesignView } from "@/components/session"
+import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import {
+  PromptProjectAddButton,
+  PromptProjectSelector,
+  createPromptProjectController,
+} from "@/components/prompt-project-selector"
+import { useComments } from "@/context/comments"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import { useTitlebarRightMount } from "@/components/titlebar"
+import { useCommand } from "@/context/command"
+import { useProviders } from "@/hooks/use-providers"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { Persist, persisted } from "@/utils/persist"
+import createPresence from "solid-presence"
+import { useLocal } from "@/context/local"
+import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
+
+const workspaceBarEnabled = import.meta.env.VITE_NEUROCODE_CHANNEL !== "prod"
+const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
+const providerTipExitDuration = 250
+
+/**
+ * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
+ * composer for a brand-new session — no terminal, review pane, file tree, or message
+ * timeline. Submitting promotes the draft into a real session (see prompt-input/submit).
+ */
+export default function NewSessionPage() {
+  const prompt = usePrompt()
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const comments = useComments()
+  const language = useLanguage()
+  const settings = useSettings()
+  const dialog = useDialog()
+  const command = useCommand()
+  const providers = useProviders(() => sdk().directory)
+  const openProviders = () => {
+    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
+      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+    })
+  }
+  useSettingsCommand()
+  const route = useSessionKey()
+  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const local = useLocal()
+  const model = createPromptModelSelection({ agent: local.agent.current })
+
+  useComposerCommands({ model })
+
+  const inputController = createPromptInputController({
+    sessionKey: route.sessionKey,
+    sessionID: () => route.params.id,
+    queryOptions: serverSync().queryOptions,
+    model,
+  })
+  const projectControls = createPromptProjectControls()
+
+  const [store, setStore] = createStore<{ worktree?: string }>({})
+  const rightMount = useTitlebarRightMount()
+
+  const showWorkspaceBar = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
+  const newSessionWorktree = createMemo(() => {
+    if (!showWorkspaceBar()) return "main"
+    if (store.worktree) return store.worktree
+    const project = sync().project
+    if (project && sdk().directory !== project.worktree) return sdk().directory
+    return "main"
+  })
+  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
+  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
+  const selectedBranch = createMemo(() => {
+    const worktree = newSessionWorktree()
+    if (worktree === "main" || worktree === "create") return localBranch()
+    return serverSync().child(worktree)[0].vcs?.branch ?? localBranch()
+  })
+  const promptInputV2Controller = usePromptInputV2Controller({
+    get controls() {
+      return inputController()
+    },
+    get newSessionWorktree() {
+      return newSessionWorktree()
+    },
+    onNewSessionWorktreeReset: () => setStore("worktree", undefined),
+    onSubmit: () => comments.clear(),
+  })
+  const projectController = createPromptProjectController({
+    controls: projectControls,
+    onDone: promptInputV2Controller.restoreFocus,
+  })
+
+  command.register("new-session", () => [
+    {
+      id: "command.palette",
+      title: language.t("command.palette"),
+      hidden: true,
+      onSelect: async () => {
+        const { DialogSelectFile } = await import("@/components/dialog-select-file")
+        void dialog.show(() => <DialogSelectFile />)
+      },
+    },
+    {
+      id: "input.focus",
+      title: language.t("command.input.focus"),
+      category: language.t("command.category.view"),
+      keybind: "ctrl+l",
+      onSelect: () => promptInputV2Controller.restoreFocus(),
+    },
+  ])
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    untrack(() => {
+      const text = searchParams.prompt
+      if (!text) return
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      setSearchParams({ ...searchParams, prompt: undefined })
+    })
+  })
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    promptInputV2Controller.restoreFocus()
+  })
+
+  const ready = Promise.resolve()
+  const [suspendUntilPromptReady] = createResource(
+    () => prompt.ready.promise ?? ready,
+    (promise) => promise.then(() => true),
+  )
+
+  return (
+    <div class="relative size-full overflow-hidden flex flex-col">
+      {suspendUntilPromptReady()}
+      <Show when={rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={settings.visibility.status()}>
+              <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                <StatusPopoverV2 />
+              </Tooltip>
+            </Show>
+          </Portal>
+        )}
+      </Show>
+      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+        <div class="@container relative flex flex-col min-h-0 h-full flex-1">
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+            <NewSessionDesignView>
+              <div class={NEW_SESSION_CONTENT_WIDTH}>
+                <div class="flex flex-col gap-8">
+                  <PromptInputV2Composer controller={promptInputV2Controller} />
+                  <Show when={projectController.empty()}>
+                    <PromptProjectAddButton controller={projectController} />
+                  </Show>
+                  <Show when={projectController.selected()}>
+                    <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
+                      <PromptProjectSelector controller={projectController} placement="bottom" />
+                      <Show
+                        when={showWorkspaceBar()}
+                        fallback={<PromptGitStatus branch={selectedBranch()} noGit={sync().project?.vcs !== "git"} />}
+                      >
+                        <PromptWorkspaceSelector
+                          value={newSessionWorktree()}
+                          projectRoot={projectRoot()}
+                          workspaces={sync().project?.sandboxes ?? []}
+                          branch={selectedBranch()}
+                          onChange={(value) =>
+                            setStore(
+                              "worktree",
+                              value === "main" && sync().project?.worktree !== sdk().directory
+                                ? sync().project?.worktree
+                                : value,
+                            )
+                          }
+                          onDone={promptInputV2Controller.restoreFocus}
+                        />
+                      </Show>
+                    </div>
+                  </Show>
+                </div>
+                {/*</Show>*/}
+              </div>
+            </NewSessionDesignView>
+            <ProviderTip
+              ready={() => serverSync().child(sdk().directory)[0].provider_ready}
+              connected={() => providers.paid().length > 0}
+              openProviders={openProviders}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProviderTip(props: { ready: () => boolean; connected: () => boolean; openProviders: () => void }) {
+  const language = useLanguage()
+  const [persistedState, setPersistedState, , persistedReady] = persisted(
+    Persist.global("new-session.provider-tip"),
+    createStore({ dismissedAt: 0 }),
+  )
+  const visible = createMemo(
+    () =>
+      props.ready() &&
+      persistedReady() &&
+      !props.connected() &&
+      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
+  )
+
+  function dismiss() {
+    setPersistedState("dismissedAt", Date.now())
+  }
+
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  const presence = createPresence({
+    show: () => visible(),
+    element: () => ref() ?? null,
+  })
+
+  return (
+    <Show when={presence.present()}>
+      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
+        <div
+          ref={setRef}
+          data-component="provider-tip"
+          data-visible={visible()}
+          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
+          classList={{
+            "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true,
+          }}
+        >
+          <button
+            type="button"
+            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
+            onClick={props.openProviders}
+          >
+            <span class="truncate">{language.t("home.providerTip")}</span>
+            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
+              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
+            </span>
+          </button>
+          <TooltipV2
+            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
+            placement="top"
+            openDelay={1000}
+            value={language.t("common.dismiss")}
+          >
+            <button
+              type="button"
+              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
+              aria-label={language.t("common.dismiss")}
+              onClick={dismiss}
+            >
+              <IconV2 name="xmark-small" />
+            </button>
+          </TooltipV2>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/src/pages/session/composer/index.ts

@@ -0,0 +1,4 @@
+export { SessionComposerRegion } from "./session-composer-region"
+export { createPromptInputController, createPromptProjectControls } from "./session-composer-controls"
+export { createSessionComposerController } from "./session-composer-state"
+export { createSessionComposerRegionController } from "./session-composer-region-controller"

package/src/pages/session/composer/prompt-model-selection.ts

@@ -0,0 +1,133 @@
+import { batch, createMemo, startTransition } from "solid-js"
+import { useModels } from "@/context/models"
+import type { ModelKey, ModelSelection } from "@/context/local"
+import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "@/context/model-variant"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useProviders } from "@/hooks/use-providers"
+
+export function createPromptModelSelection(input: { agent: () => { model?: ModelKey; variant?: string } | undefined }) {
+  const sdk = useSDK()
+  const sync = useSync()
+  const models = useModels()
+  const prompt = usePrompt()
+  const providers = useProviders(() => sdk().directory)
+  const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
+
+  const valid = (model: ModelKey) => {
+    const provider = providers.all().get(model.providerID)
+    return !!provider?.models[model.modelID] && connected().has(model.providerID)
+  }
+
+  const configured = () => {
+    const value = sync().data.config.model
+    if (!value) return
+    const [providerID, modelID] = value.split("/")
+    const model = { providerID, modelID }
+    if (valid(model)) return model
+  }
+
+  const recent = () => models.recent.list().find(valid)
+  const fallback = () => {
+    const defaults = providers.default()
+    return providers.connected().flatMap((provider) => {
+      const modelID = defaults[provider.id] ?? Object.values(provider.models)[0]?.id
+      return modelID ? [{ providerID: provider.id, modelID }] : []
+    })[0]
+  }
+
+  const current = () => {
+    const key = [prompt.model.current(), input.agent()?.model, configured(), recent(), fallback()].find(
+      (item): item is ModelKey => !!item && valid(item),
+    )
+    if (!key) return
+    return models.find(key)
+  }
+  const recentModels = createMemo(() =>
+    models.recent
+      .list()
+      .map(models.find)
+      .filter((item): item is NonNullable<typeof item> => !!item),
+  )
+
+  const selection = {
+    ready: models.ready,
+    current,
+    recent: recentModels,
+    list: models.list,
+    cycle(direction: 1 | -1) {
+      const items = recentModels()
+      const item = current()
+      if (!item) return
+      const index = items.findIndex((entry) => entry.provider.id === item.provider.id && entry.id === item.id)
+      if (index === -1) return
+      const next = items[(index + direction + items.length) % items.length]
+      if (next) selection.set({ providerID: next.provider.id, modelID: next.id })
+    },
+    set(item: ModelKey | undefined, options?: { recent?: boolean }) {
+      startTransition(() =>
+        batch(() => {
+          prompt.model.set(item ? { ...item, variant: prompt.model.current()?.variant } : undefined)
+          if (!item) return
+          models.setVisibility(item, true)
+          if (options?.recent) models.recent.push(item)
+        }),
+      )
+    },
+    visible: models.visible,
+    setVisibility: models.setVisibility,
+    variant: {
+      configured() {
+        const item = input.agent()
+        const model = current()
+        if (!item || !model) return
+        return getConfiguredAgentVariant({
+          agent: { model: item.model, variant: item.variant },
+          model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+        })
+      },
+      selected() {
+        return prompt.model.current()?.variant
+      },
+      current() {
+        const resolved = resolveModelVariant({
+          variants: this.list(),
+          selected: this.selected(),
+          configured: this.configured(),
+        })
+        if (resolved) return resolved
+        const model = current()
+        if (!model) return
+        const saved = models.variant.get({ providerID: model.provider.id, modelID: model.id })
+        if (saved && this.list().includes(saved)) return saved
+      },
+      list() {
+        return Object.keys(current()?.variants ?? {})
+      },
+      set(value: string | undefined) {
+        startTransition(() =>
+          batch(() => {
+            const model = current()
+            if (!model) return
+            prompt.model.set({ providerID: model.provider.id, modelID: model.id, variant: value ?? null })
+            models.variant.set({ providerID: model.provider.id, modelID: model.id }, value)
+          }),
+        )
+      },
+      cycle() {
+        const variants = this.list()
+        if (variants.length === 0) return
+        this.set(
+          cycleModelVariant({
+            variants,
+            selected: this.selected(),
+            configured: this.configured(),
+          }),
+        )
+      },
+    },
+  } satisfies ModelSelection
+
+  return selection
+}

package/src/pages/session/composer/session-composer-controls.ts

@@ -0,0 +1,129 @@
+import { base64Encode } from "@neurocode-ai/core/util/encode"
+import { createQuery } from "@tanstack/solid-query"
+import { useNavigate, useSearchParams } from "@solidjs/router"
+import { type Accessor, createMemo } from "solid-js"
+import type { PromptInputControls } from "@/components/prompt-input/contracts"
+import type { PromptProjectControls } from "@/components/prompt-project-selector"
+import { useDirectoryPicker } from "@/components/directory-picker"
+import { useGlobal } from "@/context/global"
+import { useLayout } from "@/context/layout"
+import { useLocal, type ModelSelection } from "@/context/local"
+import type { QueryOptionsApi } from "@/context/server-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { serverName, ServerConnection, useServer } from "@/context/server"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useTabs } from "@/context/tabs"
+import { useProviders } from "@/hooks/use-providers"
+import { pathKey } from "@/utils/path-key"
+
+export function createPromptInputController(input: {
+  sessionKey: Accessor<string>
+  sessionID: Accessor<string | undefined>
+  queryOptions: Pick<QueryOptionsApi, "agents" | "providers">
+  model?: ModelSelection
+}) {
+  const layout = useLayout()
+  const local = useLocal()
+  const providers = useProviders()
+  const sync = useSync()
+  const sdk = useSDK()
+  const view = layout.view(input.sessionKey)
+  const agentsQuery = createQuery(() => input.queryOptions.agents(pathKey(sdk().directory)))
+  const globalProvidersQuery = createQuery(() => input.queryOptions.providers(null))
+  const providersQuery = createQuery(() => input.queryOptions.providers(pathKey(sdk().directory)))
+
+  return createMemo<PromptInputControls>(() => ({
+    agents: {
+      available: sync().data.agent,
+      options: local.agent.list().map((agent) => agent.name),
+      current: local.agent.current()?.name ?? "",
+      loading: agentsQuery.isLoading,
+      visible: local.agent.visible(),
+      select: local.agent.set,
+    },
+    model: {
+      selection: input.model ?? local.model,
+      paid: providers.paid().length > 0,
+      loading:
+        (local.agent.visible() && agentsQuery.isLoading) || providersQuery.isLoading || globalProvidersQuery.isLoading,
+    },
+    session: {
+      id: input.sessionID(),
+      tabs: layout.tabs(input.sessionKey),
+      reviewPanel: view.reviewPanel,
+    },
+  }))
+}
+
+export function createPromptProjectControls() {
+  const navigate = useNavigate()
+  const layout = useLayout()
+  const server = useServer()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const tabs = useTabs()
+  const global = useGlobal()
+  const pickDirectory = useDirectoryPicker()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const projectServer = () => serverSDK().server
+  const projectServerCtx = createMemo(() => global.ensureServerCtx(projectServer()))
+  const projects = createMemo(() => {
+    if (server.list.length <= 1) {
+      return search.draftId ? projectServerCtx().projects.list() : layout.projects.list()
+    }
+    return server.list.flatMap((conn) => {
+      const item = { key: ServerConnection.key(conn), name: serverName(conn) }
+      return global
+        .ensureServerCtx(conn)
+        .projects.list()
+        .map((project) => ({ ...project, server: item }))
+    })
+  })
+  const selectProject = (worktree: string, serverKey?: string) => {
+    const conn = serverKey ? server.list.find((conn) => ServerConnection.key(conn) === serverKey) : projectServer()
+    if (search.draftId) {
+      if (!conn) return
+      const target = global.ensureServerCtx(conn)
+      target.projects.open(worktree)
+      target.projects.touch(worktree)
+      tabs.updateDraft(search.draftId, { server: ServerConnection.key(conn), directory: worktree })
+      return
+    }
+
+    if (!serverKey) {
+      layout.projects.open(worktree)
+      server.projects.touch(worktree)
+      navigate(`/${base64Encode(worktree)}/session`)
+      return
+    }
+
+    if (!conn) return
+    const target = global.ensureServerCtx(conn)
+    target.projects.open(worktree)
+    target.projects.touch(worktree)
+    server.setActive(ServerConnection.key(conn))
+    navigate(`/${base64Encode(worktree)}/session`)
+  }
+
+  const addProject = (title: string, serverKey?: string) => {
+    const conn = serverKey ? server.list.find((conn) => ServerConnection.key(conn) === serverKey) : projectServer()
+    if (!conn) return
+    pickDirectory({
+      server: conn,
+      title,
+      onSelect: (result) => {
+        const directory = Array.isArray(result) ? result[0] : result
+        if (directory) selectProject(directory, serverKey)
+      },
+    })
+  }
+
+  return createMemo<PromptProjectControls>(() => ({
+    available: projects(),
+    directory: sdk().directory,
+    server: server.list.length > 1 ? ServerConnection.key(projectServer()) : undefined,
+    select: selectProject,
+    add: addProject,
+  }))
+}

package/src/pages/session/composer/session-composer-region-controller.ts

@@ -0,0 +1,145 @@
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { useSpring } from "@neurocode-ai/ui/motion-spring"
+import { type Accessor, createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { PromptInputState } from "@/components/prompt-input"
+import { useSync } from "@/context/sync"
+import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import type { SessionComposerController } from "./session-composer-state"
+
+export type SessionComposerFollowupDock = {
+  items: { id: string; text: string }[]
+  sending?: string
+  onSend: (id: string) => void
+  onEdit: (id: string) => void
+}
+
+export type SessionComposerRevertDock = {
+  items: { id: string; text: string }[]
+  restoring?: string
+  disabled?: boolean
+  onRestore: (id: string) => void
+}
+
+export function createSessionComposerRegionController(input: {
+  state: SessionComposerController
+  sessionKey: Accessor<string>
+  sessionID: Accessor<string | undefined>
+  prompt: PromptInputState
+  ready: Accessor<boolean>
+  centered: Accessor<boolean>
+  todo: {
+    collapsed: Accessor<boolean>
+    onToggle: () => void
+  }
+  followup: Accessor<SessionComposerFollowupDock | undefined>
+  revert: Accessor<SessionComposerRevertDock | undefined>
+  onResponseSubmit: () => void
+  openParent: () => void
+  setPromptRef: (el: HTMLDivElement) => void
+  setDockRef: (el: HTMLDivElement) => void
+}) {
+  const sync = useSync()
+  const [store, setStore] = createStore({
+    ready: input.ready() || input.state.dock(),
+    height: 320,
+    body: undefined as HTMLDivElement | undefined,
+  })
+  let timer: number | undefined
+  let frame: number | undefined
+
+  const clear = () => {
+    if (timer !== undefined) window.clearTimeout(timer)
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    timer = undefined
+    frame = undefined
+  }
+
+  createEffect(() => {
+    input.sessionKey()
+    const ready = input.ready()
+    const dock = input.state.dock()
+
+    clear()
+    if (store.ready || (!ready && !dock)) return
+    if (dock) {
+      setStore("ready", true)
+      return
+    }
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      timer = window.setTimeout(() => {
+        setStore("ready", true)
+        timer = undefined
+      }, 140)
+    })
+  })
+
+  createEffect(() => {
+    if (!input.prompt.ready()) return
+    setSessionHandoff(input.sessionKey(), {
+      prompt: input.prompt
+        .current()
+        .map((part) => {
+          if (part.type === "file") return `[file:${part.path}]`
+          if (part.type === "agent") return `@${part.name}`
+          if (part.type === "image") return `[image:${part.filename}]`
+          return part.content
+        })
+        .join("")
+        .trim(),
+    })
+  })
+
+  createEffect(() => {
+    const el = store.body
+    if (!el) return
+    const update = () => setStore("height", el.getBoundingClientRect().height)
+    createResizeObserver(el, update)
+    update()
+  })
+
+  onCleanup(clear)
+
+  const parentID = createMemo(() => {
+    const id = input.sessionID()
+    return id ? sync().session.get(id)?.parentID : undefined
+  })
+  const open = createMemo(() => store.ready && input.state.dock() && !input.state.closing())
+  const progress = useSpring(
+    () => (open() ? 1 : 0),
+    { visualDuration: 0.3, bounce: 0 },
+    () => `${input.sessionKey()}\0${store.ready}`,
+  )
+  const value = createMemo(() => Math.max(0, Math.min(1, progress())))
+  const ready = Promise.resolve()
+  const [promptReady] = createResource(
+    () => input.prompt.ready.promise ?? ready,
+    (promise) => promise.then(() => true),
+  )
+
+  return {
+    state: input.state,
+    centered: input.centered,
+    todo: input.todo,
+    followup: input.followup,
+    revert: input.revert,
+    onResponseSubmit: input.onResponseSubmit,
+    openParent: input.openParent,
+    setPromptRef: input.setPromptRef,
+    setDockRef: input.setDockRef,
+    parentID,
+    child: () => !!parentID(),
+    showComposer: () => !input.state.blocked() || !!parentID(),
+    handoffPrompt: () => getSessionHandoff(input.sessionKey())?.prompt,
+    promptReady: () => input.prompt.ready() || promptReady(),
+    dock: () => (store.ready && input.state.dock()) || value() > 0.001,
+    dockProgress: value,
+    dockHeight: () => Math.max(78, store.height),
+    lift: () => (input.revert()?.items.length ? 18 : 36 * value()),
+    setDockBodyRef: (el: HTMLDivElement) => setStore("body", el),
+  }
+}
+
+export type SessionComposerRegionController = ReturnType<typeof createSessionComposerRegionController>