fix(tui): refine subagent interrupt flow and footer feedback

Author: tobwen

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

@@ -199,6 +199,7 @@ export function Session() {
     return current ? { directory: current.directory, workspaceID: current.workspaceID } : undefined
   })
   const sessionStatus = createMemo(() => sync.data.session_status[route.sessionID]?.type ?? "idle")
+  const sessionBusy = createMemo(() => sessionStatus() !== "idle")
 
   createEffect(() => {
     const title = Locale.truncate(session()?.title ?? "", 50)
@@ -293,13 +294,15 @@ export function Session() {
       (isIdle) => {
         if (isIdle) resetInterrupt()
       },
+      { defer: true },
     ),
   )
 
   createEffect(
     on(
       () => route.sessionID,
       () => resetInterrupt(),
+      { defer: true },
     ),
   )
 
@@ -1159,21 +1162,26 @@ export function Session() {
         run: () => {
           dialog.clear()
           const next = interruptCount() + 1
-          setInterruptCount(next)
-          if (interruptTimer) clearTimeout(interruptTimer)
-          interruptTimer = setTimeout(resetInterrupt, 5000)
           if (next >= 2) {
             resetInterrupt()
-            sync.set("permission", route.sessionID, [])
-            sync.set("question", route.sessionID, [])
             void sdk.client.session
               .abort({ sessionID: route.sessionID })
+              .then(() => {
+                // Server cancels the runner but does not emit session-wide
+                // permission/question cleanup events; clear stale local state
+                sync.set("permission", route.sessionID, [])
+                sync.set("question", route.sessionID, [])
+              })
               .catch((error: unknown) => {
                 toast.show({
                   message: errorMessage(error),
                   variant: "error",
                 })
               })
+          } else {
+            setInterruptCount(next)
+            if (interruptTimer) clearTimeout(interruptTimer)
+            interruptTimer = setTimeout(resetInterrupt, 5000)
           }
         },
       },
@@ -1366,7 +1374,7 @@ export function Session() {
                 <Show when={session()?.parentID}>
                   <SubagentFooter
                     interruptCount={interruptCount}
-                    sessionBusy={() => sessionStatus() !== "idle"}
+                    sessionBusy={sessionBusy}
                   />
                 </Show>
                 <Show when={visible()}>

packages/tui/src/routes/session/subagent-footer.tsx

@@ -64,6 +64,7 @@ export function SubagentFooter(props: {
   const previousShortcut = useCommandShortcut("session.child.previous")
   const nextShortcut = useCommandShortcut("session.child.next")
   const interruptShortcut = useCommandShortcut("session.child.interrupt")
+  const armed = createMemo(() => props.interruptCount() > 0)
   const [hover, setHover] = createSignal<"parent" | "prev" | "next" | null>(null)
   useTerminalDimensions()
 
@@ -100,11 +101,22 @@ export function SubagentFooter(props: {
           </box>
           <box flexDirection="row" gap={2}>
             <Show when={props.sessionBusy()}>
-              <text fg={props.interruptCount() > 0 ? theme.primary : theme.text}>
-                {interruptShortcut() || "esc"}{" "}
-                <span style={{ fg: props.interruptCount() > 0 ? theme.primary : theme.textMuted }}>
-                  {props.interruptCount() > 0 ? "again to interrupt" : "interrupt"}
-                </span>
+              <text fg={armed() ? theme.primary : theme.text}>
+                {armed() ? (
+                  <>
+                    <span style={{ fg: armed() ? theme.primary : theme.textMuted }}>
+                      {interruptShortcut()}
+                    </span>{" "}
+                    again to interrupt
+                  </>
+                ) : (
+                  <>
+                    Interrupt{" "}
+                    <span style={{ fg: armed() ? theme.primary : theme.textMuted }}>
+                      {interruptShortcut()}
+                    </span>
+                  </>
+                )}
               </text>
             </Show>
             <box