@polterware/polter 0.2.0 → 0.2.2

package/dist/index.js

@@ -21,17 +21,18 @@ import {
   planChanges,
   resolveToolCommand,
   runCommand,
+  runInteractiveCommand,
   runSupabaseCommand,
   savePipeline,
   writeProjectConfig
-} from "./chunk-2OZZNSKW.js";
+} from "./chunk-2MXXRP4H.js";
 
 // src/index.tsx
-import React19 from "react";
+import React20 from "react";
 import { render } from "ink";
 
 // src/app.tsx
-import { Box as Box21, Text as Text23, useApp } from "ink";
+import { Box as Box22, Text as Text26, useApp } from "ink";
 
 // src/hooks/useNavigation.ts
 import { useState, useCallback } from "react";
@@ -403,7 +404,8 @@ function SelectList({
   boxedSections = false,
   width = 80,
   isInputActive = true,
-  arrowNavigation = false
+  arrowNavigation = false,
+  panelFocused = true
 }) {
   const labelWidth = labelWidthProp ?? Math.max(16, Math.floor(width * 0.45));
   const isNarrow = width < 50;
@@ -564,7 +566,7 @@ function SelectList({
         {
           flexDirection: "column",
           borderStyle: "round",
-          borderColor: inkColors.accent,
+          borderColor: panelFocused ? inkColors.accent : panel.borderDim,
           borderDimColor: !hasSelectedRow && !isPinnedSection,
           paddingX: 1,
           children: [
@@ -723,7 +725,8 @@ function buildHomeItems({
   activeFeature,
   pinnedCommands,
   pinnedRuns,
-  showPinnedSection = true
+  showPinnedSection = true,
+  showFeatureHeader = true
 }) {
   const items = [];
   if (showPinnedSection && (pinnedRuns.length > 0 || pinnedCommands.length > 0)) {
@@ -736,13 +739,15 @@ function buildHomeItems({
     });
     items.push(...buildPinnedOnlyItems(pinnedCommands, pinnedRuns));
   }
-  items.push({
-    id: "section-commands",
-    value: "__section_commands__",
-    label: `\u{1F4C2} ${activeFeature.label} Commands`,
-    kind: "header",
-    selectable: false
-  });
+  if (showFeatureHeader) {
+    items.push({
+      id: "section-commands",
+      value: "__section_commands__",
+      label: `\u{1F4C2} ${activeFeature.label} Commands`,
+      kind: "header",
+      selectable: false
+    });
+  }
   const toolOrder = { supabase: 0, vercel: 1, gh: 2, git: 3 };
   const toolIcons = { supabase: "\u{1F7E2}", vercel: "\u26AA", gh: "\u{1F535}", git: "\u{1F7E0}" };
   const grouped = /* @__PURE__ */ new Map();
@@ -931,7 +936,7 @@ function Home({
 
 // src/screens/CommandArgs.tsx
 import { useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
-import { Box as Box7, Text as Text8 } from "ink";
+import { Box as Box7, Text as Text8, useInput as useInput4 } from "ink";
 
 // src/components/TextPrompt.tsx
 import { useState as useState5 } from "react";
@@ -943,7 +948,11 @@ function TextPrompt({
   placeholder,
   onSubmit,
   onCancel,
-  validate
+  validate,
+  arrowNavigation = false,
+  isInputActive = true,
+  boxed = false,
+  focused = true
 }) {
   const [value, setValue] = useState5("");
   const [error, setError] = useState5();
@@ -951,7 +960,10 @@ function TextPrompt({
     if (key.escape && onCancel) {
       onCancel();
     }
-  });
+    if (arrowNavigation && key.leftArrow && value === "" && onCancel) {
+      onCancel();
+    }
+  }, { isActive: isInputActive });
   const handleSubmit = (val) => {
     if (validate) {
       const err = validate(val);
@@ -963,7 +975,7 @@ function TextPrompt({
     setError(void 0);
     onSubmit(val);
   };
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+  const content = /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs6(Box6, { gap: 1, children: [
       /* @__PURE__ */ jsx6(Text6, { color: inkColors.accent, bold: true, children: "?" }),
       /* @__PURE__ */ jsx6(Text6, { children: label })
@@ -988,6 +1000,10 @@ function TextPrompt({
       error
     ] }) })
   ] });
+  if (boxed) {
+    return /* @__PURE__ */ jsx6(Box6, { borderStyle: "round", borderColor: focused ? inkColors.accent : panel.borderDim, paddingX: 1, children: content });
+  }
+  return content;
 }
 
 // src/components/ToolBadge.tsx
@@ -1073,11 +1089,6 @@ function buildCommandArgItems({
       label: "Custom args...",
       hint: "Type any arguments manually",
       kind: "action"
-    },
-    {
-      value: "__back__",
-      label: "\u2190 Back to menu",
-      kind: "action"
     }
   ];
 }
@@ -1120,25 +1131,20 @@ function CommandArgs({
       tool: resolvedTool
     });
   };
+  useInput4((_input, key) => {
+    if (!command && (key.escape || key.leftArrow)) {
+      onBack();
+    }
+  }, { isActive: isInputActive && !command });
   if (!command) {
     return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx8(Box7, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text8, { color: "red", children: "Command not provided." }) }),
-      /* @__PURE__ */ jsx8(
-        SelectList,
-        {
-          items: [{ value: "__back__", label: "\u2190 Back to menu" }],
-          onSelect: onBack,
-          onCancel: onBack,
-          width,
-          isInputActive,
-          arrowNavigation: panelMode
-        }
-      )
+      /* @__PURE__ */ jsx8(Text8, { color: "red", children: "Command not provided." }),
+      /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Press Esc or \u2190 to go back" })
     ] });
   }
   if (phase === "custom") {
     const toolLabel = resolvedTool === "supabase" ? "supabase" : resolvedTool;
-    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
       /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, gap: 1, children: [
         /* @__PURE__ */ jsx8(Text8, { color: inkColors.accent, bold: true, children: "Command" }),
         /* @__PURE__ */ jsx8(Text8, { children: command }),
@@ -1159,7 +1165,11 @@ function CommandArgs({
               return;
             }
             onBack();
-          }
+          },
+          arrowNavigation: panelMode,
+          isInputActive,
+          boxed: panelMode,
+          focused: isInputActive
         }
       ),
       !panelMode && /* @__PURE__ */ jsx8(StatusBar, { hint: "Type args \xB7 Enter to continue \xB7 Esc to go back", width })
@@ -1179,7 +1189,7 @@ function CommandArgs({
     }),
     [command, legacySuggestions, pinnedRuns]
   );
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
     /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, gap: 1, children: [
       /* @__PURE__ */ jsx8(Text8, { color: inkColors.accent, bold: true, children: "Command" }),
       /* @__PURE__ */ jsx8(Text8, { children: command }),
@@ -1238,9 +1248,10 @@ function CommandArgs({
         },
         onCancel: onBack,
         boxedSections: true,
-        width,
+        width: panelMode ? Math.max(20, width - 4) : width,
         isInputActive,
-        arrowNavigation: panelMode
+        arrowNavigation: panelMode,
+        panelFocused: isInputActive
       }
     ),
     !panelMode && /* @__PURE__ */ jsx8(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 p pin \xB7 Esc back", width })
@@ -1271,7 +1282,7 @@ function CustomCommand({
       ...!panelMode ? [{ value: "__back__", label: "\u2190 Back" }] : []
     ];
     return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx9(Text9, { bold: true, color: inkColors.accent, children: "\u270F\uFE0F Custom Command" }) }),
