refactor(tui): centralize active location

packages/tui/src/routes/home.tsx

@@ -8,9 +8,8 @@ import { usePromptRef } from "../context/prompt"
 import { useLocal } from "../context/local"
 import { usePluginRuntime } from "../plugin/runtime"
 import { useEditorContext } from "../context/editor"
-import { HomeSessionDestinationProvider } from "./home/session-destination"
 import { useData } from "../context/data"
-import { LocationProvider } from "../context/location"
+import { useSetLocation } from "../context/location"
 import { FormPrompt } from "./session/form"
 import { PluginSlot } from "../plugin/context"
 
@@ -29,10 +28,13 @@ export function Home() {
   const local = useLocal()
   const editor = useEditorContext()
   const data = useData()
+  const setLocation = useSetLocation()
   // Global MCP elicitations can arrive without a session route, so keep them reachable from Home.
   const forms = createMemo(() => data.session.form.list("global", data.location.default()) ?? [])
   let sent = false
 
+  createEffect(() => setLocation(data.location.default()))
+
   onMount(() => {
     editor.clearSelection()
   })
@@ -64,47 +66,45 @@ export function Home() {
   })
 
   return (
-    <LocationProvider location={data.location.default()}>
-      <HomeSessionDestinationProvider>
-        <box flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
-          <box flexGrow={1} minHeight={0} />
-          <box height={4} minHeight={0} flexShrink={1} />
-          <box flexShrink={0}>
-            <pluginRuntime.Slot name="home_logo" mode="replace">
-              <Logo />
-            </pluginRuntime.Slot>
-          </box>
-          <box height={1} minHeight={0} flexShrink={1} />
-          <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
-            <pluginRuntime.Slot name="home_prompt" mode="replace" ref={bind}>
-              <Prompt
-                ref={bind}
-                right={<pluginRuntime.Slot name="home_prompt_right" />}
-                placeholders={placeholder}
-                disabled={forms().length > 0}
-              />
-            </pluginRuntime.Slot>
-          </box>
-          <PluginSlot name="home.bottom" />
-          <box flexGrow={1} minHeight={0} />
-          <Toast />
+    <>
+      <box flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
+        <box flexGrow={1} minHeight={0} />
+        <box height={4} minHeight={0} flexShrink={1} />
+        <box flexShrink={0}>
+          <pluginRuntime.Slot name="home_logo" mode="replace">
+            <Logo />
+          </pluginRuntime.Slot>
         </box>
-        <box width="100%" flexShrink={0}>
-          <PluginSlot name="home.footer" />
+        <box height={1} minHeight={0} flexShrink={1} />
+        <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
+          <pluginRuntime.Slot name="home_prompt" mode="replace" ref={bind}>
+            <Prompt
+              ref={bind}
+              right={<pluginRuntime.Slot name="home_prompt_right" />}
+              placeholders={placeholder}
+              disabled={forms().length > 0}
+            />
+          </pluginRuntime.Slot>
         </box>
-        <Show when={forms()[0]?.id} keyed>
-          {(_) => {
-            const form = forms()[0]
-            return form ? (
-              <box position="absolute" zIndex={2000} left={0} right={0} bottom={1} paddingLeft={2} paddingRight={2}>
-                <box width="100%">
-                  <FormPrompt form={form} />
-                </box>
+        <PluginSlot name="home.bottom" />
+        <box flexGrow={1} minHeight={0} />
+        <Toast />
+      </box>
+      <box width="100%" flexShrink={0}>
+        <PluginSlot name="home.footer" />
+      </box>
+      <Show when={forms()[0]?.id} keyed>
+        {(_) => {
+          const form = forms()[0]
+          return form ? (
+            <box position="absolute" zIndex={2000} left={0} right={0} bottom={1} paddingLeft={2} paddingRight={2}>
+              <box width="100%">
+                <FormPrompt form={form} />
               </box>
-            ) : null
-          }}
-        </Show>
-      </HomeSessionDestinationProvider>
-    </LocationProvider>
+            </box>
+          ) : null
+        }}
+      </Show>
+    </>
   )
 }

packages/tui/src/routes/home/session-destination.tsx

@@ -1,41 +0,0 @@
-import {
-  createContext,
-  createMemo,
-  createSignal,
-  useContext,
-  type Accessor,
-  type ParentProps,
-  type Setter,
-} from "solid-js"
-import { useTuiPaths } from "../../context/runtime"
-import { useProject } from "../../context/project"
-
-export type HomeSessionDestination = { type: "directory"; directory: string; subdirectory: boolean } | { type: "new"; name: string }
-
-type Context = {
-  destination: Accessor<HomeSessionDestination | undefined>
-  setDestination: Setter<HomeSessionDestination | undefined>
-  clear: () => void
-}
-
-const HomeSessionDestinationContext = createContext<Context>()
-
-export function HomeSessionDestinationProvider(props: ParentProps) {
-  const project = useProject()
-  const paths = useTuiPaths()
-  const [selected, setDestination] = createSignal<HomeSessionDestination>()
-  const destination = createMemo<HomeSessionDestination>(
-    () => selected() ?? { type: "directory", directory: project.instance.directory() || paths.cwd, subdirectory: false },
-  )
-  return (
-    <HomeSessionDestinationContext.Provider
-      value={{ destination, setDestination, clear: () => setDestination(undefined) }}
-    >
-      {props.children}
-    </HomeSessionDestinationContext.Provider>
-  )
-}
-
-export function useHomeSessionDestination() {
-  return useContext(HomeSessionDestinationContext)
-}

