feat(app): better subagent experience

2026-04-01 06:53:18 -05:00 · 2026-04-01 06:53:18 -05:00 · e7706670a9
commit e7706670a9
parent 965c751522
14 changed files with 538 additions and 318 deletions
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@ -238,6 +238,8 @@ export const dict = {
  "prompt.mode.shell": "Shell",
  "prompt.mode.normal": "Prompt",
  "prompt.mode.shell.exit": "esc to exit",
+  "session.child.promptDisabled": "Subagent sessions cannot be prompted.",
+  "session.child.backToParent": "Back to main session.",

  "prompt.example.1": "Fix a TODO in the codebase",
  "prompt.example.2": "What is the tech stack of this project?",
--- a/packages/app/src/pages/layout/helpers.test.ts
+++ b/packages/app/src/pages/layout/helpers.test.ts
@ -8,6 +8,7 @@ import {
 } from "./deep-links"
 import { type Session } from "@opencode-ai/sdk/v2/client"
 import {
+  childSessionOnPath,
  displayName,
  effectiveWorkspaceOrder,
  errorMessage,
@ -198,6 +199,19 @@ describe("layout workspace helpers", () => {
    expect(result?.id).toBe("root")
  })

+  test("finds the direct child on the active session path", () => {
+    const list = [
+      session({ id: "root", directory: "/workspace" }),
+      session({ id: "child", directory: "/workspace", parentID: "root" }),
+      session({ id: "leaf", directory: "/workspace", parentID: "child" }),
+    ]
+
+    expect(childSessionOnPath(list, "root", "leaf")?.id).toBe("child")
+    expect(childSessionOnPath(list, "child", "leaf")?.id).toBe("leaf")
+    expect(childSessionOnPath(list, "root", "root")).toBeUndefined()
+    expect(childSessionOnPath(list, "root", "other")).toBeUndefined()
+  })
+
  test("formats fallback project display name", () => {
    expect(displayName({ worktree: "/tmp/app" })).toBe("app")
    expect(displayName({ worktree: "/tmp/app", name: "My App" })).toBe("My App")
--- a/packages/app/src/pages/layout/helpers.ts
+++ b/packages/app/src/pages/layout/helpers.ts
@ -60,6 +60,19 @@ export const childMapByParent = (sessions: Session[] | undefined) => {
  return map
 }

+export const childSessionOnPath = (sessions: Session[] | undefined, rootID: string, activeID?: string) => {
+  if (!activeID || activeID === rootID) return
+  const map = new Map((sessions ?? []).map((session) => [session.id, session]))
+  let id = activeID
+
+  while (id) {
+    const session = map.get(id)
+    if (!session?.parentID) return
+    if (session.parentID === rootID) return session
+    id = session.parentID
+  }
+}
+
 export const displayName = (project: { name?: string; worktree: string }) =>
  project.name || getFilename(project.worktree)

--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@ -1,15 +1,12 @@
-import type { Message, Session, TextPart, UserMessage } from "@opencode-ai/sdk/v2/client"
+import type { Session } from "@opencode-ai/sdk/v2/client"
 import { Avatar } from "@opencode-ai/ui/avatar"
-import { HoverCard } from "@opencode-ai/ui/hover-card"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { MessageNav } from "@opencode-ai/ui/message-nav"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { base64Encode } from "@opencode-ai/util/encode"
 import { getFilename } from "@opencode-ai/util/path"
-import { A, useNavigate, useParams } from "@solidjs/router"
-import { type Accessor, createMemo, For, type JSX, Match, onCleanup, Show, Switch } from "solid-js"
+import { A, useParams } from "@solidjs/router"
+import { type Accessor, createMemo, For, type JSX, Match, Show, Switch } from "solid-js"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
@ -18,7 +15,7 @@ import { usePermission } from "@/context/permission"
 import { messageAgentColor } from "@/utils/agent"
 import { sessionTitle } from "@/utils/session-title"
 import { sessionPermissionRequest } from "../session/composer/session-request-tree"
-import { hasProjectPermissions } from "./helpers"
+import { childSessionOnPath, hasProjectPermissions } from "./helpers"

 const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"

@ -39,6 +36,7 @@ export const ProjectIcon = (props: { project: LocalProject; class?: string; noti
  )
  const notify = createMemo(() => props.notify && (hasPermissions() || unseenCount() > 0))
  const name = createMemo(() => props.project.name || getFilename(props.project.worktree))
+
  return (
    <div class={`relative size-8 shrink-0 rounded ${props.class ?? ""}`}>
      <div class="size-full rounded overflow-clip">
@ -73,13 +71,10 @@ export type SessionItemProps = {
  slug: string
  mobile?: boolean
  dense?: boolean
-  popover?: boolean
-  children: Map<string, string[]>
+  showTooltip?: boolean
+  showChild?: boolean
+  level?: number
  sidebarExpanded: Accessor<boolean>
-  sidebarHovering: Accessor<boolean>
-  nav: Accessor<HTMLElement | undefined>
-  hoverSession: Accessor<string | undefined>
-  setHoverSession: (id: string | undefined) => void
  clearHoverProjectSoon: () => void
  prefetchSession: (session: Session, priority?: "high" | "low") => void
  archiveSession: (session: Session) => Promise<void>
@ -95,116 +90,52 @@ const SessionRow = (props: {
  hasPermissions: Accessor<boolean>
  hasError: Accessor<boolean>
  unseenCount: Accessor<number>
-  setHoverSession: (id: string | undefined) => void
  clearHoverProjectSoon: () => void
  sidebarOpened: Accessor<boolean>
-  warmHover: () => void
  warmPress: () => void
  warmFocus: () => void
-  cancelHoverPrefetch: () => void
-}) => {
+}): JSX.Element => {
  const title = () => sessionTitle(props.session.title)

  return (
    <A
      href={`/${props.slug}/session/${props.session.id}`}
-      class={`flex items-center gap-1 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
+      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
      onPointerDown={props.warmPress}
-      onPointerEnter={props.warmHover}
-      onPointerLeave={props.cancelHoverPrefetch}
      onFocus={props.warmFocus}
      onClick={() => {
-        props.setHoverSession(undefined)
        if (props.sidebarOpened()) return
        props.clearHoverProjectSoon()
      }}
    >
-      <div
-        class="shrink-0 size-6 flex items-center justify-center"
-        style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
-      >
-        <Switch fallback={<Icon name="dash" size="small" class="text-icon-weak" />}>
-          <Match when={props.isWorking()}>
-            <Spinner class="size-[15px]" />
-          </Match>
-          <Match when={props.hasPermissions()}>
-            <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-          </Match>
-          <Match when={props.hasError()}>
-            <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-          </Match>
-          <Match when={props.unseenCount() > 0}>
-            <div class="size-1.5 rounded-full bg-text-interactive-base" />
-          </Match>
-        </Switch>
-      </div>
+      <Show when={props.isWorking() || props.hasPermissions() || props.hasError() || props.unseenCount() > 0}>
+        <div
+          class="shrink-0 size-6 flex items-center justify-center"
+          style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
+        >
+          <Switch>
+            <Match when={props.isWorking()}>
+              <Spinner class="size-[15px]" />
+            </Match>
+            <Match when={props.hasPermissions()}>
+              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
+            </Match>
+            <Match when={props.hasError()}>
+              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
+            </Match>
+            <Match when={props.unseenCount() > 0}>
+              <div class="size-1.5 rounded-full bg-text-interactive-base" />
+            </Match>
+          </Switch>
+        </div>
+      </Show>
      <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{title()}</span>
    </A>
  )
 }

-const SessionHoverPreview = (props: {
-  mobile?: boolean
-  nav: Accessor<HTMLElement | undefined>
-  hoverSession: Accessor<string | undefined>
-  session: Session
-  sidebarHovering: Accessor<boolean>
-  hoverReady: Accessor<boolean>
-  hoverMessages: Accessor<UserMessage[] | undefined>
-  language: ReturnType<typeof useLanguage>
-  isActive: Accessor<boolean>
-  slug: string
-  setHoverSession: (id: string | undefined) => void
-  messageLabel: (message: Message) => string | undefined
-  onMessageSelect: (message: Message) => void
-  trigger: JSX.Element
-}): JSX.Element => {
-  let ref: HTMLDivElement | undefined
-
-  return (
-    <HoverCard
-      openDelay={1000}
-      closeDelay={props.sidebarHovering() ? 600 : 0}
-      placement="right-start"
-      gutter={16}
-      shift={-2}
-      trigger={
-        <div ref={ref} class="min-w-0 w-full">
-          {props.trigger}
-        </div>
-      }
-      open={props.hoverSession() === props.session.id}
-      onOpenChange={(open) => {
-        if (!open) {
-          props.setHoverSession(undefined)
-          return
-        }
-        if (!ref?.matches(":hover")) return
-        props.setHoverSession(props.session.id)
-      }}
-    >
-      <Show
-        when={props.hoverReady()}
-        fallback={<div class="text-12-regular text-text-weak">{props.language.t("session.messages.loading")}</div>}
-      >
-        <div class="overflow-y-auto overflow-x-hidden max-h-72 h-full">
-          <MessageNav
-            messages={props.hoverMessages() ?? []}
-            current={undefined}
-            getLabel={props.messageLabel}
-            onMessageSelect={props.onMessageSelect}
-            size="normal"
-            class="w-60"
-          />
-        </div>
-      </Show>
-    </HoverCard>
-  )
-}
-
 export const SessionItem = (props: SessionItemProps): JSX.Element => {
  const params = useParams()
-  const navigate = useNavigate()
  const layout = useLayout()
  const language = useLanguage()
  const notification = useNotification()
@ -234,18 +165,13 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
    )
  })

-  const tint = createMemo(() => {
-    return messageAgentColor(sessionStore.message[props.session.id], sessionStore.agent)
+  const tint = createMemo(() => messageAgentColor(sessionStore.message[props.session.id], sessionStore.agent))
+  const tooltip = createMemo(() => props.showTooltip ?? (props.mobile || !props.sidebarExpanded()))
+  const currentChild = createMemo(() => {
+    if (!props.showChild) return
+    return childSessionOnPath(sessionStore.session, props.session.id, params.id)
  })

-  const hoverMessages = createMemo(() =>
-    sessionStore.message[props.session.id]?.filter((message): message is UserMessage => message.role === "user"),
-  )
-  const hoverReady = createMemo(() => hoverMessages() !== undefined)
-  const hoverAllowed = createMemo(() => !props.mobile && props.sidebarExpanded())
-  const hoverEnabled = createMemo(() => (props.popover ?? true) && hoverAllowed())
-  const isActive = createMemo(() => props.session.id === params.id)
-
  const warm = (span: number, priority: "high" | "low") => {
    const nav = props.navList?.()
    const list = nav?.some((item) => item.id === props.session.id && item.directory === props.session.directory)
@ -266,30 +192,6 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
    }
  }

-  const hoverPrefetch = {
-    current: undefined as ReturnType<typeof setTimeout> | undefined,
-  }
-  const cancelHoverPrefetch = () => {
-    if (hoverPrefetch.current === undefined) return
-    clearTimeout(hoverPrefetch.current)
-    hoverPrefetch.current = undefined
-  }
-  const scheduleHoverPrefetch = () => {
-    warm(1, "high")
-    if (hoverPrefetch.current !== undefined) return
-    hoverPrefetch.current = setTimeout(() => {
-      hoverPrefetch.current = undefined
-      warm(2, "low")
-    }, 80)
-  }
-
-  onCleanup(cancelHoverPrefetch)
-
-  const messageLabel = (message: Message) => {
-    const parts = sessionStore.part[message.id] ?? []
-    const text = parts.find((part): part is TextPart => part?.type === "text" && !part.synthetic && !part.ignored)
-    return text?.text
-  }
  const item = (
    <SessionRow
      session={props.session}
@ -301,86 +203,74 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
      hasPermissions={hasPermissions}
      hasError={hasError}
      unseenCount={unseenCount}
-      setHoverSession={props.setHoverSession}
      clearHoverProjectSoon={props.clearHoverProjectSoon}
      sidebarOpened={layout.sidebar.opened}
-      warmHover={scheduleHoverPrefetch}
      warmPress={() => warm(2, "high")}
      warmFocus={() => warm(2, "high")}
-      cancelHoverPrefetch={cancelHoverPrefetch}
    />
  )

  return (
-    <div
-      data-session-id={props.session.id}
-      class="group/session relative w-full min-w-0 rounded-md cursor-default pl-2 pr-3 transition-colors
-             hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
-    >
-      <div class="flex min-w-0 items-center gap-1">
-        <div class="min-w-0 flex-1">
-          <Show
-            when={hoverEnabled()}
-            fallback={
-              <Tooltip
-                placement={props.mobile ? "bottom" : "right"}
-                value={sessionTitle(props.session.title)}
-                gutter={10}
-                class="min-w-0 w-full"
-              >
-                {item}
-              </Tooltip>
-            }
-          >
-            <SessionHoverPreview
-              mobile={props.mobile}
-              nav={props.nav}
-              hoverSession={props.hoverSession}
-              session={props.session}
-              sidebarHovering={props.sidebarHovering}
-              hoverReady={hoverReady}
-              hoverMessages={hoverMessages}
-              language={language}
-              isActive={isActive}
-              slug={props.slug}
-              setHoverSession={props.setHoverSession}
-              messageLabel={messageLabel}
-              onMessageSelect={(message) => {
-                if (!isActive())
-                  layout.pendingMessage.set(`${base64Encode(props.session.directory)}/${props.session.id}`, message.id)
+    <>
+      <div
+        data-session-id={props.session.id}
+        class="group/session relative w-full min-w-0 rounded-md cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
+        style={{ "padding-left": `${8 + (props.level ?? 0) * 16}px` }}
+      >
+        <div class="flex min-w-0 items-center gap-1">
+          <div class="min-w-0 flex-1">
+            <Show
+              when={!tooltip()}
+              fallback={
+                <Tooltip
+                  placement={props.mobile ? "bottom" : "right"}
+                  value={sessionTitle(props.session.title)}
+                  gutter={10}
+                  class="min-w-0 w-full"
+                >
+                  {item}
+                </Tooltip>
+              }
+            >
+              {item}
+            </Show>
+          </div>

-                navigate(`${props.slug}/session/${props.session.id}#message-${message.id}`)
+          <Show when={!props.level}>
+            <div
+              class="shrink-0 overflow-hidden transition-[width,opacity]"
+              classList={{
+                "w-6 opacity-100 pointer-events-auto": !!props.mobile,
+                "w-0 opacity-0 pointer-events-none": !props.mobile,
+                "group-hover/session:w-6 group-hover/session:opacity-100 group-hover/session:pointer-events-auto": true,
+                "group-focus-within/session:w-6 group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
              }}
-              trigger={item}
-            />
+            >
+              <Tooltip value={language.t("common.archive")} placement="top">
+                <IconButton
+                  icon="archive"
+                  variant="ghost"
+                  class="size-6 rounded-md"
+                  aria-label={language.t("common.archive")}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    void props.archiveSession(props.session)
+                  }}
+                />
+              </Tooltip>
+            </div>
          </Show>
        </div>
-
-        <div
-          class="shrink-0 overflow-hidden transition-[width,opacity]"
-          classList={{
-            "w-6 opacity-100 pointer-events-auto": !!props.mobile,
-            "w-0 opacity-0 pointer-events-none": !props.mobile,
-            "group-hover/session:w-6 group-hover/session:opacity-100 group-hover/session:pointer-events-auto": true,
-            "group-focus-within/session:w-6 group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
-          }}
-        >
-          <Tooltip value={language.t("common.archive")} placement="top">
-            <IconButton
-              icon="archive"
-              variant="ghost"
-              class="size-6 rounded-md"
-              aria-label={language.t("common.archive")}
-              onClick={(event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                void props.archiveSession(props.session)
-              }}
-            />
-          </Tooltip>
-        </div>
      </div>
-    </div>
+      <Show when={currentChild()}>
+        {(child) => (
+          <div class="w-full">
+            <SessionItem {...props} session={child()} level={(props.level ?? 0) + 1} />
+          </div>
+        )}
+      </Show>
+    </>
  )
 }

@ -390,7 +280,6 @@ export const NewSessionItem = (props: {
  dense?: boolean
  sidebarExpanded: Accessor<boolean>
  clearHoverProjectSoon: () => void
-  setHoverSession: (id: string | undefined) => void
 }): JSX.Element => {
  const layout = useLayout()
  const language = useLanguage()
@ -400,9 +289,8 @@ export const NewSessionItem = (props: {
    <A
      href={`/${props.slug}/session`}
      end
-      class={`flex items-center gap-1 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
+      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
      onClick={() => {
-        props.setHoverSession(undefined)
        if (layout.sidebar.opened()) return
        props.clearHoverProjectSoon()
      }}
--- a/packages/app/src/pages/layout/sidebar-workspace.tsx
+++ b/packages/app/src/pages/layout/sidebar-workspace.tsx
@ -272,6 +272,7 @@ const WorkspaceSessionList = (props: {
          mobile={props.mobile}
          popover={props.popover}
          children={props.children()}
+          showChild
          sidebarExpanded={props.ctx.sidebarExpanded}
          sidebarHovering={props.ctx.sidebarHovering}
          nav={props.ctx.nav}
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@ -429,6 +429,7 @@ export default function Page() {
  }

  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const isChildSession = createMemo(() => !!info()?.parentID)
  const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
  const sessionCount = createMemo(() => Math.max(info()?.summary?.files ?? 0, diffs().length))
  const hasSessionReview = createMemo(() => sessionCount() > 0)
@ -1058,7 +1059,7 @@ export default function Page() {
    }

    if (event.key.length === 1 && event.key !== "Unidentified" && !(event.ctrlKey || event.metaKey)) {
-      if (composer.blocked()) return
+      if (composer.blocked() || isChildSession()) return
      inputRef?.focus()
    }
  }
@ -1127,7 +1128,10 @@ export default function Page() {
    setFileTreeTab("all")
  }

-  const focusInput = () => inputRef?.focus()
+  const focusInput = () => {
+    if (isChildSession()) return
+    inputRef?.focus()
+  }

  useSessionCommands({
    navigateMessageByOffset,
@ -1658,7 +1662,7 @@ export default function Page() {
  const queueEnabled = createMemo(() => {
    const id = params.id
    if (!id) return false
-    return settings.general.followup() === "queue" && busy(id) && !composer.blocked()
+    return settings.general.followup() === "queue" && busy(id) && !composer.blocked() && !isChildSession()
  })

  const followupText = (item: FollowupDraft) => {
@ -1690,6 +1694,7 @@ export default function Page() {
  const followupDock = createMemo(() => queuedFollowups().map((item) => ({ id: item.id, text: followupText(item) })))

  const sendFollowup = (sessionID: string, id: string, opts?: { manual?: boolean }) => {
+    if (sync.session.get(sessionID)?.parentID) return Promise.resolve()
    const item = (followup.items[sessionID] ?? []).find((entry) => entry.id === id)
    if (!item) return Promise.resolve()
    if (followupBusy(sessionID)) return Promise.resolve()
@ -1820,6 +1825,7 @@ export default function Page() {
    if (followupBusy(sessionID)) return
    if (followup.failed[sessionID] === item.id) return
    if (followup.paused[sessionID]) return
+    if (isChildSession()) return
    if (composer.blocked()) return
    if (busy(sessionID)) return

@ -2001,7 +2007,7 @@ export default function Page() {
            }}
            onResponseSubmit={resumeScroll}
            followup={
-              params.id
+              params.id && !isChildSession()
                ? {
                    queue: queueEnabled,
                    items: followupDock(),
--- a/packages/app/src/pages/session/composer/session-composer-region.tsx
+++ b/packages/app/src/pages/session/composer/session-composer-region.tsx
@ -1,9 +1,11 @@
 import { Show, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
+import { useNavigate } from "@solidjs/router"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { PromptInput } from "@/components/prompt-input"
 import { useLanguage } from "@/context/language"
 import { usePrompt } from "@/context/prompt"
+import { useSync } from "@/context/sync"
 import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionKey } from "@/pages/session/session-layout"
 import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
@ -43,11 +45,17 @@ export function SessionComposerRegion(props: {
  }
  setPromptDockRef: (el: HTMLDivElement) => void
 }) {
+  const navigate = useNavigate()
  const prompt = usePrompt()
  const language = useLanguage()
  const route = useSessionKey()
+  const sync = useSync()

  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)
+  const child = createMemo(() => !!parentID())
+  const showComposer = createMemo(() => !props.state.blocked() || child())

  const previewPrompt = () =>
    prompt
@ -113,6 +121,12 @@ export function SessionComposerRegion(props: {
  const lift = createMemo(() => (rolled() ? 18 : 36 * value()))
  const full = createMemo(() => Math.max(78, store.height))

+  const openParent = () => {
+    const id = parentID()
+    if (!id) return
+    navigate(`/${route.params.dir}/session/${id}`)
+  }
+
  createEffect(() => {
    const el = store.body
    if (!el) return
@ -156,7 +170,7 @@ export function SessionComposerRegion(props: {
          )}
        </Show>

-        <Show when={!props.state.blocked()}>
+        <Show when={showComposer()}>
          <Show
            when={prompt.ready()}
            fallback={
@ -232,17 +246,44 @@ export function SessionComposerRegion(props: {
                  onEdit={props.followup!.onEdit}
                />
              </Show>
-              <PromptInput
-                ref={props.inputRef}
-                newSessionWorktree={props.newSessionWorktree}
-                onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
-                edit={props.followup?.edit}
-                onEditLoaded={props.followup?.onEditLoaded}
-                shouldQueue={props.followup?.queue}
-                onQueue={props.followup?.onQueue}
-                onAbort={props.followup?.onAbort}
-                onSubmit={props.onSubmit}
-              />
+              <Show
+                when={child()}
+                fallback={
+                  <Show when={!props.state.blocked()}>
+                    <PromptInput
+                      ref={props.inputRef}
+                      newSessionWorktree={props.newSessionWorktree}
+                      onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
+                      edit={props.followup?.edit}
+                      onEditLoaded={props.followup?.onEditLoaded}
+                      shouldQueue={props.followup?.queue}
+                      onQueue={props.followup?.onQueue}
+                      onAbort={props.followup?.onAbort}
+                      onSubmit={props.onSubmit}
+                    />
+                  </Show>
+                }
+              >
+                <div
+                  ref={props.inputRef}
+                  class="w-full rounded-[12px] border p-3 text-16-regular text-text-weak"
+                  style={{
+                    border: "1px solid var(--border-weak-base, rgba(255, 255, 255, 0.08))",
+                    background: "var(--surface-inset-base, rgba(13, 13, 13, 0.50))",
+                  }}
+                >
+                  <span>{language.t("session.child.promptDisabled")} </span>
+                  <Show when={parentID()}>
+                    <button
+                      type="button"
+                      class="text-text-base transition-colors hover:text-text-strong"
+                      onClick={openParent}
+                    >
+                      {language.t("session.child.backToParent")}
+                    </button>
+                  </Show>
+                </div>
+              </Show>
            </div>
          </Show>
        </Show>
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@ -295,6 +295,13 @@ export function MessageTimeline(props: {
  const shareUrl = createMemo(() => info()?.share?.url)
  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
  const parentID = createMemo(() => info()?.parentID)
+  const parent = createMemo(() => {
+    const id = parentID()
+    if (!id) return
+    return sync.session.get(id)
+  })
+  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
+  const childTitle = createMemo(() => titleLabel() ?? (parentID() ? language.t("command.session.new") : ""))
  const showHeader = createMemo(() => !!(titleValue() || parentID()))
  const stageCfg = { init: 1, batch: 3 }
  const staging = createTimelineStaging({
@ -649,16 +656,19 @@ export function MessageTimeline(props: {
              >
                <div class="h-12 w-full flex items-center justify-between gap-2">
                  <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
-                    <Show when={parentID()}>
-                      <IconButton
-                        tabIndex={-1}
-                        icon="arrow-left"
-                        variant="ghost"
-                        onClick={navigateParent}
-                        aria-label={language.t("common.goBack")}
-                      />
-                    </Show>
                    <div class="flex items-center min-w-0 grow-1">
+                      <Show when={parentID()}>
+                        <button
+                          type="button"
+                          class="min-w-0 max-w-[40%] truncate text-14-medium text-text-weak transition-colors hover:text-text-base"
+                          onClick={navigateParent}
+                        >
+                          {parentTitle()}
+                        </button>
+                        <span class="px-1.5 text-14-medium text-text-weak" aria-hidden="true">
+                          /
+                        </span>
+                      </Show>
                      <div
                        class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
                        style={{
@ -676,7 +686,7 @@ export function MessageTimeline(props: {
                          </div>
                        </Show>
                      </div>
-                      <Show when={titleLabel() || title.editing}>
+                      <Show when={childTitle() || title.editing}>
                        <Show
                          when={title.editing}
                          fallback={
@ -684,7 +694,7 @@ export function MessageTimeline(props: {
                              class="text-14-medium text-text-strong truncate grow-1 min-w-0"
                              onDblClick={openTitleEditor}
                            >
-                              {titleLabel()}
+                              {childTitle()}
                            </h1>
                          }
                        >
--- a/packages/app/src/utils/agent.ts
+++ b/packages/app/src/utils/agent.ts
@ -5,9 +5,30 @@ const defaults: Record<string, string> = {
  plan: "var(--icon-agent-plan-base)",
 }

+const palette = [
+  "var(--icon-agent-ask-base)",
+  "var(--icon-agent-build-base)",
+  "var(--icon-agent-docs-base)",
+  "var(--icon-agent-plan-base)",
+  "var(--syntax-info)",
+  "var(--syntax-success)",
+  "var(--syntax-warning)",
+  "var(--syntax-property)",
+  "var(--syntax-constant)",
+  "var(--text-diff-add-base)",
+  "var(--text-diff-delete-base)",
+  "var(--icon-warning-base)",
+]
+
+function tone(name: string) {
+  let hash = 0
+  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) >>> 0
+  return palette[hash % palette.length]
+}
+
 export function agentColor(name: string, custom?: string) {
  if (custom) return custom
-  return defaults[name] ?? defaults[name.toLowerCase()]
+  return defaults[name] ?? defaults[name.toLowerCase()] ?? tone(name.toLowerCase())
 }

 export function messageAgentColor(