+      !panelMode && /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx9(Text9, { bold: true, color: inkColors.accent, children: "\u270F\uFE0F Custom Command" }) }),
       !panelMode && /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "Select tool:" }),
       /* @__PURE__ */ jsx9(
         SelectList,
@@ -1290,14 +1301,15 @@ function CustomCommand({
           width: panelMode ? Math.max(20, width - 4) : width,
           maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       ),
       !panelMode && /* @__PURE__ */ jsx9(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
     ] });
   }
   return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-    /* @__PURE__ */ jsxs8(Box8, { marginBottom: 1, gap: 1, children: [
+    !panelMode && /* @__PURE__ */ jsxs8(Box8, { marginBottom: 1, gap: 1, children: [
       /* @__PURE__ */ jsx9(Text9, { bold: true, color: inkColors.accent, children: "\u270F\uFE0F Custom Command" }),
       /* @__PURE__ */ jsxs8(Text9, { dimColor: true, children: [
         "(",
@@ -1318,7 +1330,11 @@ function CustomCommand({
           const args = value.split(" ").filter(Boolean);
           onNavigate("flag-selection", { args, tool: selectedTool });
         },
-        onCancel: () => setPhase("tool-select")
+        onCancel: () => setPhase("tool-select"),
+        arrowNavigation: panelMode,
+        isInputActive,
+        boxed: panelMode,
+        focused: isInputActive
       }
     ),
     !panelMode && /* @__PURE__ */ jsx9(StatusBar, { hint: "Type a command \xB7 Enter to continue \xB7 Esc to go back", width })
@@ -1326,11 +1342,11 @@ function CustomCommand({
 }
 
 // src/screens/FlagSelection.tsx
-import { Box as Box10 } from "ink";
+import { Box as Box10, Text as Text11 } from "ink";
 
 // src/components/FlagToggle.tsx
 import { useState as useState8 } from "react";
-import { Box as Box9, Text as Text10, useInput as useInput4 } from "ink";
+import { Box as Box9, Text as Text10, useInput as useInput5 } from "ink";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function FlagToggle({
   flags,
@@ -1341,7 +1357,7 @@ function FlagToggle({
 }) {
   const [cursor, setCursor] = useState8(0);
   const [selected, setSelected] = useState8(/* @__PURE__ */ new Set());
-  useInput4((input2, key) => {
+  useInput5((input2, key) => {
     if (key.upArrow || input2 === "k") {
       setCursor((prev) => prev > 0 ? prev - 1 : flags.length - 1);
     }
@@ -1360,7 +1376,7 @@ function FlagToggle({
         return next;
       });
     }
-    if (key.return) {
+    if (key.return || arrowNavigation && key.rightArrow) {
       onSubmit(Array.from(selected));
     }
     if (key.escape && onCancel) {
@@ -1373,7 +1389,11 @@ function FlagToggle({
   return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs9(Box9, { marginBottom: 1, children: [
       /* @__PURE__ */ jsx10(Text10, { bold: true, color: inkColors.accent, children: "\u2691 Global Flags" }),
-      /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: " (Space to toggle, Enter to confirm)" })
+      /* @__PURE__ */ jsxs9(Text10, { dimColor: true, children: [
+        " (Space to toggle, ",
+        arrowNavigation ? "\u2192" : "Enter",
+        " to confirm)"
+      ] })
     ] }),
     flags.map((flag, i) => {
       const isActive = cursor === i;
@@ -1399,7 +1419,7 @@ function FlagToggle({
         flag.hint && /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: flag.hint })
       ] }, flag.value);
     }),
-    /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: selected.size > 0 ? `${selected.size} flag${selected.size > 1 ? "s" : ""} selected` : "No flags selected (Enter to skip)" }) })
+    /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: selected.size > 0 ? `${selected.size} flag${selected.size > 1 ? "s" : ""} selected` : `No flags selected (${arrowNavigation ? "\u2192" : "Enter"} to skip)` }) })
   ] });
 }
 
@@ -1411,6 +1431,7 @@ function FlagSelection({
   onNavigate,
   onBack,
   width = 80,
+  height = 24,
   panelMode = false,
   isInputActive = true
 }) {
@@ -1419,8 +1440,36 @@ function FlagSelection({
     onNavigate("confirm-execute", { args, tool });
     return /* @__PURE__ */ jsx11(Box10, {});
   }
-  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(
+  const cmdDisplay = `${tool} ${args.join(" ")}`;
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    panelMode && /* @__PURE__ */ jsx11(Box10, { marginBottom: 1, gap: 1, children: /* @__PURE__ */ jsxs10(Text11, { color: inkColors.accent, bold: true, children: [
+      "\u25B6",
+      " ",
+      cmdDisplay
+    ] }) }),
+    panelMode ? /* @__PURE__ */ jsx11(
+      Box10,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: isInputActive ? inkColors.accent : panel.borderDim,
+        borderDimColor: true,
+        paddingX: 1,
+        children: /* @__PURE__ */ jsx11(
+          FlagToggle,
+          {
+            flags,
+            onSubmit: (selectedFlags) => {
+              const finalArgs = selectedFlags.length > 0 ? [...args, ...selectedFlags] : args;
+              onNavigate("confirm-execute", { args: finalArgs, tool });
+            },
+            onCancel: onBack,
+            isInputActive,
+            arrowNavigation: panelMode
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx11(
       FlagToggle,
       {
         flags,
@@ -1438,26 +1487,26 @@ function FlagSelection({
 }
 
 // src/screens/CommandExecution.tsx
-import { useState as useState10, useEffect as useEffect5 } from "react";
-import { Box as Box12, Text as Text14 } from "ink";
+import { useState as useState11, useEffect as useEffect6 } from "react";
+import { Box as Box13, Text as Text17 } from "ink";
 
 // src/components/Spinner.tsx
-import { Text as Text11 } from "ink";
+import { Text as Text12 } from "ink";
 import InkSpinner from "ink-spinner";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function Spinner({
   label = "Running...",
   color = inkColors.accent
 }) {
-  return /* @__PURE__ */ jsxs11(Text11, { children: [
-    /* @__PURE__ */ jsx12(Text11, { color, children: /* @__PURE__ */ jsx12(InkSpinner, { type: "dots" }) }),
+  return /* @__PURE__ */ jsxs11(Text12, { children: [
+    /* @__PURE__ */ jsx12(Text12, { color, children: /* @__PURE__ */ jsx12(InkSpinner, { type: "dots" }) }),
     " ",
-    /* @__PURE__ */ jsx12(Text11, { children: label })
+    /* @__PURE__ */ jsx12(Text12, { children: label })
   ] });
 }
 
 // src/components/ConfirmPrompt.tsx
-import { Box as Box11, Text as Text12, useInput as useInput5 } from "ink";
+import { Box as Box11, Text as Text13, useInput as useInput6 } from "ink";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function ConfirmPrompt({
   message,
@@ -1467,7 +1516,7 @@ function ConfirmPrompt({
   isInputActive = true,
   arrowNavigation = false
 }) {
-  useInput5((input2, key) => {
+  useInput6((input2, key) => {
     if (key.escape && onCancel) {
       onCancel();
       return;
@@ -1485,14 +1534,14 @@ function ConfirmPrompt({
     }
   }, { isActive: isInputActive });
   return /* @__PURE__ */ jsxs12(Box11, { gap: 1, children: [
-    /* @__PURE__ */ jsx13(Text12, { color: inkColors.accent, bold: true, children: "?" }),
-    /* @__PURE__ */ jsx13(Text12, { children: message }),
-    /* @__PURE__ */ jsx13(Text12, { dimColor: true, children: defaultValue ? "(Y/n)" : "(y/N)" })
+    /* @__PURE__ */ jsx13(Text13, { color: inkColors.accent, bold: true, children: "?" }),
+    /* @__PURE__ */ jsx13(Text13, { children: message }),
+    /* @__PURE__ */ jsx13(Text13, { dimColor: true, children: defaultValue ? "(Y/n)" : "(y/N)" })
   ] });
 }
 
 // src/components/Divider.tsx
-import { Text as Text13 } from "ink";
+import { Text as Text14 } from "ink";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function Divider({
   label,
@@ -1504,7 +1553,7 @@ function Divider({
     const sideLen = Math.max(2, Math.floor((effectiveWidth - labelLen) / 2));
     const left = "\u2500".repeat(sideLen);
     const right = "\u2500".repeat(sideLen);
-    return /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs13(Text14, { dimColor: true, children: [
       left,
       " ",
       label,
@@ -1512,14 +1561,82 @@ function Divider({
       right
     ] });
   }
-  return /* @__PURE__ */ jsx14(Text13, { dimColor: true, children: "\u2500".repeat(effectiveWidth) });
+  return /* @__PURE__ */ jsx14(Text14, { dimColor: true, children: "\u2500".repeat(effectiveWidth) });
+}
+
+// src/components/CommandOutput.tsx
+import { Text as Text16 } from "ink";
+
+// src/components/ScrollableBox.tsx
+import { useState as useState9 } from "react";
+import { Box as Box12, Text as Text15, useInput as useInput7 } from "ink";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function ScrollableBox({
+  height,
+  isActive = true,
+  children
+}) {
+  const totalItems = children.length;
+  const [scrollOffset, setScrollOffset] = useState9(0);
+  const visibleCount = Math.max(1, height - 2);
+  useInput7(
+    (input2, key) => {
+      if (key.upArrow || input2 === "k") {
+        setScrollOffset((prev) => Math.max(0, prev - 1));
+      }
+      if (key.downArrow || input2 === "j") {
+        setScrollOffset((prev) => Math.min(Math.max(0, totalItems - visibleCount), prev + 1));
+      }
+    },
+    { isActive }
+  );
+  const showScrollUp = scrollOffset > 0;
+  const showScrollDown = scrollOffset + visibleCount < totalItems;
+  const visible = children.slice(scrollOffset, scrollOffset + visibleCount);
+  return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", height, children: [
+    showScrollUp && /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "  \u2191 more" }),
+    visible,
+    showScrollDown && /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "  \u2193 more" })
+  ] });
+}
+
+// src/lib/ansi.ts
+var ANSI_RE = (
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: intentional ANSI stripping
+  /[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d/#&.:=?%@~_]*)*)?\u0007)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g
+);
+function stripAnsi(text) {
+  return text.replace(ANSI_RE, "");
+}
+
+// src/components/CommandOutput.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function cleanLines(raw) {
+  const stripped = stripAnsi(raw);
+  return stripped.replace(/\r/g, "").split("\n").filter((line) => line.length > 0);
+}
+function CommandOutput({
+  stdout,
+  stderr,
+  height,
+  isActive = false
+}) {
+  const outLines = stdout ? cleanLines(stdout) : [];
+  const errLines = stderr ? cleanLines(stderr) : [];
+  if (outLines.length === 0 && errLines.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx16(ScrollableBox, { height: Math.max(3, height), isActive, children: [
+    ...outLines.map((line, i) => /* @__PURE__ */ jsx16(Text16, { children: line }, `o-${i}`)),
+    ...errLines.map((line, i) => /* @__PURE__ */ jsx16(Text16, { color: "red", children: line }, `e-${i}`))
+  ] });
 }
 
 // src/hooks/useCommand.ts
-import { useState as useState9, useCallback as useCallback2 } from "react";
-function useCommand(execution = "supabase", cwd = process.cwd()) {
-  const [status, setStatus] = useState9("idle");
-  const [result, setResult] = useState9(null);
+import { useState as useState10, useCallback as useCallback2 } from "react";
+function useCommand(execution = "supabase", cwd = process.cwd(), options) {
+  const [status, setStatus] = useState10("idle");
+  const [result, setResult] = useState10(null);
   const run = useCallback2(async (args) => {
     setStatus("running");
     setResult(null);
@@ -1535,7 +1652,8 @@ function useCommand(execution = "supabase", cwd = process.cwd()) {
     } else {
       resolvedExecution = execution;
     }
-    const res = await runCommand(resolvedExecution, args, cwd);
+    const runOpts = options?.quiet ? { quiet: true } : void 0;
+    const res = await runCommand(resolvedExecution, args, cwd, runOpts);
     setResult(res);
     if (res.spawnError || res.exitCode !== null && res.exitCode !== 0) {
       setStatus("error");
@@ -1543,7 +1661,7 @@ function useCommand(execution = "supabase", cwd = process.cwd()) {
       setStatus("success");
     }
     return res;
-  }, [cwd, execution]);
+  }, [cwd, execution, options?.quiet]);
   const reset = useCallback2(() => {
     setStatus("idle");
     setResult(null);
@@ -1551,6 +1669,56 @@ function useCommand(execution = "supabase", cwd = process.cwd()) {
   return { status, result, run, reset };
 }
 
+// src/hooks/useInteractiveRun.ts
+import { useCallback as useCallback3 } from "react";
+import { useStdin } from "ink";
+
+// src/hooks/useFullscreen.ts
+import { useEffect as useEffect5 } from "react";
+var ENTER_ALT_SCREEN = "\x1B[?1049h";
+var LEAVE_ALT_SCREEN = "\x1B[?1049l";
+var HIDE_CURSOR = "\x1B[?25l";
+var SHOW_CURSOR = "\x1B[?25h";
+function useFullscreen() {
+  useEffect5(() => {
+    process.stdout.write(ENTER_ALT_SCREEN + HIDE_CURSOR);
+    return () => {
+      process.stdout.write(SHOW_CURSOR + LEAVE_ALT_SCREEN);
+    };
+  }, []);
+}
+
+// src/hooks/useInteractiveRun.ts
+function useInteractiveRun() {
+  const { setRawMode } = useStdin();
+  const runInteractive = useCallback3(
+    (tool, args, cwd) => {
+      process.stdout.write(SHOW_CURSOR + LEAVE_ALT_SCREEN);
+      setRawMode(false);
+      process.stdout.write(`
+  Running: ${tool} ${args.join(" ")}
+
+`);
+      const resolved = resolveToolCommand(tool, cwd);
+      const result = runInteractiveCommand(
+        { command: resolved.command, env: resolved.env },
+        args,
+        cwd
+      );
+      process.stdout.write(
+        `
+  Command exited (code ${result.exitCode ?? "?"}). Returning to Polter...
+`
+      );
+      setRawMode(true);
+      process.stdout.write(ENTER_ALT_SCREEN + HIDE_CURSOR);
+      return result;
+    },
+    [setRawMode]
+  );
+  return { runInteractive };
+}
+
 // src/lib/clipboard.ts
 import { spawn, exec } from "child_process";
 async function copyToClipboard(text) {
@@ -1564,30 +1732,80 @@ async function copyToClipboard(text) {
   });
 }
 
+// src/lib/errorSuggestions.ts
+var KNOWN_TOOLS = ["supabase", "gh", "vercel", "git"];
+var BACKTICK_CMD = /(?:try\s+)?(?:run(?:ning)?|use|execute)\s+`([^`]+)`/gi;
+var HAVE_YOU_RUN = /have you (?:run|tried|used)\s+((?:supabase|gh|vercel|git)\s+[\w][\w -]*\w)\??/gi;
+var DID_YOU_MEAN = /did you mean[:\s]+[`']?([a-z][\w -]*\w)[`']?\??/gi;
+var INDENTED_TOOL_CMD = /^\s{2,}((?:supabase|gh|vercel|git)\s+[\w][\w -]*\w)$/gm;
+var ARROW_BULLET = /[→•\-*]\s*(?:run:?\s*)?((?:supabase|gh|vercel|git)\s+[\w][\w -]*\w)/gim;
+var MAX_SUGGESTIONS = 3;
+function detectTool(rawCommand, fallback) {
+  const first = rawCommand.trim().split(/\s+/)[0]?.toLowerCase();
+  const match = KNOWN_TOOLS.find((t) => t === first);
+  return match ?? fallback;
+}
+function parseRawCommand(raw, currentTool) {
+  const trimmed = raw.trim();
+  const tool = detectTool(trimmed, currentTool);
+  const parts = trimmed.split(/\s+/);
+  const args = parts[0]?.toLowerCase() === tool ? parts.slice(1) : parts;
+  const display = `${tool} ${args.join(" ")}`;
+  return { tool, args, display };
+}
+function parseErrorSuggestions(stdout, stderr, currentTool) {
+  const combined = stripAnsi(`${stdout}
+${stderr}`);
+  const seen = /* @__PURE__ */ new Set();
+  const suggestions = [];
+  const patterns = [BACKTICK_CMD, HAVE_YOU_RUN, DID_YOU_MEAN, INDENTED_TOOL_CMD, ARROW_BULLET];
+  for (const pattern of patterns) {
+    pattern.lastIndex = 0;
+    let match;
+    while ((match = pattern.exec(combined)) !== null) {
+      const raw = match[1];
+      const suggestion = parseRawCommand(raw, currentTool);
+      const key = suggestion.display;
+      if (!seen.has(key)) {
+        seen.add(key);
+        suggestions.push(suggestion);
+      }
+      if (suggestions.length >= MAX_SUGGESTIONS) break;
+    }
+    if (suggestions.length >= MAX_SUGGESTIONS) break;
+  }
+  return suggestions;
+}
+
 // src/screens/CommandExecution.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function CommandExecution({
   args: initialArgs,
   tool = "supabase",
   onBack,
+  onHome,
   onExit,
+  onRunSuggestion,
   width = 80,
   height = 24,
   panelMode = false,
   isInputActive = true
 }) {
-  const [phase, setPhase] = useState10("confirm");
-  const [currentArgs, setCurrentArgs] = useState10(initialArgs);
-  const [pinMessage, setPinMessage] = useState10();
-  const { status, result, run, reset } = useCommand(tool);
+  const [phase, setPhase] = useState11("confirm");
+  const [currentArgs, setCurrentArgs] = useState11(initialArgs);
+  const [pinMessage, setPinMessage] = useState11();
+  const { status, result, run, reset } = useCommand(tool, process.cwd(), {
+    quiet: panelMode
+  });
+  const { runInteractive } = useInteractiveRun();
   const cmdDisplay = `${tool} ${currentArgs.join(" ")}`;
   const runCommand2 = currentArgs.join(" ");
-  useEffect5(() => {
+  useEffect6(() => {
     if (phase === "running" && status === "idle") {
       run(currentArgs);
     }
   }, [phase, status, run, currentArgs]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (phase === "running" && status === "success") {
       if (isPinnedRun(runCommand2)) {
         setPhase("success");
@@ -1600,45 +1818,67 @@ function CommandExecution({
     }
   }, [phase, runCommand2, status]);
   if (phase === "confirm") {
-    return /* @__PURE__ */ jsx15(Box12, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx15(
-      ConfirmPrompt,
+    const confirmContent = /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs15(Box13, { marginBottom: 1, gap: 1, children: [
+        /* @__PURE__ */ jsxs15(Text17, { color: inkColors.accent, bold: true, children: [
+          "\u25B6",
+          " ",
+          cmdDisplay
+        ] }),
+        /* @__PURE__ */ jsx17(ToolBadge, { tool })
+      ] }),
+      /* @__PURE__ */ jsx17(
+        ConfirmPrompt,
+        {
+          message: `Execute ${cmdDisplay}?`,
+          defaultValue: true,
+          onConfirm: (confirmed) => {
+            if (confirmed) {
+              setPhase("running");
+            } else {
+              onBack();
+            }
+          },
+          onCancel: onBack,
+          isInputActive,
+          arrowNavigation: panelMode
+        }
+      ),
+      /* @__PURE__ */ jsx17(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Enter to execute \xB7 n to cancel" }) })
+    ] });
+    return /* @__PURE__ */ jsx17(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: panelMode ? /* @__PURE__ */ jsx17(
+      Box13,
       {
-        message: `Execute ${cmdDisplay}?`,
-        defaultValue: true,
-        onConfirm: (confirmed) => {
-          if (confirmed) {
-            setPhase("running");
-          } else {
-            onBack();
-          }
-        },
-        onCancel: onBack,
-        isInputActive,
-        arrowNavigation: panelMode
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: isInputActive ? inkColors.accent : panel.borderDim,
+        borderDimColor: true,
+        paddingX: 1,
+        children: confirmContent
       }
-    ) });
+    ) : confirmContent });
   }
   if (phase === "running") {
-    return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx15(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsxs14(Box12, { marginY: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, bold: true, children: "\u25B6" }),
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "Running:" }),
-        /* @__PURE__ */ jsx15(Text14, { children: cmdDisplay }),
-        /* @__PURE__ */ jsx15(ToolBadge, { tool })
+    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx17(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsxs15(Box13, { marginY: 1, gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, bold: true, children: "\u25B6" }),
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Running:" }),
+        /* @__PURE__ */ jsx17(Text17, { children: cmdDisplay }),
+        /* @__PURE__ */ jsx17(ToolBadge, { tool })
       ] }),
-      /* @__PURE__ */ jsx15(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsx15(Box12, { marginTop: 1, children: /* @__PURE__ */ jsx15(Spinner, { label: `Executing ${cmdDisplay}...` }) })
+      /* @__PURE__ */ jsx17(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsx17(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx17(Spinner, { label: `Executing ${cmdDisplay}...` }) })
     ] });
   }
   if (phase === "success-pin-offer") {
-    return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx15(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsxs14(Box12, { marginY: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, bold: true, children: "\u2713" }),
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, bold: true, children: "Command completed successfully!" })
+    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx17(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsxs15(Box13, { marginY: 1, gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, bold: true, children: "\u2713" }),
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, bold: true, children: "Command completed successfully!" })
       ] }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(
         ConfirmPrompt,
         {
           message: "Pin this exact command?",
@@ -1658,31 +1898,66 @@ function CommandExecution({
     ] });
   }
   if (phase === "success") {
-    const successItems = panelMode ? [] : [{ value: "__back__", label: "\u2190 Back to menu" }];
-    return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx15(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsxs14(Box12, { marginY: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, bold: true, children: "\u2713" }),
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, bold: true, children: "Command completed successfully!" })
+    const successItems = [
+      { value: "__back__", label: "\u2190 Back to menu" }
+    ];
+    const outputHeight = Math.max(3, height - 12);
+    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx17(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsxs15(Box13, { marginY: 1, gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, bold: true, children: "\u2713" }),
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, bold: true, children: "Command completed successfully!" })
       ] }),
-      pinMessage && /* @__PURE__ */ jsx15(Box12, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, children: pinMessage }) }),
-      successItems.length > 0 && /* @__PURE__ */ jsx15(
+      pinMessage && /* @__PURE__ */ jsx17(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, children: pinMessage }) }),
+      /* @__PURE__ */ jsx17(
+        CommandOutput,
+        {
+          stdout: result?.stdout,
+          stderr: result?.stderr,
+          height: outputHeight,
+          isActive: isInputActive
+        }
+      ),
+      /* @__PURE__ */ jsx17(
         SelectList,
         {
           items: successItems,
-          onSelect: onBack,
-          onCancel: onBack,
+          onSelect: onHome ?? onBack,
+          onCancel: onHome ?? onBack,
           width: panelMode ? Math.max(20, width - 4) : width,
           maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
           isInputActive,
           arrowNavigation: panelMode,
-          boxedSections: panelMode
+          boxedSections: panelMode,
+          panelFocused: isInputActive
         }
       )
     ] });
   }
   const hasDebug = currentArgs.includes("--debug");