packages/tui/src/routes/session/index.tsx

@@ -71,7 +71,7 @@ import { collapseToolOutput } from "../../util/collapse-tool-output"
 import { usePluginRuntime } from "../../plugin/runtime"
 import { OPENCODE_BASE_MODE, useBindings, useCommandShortcut } from "../../keymap"
 import { usePathFormatter } from "../../context/path-format"
-import { LocationProvider } from "../../context/location"
+import { useSetLocation } from "../../context/location"
 import { createSessionRows, resolvePart, type PartRef, type SessionRow } from "./rows"
 import { switchLabel } from "../../util/model"
 
@@ -115,6 +115,9 @@ export function Session() {
   const session = createMemo(() => data.session.get(route.sessionID))
   const messages = () => data.session.message.list(route.sessionID)
   const location = createMemo(() => session()?.location)
+  const setLocation = useSetLocation()
+
+  createEffect(() => setLocation(location()))
 
   createEffect(() => {
     const title = Locale.truncate(session()?.title ?? "", 50)
@@ -823,133 +826,131 @@ export function Session() {
   )
 
   return (
-    <LocationProvider location={location()}>
-      <context.Provider
-        value={{
-          get width() {
-            return contentWidth()
-          },
-          sessionID: route.sessionID,
-          thinkingMode,
-          showThinking,
-          markdownMode,
-          groupExploration,
-          diffWrapMode,
-          models,
-          config,
-        }}
-      >
-        <box flexDirection="row" flexGrow={1} minHeight={0}>
-          <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
-            <Show when={session()}>
-              <scrollbox
-                ref={(r) => (scroll = r)}
-                viewportOptions={{
-                  paddingRight: showScrollbar() ? 1 : 0,
-                }}
-                verticalScrollbarOptions={{
-                  paddingLeft: 1,
-                  visible: showScrollbar(),
-                  trackOptions: {
-                    backgroundColor: theme.backgroundElement,
-                    foregroundColor: theme.border,
-                  },
-                }}
-                stickyScroll={true}
-                stickyStart="bottom"
-                flexGrow={1}
-                scrollAcceleration={scrollAcceleration()}
-              >
-                <For each={rows}>
-                  {(row) => (
-                    <SessionRowView
-                      row={row}
-                      message={(messageID) => data.session.message.get(route.sessionID, messageID)}
-                    />
-                  )}
-                </For>
-                <BackgroundToolHint messages={messages()} />
-                <Show when={session()?.revert?.messageID}>
-                  <RevertMessage
-                    count={
-                      messages().filter(
-                        (message) => message.id >= session()!.revert!.messageID && message.type === "user",
-                      ).length
-                    }
-                    files={session()!.revert!.files ?? []}
+    <context.Provider
+      value={{
+        get width() {
+          return contentWidth()
+        },
+        sessionID: route.sessionID,
+        thinkingMode,
+        showThinking,
+        markdownMode,
+        groupExploration,
+        diffWrapMode,
+        models,
+        config,
+      }}
+    >
+      <box flexDirection="row" flexGrow={1} minHeight={0}>
+        <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
+          <Show when={session()}>
+            <scrollbox
+              ref={(r) => (scroll = r)}
+              viewportOptions={{
+                paddingRight: showScrollbar() ? 1 : 0,
+              }}
+              verticalScrollbarOptions={{
+                paddingLeft: 1,
+                visible: showScrollbar(),
+                trackOptions: {
+                  backgroundColor: theme.backgroundElement,
+                  foregroundColor: theme.border,
+                },
+              }}
+              stickyScroll={true}
+              stickyStart="bottom"
+              flexGrow={1}
+              scrollAcceleration={scrollAcceleration()}
+            >
+              <For each={rows}>
+                {(row) => (
+                  <SessionRowView
+                    row={row}
+                    message={(messageID) => data.session.message.get(route.sessionID, messageID)}
                   />
-                </Show>
-              </scrollbox>
-              <box flexShrink={0}>
-                <Composer
-                  sessionID={route.sessionID}
-                  open={composer.open || (!!session()?.parentID && forms().length === 0)}
-                  defaultTab={composer.tab ?? (session()?.parentID ? "subagents" : undefined)}
-                  onClose={() => setComposer("open", false)}
+                )}
+              </For>
+              <BackgroundToolHint messages={messages()} />
+              <Show when={session()?.revert?.messageID}>
+                <RevertMessage
+                  count={
+                    messages().filter(
+                      (message) => message.id >= session()!.revert!.messageID && message.type === "user",
+                    ).length
+                  }
+                  files={session()!.revert!.files ?? []}
                 />
-                <Switch>
-                  <Match when={composer.open || (!!session()?.parentID && forms().length === 0)}>{null}</Match>
-                  <Match when={permissions().length > 0}>
-                    <PermissionPrompt request={permissions()[0]} directory={session()?.location.directory} />
-                  </Match>
-                  <Match when={forms().length > 0}>
-                    <Show when={forms()[0]?.id} keyed>
-                      {(_) => {
-                        const form = forms()[0]
-                        return form ? <FormPrompt form={form} /> : null
-                      }}
-                    </Show>
-                  </Match>
-                  <Match when={!disabled()}>
-                    <pluginRuntime.Slot
-                      name="session_prompt"
-                      mode="replace"
-                      session_id={route.sessionID}
+              </Show>
+            </scrollbox>
+            <box flexShrink={0}>
+              <Composer
+                sessionID={route.sessionID}
+                open={composer.open || (!!session()?.parentID && forms().length === 0)}
+                defaultTab={composer.tab ?? (session()?.parentID ? "subagents" : undefined)}
+                onClose={() => setComposer("open", false)}
+              />
+              <Switch>
+                <Match when={composer.open || (!!session()?.parentID && forms().length === 0)}>{null}</Match>
+                <Match when={permissions().length > 0}>
+                  <PermissionPrompt request={permissions()[0]} directory={session()?.location.directory} />
+                </Match>
+                <Match when={forms().length > 0}>
+                  <Show when={forms()[0]?.id} keyed>
+                    {(_) => {
+                      const form = forms()[0]
+                      return form ? <FormPrompt form={form} /> : null
+                    }}
+                  </Show>
+                </Match>
+                <Match when={!disabled()}>
+                  <pluginRuntime.Slot
+                    name="session_prompt"
+                    mode="replace"
+                    session_id={route.sessionID}
+                    visible={true}
+                    disabled={false}
+                    on_submit={toBottom}
+                    ref={bind}
+                  >
+                    <Prompt
                       visible={true}
-                      disabled={false}
-                      on_submit={toBottom}
                       ref={bind}
-                    >
-                      <Prompt
-                        visible={true}
-                        ref={bind}
-                        disabled={false}
-                        onSubmit={() => {
-                          toBottom()
-                        }}
-                        sessionID={route.sessionID}
-                        right={<pluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
-                      />
-                    </pluginRuntime.Slot>
-                  </Match>
-                </Switch>
-              </box>
-            </Show>
-            <Toast />
-          </box>
-          <Show when={sidebarVisible()}>
-            <Switch>
-              <Match when={wide()}>
-                <Sidebar sessionID={route.sessionID} />
-              </Match>
-              <Match when={!wide()}>
-                <box
-                  position="absolute"
-                  top={0}
-                  left={0}
-                  right={0}
-                  bottom={0}
-                  alignItems="flex-end"
-                  backgroundColor={RGBA.fromInts(0, 0, 0, 70)}
-                >
-                  <Sidebar sessionID={route.sessionID} />
-                </box>
-              </Match>
-            </Switch>
+                      disabled={false}
+                      onSubmit={() => {
+                        toBottom()
+                      }}
+                      sessionID={route.sessionID}
+                      right={<pluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
+                    />
+                  </pluginRuntime.Slot>
+                </Match>
+              </Switch>
+            </box>
           </Show>
+          <Toast />
         </box>
-      </context.Provider>
-    </LocationProvider>
+        <Show when={sidebarVisible()}>
+          <Switch>
+            <Match when={wide()}>
+              <Sidebar sessionID={route.sessionID} />
+            </Match>
+            <Match when={!wide()}>
+              <box
+                position="absolute"
+                top={0}
+                left={0}
+                right={0}
+                bottom={0}
+                alignItems="flex-end"
+                backgroundColor={RGBA.fromInts(0, 0, 0, 70)}
+              >
+                <Sidebar sessionID={route.sessionID} />
+              </box>
+            </Match>
+          </Switch>
+        </Show>
+      </box>
+    </context.Provider>
   )
 }
 
@@ -2500,9 +2501,7 @@ function Subagent(props: ToolProps) {
   const { navigate } = useRoute()
   const data = useData()
   const input = createMemo(() => (typeof props.part.state.input === "string" ? {} : props.part.state.input))
-  const metadata = createMemo(() =>
-    props.part.state.status === "streaming" ? {} : props.part.state.structured,
-  )
+  const metadata = createMemo(() => (props.part.state.status === "streaming" ? {} : props.part.state.structured))
   const sessionID = createMemo(() => stringValue(metadata().sessionID) ?? stringValue(metadata().sessionId))
   const description = createMemo(() => stringValue(input().description))
   const isRunning = createMemo(() => {