From 7c59e1a87114de5ec6d7c53253a992e4159998e5 Mon Sep 17 00:00:00 2001
From: Ari Lotter <arilotter@gmail.com>
Date: Thu, 23 Apr 2026 23:28:49 -0400
Subject: [PATCH] fix(tui): keep FloatingOverlays visible when input is blocked
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FloatingOverlays (SessionPicker, ModelPicker, SkillsHub, pager,
completions) was nested inside the !isBlocked guard in ComposerPane.
When any overlay opened, isBlocked became true, which removed the
entire composer box from the tree — including the overlay that was
trying to render. This made /resume with no args appear to do nothing
(the input line vanished and no picker appeared).

Since 99d859ce (feat: refactor by splitting up app and doing proper
state), isBlocked gated only the text input lines so that
approval/clarify prompts and pickers rendered above a hidden composer.

The regression happened in 408fc893 (fix(tui): tighten composer — status
sits directly above input, overlays anchor to input) when
FloatingOverlays was moved into the input row for anchoring but
accidentally kept inside the !isBlocked guard.

so here, we render FloatingOverlays outside the !isBlocked guard inside
the same position:relative Box, so overlays
stay visible even when text input is hidden. Only the actual input
buffer lines and TextInput are gated now.

Fixes: /resume, /history, /logs, /model, /skills, and completion
dropdowns when blocked overlays are active.
---
 ui-tui/src/components/appLayout.tsx | 90 +++++++++++++++--------------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/ui-tui/src/components/appLayout.tsx b/ui-tui/src/components/appLayout.tsx
index 164ef5dd4..19bc7736b 100644
--- a/ui-tui/src/components/appLayout.tsx
+++ b/ui-tui/src/components/appLayout.tsx
@@ -185,56 +185,58 @@ const ComposerPane = memo(function ComposerPane({
 
       <StatusRulePane at="top" composer={composer} status={status} />
 
-      {!isBlocked && (
-        <Box flexDirection="column" marginTop={ui.statusBar === 'top' ? 0 : 1} position="relative">
-          <FloatingOverlays
-            cols={composer.cols}
-            compIdx={composer.compIdx}
-            completions={composer.completions}
-            onModelSelect={actions.onModelSelect}
-            onPickerSelect={actions.resumeById}
-            pagerPageSize={composer.pagerPageSize}
-          />
+      <Box flexDirection="column" marginTop={ui.statusBar === 'top' ? 0 : 1} position="relative">
+        <FloatingOverlays
+          cols={composer.cols}
+          compIdx={composer.compIdx}
+          completions={composer.completions}
+          onModelSelect={actions.onModelSelect}
+          onPickerSelect={actions.resumeById}
+          pagerPageSize={composer.pagerPageSize}
+        />
 
-          {composer.inputBuf.map((line, i) => (
-            <Box key={i}>
-              <Box width={3}>
-                <Text color={ui.theme.color.dim}>{i === 0 ? `${ui.theme.brand.prompt} ` : '  '}</Text>
+        {!isBlocked && (
+          <>
+            {composer.inputBuf.map((line, i) => (
+              <Box key={i}>
+                <Box width={3}>
+                  <Text color={ui.theme.color.dim}>{i === 0 ? `${ui.theme.brand.prompt} ` : '  '}</Text>
+                </Box>
+
+                <Text color={ui.theme.color.cornsilk}>{line || ' '}</Text>
+              </Box>
+            ))}
+
+            <Box position="relative">
+              <Box width={pw}>
+                {sh ? (
+                  <Text color={ui.theme.color.shellDollar}>$ </Text>
+                ) : (
+                  <Text bold color={ui.theme.color.prompt}>
+                    {composer.inputBuf.length ? '  ' : `${ui.theme.brand.prompt} `}
+                  </Text>
+                )}
               </Box>
 
-              <Text color={ui.theme.color.cornsilk}>{line || ' '}</Text>
-            </Box>
-          ))}
+              <Box flexGrow={1} position="relative">
+                {/* subtract NoSelect paddingX={1} (2 cols) + pw so wrap-ansi and cursorLayout agree */}
+                <TextInput
+                  columns={Math.max(20, composer.cols - pw - 2)}
+                  onChange={composer.updateInput}
+                  onPaste={composer.handleTextPaste}
+                  onSubmit={composer.submit}
+                  placeholder={composer.empty ? PLACEHOLDER : ui.busy ? 'Ctrl+C to interrupt…' : ''}
+                  value={composer.input}
+                />
 
-          <Box position="relative">
-            <Box width={pw}>
-              {sh ? (
-                <Text color={ui.theme.color.shellDollar}>$ </Text>
-              ) : (
-                <Text bold color={ui.theme.color.prompt}>
-                  {composer.inputBuf.length ? '  ' : `${ui.theme.brand.prompt} `}
-                </Text>
-              )}
-            </Box>
-
-            <Box flexGrow={1} position="relative">
-              {/* subtract NoSelect paddingX={1} (2 cols) + pw so wrap-ansi and cursorLayout agree */}
-              <TextInput
-                columns={Math.max(20, composer.cols - pw - 2)}
-                onChange={composer.updateInput}
-                onPaste={composer.handleTextPaste}
-                onSubmit={composer.submit}
-                placeholder={composer.empty ? PLACEHOLDER : ui.busy ? 'Ctrl+C to interrupt…' : ''}
-                value={composer.input}
-              />
-
-              <Box position="absolute" right={0}>
-                <GoodVibesHeart t={ui.theme} tick={status.goodVibesTick} />
+                <Box position="absolute" right={0}>
+                  <GoodVibesHeart t={ui.theme} tick={status.goodVibesTick} />
+                </Box>
               </Box>
             </Box>
-          </Box>
-        </Box>
-      )}
+          </>
+        )}
+      </Box>
 
       {!composer.empty && !ui.sid && <Text color={ui.theme.color.dim}>⚕ {ui.status}</Text>}