+  const suggestions = result ? parseErrorSuggestions(result.stdout, result.stderr, tool) : [];
   const errorItems = [];
+  if (suggestions.length > 0) {
+    errorItems.push({
+      value: "__suggestions_header__",
+      label: "\u{1F4A1} Suggested fixes",
+      kind: "header"
+    });
+    for (const s of suggestions) {
+      errorItems.push({
+        value: `suggest:${s.display}`,
+        label: s.display,
+        hint: "from error output"
+      });
+    }
+  }
+  if (suggestions.length > 0) {
+    errorItems.push({
+      value: "__actions_header__",
+      label: "",
+      kind: "header"
+    });
+  }
   if (!result?.spawnError) {
     errorItems.push({ value: "retry", label: "\u{1F504} Retry the same command" });
     if (!hasDebug) {
@@ -1693,54 +1968,89 @@ function CommandExecution({
       });
     }
   }
+  if (panelMode && !result?.spawnError) {
+    errorItems.push({
+      value: "run-interactive",
+      label: "\u{1F4BB} Run in terminal",
+      hint: "Suspend TUI and run interactively"
+    });
+  }
   errorItems.push({
     value: "copy",
     label: "\u{1F4CB} Copy command to clipboard"
   });
-  if (!panelMode) {
-    errorItems.push({ value: "menu", label: "\u2190 Return to main menu" });
-  }
-  errorItems.push({ value: "exit", label: "\u{1F6AA} Exit Polter" });
-  return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-    /* @__PURE__ */ jsx15(Divider, { width: panelMode ? width - 4 : width }),
-    result?.spawnError ? /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", marginY: 1, children: [
-      /* @__PURE__ */ jsxs14(Box12, { gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { color: "red", bold: true, children: "\u2717" }),
-        /* @__PURE__ */ jsx15(Text14, { color: "red", bold: true, children: "Failed to start command" })
+  errorItems.push({
+    value: "menu",
+    label: "\u2190 Back to menu"
+  });
+  return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    /* @__PURE__ */ jsx17(Divider, { width: panelMode ? width - 4 : width }),
+    result?.spawnError ? /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", marginY: 1, children: [
+      /* @__PURE__ */ jsxs15(Box13, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "red", bold: true, children: "\u2717" }),
+        /* @__PURE__ */ jsx17(Text17, { color: "red", bold: true, children: "Failed to start command" })
       ] }),
-      /* @__PURE__ */ jsxs14(Box12, { marginLeft: 2, marginTop: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "Error: " }),
-        /* @__PURE__ */ jsx15(Text14, { color: "red", children: result.spawnError })
+      /* @__PURE__ */ jsxs15(Box13, { marginLeft: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Error: " }),
+        /* @__PURE__ */ jsx17(Text17, { color: "red", children: result.spawnError })
       ] }),
-      (result.spawnError.includes("ENOENT") || result.spawnError.includes("not found")) && /* @__PURE__ */ jsx15(Box12, { flexDirection: "column", marginLeft: 2, marginTop: 1, children: /* @__PURE__ */ jsxs14(Text14, { color: inkColors.accent, bold: true, children: [
-        "\u{1F4A1} ",
+      (result.spawnError.includes("ENOENT") || result.spawnError.includes("not found")) && /* @__PURE__ */ jsx17(Box13, { flexDirection: "column", marginLeft: 2, marginTop: 1, children: /* @__PURE__ */ jsxs15(Text17, { color: inkColors.accent, bold: true, children: [
+        "\u{1F4A1}",
+        " ",
         tool,
         " CLI not found in this repository or PATH"
       ] }) })
-    ] }) : /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", marginY: 1, children: [
-      /* @__PURE__ */ jsxs14(Box12, { gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { color: "red", bold: true, children: "\u2717" }),
-        /* @__PURE__ */ jsx15(Text14, { color: "red", children: "Command failed " }),
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "(exit code " }),
-        /* @__PURE__ */ jsx15(Text14, { color: "red", bold: true, children: String(result?.exitCode) }),
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: ")" })
+    ] }) : /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", marginY: 1, children: [
+      /* @__PURE__ */ jsxs15(Box13, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "red", bold: true, children: "\u2717" }),
+        /* @__PURE__ */ jsx17(Text17, { color: "red", children: "Command failed " }),
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "(exit code " }),
+        /* @__PURE__ */ jsx17(Text17, { color: "red", bold: true, children: String(result?.exitCode) }),
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: ")" })
       ] }),
-      /* @__PURE__ */ jsxs14(Box12, { marginLeft: 2, marginTop: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "Command: " }),
-        /* @__PURE__ */ jsx15(Text14, { children: cmdDisplay })
+      /* @__PURE__ */ jsxs15(Box13, { marginLeft: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Command: " }),
+        /* @__PURE__ */ jsx17(Text17, { children: cmdDisplay })
       ] }),
