feat(tui): enhance command execution on autocomplete and improve UI responsiveness

src/interfaces/tui/ui.tsx

@@ -337,20 +337,31 @@ export function ZesdexApp(props: { state: AppStateRest; onQuit: () => void }): R
   useKeyboard((key: OpenTuiKey) => {
     if (key.eventType === "release") return;
     const zk = toControllerKey(key);
+    let consumedByModal = false;
     try {
       const actions: Action[] = handleKey(zk, state);
       for (const act of actions) {
         if (act.tag === "QuitConfirm") {
           state.quit = true;
           onQuit();
+          consumedByModal = true;
           continue;
         }
+        // A slash-command that opens a modal (overlay / menu) "consumes" the
+        // input line — clear the buffer so `/model` doesn't linger. Autocomplete
+        // selection and normal submit must NOT be cleared (they own the buffer).
+        const opensModal =
+          act.tag === "OpenOverlay" ||
+          act.tag === "OpenMenuById" ||
+          act.tag === "OpenEditor" ||
+          act.tag === "ShowDiff" ||
+          act.tag === "ModelList";
+        if (opensModal && !state.input.autocompleteVisible) consumedByModal = true;
         applyAction(state, act);
       }
     } finally {
-      // Clear input buffer after command dispatch (commands like /model, /help
-      // open overlays but don't clear the buffer via submit()).
-      if (zk.code === KeyCode.Enter && state.input.buffer.length > 0) {
+      // Clear the input line only when a modal command consumed it this press.
+      if (consumedByModal) {
         state.input.clear();
       }
       // Force React to re-read the mutated `state` on the next frame.
@@ -439,6 +450,7 @@ export function ZesdexApp(props: { state: AppStateRest; onQuit: () => void }): R
       <scrollbox
         flexGrow={1}
         flexShrink={1}
+        flexBasis={0}
         minHeight={0}
         style={{ backgroundColor: C.bg }}
         stickyScroll
@@ -446,9 +458,10 @@ export function ZesdexApp(props: { state: AppStateRest; onQuit: () => void }): R
       >
         <TranscriptView state={state} width={width} />
       </scrollbox>
-      {/* Autocomplete dropdown (shown above the input row) */}
+      {/* Dropdown (compact, sized to content) + activity + input, in order. The
+          input row is flexShrink:0 so the transcript scrollbox absorbs overflow
+          and the text area is never hidden. */}
       {state.input.autocompleteVisible && <AutocompleteView state={state} />}
-      {/* Live activity breadcrumb of the running turn */}
       <ActivityBar state={state} running={running} />
       <InputView state={state} width={width} />
     </box>
@@ -553,18 +566,16 @@ function InputView(props: { state: AppStateRest; width: number }): ReactNode {
   return (
     <box flexDirection="column" width="100%" flexShrink={0}>
       <text fg={C.border}>{`─`.repeat(Math.max(0, width))}</text>
-      <box flexDirection="row" width="100%" flexShrink={0}>
+      <box flexDirection="row" width="100%">
         <text fg={C.accent}>
           <b>{`  ❯ `}</b>
         </text>
         {hasContent ? (
-          <text fg={C.fg} flexGrow={1}>{shown}</text>
+          <text fg={C.fg}>{shown}</text>
         ) : (
-          <text fg={C.dim} flexGrow={1}>
-            Ask Zesdex to help…
-          </text>
+          <text fg={C.dim}>Ask Zesdex to help…</text>
         )}
-        <text fg={C.accent} flexShrink={0}>{` ▏`}</text>
+        <text fg={C.accent}>{` ▏`}</text>
       </box>
     </box>
   );
@@ -579,24 +590,24 @@ function AutocompleteView(props: { state: AppStateRest }): ReactNode {
   const title = kind === "command" ? "commands" : "files";
   const selected = Math.min(state.input.autocompleteIdx, candidates.length - 1);
   const visible = candidates.slice(0, 10);
-  // Render the whole panel as ONE multiline <text> — the OpenTUI box renders a
-  // single text node reliably, whereas sibling <text> children can overlap.
-  const body = [
+  // Render the whole panel as ONE multiline <text> — this fixes the OpenTUI
+  // quirk where sibling <text> children overlap. The box is sized to its
+  // content (flexShrink 0, explicit height) so it never squashes the input row.
+  const lines = [
     ` ${title}`,
-    ...visible.map((c, i) =>
-      i === selected ? `▸ ${c}` : `  ${c}`,
-    ),
+    ...visible.map((c, i) => (i === selected ? `▸ ${c}` : `  ${c}`)),
     `  ↑/↓ navigate · Tab accept · Esc close`,
-  ].join("\n");
+  ];
+  const body = lines.join("\n");
   return (
     <box
       width="100%"
       flexDirection="column"
-      flexGrow={1}
+      flexGrow={0}
       flexShrink={0}
       style={{ border: true, borderColor: C.border, backgroundColor: C.surface, padding: 1 }}
     >
-      <text fg={kind === "command" ? C.accent : C.magenta}>
+      <text fg={kind === "command" ? C.accent : C.magenta} height={lines.length}>
         {body}
       </text>
     </box>