fix(tui): make composer close action discoverable (#36337)

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

@@ -3,7 +3,7 @@ import { createStore } from "solid-js/store"
 import { TextAttributes } from "@opentui/core"
 import { useTheme } from "../../../context/theme"
 import { SplitBorder } from "../../../ui/border"
-import { useBindings, useOpencodeModeStack, useCommandShortcut } from "../../../keymap"
+import { useBindings, useOpencodeModeStack } from "../../../keymap"
 import { SubagentsTab } from "./subagents-tab"
 import { ShellTab } from "./shell-tab"
 
@@ -105,8 +105,6 @@ export function Composer(props: ComposerProps) {
     ],
   }))
 
-  const closeHint = useCommandShortcut("session.child_first")
-
   return (
     <ComposerContext.Provider value={ctx}>
       <box flexShrink={0} visible={props.open}>
@@ -121,17 +119,16 @@ export function Composer(props: ComposerProps) {
           paddingBottom={1}
         >
           <box gap={1}>
+            <box flexDirection="row" justifyContent="space-between" paddingLeft={1}>
               <Show
                 when={tabList().length > 1}
                 fallback={
-                <box flexDirection="row" paddingLeft={1}>
                   <text fg={theme.text} attributes={TextAttributes.BOLD}>
                     {tabList()[0]?.label ?? ""}
                   </text>
-                </box>
                 }
               >
-              <box flexDirection="row" gap={2} paddingLeft={1}>
+                <box flexDirection="row" gap={2}>
                   <For each={tabList()}>
                     {(t) => {
                       const isActive = createMemo(() => store.active === t.id)
@@ -147,6 +144,10 @@ export function Composer(props: ComposerProps) {
                   </For>
                 </box>
               </Show>
+              <text fg={theme.textMuted} onMouseUp={close}>
+                esc
+              </text>
+            </box>
             <SubagentsTab sessionID={props.sessionID} />
             <ShellTab sessionID={props.sessionID} />
             <box flexDirection="row" gap={2} paddingLeft={1} flexShrink={0}>
@@ -168,12 +169,6 @@ export function Composer(props: ComposerProps) {
                   <span style={{ fg: theme.textMuted }}>←/→</span>
                 </text>
               </Show>
-              <text>
-                <span style={{ fg: theme.text }}>
-                  <b>close</b>{" "}
-                </span>
-                <span style={{ fg: theme.textMuted }}>{closeHint()}</span>
-              </text>
             </box>
           </box>
         </box>