-      !hasDebug && /* @__PURE__ */ jsxs14(Box12, { marginLeft: 2, marginTop: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "\u{1F4A1} Tip: retry with" }),
-        /* @__PURE__ */ jsx15(Text14, { color: inkColors.accent, children: "--debug" }),
-        /* @__PURE__ */ jsx15(Text14, { dimColor: true, children: "to see detailed logs" })
+      !hasDebug && /* @__PURE__ */ jsxs15(Box13, { marginLeft: 2, marginTop: 1, gap: 1, children: [
+        /* @__PURE__ */ jsxs15(Text17, { dimColor: true, children: [
+          "\u{1F4A1}",
+          " Tip: retry with"
+        ] }),
+        /* @__PURE__ */ jsx17(Text17, { color: inkColors.accent, children: "--debug" }),
+        /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "to see detailed logs" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx15(Box12, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx15(Text14, { bold: true, children: "What would you like to do?" }) }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(
+      CommandOutput,
+      {
+        stdout: result?.stdout,
+        stderr: result?.stderr,
+        height: Math.max(3, height - 13 - errorItems.length - (suggestions.length > 0 ? suggestions.length + 4 : 0)),
+        isActive: false
+      }
+    ),
+    /* @__PURE__ */ jsx17(Box13, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx17(Text17, { bold: true, children: "What would you like to do?" }) }),
+    /* @__PURE__ */ jsx17(
       SelectList,
       {
         items: errorItems,
         onSelect: async (action) => {
+          if (action.startsWith("suggest:")) {
+            const rawCmd = action.slice("suggest:".length);
+            const parts = rawCmd.split(/\s+/);
+            const sugTool = parts[0];
+            const sugArgs = parts.slice(1);
+            if (onRunSuggestion) {
+              onRunSuggestion(sugTool, sugArgs);
+            } else {
+              setCurrentArgs(sugArgs);
+              setPinMessage(void 0);
+              reset();
+              setPhase("confirm");
+            }
+            return;
+          }
           switch (action) {
             case "retry":
               setPinMessage(void 0);
@@ -1755,11 +2065,18 @@ function CommandExecution({
               setPhase("running");
               break;
             }
+            case "run-interactive": {
+              const interactiveResult = runInteractive(tool, currentArgs);
+              if (!interactiveResult.spawnError && interactiveResult.exitCode === 0) {
+                setPhase("success");
+              }
+              break;
+            }
             case "copy":
               await copyToClipboard(cmdDisplay);
               break;
             case "menu":
-              onBack();
+              (onHome ?? onBack)();
               break;
             case "exit":
               onExit();
@@ -1769,19 +2086,20 @@ function CommandExecution({
         onCancel: onBack,
         boxedSections: panelMode,
         width: panelMode ? Math.max(20, width - 4) : width,
-        maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
+        maxVisible: panelMode ? Math.max(errorItems.length + (suggestions.length > 0 ? 4 : 0), height - 6) : void 0,
         isInputActive,
-        arrowNavigation: panelMode
+        arrowNavigation: panelMode,
+        panelFocused: isInputActive
       }
     ),
-    !panelMode && /* @__PURE__ */ jsx15(StatusBar, { width })
+    !panelMode && /* @__PURE__ */ jsx17(StatusBar, { width })
   ] });
 }
 
 // src/screens/SelfUpdate.tsx
-import { useEffect as useEffect6, useState as useState11 } from "react";
-import { Box as Box13, Text as Text15 } from "ink";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState12 } from "react";
+import { Box as Box14, Text as Text18 } from "ink";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var packageName = "@polterware/polter";
 var globalUpdateArgs = ["install", "-g", `${packageName}@latest`];
 var repositoryUpdateArgs = ["install", "-D", `${packageName}@latest`];
@@ -1797,22 +2115,24 @@ function SelfUpdate({
   isInputActive = true
 }) {
   const repositoryRoot = findNearestPackageRoot();
-  const [target, setTarget] = useState11(
+  const [target, setTarget] = useState12(
     repositoryRoot ? "repository" : "global"
   );
-  const [phase, setPhase] = useState11(
+  const [phase, setPhase] = useState12(
     repositoryRoot ? "target" : "confirm"
   );
   const updateArgs = getUpdateArgs(target);
   const updateDisplay = `npm ${updateArgs.join(" ")}`;
   const updateCwd = target === "repository" && repositoryRoot ? repositoryRoot : process.cwd();
-  const { status, result, run, reset } = useCommand("npm", updateCwd);
-  useEffect6(() => {
+  const { status, result, run, reset } = useCommand("npm", updateCwd, {
+    quiet: panelMode
+  });
+  useEffect7(() => {
     if (phase === "running" && status === "idle") {
       run(updateArgs);
     }
   }, [phase, run, status, updateArgs]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (phase === "running" && status === "success") {
       setPhase("success");
     }
@@ -1837,9 +2157,9 @@ function SelfUpdate({
       },
       ...!panelMode ? [{ value: "back", label: "\u2190 Back to menu" }] : []
     ];
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx16(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsx16(Text15, { bold: true, children: "Choose where to update Polter." }) }),
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx18(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx18(Text18, { bold: true, children: "Choose where to update Polter." }) }),
+      /* @__PURE__ */ jsx18(
         SelectList,
         {
           items: targetItems,
@@ -1857,18 +2177,19 @@ function SelfUpdate({
           width: panelMode ? Math.max(20, width - 4) : width,
           maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       ),
-      repositoryRoot && /* @__PURE__ */ jsx16(Box13, { marginTop: 1, marginLeft: 2, children: /* @__PURE__ */ jsxs15(Text15, { dimColor: true, children: [
+      repositoryRoot && /* @__PURE__ */ jsx18(Box14, { marginTop: 1, marginLeft: 2, children: /* @__PURE__ */ jsxs16(Text18, { dimColor: true, children: [
         "Repository root: ",
         repositoryRoot
       ] }) })
     ] });
   }
   if (phase === "confirm") {
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx18(
         ConfirmPrompt,
         {
           message: `Run ${updateDisplay}?`,
@@ -1896,9 +2217,9 @@ function SelfUpdate({
           arrowNavigation: panelMode
         }
       ),
-      /* @__PURE__ */ jsxs15(Box13, { marginTop: 1, marginLeft: 2, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: target === "repository" ? "This updates the dependency in the current repository." : "This updates the global npm install." }),
-        target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs15(Text15, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs16(Box14, { marginTop: 1, marginLeft: 2, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: target === "repository" ? "This updates the dependency in the current repository." : "This updates the global npm install." }),
+        target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs16(Text18, { dimColor: true, children: [
           "Run location: ",
           repositoryRoot
         ] })
@@ -1906,15 +2227,15 @@ function SelfUpdate({
     ] });
   }
   if (phase === "running") {
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx16(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsxs15(Box13, { marginY: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { color: inkColors.accent, bold: true, children: "\u25B6" }),
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "Running:" }),
-        /* @__PURE__ */ jsx16(Text15, { children: updateDisplay })
+    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx18(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsxs16(Box14, { marginY: 1, gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: inkColors.accent, bold: true, children: "\u25B6" }),
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Running:" }),
+        /* @__PURE__ */ jsx18(Text18, { children: updateDisplay })
       ] }),
-      /* @__PURE__ */ jsx16(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsx16(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx16(Spinner, { label: "Updating Polter..." }) })
+      /* @__PURE__ */ jsx18(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsx18(Box14, { marginTop: 1, children: /* @__PURE__ */ jsx18(Spinner, { label: "Updating Polter..." }) })
     ] });
   }
   if (phase === "success") {
@@ -1923,20 +2244,29 @@ function SelfUpdate({
       ...!panelMode ? [{ value: "__back__", label: "\u2190 Back to menu", kind: "action" }] : [],
       { value: "__exit__", label: "\u{1F6AA} Exit Polter", kind: "action" }
     ];
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx16(Divider, { width: panelMode ? width - 4 : width }),
-      /* @__PURE__ */ jsxs15(Box13, { marginY: 1, gap: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { color: inkColors.accent, bold: true, children: "\u2713" }),
-        /* @__PURE__ */ jsx16(Text15, { color: inkColors.accent, bold: true, children: "Update completed successfully!" })
+    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx18(Divider, { width: panelMode ? width - 4 : width }),
+      /* @__PURE__ */ jsxs16(Box14, { marginY: 1, gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: inkColors.accent, bold: true, children: "\u2713" }),
+        /* @__PURE__ */ jsx18(Text18, { color: inkColors.accent, bold: true, children: "Update completed successfully!" })
       ] }),
-      /* @__PURE__ */ jsxs15(Box13, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "Restart Polter to use the latest version." }),
-        target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs15(Text15, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs16(Box14, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Restart Polter to use the latest version." }),
+        target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs16(Text18, { dimColor: true, children: [
           "Repository updated in: ",
           repositoryRoot
         ] })
       ] }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx18(
+        CommandOutput,
+        {
+          stdout: result?.stdout,
+          stderr: result?.stderr,
+          height: Math.max(3, height - 12),
+          isActive: isInputActive
+        }
+      ),
+      /* @__PURE__ */ jsx18(
         SelectList,
         {
           items: successItems,
@@ -1952,7 +2282,8 @@ function SelfUpdate({
           width: panelMode ? Math.max(20, width - 4) : width,
           maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       )
     ] });
@@ -1964,40 +2295,49 @@ function SelfUpdate({
     ...!panelMode ? [{ value: "menu", label: "\u2190 Return to main menu", kind: "action" }] : [],
     { value: "exit", label: "\u{1F6AA} Exit Polter", kind: "action" }
   ];
-  return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-    /* @__PURE__ */ jsx16(Divider, { width: panelMode ? width - 4 : width }),
-    result?.spawnError ? /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", marginY: 1, children: [
-      /* @__PURE__ */ jsxs15(Box13, { gap: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { color: "red", bold: true, children: "\u2717" }),
-        /* @__PURE__ */ jsx16(Text15, { color: "red", bold: true, children: "Failed to start update" })
+  return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    /* @__PURE__ */ jsx18(Divider, { width: panelMode ? width - 4 : width }),
+    result?.spawnError ? /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", marginY: 1, children: [
+      /* @__PURE__ */ jsxs16(Box14, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "red", bold: true, children: "\u2717" }),
+        /* @__PURE__ */ jsx18(Text18, { color: "red", bold: true, children: "Failed to start update" })
       ] }),
-      /* @__PURE__ */ jsxs15(Box13, { marginLeft: 2, marginTop: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "Error: " }),
-        /* @__PURE__ */ jsx16(Text15, { color: "red", children: result.spawnError })
+      /* @__PURE__ */ jsxs16(Box14, { marginLeft: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Error: " }),
+        /* @__PURE__ */ jsx18(Text18, { color: "red", children: result.spawnError })
       ] })
-    ] }) : /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", marginY: 1, children: [
-      /* @__PURE__ */ jsxs15(Box13, { gap: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { color: "red", bold: true, children: "\u2717" }),
-        /* @__PURE__ */ jsx16(Text15, { color: "red", children: "Update failed " }),
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "(exit code " }),
-        /* @__PURE__ */ jsx16(Text15, { color: "red", bold: true, children: String(result?.exitCode) }),
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: ")" })
+    ] }) : /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", marginY: 1, children: [
+      /* @__PURE__ */ jsxs16(Box14, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "red", bold: true, children: "\u2717" }),
+        /* @__PURE__ */ jsx18(Text18, { color: "red", children: "Update failed " }),
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "(exit code " }),
+        /* @__PURE__ */ jsx18(Text18, { color: "red", bold: true, children: String(result?.exitCode) }),
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: ")" })
       ] }),
-      /* @__PURE__ */ jsxs15(Box13, { marginLeft: 2, marginTop: 1, children: [
-        /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "Command: " }),
-        /* @__PURE__ */ jsx16(Text15, { children: updateDisplay })
+      /* @__PURE__ */ jsxs16(Box14, { marginLeft: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Command: " }),
+        /* @__PURE__ */ jsx18(Text18, { children: updateDisplay })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs15(Box13, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx16(Text15, { dimColor: true, children: "Manual fallback:" }),
-      /* @__PURE__ */ jsx16(Text15, { color: inkColors.accent, children: updateDisplay }),
-      target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs15(Text15, { dimColor: true, children: [
+    /* @__PURE__ */ jsx18(
+      CommandOutput,
+      {
+        stdout: result?.stdout,
+        stderr: result?.stderr,
+        height: Math.max(3, height - 16),
+        isActive: false
+      }
+    ),
+    /* @__PURE__ */ jsxs16(Box14, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Manual fallback:" }),
+      /* @__PURE__ */ jsx18(Text18, { color: inkColors.accent, children: updateDisplay }),
+      target === "repository" && repositoryRoot && /* @__PURE__ */ jsxs16(Text18, { dimColor: true, children: [
         "Run location: ",
         repositoryRoot
       ] })
     ] }),
-    !panelMode && /* @__PURE__ */ jsx16(Box13, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx16(Text15, { bold: true, children: "What would you like to do?" }) }),
-    /* @__PURE__ */ jsx16(
+    !panelMode && /* @__PURE__ */ jsx18(Box14, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx18(Text18, { bold: true, children: "What would you like to do?" }) }),
+    /* @__PURE__ */ jsx18(
       SelectList,
       {
         items: errorItems,
@@ -2024,38 +2364,55 @@ function SelfUpdate({
         width: panelMode ? Math.max(20, width - 4) : width,
         maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
         isInputActive,
-        arrowNavigation: panelMode
+        arrowNavigation: panelMode,
+        panelFocused: isInputActive
       }
     ),
-    !panelMode && /* @__PURE__ */ jsx16(StatusBar, { width })
+    !panelMode && /* @__PURE__ */ jsx18(StatusBar, { width })
   ] });
 }
 
 // src/screens/ToolStatus.tsx
 import { useMemo as useMemo4 } from "react";
-import { Box as Box14, Text as Text16 } from "ink";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Box as Box15, Text as Text19 } from "ink";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var toolIds = ["supabase", "gh", "vercel", "git"];
 function ToolStatus({ onBack, width = 80, height = 24, panelMode = false, isInputActive = true }) {
   const tools = useMemo4(() => toolIds.map(getToolInfo), []);
   if (panelMode) {
-    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx17(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx17(Text16, { bold: true, color: inkColors.accent, children: "\u{1F527} Tool Status" }) }),
-      tools.map((tool) => /* @__PURE__ */ jsxs16(Box14, { gap: 1, marginLeft: 2, children: [
-        /* @__PURE__ */ jsx17(Text16, { color: tool.installed ? inkColors.accent : "red", children: tool.installed ? "\u2713" : "\u2717" }),
-        /* @__PURE__ */ jsx17(Box14, { width: 16, children: /* @__PURE__ */ jsx17(Text16, { bold: true, children: tool.label }) }),
-        /* @__PURE__ */ jsx17(Text16, { dimColor: true, children: tool.installed ? tool.version ?? "installed" : "not found" })
-      ] }, tool.id))
-    ] });
+    const statusItems = [
+      { value: "__section__", label: "Installed Tools", kind: "header", selectable: false },
+      ...tools.map((tool) => ({
+        value: tool.id,
+        label: `${tool.installed ? "\u2713" : "\u2717"} ${tool.label}`,
+        hint: tool.installed ? tool.version ?? "installed" : "not found",
+        kind: "action"
+      }))
+    ];
+    return /* @__PURE__ */ jsx19(Box15, { flexDirection: "column", paddingX: 1, children: /* @__PURE__ */ jsx19(
+      SelectList,
+      {
+        items: statusItems,
+        onSelect: () => {
+        },
+        onCancel: onBack,
+        boxedSections: true,
+        width: Math.max(20, width - 4),
+        maxVisible: Math.max(6, height - 6),
+        isInputActive,
+        arrowNavigation: true,
+        panelFocused: isInputActive
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx17(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx17(Text16, { bold: true, color: inkColors.accent, children: "\u{1F527} Tool Status" }) }),
-    tools.map((tool) => /* @__PURE__ */ jsxs16(Box14, { gap: 1, marginLeft: 2, children: [
-      /* @__PURE__ */ jsx17(Text16, { color: tool.installed ? inkColors.accent : "red", children: tool.installed ? "\u2713" : "\u2717" }),
-      /* @__PURE__ */ jsx17(Box14, { width: 16, children: /* @__PURE__ */ jsx17(Text16, { bold: true, children: tool.label }) }),
-      /* @__PURE__ */ jsx17(Text16, { dimColor: true, children: tool.installed ? tool.version ?? "installed" : "not found" })
+  return /* @__PURE__ */ jsxs17(Box15, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx19(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx19(Text19, { bold: true, color: inkColors.accent, children: "\u{1F527} Tool Status" }) }),
+    tools.map((tool) => /* @__PURE__ */ jsxs17(Box15, { gap: 1, marginLeft: 2, children: [
+      /* @__PURE__ */ jsx19(Text19, { color: tool.installed ? inkColors.accent : "red", children: tool.installed ? "\u2713" : "\u2717" }),
+      /* @__PURE__ */ jsx19(Box15, { width: 16, children: /* @__PURE__ */ jsx19(Text19, { bold: true, children: tool.label }) }),
+      /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: tool.installed ? tool.version ?? "installed" : "not found" })
     ] }, tool.id)),
-    /* @__PURE__ */ jsx17(Box14, { marginTop: 1, children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx19(Box15, { marginTop: 1, children: /* @__PURE__ */ jsx19(
       SelectList,
       {
         items: [{ value: "__back__", label: "\u2190 Back" }],
@@ -2065,17 +2422,17 @@ function ToolStatus({ onBack, width = 80, height = 24, panelMode = false, isInpu
         isInputActive
       }
     ) }),
-    /* @__PURE__ */ jsx17(StatusBar, { hint: "Enter to go back", width })
+    /* @__PURE__ */ jsx19(StatusBar, { hint: "Enter to go back", width })
   ] });
 }
 
 // src/screens/ProjectConfig.tsx
-import { useMemo as useMemo5, useState as useState13 } from "react";
-import { Box as Box15, Text as Text17 } from "ink";
+import { useMemo as useMemo5, useState as useState14 } from "react";
+import { Box as Box16, Text as Text20 } from "ink";
 
 // src/hooks/useEditor.ts
-import { useState as useState12, useCallback as useCallback3 } from "react";
-import { useStdin } from "ink";
+import { useState as useState13, useCallback as useCallback4 } from "react";
+import { useStdin as useStdin2 } from "ink";
 
 // src/lib/editor.ts
 import { spawnSync, spawn as spawn2 } from "child_process";
@@ -2124,9 +2481,9 @@ function openInEditor(filePath) {
 
 // src/hooks/useEditor.ts
 function useEditor() {
-  const { setRawMode } = useStdin();
-  const [isEditing, setIsEditing] = useState12(false);
-  const openEditor = useCallback3(async (filePath) => {
+  const { setRawMode } = useStdin2();
+  const [isEditing, setIsEditing] = useState13(false);
+  const openEditor = useCallback4(async (filePath) => {
     const editor = resolveEditor();
     const terminal = isTerminalEditor(editor.command);
     setIsEditing(true);
@@ -2146,7 +2503,7 @@ function useEditor() {
 }
 
 // src/screens/ProjectConfig.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function ProjectConfig({
   onBack,
   width = 80,
@@ -2155,14 +2512,14 @@ function ProjectConfig({
   isInputActive = true
 }) {
   const configPath = useMemo5(() => getProjectConfigPath(), []);
-  const [config2, setConfig] = useState13(() => getOrCreateProjectConfig());
-  const [phase, setPhase] = useState13("overview");
-  const [feedback, setFeedback] = useState13();
+  const [config2, setConfig] = useState14(() => getOrCreateProjectConfig());
+  const [phase, setPhase] = useState14("overview");
+  const [feedback, setFeedback] = useState14();
   const { openEditor, isEditing } = useEditor();
   if (!configPath) {
-    return /* @__PURE__ */ jsxs17(Box15, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-      /* @__PURE__ */ jsx18(Text17, { color: "red", children: "No package.json found. Run from a project directory." }),
-      !panelMode && /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs18(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx20(Text20, { color: "red", children: "No package.json found. Run from a project directory." }),
+      !panelMode && /* @__PURE__ */ jsx20(
         SelectList,
         {
           items: [{ value: "__back__", label: "\u2190 Back" }],
@@ -2175,7 +2532,7 @@ function ProjectConfig({
     ] });
   }
   if (phase === "edit-supabase-ref") {
-    return /* @__PURE__ */ jsx18(Box15, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "Supabase project ref:",
@@ -2193,12 +2550,16 @@ function ProjectConfig({
           setFeedback("Supabase project ref updated");
           setPhase("overview");
         },
-        onCancel: () => setPhase("overview")
+        onCancel: () => setPhase("overview"),
+        arrowNavigation: panelMode,
+        isInputActive,
+        boxed: panelMode,
+        focused: isInputActive
       }
     ) });
   }
   if (phase === "edit-vercel-id") {
-    return /* @__PURE__ */ jsx18(Box15, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "Vercel project ID:",
@@ -2216,12 +2577,16 @@ function ProjectConfig({
           setFeedback("Vercel project ID updated");
           setPhase("overview");
         },
-        onCancel: () => setPhase("overview")
+        onCancel: () => setPhase("overview"),
+        arrowNavigation: panelMode,
+        isInputActive,
+        boxed: panelMode,
+        focused: isInputActive
       }
     ) });
   }
   if (phase === "edit-gh-repo") {
-    return /* @__PURE__ */ jsx18(Box15, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "GitHub repo (owner/name):",
@@ -2239,7 +2604,11 @@ function ProjectConfig({
           setFeedback("GitHub repo updated");
           setPhase("overview");
         },
-        onCancel: () => setPhase("overview")
+        onCancel: () => setPhase("overview"),
+        arrowNavigation: panelMode,
+        isInputActive,
+        boxed: panelMode,
+        focused: isInputActive
       }
     ) });
   }
@@ -2289,17 +2658,16 @@ function ProjectConfig({
     }
   };
   if (panelMode) {
-    return /* @__PURE__ */ jsxs17(Box15, { flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx18(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx18(Text17, { bold: true, color: inkColors.accent, children: "\u2699\uFE0F Project Config" }) }),
-      /* @__PURE__ */ jsx18(Box15, { marginBottom: 1, marginLeft: 2, children: /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs18(Box16, { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx20(Box16, { marginBottom: 1, marginLeft: 2, children: /* @__PURE__ */ jsxs18(Text20, { dimColor: true, children: [
         "Path: ",
         configPath.file
       ] }) }),
-      feedback && /* @__PURE__ */ jsx18(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsxs17(Text17, { color: inkColors.accent, children: [
+      feedback && /* @__PURE__ */ jsx20(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsxs18(Text20, { color: inkColors.accent, children: [
         "\u2713 ",
         feedback
       ] }) }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         SelectList,
         {
           items: configItems,
@@ -2309,36 +2677,37 @@ function ProjectConfig({
           width: Math.max(20, width - 4),
           maxVisible: Math.max(6, height - 6),
           isInputActive,
-          arrowNavigation: true
+          arrowNavigation: true,
+          panelFocused: isInputActive
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs17(Box15, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx18(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx18(Text17, { bold: true, color: inkColors.accent, children: "\u2699\uFE0F Project Config" }) }),
-    /* @__PURE__ */ jsxs17(Box15, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs18(Box16, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx20(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsx20(Text20, { bold: true, color: inkColors.accent, children: "\u2699\uFE0F Project Config" }) }),
+    /* @__PURE__ */ jsxs18(Box16, { marginBottom: 1, marginLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs18(Text20, { dimColor: true, children: [
         "Path: ",
         configPath.file
       ] }),
-      /* @__PURE__ */ jsxs17(Text17, { children: [
+      /* @__PURE__ */ jsxs18(Text20, { children: [
         "Supabase ref: ",
-        config2.tools.supabase?.projectRef ?? /* @__PURE__ */ jsx18(Text17, { dimColor: true, children: "not set" })
+        config2.tools.supabase?.projectRef ?? /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "not set" })
       ] }),
-      /* @__PURE__ */ jsxs17(Text17, { children: [
+      /* @__PURE__ */ jsxs18(Text20, { children: [
         "Vercel ID: ",
-        config2.tools.vercel?.projectId ?? /* @__PURE__ */ jsx18(Text17, { dimColor: true, children: "not set" })
+        config2.tools.vercel?.projectId ?? /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "not set" })
       ] }),
-      /* @__PURE__ */ jsxs17(Text17, { children: [
+      /* @__PURE__ */ jsxs18(Text20, { children: [
         "GitHub repo: ",
-        config2.tools.gh?.repo ?? /* @__PURE__ */ jsx18(Text17, { dimColor: true, children: "not set" })
+        config2.tools.gh?.repo ?? /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "not set" })
       ] })
     ] }),
-    feedback && /* @__PURE__ */ jsx18(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsxs17(Text17, { color: inkColors.accent, children: [
+    feedback && /* @__PURE__ */ jsx20(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsxs18(Text20, { color: inkColors.accent, children: [
       "\u2713 ",
       feedback
     ] }) }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       SelectList,
       {
         items: flatItems,
@@ -2349,14 +2718,14 @@ function ProjectConfig({
         arrowNavigation: panelMode
       }
     ),
-    /* @__PURE__ */ jsx18(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
+    /* @__PURE__ */ jsx20(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
   ] });
 }
 
 // src/screens/PipelineList.tsx
 import { useMemo as useMemo6 } from "react";
-import { Box as Box16, Text as Text18 } from "ink";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Box as Box17, Text as Text21 } from "ink";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function PipelineList({
   onNavigate,
   onBack,
@@ -2419,9 +2788,9 @@ function PipelineList({
     }
     return list;
   }, [pipelines, panelMode]);
-  return /* @__PURE__ */ jsxs18(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
-    /* @__PURE__ */ jsx19(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsx19(Text18, { bold: true, color: inkColors.accent, children: "\u{1F517} Pipelines" }) }),
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19(Box17, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    !panelMode && /* @__PURE__ */ jsx21(Box17, { marginBottom: 1, children: /* @__PURE__ */ jsx21(Text21, { bold: true, color: inkColors.accent, children: "\u{1F517} Pipelines" }) }),
+    /* @__PURE__ */ jsx21(
       SelectList,
       {
         items,
@@ -2441,17 +2810,18 @@ function PipelineList({
         width: panelMode ? Math.max(20, width - 4) : width,
         maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
         isInputActive,
-        arrowNavigation: panelMode
+        arrowNavigation: panelMode,
+        panelFocused: isInputActive
       }
     ),
-    !panelMode && /* @__PURE__ */ jsx19(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
+    !panelMode && /* @__PURE__ */ jsx21(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
   ] });
 }
 
 // src/screens/PipelineBuilder.tsx
-import { useState as useState14 } from "react";
-import { Box as Box17, Text as Text19 } from "ink";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { Box as Box18, Text as Text22 } from "ink";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var stepCounter = 0;
 function nextStepId() {
   stepCounter += 1;
@@ -2464,13 +2834,13 @@ function PipelineBuilder({
   panelMode = false,
   isInputActive = true
 }) {
-  const [phase, setPhase] = useState14("name");
-  const [name, setName] = useState14("");
-  const [steps, setSteps] = useState14([]);
+  const [phase, setPhase] = useState15("name");
+  const [name, setName] = useState15("");
+  const [steps, setSteps] = useState15([]);
   if (phase === "name") {
-    return /* @__PURE__ */ jsxs19(Box17, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx20(Box17, { marginBottom: 1, children: /* @__PURE__ */ jsx20(Text19, { bold: true, color: inkColors.accent, children: "\u{1F517} New Pipeline" }) }),
-      /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs20(Box18, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx22(Box18, { marginBottom: 1, children: /* @__PURE__ */ jsx22(Text22, { bold: true, color: inkColors.accent, children: "\u{1F517} New Pipeline" }) }),
+      /* @__PURE__ */ jsx22(
         TextPrompt,
         {
           label: "Pipeline name:",
@@ -2483,10 +2853,14 @@ function PipelineBuilder({
             setName(val.trim());
             setPhase("add-step");
           },
-          onCancel: onBack
+          onCancel: onBack,
+          arrowNavigation: panelMode,
+          isInputActive,
+          boxed: panelMode,
+          focused: isInputActive
         }
       ),
-      !panelMode && /* @__PURE__ */ jsx20(StatusBar, { hint: "Type name \xB7 Enter to continue \xB7 Esc cancel", width })
+      !panelMode && /* @__PURE__ */ jsx22(StatusBar, { hint: "Type name \xB7 Enter to continue \xB7 Esc cancel", width })
     ] });
   }
   if (phase === "add-step") {
@@ -2519,26 +2893,26 @@ function PipelineBuilder({
         kind: "action"
       }
     ];
-    return /* @__PURE__ */ jsxs19(Box17, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs19(Box17, { marginBottom: 1, gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Text19, { bold: true, color: inkColors.accent, children: [
+    return /* @__PURE__ */ jsxs20(Box18, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsxs20(Box18, { marginBottom: 1, gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Text22, { bold: true, color: inkColors.accent, children: [
           "\u{1F517} ",
           name
         ] }),
-        /* @__PURE__ */ jsxs19(Text19, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs20(Text22, { dimColor: true, children: [
           "(",
           steps.length,
           " steps)"
         ] })
       ] }),
-      steps.length > 0 && /* @__PURE__ */ jsx20(Box17, { flexDirection: "column", marginBottom: 1, children: steps.map((step, i) => /* @__PURE__ */ jsxs19(Text19, { dimColor: true, children: [
+      steps.length > 0 && /* @__PURE__ */ jsx22(Box18, { flexDirection: "column", marginBottom: 1, children: steps.map((step, i) => /* @__PURE__ */ jsxs20(Text22, { dimColor: true, children: [
         i + 1,
         ". ",
         step.commandId,
         step.args.length > 0 ? ` ${step.args.join(" ")}` : ""
       ] }, step.id)) }),
-      /* @__PURE__ */ jsx20(Text19, { dimColor: true, children: "Select a command to add as step:" }),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "Select a command to add as step:" }),
+      /* @__PURE__ */ jsx22(
         SelectList,
         {
           items: commandItems,
@@ -2570,12 +2944,14 @@ function PipelineBuilder({
             }
           },
           maxVisible: Math.max(8, height - 14),
-          width,
+          boxedSections: panelMode,
+          width: panelMode ? Math.max(20, width - 4) : width,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       ),
-      !panelMode && /* @__PURE__ */ jsx20(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter add step \xB7 Esc done", width })
+      !panelMode && /* @__PURE__ */ jsx22(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter add step \xB7 Esc done", width })
     ] });
   }
   const reviewItems = [
@@ -2598,18 +2974,18 @@ function PipelineBuilder({
       kind: "action"
     }
   ];
-  return /* @__PURE__ */ jsxs19(Box17, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx20(Box17, { marginBottom: 1, children: /* @__PURE__ */ jsxs19(Text19, { bold: true, color: inkColors.accent, children: [
+  return /* @__PURE__ */ jsxs20(Box18, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    /* @__PURE__ */ jsx22(Box18, { marginBottom: 1, children: /* @__PURE__ */ jsxs20(Text22, { bold: true, color: inkColors.accent, children: [
       "\u{1F517} Review: ",
       name
     ] }) }),
-    /* @__PURE__ */ jsx20(Box17, { flexDirection: "column", marginBottom: 1, children: steps.map((step, i) => /* @__PURE__ */ jsxs19(Text19, { children: [
+    /* @__PURE__ */ jsx22(Box18, { flexDirection: "column", marginBottom: 1, children: steps.map((step, i) => /* @__PURE__ */ jsxs20(Text22, { children: [
       i + 1,
       ". ",
       step.commandId,
       step.args.length > 0 ? ` ${step.args.join(" ")}` : ""
     ] }, step.id)) }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(
       SelectList,
       {
         items: reviewItems,
@@ -2634,22 +3010,24 @@ function PipelineBuilder({
           onBack();
         },
         onCancel: onBack,
-        width,
+        boxedSections: panelMode,
+        width: panelMode ? Math.max(20, width - 4) : width,
         isInputActive,
-        arrowNavigation: panelMode
+        arrowNavigation: panelMode,
+        panelFocused: isInputActive
       }
     ),
-    !panelMode && /* @__PURE__ */ jsx20(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
+    !panelMode && /* @__PURE__ */ jsx22(StatusBar, { hint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back", width })
   ] });
 }
 
 // src/screens/PipelineExecution.tsx
-import { useState as useState15, useEffect as useEffect7, useMemo as useMemo7 } from "react";
-import { Box as Box20, Text as Text22 } from "ink";
+import { useState as useState16, useEffect as useEffect8, useMemo as useMemo7 } from "react";
+import { Box as Box21, Text as Text25 } from "ink";
 
 // src/components/StepIndicator.tsx
-import { Box as Box18, Text as Text20 } from "ink";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box19, Text as Text23 } from "ink";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var statusIcons = {
   pending: "\u25CB",
   running: "",
@@ -2669,21 +3047,21 @@ function StepIndicator({
   status,
   index
 }) {
-  return /* @__PURE__ */ jsxs20(Box18, { gap: 1, children: [
-    /* @__PURE__ */ jsxs20(Text20, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs21(Box19, { gap: 1, children: [
+    /* @__PURE__ */ jsxs21(Text23, { dimColor: true, children: [
       String(index + 1).padStart(2, " "),
       "."
     ] }),
-    status === "running" ? /* @__PURE__ */ jsx21(Spinner, { label: "" }) : /* @__PURE__ */ jsx21(
-      Text20,
+    status === "running" ? /* @__PURE__ */ jsx23(Spinner, { label: "" }) : /* @__PURE__ */ jsx23(
+      Text23,
       {
         color: statusColors[status],
         dimColor: status === "pending" || status === "skipped",
         children: statusIcons[status]
       }
     ),
-    /* @__PURE__ */ jsx21(
-      Text20,
+    /* @__PURE__ */ jsx23(
+      Text23,
       {
         color: statusColors[status],
         dimColor: status === "pending" || status === "skipped",
@@ -2695,8 +3073,8 @@ function StepIndicator({
 }
 
 // src/components/PipelineProgress.tsx
-import { Box as Box19, Text as Text21 } from "ink";
-import { jsxs as jsxs21 } from "react/jsx-runtime";
+import { Box as Box20, Text as Text24 } from "ink";
+import { jsxs as jsxs22 } from "react/jsx-runtime";
 function PipelineProgressBar({
   total,
   completed,
@@ -2707,14 +3085,14 @@ function PipelineProgressBar({
   const filledCount = total > 0 ? Math.round(completed / total * barWidth) : 0;
   const filled = "\u2588".repeat(filledCount);
   const empty = "\u2591".repeat(barWidth - filledCount);
-  return /* @__PURE__ */ jsxs21(Box19, { gap: 1, children: [
-    /* @__PURE__ */ jsxs21(Text21, { color: errors > 0 ? "red" : inkColors.accent, children: [
+  return /* @__PURE__ */ jsxs22(Box20, { gap: 1, children: [
+    /* @__PURE__ */ jsxs22(Text24, { color: errors > 0 ? "red" : inkColors.accent, children: [
       "[",
       filled,
       empty,
       "]"
     ] }),
-    /* @__PURE__ */ jsxs21(Text21, { dimColor: true, children: [
+    /* @__PURE__ */ jsxs22(Text24, { dimColor: true, children: [
       completed,
       "/",
       total,
@@ -2724,7 +3102,7 @@ function PipelineProgressBar({
 }
 
 // src/screens/PipelineExecution.tsx
-import { Fragment, jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function PipelineExecution({
   pipelineId,
   onBack,
@@ -2737,10 +3115,10 @@ function PipelineExecution({
     () => getAllPipelines().find((p) => p.id === pipelineId),
     [pipelineId]
   );
-  const [phase, setPhase] = useState15("running");
-  const [progress, setProgress] = useState15(null);
-  const [results, setResults] = useState15([]);
-  useEffect7(() => {
+  const [phase, setPhase] = useState16("running");
+  const [progress, setProgress] = useState16(null);
+  const [results, setResults] = useState16([]);
+  useEffect8(() => {
     if (!pipeline) return;
     executePipeline(pipeline, (p) => {
       setProgress({ ...p });
@@ -2753,20 +3131,22 @@ function PipelineExecution({
     });
   }, [pipeline]);
   if (!pipeline) {
-    return /* @__PURE__ */ jsxs22(Box20, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs22(Text22, { color: "red", children: [
+    return /* @__PURE__ */ jsxs23(Box21, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsxs23(Text25, { color: "red", children: [
         "Pipeline not found: ",
         pipelineId
       ] }),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx24(
         SelectList,
         {
           items: [{ value: "__back__", label: "\u2190 Back" }],
           onSelect: onBack,
           onCancel: onBack,
-          width,
+          boxedSections: panelMode,
+          width: panelMode ? Math.max(20, width - 4) : width,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       )
     ] });
@@ -2781,15 +3161,15 @@ function PipelineExecution({
     const base = cmdDef ? `${cmdDef.tool}: ${cmdDef.label}` : step.commandId;
     return step.args.length > 0 ? `${base} ${step.args.join(" ")}` : base;
   }
-  return /* @__PURE__ */ jsxs22(Box20, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs22(Box20, { marginBottom: 1, gap: 1, children: [
-      /* @__PURE__ */ jsxs22(Text22, { bold: true, color: inkColors.accent, children: [
+  return /* @__PURE__ */ jsxs23(Box21, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+    /* @__PURE__ */ jsxs23(Box21, { marginBottom: 1, gap: 1, children: [
+      /* @__PURE__ */ jsxs23(Text25, { bold: true, color: inkColors.accent, children: [
         "\u{1F517} ",
         pipeline.name
       ] }),
-      /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: phase === "running" ? "Running..." : "Complete" })
+      /* @__PURE__ */ jsx24(Text25, { dimColor: true, children: phase === "running" ? "Running..." : "Complete" })
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx24(
       PipelineProgressBar,
       {
         total: pipeline.steps.length,
@@ -2798,8 +3178,8 @@ function PipelineExecution({
         width
       }
     ),
-    /* @__PURE__ */ jsx22(Divider, { width }),
-    /* @__PURE__ */ jsx22(Box20, { flexDirection: "column", marginY: 1, children: pipeline.steps.map((step, i) => /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx24(Divider, { width }),
+    /* @__PURE__ */ jsx24(Box21, { flexDirection: "column", marginY: 1, children: pipeline.steps.map((step, i) => /* @__PURE__ */ jsx24(
       StepIndicator,
       {
         label: step.label ?? getStepLabel(step),
@@ -2808,17 +3188,17 @@ function PipelineExecution({
       },
       step.id
     )) }),
-    phase === "done" && /* @__PURE__ */ jsxs22(Fragment, { children: [
-      /* @__PURE__ */ jsx22(Divider, { width }),
-      /* @__PURE__ */ jsx22(Box20, { marginY: 1, children: /* @__PURE__ */ jsx22(
-        Text22,
+    phase === "done" && /* @__PURE__ */ jsxs23(Fragment, { children: [
+      /* @__PURE__ */ jsx24(Divider, { width }),
+      /* @__PURE__ */ jsx24(Box21, { marginY: 1, children: /* @__PURE__ */ jsx24(
+        Text25,
         {
           color: errorCount > 0 ? "red" : inkColors.accent,
           bold: true,
           children: errorCount > 0 ? `Pipeline completed with ${errorCount} error(s)` : "Pipeline completed successfully!"
         }
       ) }),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx24(
         SelectList,
         {
           items: [
@@ -2833,13 +3213,15 @@ function PipelineExecution({
             onBack();
           },
           onCancel: onBack,
-          width,
+          boxedSections: panelMode,
+          width: panelMode ? Math.max(20, width - 4) : width,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       )
     ] }),
-    !panelMode && /* @__PURE__ */ jsx22(
+    !panelMode && /* @__PURE__ */ jsx24(
       StatusBar,
       {
         hint: phase === "running" ? "Running pipeline..." : "Enter select \xB7 Esc back",
@@ -2850,7 +3232,7 @@ function PipelineExecution({
 }
 
 // src/app.tsx
-import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function AppClassic() {
   const { screen, params, navigate, goBack, goHome } = useNavigation();
   const { exit } = useApp();
@@ -2865,9 +3247,9 @@ function AppClassic() {
   const renderScreen = () => {
     switch (screen) {
       case "home":
-        return /* @__PURE__ */ jsx23(Home, { onNavigate: navigate, onExit: handleExit, width, height });
+        return /* @__PURE__ */ jsx25(Home, { onNavigate: navigate, onExit: handleExit, width, height });
       case "command-args":
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx25(
           CommandArgs,
           {
             command: params.command ?? "",
@@ -2878,9 +3260,9 @@ function AppClassic() {
           }
         );
       case "custom-command":
-        return /* @__PURE__ */ jsx23(CustomCommand, { onNavigate: navigate, onBack: goBack, width });
+        return /* @__PURE__ */ jsx25(CustomCommand, { onNavigate: navigate, onBack: goBack, width });
       case "flag-selection":
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx25(
           FlagSelection,
           {
             args: params.args ?? [],
@@ -2892,28 +3274,32 @@ function AppClassic() {
         );
       case "confirm-execute":
       case "command-execution":
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx25(
           CommandExecution,
           {
             args: params.args ?? [],
             tool: params.tool,
             onBack: goBack,
             onExit: handleExit,
+            onRunSuggestion: (sugTool, sugArgs) => {
+              goHome();
+              navigate("confirm-execute", { tool: sugTool, args: sugArgs });
+            },
             width
           }
         );
       case "self-update":
-        return /* @__PURE__ */ jsx23(SelfUpdate, { onBack: goBack, onExit: handleExit, width });
+        return /* @__PURE__ */ jsx25(SelfUpdate, { onBack: goBack, onExit: handleExit, width });
       case "tool-status":
-        return /* @__PURE__ */ jsx23(ToolStatus, { onBack: goBack, width });
+        return /* @__PURE__ */ jsx25(ToolStatus, { onBack: goBack, width });
       case "project-config":
-        return /* @__PURE__ */ jsx23(ProjectConfig, { onBack: goBack, width });
+        return /* @__PURE__ */ jsx25(ProjectConfig, { onBack: goBack, width });
       case "pipeline-list":
-        return /* @__PURE__ */ jsx23(PipelineList, { onNavigate: navigate, onBack: goBack, width });
+        return /* @__PURE__ */ jsx25(PipelineList, { onNavigate: navigate, onBack: goBack, width });
       case "pipeline-builder":
-        return /* @__PURE__ */ jsx23(PipelineBuilder, { onBack: goBack, width, height });
+        return /* @__PURE__ */ jsx25(PipelineBuilder, { onBack: goBack, width, height });
       case "pipeline-execution":
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx25(
           PipelineExecution,
           {
             pipelineId: params.pipelineId ?? "",
@@ -2923,48 +3309,33 @@ function AppClassic() {
           }
         );
       default:
-        return /* @__PURE__ */ jsx23(Box21, { children: /* @__PURE__ */ jsxs23(Text23, { color: "red", children: [
+        return /* @__PURE__ */ jsx25(Box22, { children: /* @__PURE__ */ jsxs24(Text26, { color: "red", children: [
           "Unknown screen: ",
           screen
         ] }) });
     }
   };
-  return /* @__PURE__ */ jsxs23(Box21, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx23(GhostBanner, { width }),
+  return /* @__PURE__ */ jsxs24(Box22, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx25(GhostBanner, { width }),
     renderScreen()
   ] });
 }
 
 // src/appPanel.tsx
-import React18 from "react";
-import { Box as Box29, Text as Text30, useApp as useApp2, useInput as useInput7 } from "ink";
-
-// src/hooks/useFullscreen.ts
-import { useEffect as useEffect8 } from "react";
-var ENTER_ALT_SCREEN = "\x1B[?1049h";
-var LEAVE_ALT_SCREEN = "\x1B[?1049l";
-var HIDE_CURSOR = "\x1B[?25l";
-var SHOW_CURSOR = "\x1B[?25h";
-function useFullscreen() {
-  useEffect8(() => {
-    process.stdout.write(ENTER_ALT_SCREEN + HIDE_CURSOR);
-    return () => {
-      process.stdout.write(SHOW_CURSOR + LEAVE_ALT_SCREEN);
-    };
-  }, []);
-}
+import React19 from "react";
+import { Box as Box30, Text as Text33, useApp as useApp2, useInput as useInput9 } from "ink";
 
 // src/hooks/usePanelNavigation.ts
-import { useState as useState16, useCallback as useCallback4 } from "react";
+import { useState as useState17, useCallback as useCallback5 } from "react";
 function usePanelNavigation() {
-  const [state, setState] = useState16({
-    view: "feature",
+  const [state, setState] = useState17({
+    view: "pipelines",
     featureId: "database",
     innerScreen: "home",
     innerParams: {},
     innerStack: []
   });
-  const selectSidebarItem = useCallback4((itemId) => {
+  const selectSidebarItem = useCallback5((itemId) => {
     const featureIds = [
       "database",
       "functions",
@@ -3005,7 +3376,7 @@ function usePanelNavigation() {
       });
     }
   }, [state.featureId]);
-  const navigateInner = useCallback4((screen, params) => {
+  const navigateInner = useCallback5((screen, params) => {
     setState((prev) => ({
       ...prev,
       innerStack: [...prev.innerStack, { screen: prev.innerScreen, params: prev.innerParams }],
@@ -3013,7 +3384,7 @@ function usePanelNavigation() {
       innerParams: params ?? {}
     }));
   }, []);
-  const goBackInner = useCallback4(() => {
+  const goBackInner = useCallback5(() => {
     setState((prev) => {
       if (prev.innerStack.length === 0) {
         return { ...prev, innerScreen: "home", innerParams: {} };
@@ -3028,7 +3399,7 @@ function usePanelNavigation() {
       };
     });
   }, []);
-  const goHomeInner = useCallback4(() => {
+  const goHomeInner = useCallback5(() => {
     setState((prev) => ({
       ...prev,
       innerScreen: "home",
@@ -3036,24 +3407,37 @@ function usePanelNavigation() {
       innerStack: []
     }));
   }, []);
+  const switchViewAndNavigate = useCallback5(
+    (view, screen, params) => {
+      setState((prev) => ({
+        ...prev,
+        view,
+        innerScreen: screen,
+        innerParams: params ?? {},
+        innerStack: [{ screen: "home", params: {} }]
+      }));
+    },
+    []
+  );
   return {
     ...state,
     selectSidebarItem,
     navigateInner,
     goBackInner,
-    goHomeInner
+    goHomeInner,
+    switchViewAndNavigate
   };
 }
 
 // src/hooks/usePanelFocus.ts
-import { useState as useState17, useCallback as useCallback5 } from "react";
+import { useState as useState18, useCallback as useCallback6 } from "react";
 function usePanelFocus() {
-  const [focused, setFocused] = useState17("sidebar");
-  const toggleFocus = useCallback5(() => {
+  const [focused, setFocused] = useState18("sidebar");
+  const toggleFocus = useCallback6(() => {
     setFocused((prev) => prev === "sidebar" ? "main" : "sidebar");
   }, []);
-  const focusSidebar = useCallback5(() => setFocused("sidebar"), []);
-  const focusMain = useCallback5(() => setFocused("main"), []);
+  const focusSidebar = useCallback6(() => setFocused("sidebar"), []);
+  const focusMain = useCallback6(() => setFocused("main"), []);
   return {
     focused,
     isSidebarFocused: focused === "sidebar",
@@ -3087,19 +3471,18 @@ function useSidebarItems() {
     items.push({ id: "tool-status", label: "Tool Status", icon: "\u{1F527}", type: "action", section: "system" });
     items.push({ id: "config", label: "Config", icon: "\u2699\uFE0F", type: "action", section: "system" });
     items.push({ id: "self-update", label: "Update", icon: "\u2B06\uFE0F", type: "action", section: "system" });
-    items.push({ id: "exit", label: "Exit", icon: "\u{1F6AA}", type: "action", section: "system" });
     return items;
   }, []);
 }
 
 // src/hooks/useModal.ts
-import { useState as useState18, useCallback as useCallback6 } from "react";
+import { useState as useState19, useCallback as useCallback7 } from "react";
 function useModal() {
-  const [state, setState] = useState18(null);
-  const openModal = useCallback6((content, title) => {
+  const [state, setState] = useState19(null);
+  const openModal = useCallback7((content, title) => {
     setState({ content, title });
   }, []);
-  const closeModal = useCallback6(() => {
+  const closeModal = useCallback7(() => {
     setState(null);
   }, []);
   return {
@@ -3112,8 +3495,8 @@ function useModal() {
 }
 
 // src/components/PanelLayout.tsx
-import { Box as Box22 } from "ink";
-import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Box as Box23 } from "ink";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function PanelLayout({
   header,
   footer,
@@ -3128,19 +3511,19 @@ function PanelLayout({
   const contentHeight = Math.max(5, height - bannerHeight - footerHeight);
   const sidebarWidth = singlePanel ? 0 : panel.sidebarWidth(width);
   const mainWidth = singlePanel ? width : width - sidebarWidth;
-  return /* @__PURE__ */ jsxs24(Box22, { flexDirection: "column", width, height, children: [
+  return /* @__PURE__ */ jsxs25(Box23, { flexDirection: "column", width, height, children: [
     header,
-    /* @__PURE__ */ jsxs24(Box22, { flexDirection: "row", height: contentHeight, children: [
-      !singlePanel && /* @__PURE__ */ jsx24(Box22, { width: sidebarWidth, height: contentHeight, children: sidebar }),
-      /* @__PURE__ */ jsx24(Box22, { width: mainWidth, height: contentHeight, children: main2 })
+    /* @__PURE__ */ jsxs25(Box23, { flexDirection: "row", height: contentHeight, children: [
+      !singlePanel && /* @__PURE__ */ jsx26(Box23, { width: sidebarWidth, height: contentHeight, children: sidebar }),
+      /* @__PURE__ */ jsx26(Box23, { width: mainWidth, height: contentHeight, children: main2 })
     ] }),
-    /* @__PURE__ */ jsx24(Box22, { height: footerHeight, children: footer })
+    /* @__PURE__ */ jsx26(Box23, { height: footerHeight, children: footer })
   ] });
 }
 
 // src/components/Panel.tsx
-import { Box as Box23, Text as Text24 } from "ink";
-import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Box as Box24, Text as Text27 } from "ink";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function Panel({
   id,
   title,
@@ -3150,8 +3533,8 @@ function Panel({
   children
 }) {
   const borderColor = focused ? panel.borderFocused : panel.borderDim;
-  return /* @__PURE__ */ jsxs25(
-    Box23,
+  return /* @__PURE__ */ jsxs26(
+    Box24,
     {
       flexDirection: "column",
       width,
@@ -3160,21 +3543,21 @@ function Panel({
       borderColor,
       overflow: "hidden",
       children: [
-        title && /* @__PURE__ */ jsx25(Box23, { marginBottom: 0, children: /* @__PURE__ */ jsxs25(Text24, { color: focused ? inkColors.accent : void 0, bold: focused, dimColor: !focused, children: [
+        title && /* @__PURE__ */ jsx27(Box24, { marginBottom: 0, children: /* @__PURE__ */ jsxs26(Text27, { color: focused ? inkColors.accent : void 0, bold: focused, dimColor: !focused, children: [
           " ",
           title,
           " "
         ] }) }),
-        /* @__PURE__ */ jsx25(Box23, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children })
+        /* @__PURE__ */ jsx27(Box24, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children })
       ]
     }
   );
 }
 
 // src/components/Sidebar.tsx
-import { useEffect as useEffect9, useMemo as useMemo9, useState as useState19 } from "react";
-import { Box as Box24, Text as Text25, useInput as useInput6 } from "ink";
-import { jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useMemo as useMemo9, useState as useState20 } from "react";
+import { Box as Box25, Text as Text28, useInput as useInput8 } from "ink";
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 function groupSections(items) {
   const groups = [];
   let current = null;
@@ -3201,13 +3584,13 @@ function Sidebar({
     [items]
   );
   const selectedIdx = selectableItems.findIndex((item) => item.id === selectedId);
-  const [cursorIdx, setCursorIdx] = useState19(Math.max(0, selectedIdx));
+  const [cursorIdx, setCursorIdx] = useState20(Math.max(0, selectedIdx));
   const sections = useMemo9(() => groupSections(items), [items]);
   useEffect9(() => {
     const idx = selectableItems.findIndex((item) => item.id === selectedId);
     if (idx >= 0) setCursorIdx(idx);
   }, [selectedId, selectableItems]);
-  useInput6(
+  useInput8(
     (input2, key) => {
       if (key.upArrow || input2 === "k") {
         setCursorIdx((prev) => {
@@ -3235,28 +3618,28 @@ function Sidebar({
     { isActive: isFocused }
   );
   let flatIdx = 0;
-  return /* @__PURE__ */ jsx26(Box24, { flexDirection: "column", gap: 2, children: sections.map((section) => {
+  return /* @__PURE__ */ jsx28(Box25, { flexDirection: "column", gap: 0, children: sections.map((section) => {
     const sectionStartIdx = flatIdx;
     const sectionEndIdx = sectionStartIdx + section.items.length - 1;
     const hasCursorInSection = isFocused && cursorIdx >= sectionStartIdx && cursorIdx <= sectionEndIdx;
     const hasActiveInSection = section.items.some((item) => item.id === selectedId);
     const borderColor = hasCursorInSection || hasActiveInSection ? inkColors.accent : "#555555";
-    const rendered = /* @__PURE__ */ jsxs26(
-      Box24,
+    const rendered = /* @__PURE__ */ jsxs27(
+      Box25,
       {
         flexDirection: "column",
         borderStyle: "round",
         borderColor,
         paddingX: 1,
         children: [
-          /* @__PURE__ */ jsx26(Text25, { dimColor: true, bold: true, children: section.title }),
+          /* @__PURE__ */ jsx28(Text28, { dimColor: true, bold: true, children: section.title }),
           section.items.map((item) => {
             const thisIdx = flatIdx;
             flatIdx++;
             const isCursor = isFocused && thisIdx === cursorIdx;
             const isActive = item.id === selectedId;
-            return /* @__PURE__ */ jsx26(Box24, { gap: 0, children: /* @__PURE__ */ jsxs26(
-              Text25,
+            return /* @__PURE__ */ jsx28(Box25, { gap: 0, children: /* @__PURE__ */ jsxs27(
+              Text28,
               {
                 color: isCursor ? inkColors.accent : isActive ? inkColors.accent : void 0,
                 bold: isCursor || isActive,
@@ -3279,12 +3662,12 @@ function Sidebar({
 }
 
 // src/components/PanelFooter.tsx
-import { Box as Box25, Text as Text26 } from "ink";
-import { jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Box as Box26, Text as Text29 } from "ink";
+import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function PanelFooter({ hints, width }) {
-  return /* @__PURE__ */ jsx27(Box25, { width, children: /* @__PURE__ */ jsx27(Box25, { gap: 1, children: hints.map((hint) => /* @__PURE__ */ jsxs27(Box25, { gap: 0, children: [
-    /* @__PURE__ */ jsx27(Text26, { color: inkColors.accent, bold: true, children: hint.key }),
-    /* @__PURE__ */ jsxs27(Text26, { dimColor: true, children: [
+  return /* @__PURE__ */ jsx29(Box26, { width, children: /* @__PURE__ */ jsx29(Box26, { gap: 1, children: hints.map((hint) => /* @__PURE__ */ jsxs28(Box26, { gap: 0, children: [
+    /* @__PURE__ */ jsx29(Text29, { color: inkColors.accent, bold: true, children: hint.key }),
+    /* @__PURE__ */ jsxs28(Text29, { dimColor: true, children: [
       ":",
       hint.action
     ] })
@@ -3292,8 +3675,8 @@ function PanelFooter({ hints, width }) {
 }
 
 // src/components/Modal.tsx
-import { Box as Box26, Text as Text27 } from "ink";
-import { jsx as jsx28, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Box as Box27, Text as Text30 } from "ink";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function Modal({
   title,
   width,
@@ -3304,10 +3687,10 @@ function Modal({
   const modalHeight = Math.min(height - 4, 20);
   const padX = Math.max(0, Math.floor((width - modalWidth) / 2));
   const padY = Math.max(0, Math.floor((height - modalHeight) / 2));
-  return /* @__PURE__ */ jsxs28(Box26, { flexDirection: "column", width, height, children: [
-    padY > 0 && /* @__PURE__ */ jsx28(Box26, { height: padY }),
-    /* @__PURE__ */ jsx28(Box26, { marginLeft: padX, children: /* @__PURE__ */ jsxs28(
-      Box26,
+  return /* @__PURE__ */ jsxs29(Box27, { flexDirection: "column", width, height, children: [
+    padY > 0 && /* @__PURE__ */ jsx30(Box27, { height: padY }),
+    /* @__PURE__ */ jsx30(Box27, { marginLeft: padX, children: /* @__PURE__ */ jsxs29(
+      Box27,
       {
         flexDirection: "column",
         width: modalWidth,
@@ -3316,8 +3699,8 @@ function Modal({
         borderColor: inkColors.accent,
         paddingX: 1,
         children: [
-          /* @__PURE__ */ jsx28(Box26, { marginBottom: 1, children: /* @__PURE__ */ jsx28(Text27, { color: inkColors.accent, bold: true, children: title }) }),
-          /* @__PURE__ */ jsx28(Box26, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children })
+          /* @__PURE__ */ jsx30(Box27, { marginBottom: 1, children: /* @__PURE__ */ jsx30(Text30, { color: inkColors.accent, bold: true, children: title }) }),
+          /* @__PURE__ */ jsx30(Box27, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children })
         ]
       }
     ) })
@@ -3325,9 +3708,9 @@ function Modal({
 }
 
 // src/components/FeatureCommands.tsx
-import { useEffect as useEffect10, useMemo as useMemo10, useState as useState20 } from "react";
-import { Box as Box27, Text as Text28 } from "ink";
-import { jsx as jsx29, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useMemo as useMemo10, useState as useState21 } from "react";
+import { Box as Box28, Text as Text31 } from "ink";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 function FeatureCommands({
   feature,
   onNavigate,
@@ -3338,9 +3721,9 @@ function FeatureCommands({
   height = 24,
   isInputActive = true
 }) {
-  const [pinnedCommands, setPinnedCommands2] = useState20(() => getPinnedCommands());
-  const [pinnedRuns, setPinnedRuns2] = useState20(() => getPinnedRuns());
-  const [pinFeedback, setPinFeedback] = useState20();
+  const [pinnedCommands, setPinnedCommands2] = useState21(() => getPinnedCommands());
+  const [pinnedRuns, setPinnedRuns2] = useState21(() => getPinnedRuns());
+  const [pinFeedback, setPinFeedback] = useState21();
   useEffect10(() => {
     if (!pinFeedback) return;
     const timeout = setTimeout(() => setPinFeedback(void 0), 1400);
@@ -3351,7 +3734,8 @@ function FeatureCommands({
       activeFeature: feature,
       pinnedCommands,
       pinnedRuns,
-      showPinnedSection: false
+      showPinnedSection: false,
+      showFeatureHeader: false
     }),
     [feature, pinnedCommands, pinnedRuns]
   );
@@ -3408,17 +3792,12 @@ function FeatureCommands({
       );
     }
   };
-  return /* @__PURE__ */ jsxs29(Box27, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsx29(Box27, { marginBottom: 1, children: /* @__PURE__ */ jsxs29(Text28, { color: inkColors.accent, bold: true, children: [
-      feature.icon,
-      " ",
-      feature.label
-    ] }) }),
-    pinFeedback && /* @__PURE__ */ jsx29(Box27, { marginBottom: 1, children: /* @__PURE__ */ jsxs29(Text28, { color: inkColors.accent, children: [
+  return /* @__PURE__ */ jsxs30(Box28, { flexDirection: "column", paddingX: 1, children: [
+    pinFeedback && /* @__PURE__ */ jsx31(Box28, { marginBottom: 1, children: /* @__PURE__ */ jsxs30(Text31, { color: inkColors.accent, children: [
       "\u2713 ",
       pinFeedback
     ] }) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx31(
       SelectList,
       {
         items,
@@ -3429,16 +3808,17 @@ function FeatureCommands({
         maxVisible: Math.max(6, height - 6),
         onCancel: onBack,
         isInputActive,
-        arrowNavigation: true
+        arrowNavigation: true,
+        panelFocused: isInputActive
       }
     )
   ] });
 }
 
 // src/components/PinnedCommands.tsx
-import { useEffect as useEffect11, useMemo as useMemo11, useState as useState21 } from "react";
-import { Box as Box28, Text as Text29 } from "ink";
-import { jsx as jsx30, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useMemo as useMemo11, useState as useState22 } from "react";
+import { Box as Box29, Text as Text32 } from "ink";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function PinnedCommands({
   onNavigate,
   onBack,
@@ -3447,9 +3827,9 @@ function PinnedCommands({
   height = 24,
   isInputActive = true
 }) {
-  const [pinnedCommands, setPinnedCommands2] = useState21(() => getPinnedCommands());
-  const [pinnedRuns, setPinnedRuns2] = useState21(() => getPinnedRuns());
-  const [pinFeedback, setPinFeedback] = useState21();
+  const [pinnedCommands, setPinnedCommands2] = useState22(() => getPinnedCommands());
+  const [pinnedRuns, setPinnedRuns2] = useState22(() => getPinnedRuns());
+  const [pinFeedback, setPinFeedback] = useState22();
   useEffect11(() => {
     if (!pinFeedback) return;
     const timeout = setTimeout(() => setPinFeedback(void 0), 1400);
@@ -3512,18 +3892,14 @@ function PinnedCommands({
     }
   };
   if (items.length === 0) {
-    return /* @__PURE__ */ jsxs30(Box28, { flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx30(Box28, { marginBottom: 1, children: /* @__PURE__ */ jsx30(Text29, { color: inkColors.accent, bold: true, children: "\u{1F4CC} Pinned" }) }),
-      /* @__PURE__ */ jsx30(Text29, { color: "gray", children: "No pinned items. Press p on any command to pin it." })
-    ] });
+    return /* @__PURE__ */ jsx32(Box29, { flexDirection: "column", paddingX: 1, children: /* @__PURE__ */ jsx32(Text32, { color: "gray", children: "No pinned items. Press p on any command to pin it." }) });
   }
-  return /* @__PURE__ */ jsxs30(Box28, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsx30(Box28, { marginBottom: 1, children: /* @__PURE__ */ jsx30(Text29, { color: inkColors.accent, bold: true, children: "\u{1F4CC} Pinned" }) }),
-    pinFeedback && /* @__PURE__ */ jsx30(Box28, { marginBottom: 1, children: /* @__PURE__ */ jsxs30(Text29, { color: inkColors.accent, children: [
+  return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", paddingX: 1, children: [
+    pinFeedback && /* @__PURE__ */ jsx32(Box29, { marginBottom: 1, children: /* @__PURE__ */ jsxs31(Text32, { color: inkColors.accent, children: [
       "\u2713 ",
       pinFeedback
     ] }) }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx32(
       SelectList,
       {
         items,
@@ -3534,14 +3910,15 @@ function PinnedCommands({
         maxVisible: Math.max(6, height - 6),
         onCancel: onBack,
         isInputActive,
-        arrowNavigation: true
+        arrowNavigation: true,
+        panelFocused: isInputActive
       }
     )
   ] });
 }
 
 // src/appPanel.tsx
-import { jsx as jsx31, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 var screenLabels = {
   "command-args": "Args",
   "flag-selection": "Flags",
@@ -3558,26 +3935,28 @@ var screenLabels = {
 function buildBreadcrumb(nav) {
   let base;
   switch (nav.view) {
-    case "feature":
-      base = getFeatureById(nav.featureId)?.label ?? nav.featureId;
+    case "feature": {
+      const feat = getFeatureById(nav.featureId);
+      base = feat ? `${feat.icon} ${feat.label}` : nav.featureId;
       break;
+    }
     case "pinned":
-      base = "Pinned";
+      base = "\u{1F4CC} Pinned";
       break;
     case "custom-command":
-      base = "Custom Cmd";
+      base = "\u270F\uFE0F Custom Cmd";
       break;
     case "pipelines":
-      base = "Pipelines";
+      base = "\u{1F517} Pipelines";
       break;
     case "tool-status":
-      base = "Status";
+      base = "\u{1F527} Status";
       break;
     case "config":
-      base = "Config";
+      base = "\u2699\uFE0F Config";
       break;
     case "self-update":
-      base = "Update";
+      base = "\u2B06\uFE0F Update";
       break;
     default:
       base = nav.view;
@@ -3595,12 +3974,12 @@ function buildBreadcrumb(nav) {
   return parts.join(" \u203A ");
 }
 var FOOTER_HINTS = [
-  { key: "\u2190\u2192", action: "panels" },
+  { key: "Tab", action: "focus" },
+  { key: "\u2190/Esc", action: "back" },
+  { key: "\u2192/Enter", action: "select" },
   { key: "j/k", action: "nav" },
-  { key: "Enter", action: "select" },
-  { key: "Esc", action: "back" },
-  { key: "q", action: "quit" },
   { key: "p", action: "pin" },
+  { key: "q", action: "quit" },
   { key: "?", action: "help" }
 ];
 function AppPanel() {
@@ -3611,7 +3990,7 @@ function AppPanel() {
   const focus = usePanelFocus();
   const sidebarItems = useSidebarItems();
   const modal = useModal();
-  const refreshPins = React18.useCallback(() => {
+  const refreshPins = React19.useCallback(() => {
   }, []);
   const singlePanel = width < 60 || height < 15;
   const handleExit = () => {
@@ -3620,7 +3999,7 @@ function AppPanel() {
     );
     exit();
   };
-  useInput7((input2, key) => {
+  useInput9((input2, key) => {
     if (modal.isOpen) {
       if (key.escape || input2 === "q") {
         modal.closeModal();
@@ -3645,37 +4024,37 @@ function AppPanel() {
     }
     if (input2 === "?") {
       modal.openModal(
-        /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "\u2190/\u2192" }),
+        /* @__PURE__ */ jsxs32(Box30, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "\u2190/\u2192" }),
             "    Move between sidebar and main panel"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "Tab" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "Tab" }),
             "     Toggle sidebar / main panel"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "j/k" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "j/k" }),
             "     Navigate up/down"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "Enter" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "Enter" }),
             "   Select item"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "Esc" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "Esc" }),
             "     Go back (or return to sidebar)"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "q" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "q" }),
             "       Quit Polter"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "?" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "?" }),
             "       Show this help"
           ] }),
-          /* @__PURE__ */ jsxs31(Text30, { children: [
-            /* @__PURE__ */ jsx31(Text30, { bold: true, children: "p" }),
+          /* @__PURE__ */ jsxs32(Text33, { children: [
+            /* @__PURE__ */ jsx33(Text33, { bold: true, children: "p" }),
             "       Pin/unpin command"
           ] })
         ] }),
@@ -3725,7 +4104,7 @@ function AppPanel() {
     }
     switch (nav.view) {
       case "pinned":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PinnedCommands,
           {
             onNavigate: nav.navigateInner,
@@ -3739,12 +4118,12 @@ function AppPanel() {
       case "feature": {
         const feature = getFeatureById(nav.featureId);
         if (!feature) {
-          return /* @__PURE__ */ jsxs31(Text30, { color: "red", children: [
+          return /* @__PURE__ */ jsxs32(Text33, { color: "red", children: [
             "Feature not found: ",
             nav.featureId
           ] });
         }
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           FeatureCommands,
           {
             feature,
@@ -3759,7 +4138,7 @@ function AppPanel() {
         );
       }
       case "custom-command":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CustomCommand,
           {
             onNavigate: nav.navigateInner,
@@ -3771,7 +4150,7 @@ function AppPanel() {
           }
         );
       case "pipelines":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineList,
           {
             onNavigate: nav.navigateInner,
@@ -3783,7 +4162,7 @@ function AppPanel() {
           }
         );
       case "tool-status":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ToolStatus,
           {
             onBack: focus.focusSidebar,
@@ -3794,7 +4173,7 @@ function AppPanel() {
           }
         );
       case "config":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ProjectConfig,
           {
             onBack: focus.focusSidebar,
@@ -3805,7 +4184,7 @@ function AppPanel() {
           }
         );
       case "self-update":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           SelfUpdate,
           {
             onBack: focus.focusSidebar,
@@ -3817,7 +4196,7 @@ function AppPanel() {
           }
         );
       default:
-        return /* @__PURE__ */ jsx31(Text30, { children: "Select an item from the sidebar" });
+        return /* @__PURE__ */ jsx33(Text33, { children: "Select an item from the sidebar" });
     }
   };
   const renderInnerScreen = () => {
@@ -3825,7 +4204,7 @@ function AppPanel() {
     const w = mainContentWidth - 2;
     switch (nav.innerScreen) {
       case "command-args":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CommandArgs,
           {
             command: nav.innerParams.command ?? "",
@@ -3838,7 +4217,7 @@ function AppPanel() {
           }
         );
       case "custom-command":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CustomCommand,
           {
             onNavigate: nav.navigateInner,
@@ -3850,7 +4229,7 @@ function AppPanel() {
           }
         );
       case "flag-selection":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           FlagSelection,
           {
             args: nav.innerParams.args ?? [],
@@ -3858,27 +4237,33 @@ function AppPanel() {
             onNavigate: nav.navigateInner,
             onBack: nav.goBackInner,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       case "confirm-execute":
       case "command-execution":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CommandExecution,
           {
             args: nav.innerParams.args ?? [],
             tool: nav.innerParams.tool,
             onBack: nav.goBackInner,
+            onHome: nav.goHomeInner,
             onExit: handleExit,
+            onRunSuggestion: (sugTool, sugArgs) => {
+              nav.switchViewAndNavigate("custom-command", "confirm-execute", { tool: sugTool, args: sugArgs });
+            },
             width: w,
             height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
-          }
+          },
+          `${nav.view}-${nav.innerParams.tool}-${(nav.innerParams.args ?? []).join("-")}`
         );
       case "pipeline-list":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineList,
           {
             onNavigate: nav.navigateInner,
@@ -3890,7 +4275,7 @@ function AppPanel() {
           }
         );
       case "pipeline-builder":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineBuilder,
           {
             onBack: nav.goBackInner,
@@ -3901,7 +4286,7 @@ function AppPanel() {
           }
         );
       case "pipeline-execution":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineExecution,
           {
             pipelineId: nav.innerParams.pipelineId ?? "",
@@ -3913,7 +4298,7 @@ function AppPanel() {
           }
         );
       case "self-update":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           SelfUpdate,
           {
             onBack: nav.goBackInner,
@@ -3925,7 +4310,7 @@ function AppPanel() {
           }
         );
       case "tool-status":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ToolStatus,
           {
             onBack: nav.goBackInner,
@@ -3936,7 +4321,7 @@ function AppPanel() {
           }
         );
       case "project-config":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ProjectConfig,
           {
             onBack: nav.goBackInner,
@@ -3947,17 +4332,17 @@ function AppPanel() {
           }
         );
       default:
-        return /* @__PURE__ */ jsxs31(Text30, { color: "red", children: [
+        return /* @__PURE__ */ jsxs32(Text33, { color: "red", children: [
           "Unknown screen: ",
           nav.innerScreen
         ] });
     }
   };
   if (modal.isOpen) {
-    return /* @__PURE__ */ jsx31(Box29, { flexDirection: "column", width, height, children: /* @__PURE__ */ jsx31(Modal, { title: modal.modalTitle, width, height, children: modal.modalContent }) });
+    return /* @__PURE__ */ jsx33(Box30, { flexDirection: "column", width, height, children: /* @__PURE__ */ jsx33(Modal, { title: modal.modalTitle, width, height, children: modal.modalContent }) });
   }
-  const header = /* @__PURE__ */ jsx31(GhostBanner, { width, compact: true });
-  const sidebar = /* @__PURE__ */ jsx31(
+  const header = /* @__PURE__ */ jsx33(GhostBanner, { width, compact: true });
+  const sidebar = /* @__PURE__ */ jsx33(
     Panel,
     {
       id: "sidebar",
@@ -3965,7 +4350,7 @@ function AppPanel() {
       width: Math.max(20, Math.min(35, Math.floor(width * 0.3))),
       height: Math.max(5, height - bannerHeight - 1),
       focused: focus.isSidebarFocused,
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx33(
         Sidebar,
         {
           items: sidebarItems,
@@ -3978,7 +4363,7 @@ function AppPanel() {
       )
     }
   );
-  const main2 = /* @__PURE__ */ jsx31(
+  const main2 = /* @__PURE__ */ jsx33(
     Panel,
     {
       id: "main",
@@ -3989,8 +4374,8 @@ function AppPanel() {
       children: renderMainContent()
     }
   );
-  const footer = /* @__PURE__ */ jsx31(PanelFooter, { hints: footerHints, width });
-  return /* @__PURE__ */ jsx31(
+  const footer = /* @__PURE__ */ jsx33(PanelFooter, { hints: footerHints, width });
+  return /* @__PURE__ */ jsx33(
     PanelLayout,
     {
       header,
@@ -5264,11 +5649,11 @@ Apply completed with ${errors.length} error(s).
       process.exit(result.exitCode ?? 0);
     }
     const AppComponent2 = parsed.classic ? AppClassic : AppPanel;
-    render(React19.createElement(AppComponent2));
+    render(React20.createElement(AppComponent2));
     return;
   }
   const AppComponent = parsed.classic ? AppClassic : AppPanel;
-  render(React19.createElement(AppComponent));
+  render(React20.createElement(AppComponent));
 }
 main().catch((error) => {
   const message = error instanceof Error ? error.message : String(error);