@polterware/polter 0.1.1 → 0.2.1

package/dist/index.js

@@ -24,14 +24,14 @@ import {
   runSupabaseCommand,
   savePipeline,
   writeProjectConfig
-} from "./chunk-TWWRDI3Q.js";
+} from "./chunk-3XNNC5AW.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 +403,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 +565,7 @@ function SelectList({
         {
           flexDirection: "column",
           borderStyle: "round",
-          borderColor: inkColors.accent,
+          borderColor: panelFocused ? inkColors.accent : panel.borderDim,
           borderDimColor: !hasSelectedRow && !isPinnedSection,
           paddingX: 1,
           children: [
@@ -723,7 +724,8 @@ function buildHomeItems({
   activeFeature,
   pinnedCommands,
   pinnedRuns,
-  showPinnedSection = true
+  showPinnedSection = true,
+  showFeatureHeader = true
 }) {
   const items = [];
   if (showPinnedSection && (pinnedRuns.length > 0 || pinnedCommands.length > 0)) {
@@ -736,15 +738,17 @@ 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
-  });
-  const toolOrder = { supabase: 0, vercel: 1, gh: 2, pulumi: 3 };
-  const toolIcons = { supabase: "\u{1F7E2}", vercel: "\u26AA", gh: "\u{1F535}", pulumi: "\u{1F7E3}" };
+  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();
   for (const cmd of activeFeature.commands) {
     const existing = grouped.get(cmd.tool) ?? [];
@@ -931,7 +935,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 +947,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 +959,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 +974,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 +999,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
@@ -997,13 +1012,13 @@ var toolColors = {
   supabase: "#3ECF8E",
   gh: "#58A6FF",
   vercel: "#FFFFFF",
-  pulumi: "#8B5CF6"
+  git: "#F05032"
 };
 var toolLabels = {
   supabase: "supabase",
   gh: "github",
   vercel: "vercel",
-  pulumi: "pulumi"
+  git: "git"
 };
 function ToolBadge({ tool }) {
   return /* @__PURE__ */ jsx7(Text7, { color: toolColors[tool], dimColor: true, children: toolLabels[tool] });
@@ -1073,11 +1088,6 @@ function buildCommandArgItems({
       label: "Custom args...",
       hint: "Type any arguments manually",
       kind: "action"
-    },
-    {
-      value: "__back__",
-      label: "\u2190 Back to menu",
-      kind: "action"
     }
   ];
 }
@@ -1120,25 +1130,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 +1164,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 +1188,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 +1247,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 })
@@ -1255,24 +1265,28 @@ function CustomCommand({
   onNavigate,
   onBack,
   width = 80,
+  height = 24,
   panelMode = false,
   isInputActive = true
 }) {
   const [phase, setPhase] = useState7("tool-select");
   const [selectedTool, setSelectedTool] = useState7("supabase");
   if (phase === "tool-select") {
-    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx9(Text9, { bold: true, color: inkColors.accent, children: "\u270F\uFE0F Custom Command" }) }),
-      /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "Select tool:" }),
+    const toolItems = [
+      { value: "__section__", label: "\u{1F6E0} Select Tool", kind: "header", selectable: false },
+      { value: "supabase", label: "Supabase CLI", hint: "supabase ...", kind: "action" },
+      { value: "gh", label: "GitHub CLI", hint: "gh ...", kind: "action" },
+      { value: "vercel", label: "Vercel CLI", hint: "vercel ...", kind: "action" },
+      { value: "git", label: "Git", hint: "git ...", kind: "action" },
+      ...!panelMode ? [{ value: "__back__", label: "\u2190 Back" }] : []
+    ];
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      !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,
         {
-          items: [
-            { value: "supabase", label: "Supabase CLI", hint: "supabase ..." },
-            { value: "gh", label: "GitHub CLI", hint: "gh ..." },
-            { value: "vercel", label: "Vercel CLI", hint: "vercel ..." },
-            { value: "__back__", label: "\u2190 Back" }
-          ],
+          items: toolItems,
           onSelect: (value) => {
             if (value === "__back__") {
               onBack();
@@ -1282,16 +1296,19 @@ function CustomCommand({
             setPhase("input");
           },
           onCancel: onBack,
-          width,
+          boxedSections: panelMode,
+          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", children: [
-    /* @__PURE__ */ jsxs8(Box8, { marginBottom: 1, gap: 1, children: [
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: panelMode ? 1 : 0, 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: [
         "(",
@@ -1312,7 +1329,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 })
@@ -1320,20 +1341,22 @@ 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,
   onSubmit,
-  onCancel
+  onCancel,
+  isInputActive = true,
+  arrowNavigation = false
 }) {
   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);
     }
@@ -1352,17 +1375,24 @@ function FlagToggle({
         return next;
       });
     }
-    if (key.return) {
+    if (key.return || arrowNavigation && key.rightArrow) {
       onSubmit(Array.from(selected));
     }
     if (key.escape && onCancel) {
       onCancel();
     }
-  });
+    if (arrowNavigation && key.leftArrow && onCancel) {
+      onCancel();
+    }
+  }, { isActive: isInputActive });
   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;
@@ -1388,7 +1418,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)` }) })
   ] });
 }
 
@@ -1400,6 +1430,7 @@ function FlagSelection({
   onNavigate,
   onBack,
   width = 80,
+  height = 24,
   panelMode = false,
   isInputActive = true
 }) {
@@ -1408,8 +1439,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,
@@ -1417,7 +1476,9 @@ function FlagSelection({
           const finalArgs = selectedFlags.length > 0 ? [...args, ...selectedFlags] : args;
           onNavigate("confirm-execute", { args: finalArgs, tool });
         },
-        onCancel: onBack
+        onCancel: onBack,
+        isInputActive,
+        arrowNavigation: panelMode
       }
     ),
     !panelMode && /* @__PURE__ */ jsx11(StatusBar, { hint: "Space toggle \xB7 Enter confirm \xB7 Esc back", width })
@@ -1425,33 +1486,44 @@ 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 useEffect5 } 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,
   defaultValue = true,
-  onConfirm
+  onConfirm,
+  onCancel,
+  isInputActive = true,
+  arrowNavigation = false
 }) {
-  useInput5((input2) => {
+  useInput6((input2, key) => {
+    if (key.escape && onCancel) {
+      onCancel();
+      return;
+    }
+    if (arrowNavigation && key.leftArrow && onCancel) {
+      onCancel();
+      return;
+    }
     if (input2 === "y" || input2 === "Y") {
       onConfirm(true);
     } else if (input2 === "n" || input2 === "N") {
@@ -1459,16 +1531,16 @@ function ConfirmPrompt({
     } else if (input2 === "\r") {
       onConfirm(defaultValue);
     }
-  });
+  }, { 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,
@@ -1480,7 +1552,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,
@@ -1488,14 +1560,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);
@@ -1511,7 +1651,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");
@@ -1519,7 +1660,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);
@@ -1540,21 +1681,71 @@ 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 cmdDisplay = `${tool} ${currentArgs.join(" ")}`;
   const runCommand2 = currentArgs.join(" ");
   useEffect5(() => {
@@ -1575,42 +1766,67 @@ function CommandExecution({
     }
   }, [phase, runCommand2, status]);
   if (phase === "confirm") {
-    return /* @__PURE__ */ jsx15(Box12, { flexDirection: "column", children: /* @__PURE__ */ jsx15(
-      ConfirmPrompt,
-      {
-        message: `Execute ${cmdDisplay}?`,
-        defaultValue: true,
-        onConfirm: (confirmed) => {
-          if (confirmed) {
-            setPhase("running");
-          } else {
-            onBack();
-          }
+    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,
+      {
+        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", children: [
-      /* @__PURE__ */ jsx15(Divider, { 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 }),
-      /* @__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", children: [
-      /* @__PURE__ */ jsx15(Divider, { 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?",
@@ -1621,34 +1837,75 @@ function CommandExecution({
               setPinMessage("Exact command pinned to Pinned Runs.");
             }
             setPhase("success");
-          }
+          },
+          onCancel: () => setPhase("success"),
+          isInputActive,
+          arrowNavigation: panelMode
         }
       )
     ] });
   }
   if (phase === "success") {
-    return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx15(Divider, { 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 }) }),
-      /* @__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: [{ value: "__back__", label: "\u2190 Back to menu" }],
-          onSelect: onBack,
-          onCancel: onBack,
-          width,
+          items: successItems,
+          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
+          arrowNavigation: 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) {
@@ -1659,54 +1916,82 @@ function CommandExecution({
       });
     }
   }
-  errorItems.push(
-    {
-      value: "copy",
-      label: "\u{1F4CB} Copy command to clipboard"
-    },
-    { value: "menu", label: "\u2190 Return to main menu" },
-    { value: "exit", label: "\u{1F6AA} Exit Polter" }
-  );
-  return /* @__PURE__ */ jsxs14(Box12, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Divider, { 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: "copy",
+    label: "\u{1F4CB} Copy command to clipboard"
+  });
+  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 - 16 - (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);
@@ -1725,7 +2010,7 @@ function CommandExecution({
               await copyToClipboard(cmdDisplay);
               break;
             case "menu":
-              onBack();
+              (onHome ?? onBack)();
               break;
             case "exit":
               onExit();
@@ -1733,19 +2018,22 @@ function CommandExecution({
           }
         },
         onCancel: onBack,
-        width,
+        boxedSections: panelMode,
+        width: panelMode ? Math.max(20, width - 4) : width,
+        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 useEffect6, 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`];
@@ -1756,20 +2044,23 @@ function SelfUpdate({
   onBack,
   onExit,
   width = 80,
+  height = 24,
   panelMode = false,
   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);
+  const { status, result, run, reset } = useCommand("npm", updateCwd, {
+    quiet: panelMode
+  });
   useEffect6(() => {
     if (phase === "running" && status === "idle") {
       run(updateArgs);
@@ -1784,24 +2075,28 @@ function SelfUpdate({
     }
   }, [phase, status]);
   if (phase === "target") {
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx16(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsx16(Text15, { bold: true, children: "Choose where to update Polter." }) }),
-      /* @__PURE__ */ jsx16(
+    const targetItems = [
+      { value: "__section__", label: "\u{1F4E6} Update Target", kind: "header", selectable: false },
+      {
+        value: "repository",
+        label: "Current repository",
+        hint: "Pin the latest version in package.json",
+        kind: "action"
+      },
+      {
+        value: "global",
+        label: "Global install",
+        hint: "Update the shared version available in PATH",
+        kind: "action"
+      },
+      ...!panelMode ? [{ value: "back", label: "\u2190 Back to menu" }] : []
+    ];
+    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: [
-            {
-              value: "repository",
-              label: "Current repository",
-              hint: "Pin the latest version in package.json"
-            },
-            {
-              value: "global",
-              label: "Global install",
-              hint: "Update the shared version available in PATH"
-            },
-            { value: "back", label: "\u2190 Back to menu" }
-          ],
+          items: targetItems,
           onSelect: (value) => {
             if (value === "back") {
               onBack();
@@ -1812,20 +2107,23 @@ function SelfUpdate({
             setPhase("confirm");
           },
           onCancel: onBack,
-          width,
+          boxedSections: panelMode,
+          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", children: [
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs16(Box14, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: [
+      /* @__PURE__ */ jsx18(
         ConfirmPrompt,
         {
           message: `Run ${updateDisplay}?`,
@@ -1841,12 +2139,21 @@ function SelfUpdate({
               return;
             }
             onBack();
-          }
+          },
+          onCancel: () => {
+            if (repositoryRoot) {
+              setPhase("target");
+            } else {
+              onBack();
+            }
+          },
+          isInputActive,
+          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
         ] })
@@ -1854,38 +2161,49 @@ function SelfUpdate({
     ] });
   }
   if (phase === "running") {
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx16(Divider, { 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 }),
-      /* @__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") {
-    return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx16(Divider, { 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!" })
+    const successItems = [
+      { value: "__section__", label: "\u2705 Update Complete", kind: "header", selectable: false },
+      ...!panelMode ? [{ value: "__back__", label: "\u2190 Back to menu", kind: "action" }] : [],
+      { value: "__exit__", label: "\u{1F6AA} Exit Polter", kind: "action" }
+    ];
+    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: [
-            { value: "__back__", label: "\u2190 Back to menu" },
-            { value: "__exit__", label: "\u{1F6AA} Exit Polter" }
-          ],
+          items: successItems,
           onSelect: (value) => {
             if (value === "__exit__") {
               onExit();
@@ -1894,55 +2212,69 @@ function SelfUpdate({
             onBack();
           },
           onCancel: onBack,
-          width,
+          boxedSections: panelMode,
+          width: panelMode ? Math.max(20, width - 4) : width,
+          maxVisible: panelMode ? Math.max(6, height - 6) : void 0,
           isInputActive,
-          arrowNavigation: panelMode
+          arrowNavigation: panelMode,
+          panelFocused: isInputActive
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs15(Box13, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx16(Divider, { 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" })
+  const errorItems = [
+    { value: "__section__", label: "\u{1F527} Recovery Options", kind: "header", selectable: false },
+    { value: "retry", label: "\u{1F504} Retry update", kind: "action" },
+    ...repositoryRoot ? [{ value: "target", label: "\u2194 Choose update target", kind: "action" }] : [],
+    ...!panelMode ? [{ value: "menu", label: "\u2190 Return to main menu", kind: "action" }] : [],
+    { value: "exit", label: "\u{1F6AA} Exit Polter", kind: "action" }
+  ];
+  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
       ] })
     ] }),
-    /* @__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: [
-          { value: "retry", label: "\u{1F504} Retry update" },
-          ...repositoryRoot ? [{ value: "target", label: "\u2194 Choose update target" }] : [],
-          { value: "menu", label: "\u2190 Return to main menu" },
-          { value: "exit", label: "\u{1F6AA} Exit Polter" }
-        ],
+        items: errorItems,
         onSelect: (value) => {
           switch (value) {
             case "retry":
@@ -1962,50 +2294,78 @@ function SelfUpdate({
           }
         },
         onCancel: onBack,
-        width,
+        boxedSections: panelMode,
+        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";
-var toolIds = ["supabase", "gh", "vercel", "pulumi"];
-function ToolStatus({ onBack, width = 80, panelMode = false, isInputActive = true }) {
+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), []);
-  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" })
+  if (panelMode) {
+    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__ */ 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" }],
         onSelect: onBack,
         onCancel: onBack,
         width,
-        isInputActive,
-        arrowNavigation: panelMode
+        isInputActive
       }
     ) }),
-    !panelMode && /* @__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 { useState as useState13, useCallback as useCallback3 } from "react";
 import { useStdin } from "ink";
 
 // src/lib/editor.ts
@@ -2056,7 +2416,7 @@ function openInEditor(filePath) {
 // src/hooks/useEditor.ts
 function useEditor() {
   const { setRawMode } = useStdin();
-  const [isEditing, setIsEditing] = useState12(false);
+  const [isEditing, setIsEditing] = useState13(false);
   const openEditor = useCallback3(async (filePath) => {
     const editor = resolveEditor();
     const terminal = isTerminalEditor(editor.command);
@@ -2077,36 +2437,36 @@ 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,
+  height = 24,
   panelMode = false,
   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", children: [
-      /* @__PURE__ */ jsx18(Text17, { color: "red", children: "No package.json found. Run from a project directory." }),
-      /* @__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" }],
           onSelect: onBack,
           onCancel: onBack,
           width,
-          isInputActive,
-          arrowNavigation: panelMode
+          isInputActive
         }
       )
     ] });
   }
   if (phase === "edit-supabase-ref") {
-    return /* @__PURE__ */ jsx18(Box15, { flexDirection: "column", children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "Supabase project ref:",
@@ -2124,12 +2484,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", children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "Vercel project ID:",
@@ -2147,12 +2511,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", children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(Box16, { flexDirection: "column", paddingX: panelMode ? 1 : 0, children: /* @__PURE__ */ jsx20(
       TextPrompt,
       {
         label: "GitHub repo (owner/name):",
@@ -2170,88 +2538,133 @@ function ProjectConfig({
           setFeedback("GitHub repo updated");
           setPhase("overview");
         },
-        onCancel: () => setPhase("overview")
+        onCancel: () => setPhase("overview"),
+        arrowNavigation: panelMode,
+        isInputActive,
+        boxed: panelMode,
+        focused: 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: [
+  const configItems = [
+    { value: "__section_current__", label: "\u{1F4CB} Current Values", kind: "header", selectable: false },
+    { value: "__info_supabase__", label: `Supabase ref: ${config2.tools.supabase?.projectRef ?? "not set"}`, kind: "header", selectable: false },
+    { value: "__info_vercel__", label: `Vercel ID: ${config2.tools.vercel?.projectId ?? "not set"}`, kind: "header", selectable: false },
+    { value: "__info_gh__", label: `GitHub repo: ${config2.tools.gh?.repo ?? "not set"}`, kind: "header", selectable: false },
+    { value: "__section_actions__", label: "\u26A1 Actions", kind: "header", selectable: false },
+    { value: "supabase", label: "Set Supabase project ref", kind: "action" },
+    { value: "vercel", label: "Set Vercel project ID", kind: "action" },
+    { value: "gh", label: "Set GitHub repo", kind: "action" },
+    { value: "editor", label: "Open config in editor", kind: "action" },
+    ...!panelMode ? [{ value: "__back__", label: "\u2190 Back" }] : []
+  ];
+  const flatItems = [
+    { value: "supabase", label: "Set Supabase project ref" },
+    { value: "vercel", label: "Set Vercel project ID" },
+    { value: "gh", label: "Set GitHub repo" },
+    { value: "editor", label: "Open config in editor" },
+    ...!panelMode ? [{ value: "__back__", label: "\u2190 Back" }] : []
+  ];
+  const handleSelect = (value) => {
+    switch (value) {
+      case "supabase":
+        setPhase("edit-supabase-ref");
+        break;
+      case "vercel":
+        setPhase("edit-vercel-id");
+        break;
+      case "gh":
+        setPhase("edit-gh-repo");
+        break;
+      case "editor":
+        openEditor(configPath.file).then(() => {
+          try {
+            const reloaded = getOrCreateProjectConfig();
+            setConfig(reloaded);
+            setFeedback("Config reloaded from file");
+          } catch {
+            setFeedback("Warning: could not parse config after editing");
+          }
+        });
+        break;
+      default:
+        onBack();
+    }
+  };
+  if (panelMode) {
+    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__ */ jsx20(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsxs18(Text20, { color: inkColors.accent, children: [
+        "\u2713 ",
+        feedback
+      ] }) }),
+      /* @__PURE__ */ jsx20(
+        SelectList,
+        {
+          items: configItems,
+          onSelect: handleSelect,
+          onCancel: onBack,
+          boxedSections: true,
+          width: Math.max(20, width - 4),
+          maxVisible: Math.max(6, height - 6),
+          isInputActive,
+          arrowNavigation: true,
+          panelFocused: isInputActive
+        }
+      )
+    ] });
+  }
+  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: [
-          { value: "supabase", label: "Set Supabase project ref" },
-          { value: "vercel", label: "Set Vercel project ID" },
-          { value: "gh", label: "Set GitHub repo" },
-          { value: "editor", label: "Open config in editor" },
-          { value: "__back__", label: "\u2190 Back" }
-        ],
-        onSelect: (value) => {
-          switch (value) {
-            case "supabase":
-              setPhase("edit-supabase-ref");
-              break;
-            case "vercel":
-              setPhase("edit-vercel-id");
-              break;
-            case "gh":
-              setPhase("edit-gh-repo");
-              break;
-            case "editor":
-              openEditor(configPath.file).then(() => {
-                try {
-                  const reloaded = getOrCreateProjectConfig();
-                  setConfig(reloaded);
-                  setFeedback("Config reloaded from file");
-                } catch {
-                  setFeedback("Warning: could not parse config after editing");
-                }
-              });
-              break;
-            default:
-              onBack();
-          }
-        },
+        items: flatItems,
+        onSelect: handleSelect,
         onCancel: onBack,
         width,
         isInputActive,
         arrowNavigation: panelMode
       }
     ),
-    !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,
   width = 80,
+  height = 24,
   panelMode = false,
   isInputActive = true
 }) {
@@ -2299,17 +2712,19 @@ function PipelineList({
       icon: "\u2795",
       kind: "action"
     });
-    list.push({
-      id: "action-back",
-      value: "__back__",
-      label: "\u2190 Back",
-      kind: "action"
-    });
+    if (!panelMode) {
+      list.push({
+        id: "action-back",
+        value: "__back__",
+        label: "\u2190 Back",
+        kind: "action"
+      });
+    }
     return list;
-  }, [pipelines]);
-  return /* @__PURE__ */ jsxs18(Box16, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx19(Box16, { marginBottom: 1, children: /* @__PURE__ */ jsx19(Text18, { bold: true, color: inkColors.accent, children: "\u{1F517} Pipelines" }) }),
-    /* @__PURE__ */ jsx19(
+  }, [pipelines, panelMode]);
+  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,
@@ -2325,19 +2740,22 @@ function PipelineList({
           onNavigate("pipeline-execution", { pipelineId: value });
         },
         onCancel: onBack,
-        width,
+        boxedSections: panelMode,
+        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;
@@ -2350,13 +2768,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:",
@@ -2369,10 +2787,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") {
@@ -2405,26 +2827,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,
@@ -2456,12 +2878,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 = [
@@ -2484,18 +2908,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,
@@ -2520,22 +2944,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 useEffect7, 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: "",
@@ -2555,21 +2981,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",
@@ -2581,8 +3007,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,
@@ -2593,14 +3019,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,
@@ -2610,7 +3036,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,
@@ -2623,9 +3049,9 @@ function PipelineExecution({
     () => getAllPipelines().find((p) => p.id === pipelineId),
     [pipelineId]
   );
-  const [phase, setPhase] = useState15("running");
-  const [progress, setProgress] = useState15(null);
-  const [results, setResults] = useState15([]);
+  const [phase, setPhase] = useState16("running");
+  const [progress, setProgress] = useState16(null);
+  const [results, setResults] = useState16([]);
   useEffect7(() => {
     if (!pipeline) return;
     executePipeline(pipeline, (p) => {
@@ -2639,20 +3065,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
         }
       )
     ] });
@@ -2667,15 +3095,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,
@@ -2684,8 +3112,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),
@@ -2694,17 +3122,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: [
@@ -2719,13 +3147,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",
@@ -2736,7 +3166,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();
@@ -2751,9 +3181,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 ?? "",
@@ -2764,9 +3194,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 ?? [],
@@ -2778,28 +3208,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 ?? "",
@@ -2809,21 +3243,21 @@ 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";
+import React19 from "react";
+import { Box as Box30, Text as Text33, useApp as useApp2, useInput as useInput9 } from "ink";
 
 // src/hooks/useFullscreen.ts
 import { useEffect as useEffect8 } from "react";
@@ -2841,10 +3275,10 @@ function useFullscreen() {
 }
 
 // src/hooks/usePanelNavigation.ts
-import { useState as useState16, useCallback as useCallback4 } from "react";
+import { useState as useState17, useCallback as useCallback4 } from "react";
 function usePanelNavigation() {
-  const [state, setState] = useState16({
-    view: "feature",
+  const [state, setState] = useState17({
+    view: "pipelines",
     featureId: "database",
     innerScreen: "home",
     innerParams: {},
@@ -2922,19 +3356,32 @@ function usePanelNavigation() {
       innerStack: []
     }));
   }, []);
+  const switchViewAndNavigate = useCallback4(
+    (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 useCallback5 } from "react";
 function usePanelFocus() {
-  const [focused, setFocused] = useState17("sidebar");
+  const [focused, setFocused] = useState18("sidebar");
   const toggleFocus = useCallback5(() => {
     setFocused((prev) => prev === "sidebar" ? "main" : "sidebar");
   }, []);
@@ -2952,36 +3399,35 @@ function usePanelFocus() {
 
 // src/hooks/useSidebarItems.ts
 import { useMemo as useMemo8 } from "react";
-function useSidebarItems(hasPins = false) {
+function useSidebarItems() {
   return useMemo8(() => {
     const items = [];
-    if (hasPins) {
-      items.push({ id: "pinned", label: "Pinned", icon: "\u{1F4CC}", type: "action" });
-      items.push({ id: "__sep_pinned__", label: "---", icon: "", type: "separator" });
-    }
+    items.push({ id: "__sep_workflows__", label: "---", icon: "", type: "separator", sectionTitle: "Workflows" });
+    items.push({ id: "pipelines", label: "Pipelines", icon: "\u{1F517}", type: "action", section: "workflows" });
+    items.push({ id: "pinned", label: "Pinned", icon: "\u{1F4CC}", type: "action", section: "workflows" });
+    items.push({ id: "custom-command", label: "Custom Cmd", icon: "\u270F\uFE0F", type: "action", section: "workflows" });
+    items.push({ id: "__sep_features__", label: "---", icon: "", type: "separator", sectionTitle: "Features" });
     for (const feature of features) {
       items.push({
         id: feature.id,
         label: feature.label,
         icon: feature.icon,
-        type: "feature"
+        type: "feature",
+        section: "features"
       });
     }
-    items.push({ id: "__sep__", label: "---", icon: "", type: "separator" });
-    items.push({ id: "custom-command", label: "Custom Cmd", icon: "\u270F\uFE0F", type: "action" });
-    items.push({ id: "pipelines", label: "Pipelines", icon: "\u{1F517}", type: "action" });
-    items.push({ id: "tool-status", label: "Tool Status", icon: "\u{1F527}", type: "action" });
-    items.push({ id: "config", label: "Config", icon: "\u2699\uFE0F", type: "action" });
-    items.push({ id: "self-update", label: "Update", icon: "\u2B06\uFE0F", type: "action" });
-    items.push({ id: "exit", label: "Exit", icon: "\u{1F6AA}", type: "action" });
+    items.push({ id: "__sep_system__", label: "---", icon: "", type: "separator", sectionTitle: "System" });
+    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" });
     return items;
-  }, [hasPins]);
+  }, []);
 }
 
 // src/hooks/useModal.ts
-import { useState as useState18, useCallback as useCallback6 } from "react";
+import { useState as useState19, useCallback as useCallback6 } from "react";
 function useModal() {
-  const [state, setState] = useState18(null);
+  const [state, setState] = useState19(null);
   const openModal = useCallback6((content, title) => {
     setState({ content, title });
   }, []);
@@ -2998,8 +3444,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,
@@ -3014,19 +3460,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,
@@ -3036,8 +3482,8 @@ function Panel({
   children
 }) {
   const borderColor = focused ? panel.borderFocused : panel.borderDim;
-  return /* @__PURE__ */ jsxs25(
-    Box23,
+  return /* @__PURE__ */ jsxs26(
+    Box24,
     {
       flexDirection: "column",
       width,
@@ -3046,21 +3492,34 @@ 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;
+  for (const item of items) {
+    if (item.type === "separator" && item.sectionTitle) {
+      current = { title: item.sectionTitle, items: [] };
+      groups.push(current);
+    } else if (current) {
+      current.items.push(item);
+    }
+  }
+  return groups;
+}
 function Sidebar({
   items,
   selectedId,
@@ -3074,12 +3533,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) => {
@@ -3106,39 +3566,57 @@ function Sidebar({
     },
     { isActive: isFocused }
   );
-  let selectableIdx = 0;
-  return /* @__PURE__ */ jsx26(Box24, { flexDirection: "column", paddingX: 1, children: items.map((item) => {
-    if (item.type === "separator") {
-      return /* @__PURE__ */ jsx26(Box24, { children: /* @__PURE__ */ jsx26(Text25, { dimColor: true, children: symbols.horizontal.repeat(10) }) }, item.id);
-    }
-    const thisIdx = selectableIdx;
-    selectableIdx++;
-    const isCursor = isFocused && thisIdx === cursorIdx;
-    const isActive = item.id === selectedId;
-    return /* @__PURE__ */ jsx26(Box24, { gap: 0, children: /* @__PURE__ */ jsxs26(
-      Text25,
+  let flatIdx = 0;
+  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__ */ jsxs27(
+      Box25,
       {
-        color: isCursor ? inkColors.accent : isActive ? inkColors.accent : void 0,
-        bold: isCursor || isActive,
-        dimColor: !isCursor && !isActive,
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor,
+        paddingX: 1,
         children: [
-          isCursor ? `${symbols.pointerActive} ` : "  ",
-          item.icon,
-          " ",
-          item.label
+          /* @__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__ */ jsx28(Box25, { gap: 0, children: /* @__PURE__ */ jsxs27(
+              Text28,
+              {
+                color: isCursor ? inkColors.accent : isActive ? inkColors.accent : void 0,
+                bold: isCursor || isActive,
+                dimColor: !isCursor && !isActive,
+                children: [
+                  isCursor ? `${symbols.pointerActive} ` : "  ",
+                  item.icon,
+                  " ",
+                  item.label
+                ]
+              }
+            ) }, item.id);
+          })
         ]
-      }
-    ) }, item.id);
+      },
+      section.title
+    );
+    return rendered;
   }) });
 }
 
 // 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
     ] })
@@ -3146,8 +3624,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,
@@ -3158,10 +3636,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,
@@ -3170,8 +3648,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 })
         ]
       }
     ) })
@@ -3179,9 +3657,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,
@@ -3192,9 +3670,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);
@@ -3205,7 +3683,8 @@ function FeatureCommands({
       activeFeature: feature,
       pinnedCommands,
       pinnedRuns,
-      showPinnedSection: false
+      showPinnedSection: false,
+      showFeatureHeader: false
     }),
     [feature, pinnedCommands, pinnedRuns]
   );
@@ -3262,17 +3741,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,
@@ -3283,16 +3757,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,
@@ -3301,9 +3776,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);
@@ -3366,18 +3841,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,
@@ -3388,21 +3859,76 @@ 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",
+  "confirm-execute": "Execute",
+  "command-execution": "Execute",
+  "custom-command": "Custom Cmd",
+  "pipeline-list": "Pipelines",
+  "pipeline-builder": "Builder",
+  "pipeline-execution": "Run",
+  "self-update": "Update",
+  "tool-status": "Status",
+  "project-config": "Config"
+};
+function buildBreadcrumb(nav) {
+  let base;
+  switch (nav.view) {
+    case "feature": {
+      const feat = getFeatureById(nav.featureId);
+      base = feat ? `${feat.icon} ${feat.label}` : nav.featureId;
+      break;
+    }
+    case "pinned":
+      base = "\u{1F4CC} Pinned";
+      break;
+    case "custom-command":
+      base = "\u270F\uFE0F Custom Cmd";
+      break;
+    case "pipelines":
+      base = "\u{1F517} Pipelines";
+      break;
+    case "tool-status":
+      base = "\u{1F527} Status";
+      break;
+    case "config":
+      base = "\u2699\uFE0F Config";
+      break;
+    case "self-update":
+      base = "\u2B06\uFE0F Update";
+      break;
+    default:
+      base = nav.view;
+  }
+  if (nav.innerScreen === "home") {
+    return base;
+  }
+  const parts = [base];
+  for (const entry of nav.innerStack) {
+    if (entry.screen !== "home") {
+      parts.push(screenLabels[entry.screen] ?? entry.screen);
+    }
+  }
+  parts.push(screenLabels[nav.innerScreen] ?? nav.innerScreen);
+  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() {
@@ -3411,18 +3937,10 @@ function AppPanel() {
   const { exit } = useApp2();
   const nav = usePanelNavigation();
   const focus = usePanelFocus();
-  const [hasPins, setHasPins] = React18.useState(
-    () => getPinnedCommands().length > 0 || getPinnedRuns().length > 0
-  );
-  const sidebarItems = useSidebarItems(hasPins);
+  const sidebarItems = useSidebarItems();
   const modal = useModal();
-  const refreshPins = React18.useCallback(() => {
-    const newHasPins = getPinnedCommands().length > 0 || getPinnedRuns().length > 0;
-    setHasPins(newHasPins);
-    if (!newHasPins && nav.view === "pinned") {
-      nav.selectSidebarItem("database");
-    }
-  }, [nav.view, nav.selectSidebarItem]);
+  const refreshPins = React19.useCallback(() => {
+  }, []);
   const singlePanel = width < 60 || height < 15;
   const handleExit = () => {
     process.stdout.write(
@@ -3430,7 +3948,7 @@ function AppPanel() {
     );
     exit();
   };
-  useInput7((input2, key) => {
+  useInput9((input2, key) => {
     if (modal.isOpen) {
       if (key.escape || input2 === "q") {
         modal.closeModal();
@@ -3455,37 +3973,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"
           ] })
         ] }),
@@ -3535,7 +4053,7 @@ function AppPanel() {
     }
     switch (nav.view) {
       case "pinned":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PinnedCommands,
           {
             onNavigate: nav.navigateInner,
@@ -3549,12 +4067,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,
@@ -3569,60 +4087,65 @@ function AppPanel() {
         );
       }
       case "custom-command":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CustomCommand,
           {
             onNavigate: nav.navigateInner,
             onBack: focus.focusSidebar,
             width: mainContentWidth - 2,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: focus.isMainFocused
           }
         );
       case "pipelines":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineList,
           {
             onNavigate: nav.navigateInner,
             onBack: focus.focusSidebar,
             width: mainContentWidth - 2,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: focus.isMainFocused
           }
         );
       case "tool-status":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ToolStatus,
           {
             onBack: focus.focusSidebar,
             width: mainContentWidth - 2,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: focus.isMainFocused
           }
         );
       case "config":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ProjectConfig,
           {
             onBack: focus.focusSidebar,
             width: mainContentWidth - 2,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: focus.isMainFocused
           }
         );
       case "self-update":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           SelfUpdate,
           {
             onBack: focus.focusSidebar,
             onExit: handleExit,
             width: mainContentWidth - 2,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: focus.isMainFocused
           }
         );
       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 = () => {
@@ -3630,7 +4153,7 @@ function AppPanel() {
     const w = mainContentWidth - 2;
     switch (nav.innerScreen) {
       case "command-args":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CommandArgs,
           {
             command: nav.innerParams.command ?? "",
@@ -3643,18 +4166,19 @@ function AppPanel() {
           }
         );
       case "custom-command":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           CustomCommand,
           {
             onNavigate: nav.navigateInner,
             onBack: nav.goBackInner,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       case "flag-selection":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           FlagSelection,
           {
             args: nav.innerParams.args ?? [],
@@ -3662,37 +4186,45 @@ 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,
             onBack: nav.goBackInner,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       case "pipeline-builder":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineBuilder,
           {
             onBack: nav.goBackInner,
@@ -3703,7 +4235,7 @@ function AppPanel() {
           }
         );
       case "pipeline-execution":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           PipelineExecution,
           {
             pipelineId: nav.innerParams.pipelineId ?? "",
@@ -3715,48 +4247,51 @@ function AppPanel() {
           }
         );
       case "self-update":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           SelfUpdate,
           {
             onBack: nav.goBackInner,
             onExit: handleExit,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       case "tool-status":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ToolStatus,
           {
             onBack: nav.goBackInner,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       case "project-config":
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           ProjectConfig,
           {
             onBack: nav.goBackInner,
             width: w,
+            height: mainContentHeight,
             panelMode: true,
             isInputActive: isActive
           }
         );
       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",
@@ -3764,7 +4299,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,
@@ -3777,19 +4312,19 @@ function AppPanel() {
       )
     }
   );
-  const main2 = /* @__PURE__ */ jsx31(
+  const main2 = /* @__PURE__ */ jsx33(
     Panel,
     {
       id: "main",
-      title: nav.view === "feature" ? getFeatureById(nav.featureId)?.label : nav.view === "pinned" ? "Pinned" : nav.view,
+      title: buildBreadcrumb(nav),
       width: mainContentWidth,
       height: Math.max(5, height - bannerHeight - 1),
       focused: focus.isMainFocused,
       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,
@@ -3832,11 +4367,17 @@ function parseCliArgs(argv) {
   if (argv_[0] === "pipeline" && argv_[1] === "run" && argv_[2]) {
     return { mode: "pipeline-run", options: {}, pipelineName: argv_[2] };
   }
-  if (argv_[0] === "mcp" && argv_[1] === "install") {
-    let mcpScope = "local";
-    if (argv_.includes("--project")) mcpScope = "project";
-    else if (argv_.includes("--global")) mcpScope = "user";
-    return { mode: "mcp-install", options: {}, mcpScope };
+  if (argv_[0] === "mcp") {
+    const sub = argv_[1];
+    if (sub === "status") {
+      return { mode: "mcp", options: {}, mcpAction: "status" };
+    }
+    if (sub === "install" || sub === "update" || sub === "remove") {
+      let mcpScope = "local";
+      if (argv_.includes("--project")) mcpScope = "project";
+      else if (argv_.includes("--global")) mcpScope = "user";
+      return { mode: "mcp", options: {}, mcpAction: sub, mcpScope };
+    }
   }
   if (argv_[0] === "config") {
     const edit = argv_.includes("--edit");
@@ -3925,6 +4466,9 @@ function printCliHelp() {
       "  polter mcp install               Install Polter MCP server into Claude Code (local scope)",
       "  polter mcp install --project     Install for this project only (shared via repo)",
       "  polter mcp install --global      Install globally for all projects",
+      "  polter mcp update                Update MCP server to latest version",
+      "  polter mcp status                Show MCP registration and version info",
+      "  polter mcp remove                Remove MCP server registration",
       "",
       "  polter app setup ops [--path <dir>] [--create-project|--use-existing-project] [--yes]",
       "  polter app link ops [--path <dir>] [--relink]",
@@ -4750,8 +5294,10 @@ import { spawnSync as spawnSync2 } from "child_process";
 import { readFileSync as readFileSync2, writeFileSync as writeFileSync2, mkdirSync as mkdirSync2, existsSync as existsSync2 } from "fs";
 import { join as join3 } from "path";
 import { homedir as homedir2 } from "os";
+import { createRequire as createRequire2 } from "module";
 import pc4 from "picocolors";
-var MCP_ARGS = ["npx", "-y", "-p", "@polterware/polter", "polter-mcp"];
+var require3 = createRequire2(import.meta.url);
+var MCP_ARGS = ["npx", "-y", "-p", "@polterware/polter@latest", "polter-mcp"];
 var SCOPE_LABELS = {
   local: "local (this machine)",
   project: "project (shared via repo)",
@@ -4789,7 +5335,7 @@ function tryManualInstall(scope) {
   const mcpServers = settings.mcpServers ?? {};
   mcpServers.polter = {
     command: "npx",
-    args: ["-y", "-p", "@polterware/polter", "polter-mcp"]
+    args: ["-y", "-p", "@polterware/polter@latest", "polter-mcp"]
   };
   settings.mcpServers = mcpServers;
   writeFileSync2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
@@ -4815,11 +5361,93 @@ async function installMcpServer(scope) {
     process.stdout.write(pc4.green("\n  Done! Restart Claude Code to use Polter tools.\n"));
   } else {
     process.stderr.write(pc4.red("\n  Failed to install. Add manually:\n\n"));
-    process.stderr.write(`  ${pc4.dim(JSON.stringify({ mcpServers: { polter: { command: "npx", args: ["-y", "-p", "@polterware/polter", "polter-mcp"] } } }, null, 2))}
+    process.stderr.write(`  ${pc4.dim(JSON.stringify({ mcpServers: { polter: { command: "npx", args: ["-y", "-p", "@polterware/polter@latest", "polter-mcp"] } } }, null, 2))}
 `);
     process.exit(1);
   }
 }
+async function removeMcpServer(scope) {
+  process.stdout.write(pc4.bold(`Removing Polter MCP server \u2014 ${SCOPE_LABELS[scope]}
+
+`));
+  if (commandExists("claude")) {
+    const result = spawnSync2("claude", ["mcp", "remove", "-s", scope, "polter"], {
+      stdio: "inherit",
+      shell: true
+    });
+    if (result.status === 0) {
+      process.stdout.write(pc4.green("\n  Done! Polter MCP server removed.\n"));
+      return;
+    }
+    process.stdout.write(pc4.yellow("  'claude mcp remove' failed, falling back to manual removal...\n\n"));
+  }
+  const settingsPath = getSettingsPath(scope);
+  if (!existsSync2(settingsPath)) {
+    process.stdout.write(pc4.yellow("  No settings file found. Nothing to remove.\n"));
+    return;
+  }
+  let settings;
+  try {
+    settings = JSON.parse(readFileSync2(settingsPath, "utf-8"));
+  } catch {
+    process.stderr.write(pc4.red(`  Failed to parse ${settingsPath}
+`));
+    process.exit(1);
+    return;
+  }
+  const mcpServers = settings.mcpServers;
+  if (!mcpServers?.polter) {
+    process.stdout.write(pc4.yellow("  Polter MCP server not found in settings. Nothing to remove.\n"));
+    return;
+  }
+  delete mcpServers.polter;
+  settings.mcpServers = mcpServers;
+  writeFileSync2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+  process.stdout.write(pc4.green("  Done! Polter MCP server removed.\n"));
+}
+async function mcpStatus() {
+  process.stdout.write(pc4.bold("Polter MCP Server Status\n\n"));
+  const pkg = require3("../../package.json");
+  process.stdout.write(`  Installed version: ${pc4.cyan(pkg.version)}
+`);
+  const latestResult = spawnSync2("npm", ["view", "@polterware/polter", "version"], {
+    encoding: "utf-8",
+    shell: true,
+    timeout: 1e4
+  });
+  const latest = latestResult.stdout?.trim();
+  if (latest) {
+    const upToDate = latest === pkg.version;
+    process.stdout.write(`  Latest version:    ${upToDate ? pc4.green(latest) : pc4.yellow(`${latest} (update available)`)}
+`);
+  }
+  process.stdout.write("\n");
+  const scopes = [
+    { label: "Project (.mcp.json)", path: join3(process.cwd(), ".mcp.json"), key: "project" },
+    { label: "User (~/.claude/settings.json)", path: join3(homedir2(), ".claude", "settings.json"), key: "user" }
+  ];
+  for (const scope of scopes) {
+    if (!existsSync2(scope.path)) {
+      process.stdout.write(`  ${scope.label}: ${pc4.dim("not found")}
+`);
+      continue;
+    }
+    try {
+      const settings = JSON.parse(readFileSync2(scope.path, "utf-8"));
+      const mcpServers = settings.mcpServers;
+      if (mcpServers?.polter) {
+        process.stdout.write(`  ${scope.label}: ${pc4.green("registered")}
+`);
+      } else {
+        process.stdout.write(`  ${scope.label}: ${pc4.dim("not registered")}
+`);
+      }
+    } catch {
+      process.stdout.write(`  ${scope.label}: ${pc4.red("error reading file")}
+`);
+    }
+  }
+}
 
 // src/index.tsx
 import pc5 from "picocolors";
@@ -4829,8 +5457,20 @@ async function main() {
     printCliHelp();
     return;
   }
-  if (parsed.mode === "mcp-install") {
-    await installMcpServer(parsed.mcpScope ?? "local");
+  if (parsed.mode === "mcp") {
+    const scope = parsed.mcpScope ?? "local";
+    switch (parsed.mcpAction) {
+      case "install":
+      case "update":
+        await installMcpServer(scope);
+        break;
+      case "remove":
+        await removeMcpServer(scope);
+        break;
+      case "status":
+        await mcpStatus();
+        break;
+    }
     return;
   }
   if (parsed.mode === "app") {
@@ -4867,7 +5507,7 @@ Pipeline completed with ${errors.length} error(s)
     return;
   }
   if (parsed.mode === "status") {
-    const tools = ["supabase", "gh", "vercel"];
+    const tools = ["supabase", "gh", "vercel", "git"];
     process.stdout.write(pc5.bold("Tool Status\n\n"));
     for (const toolId of tools) {
       const info = getToolInfo(toolId);
@@ -4958,11 +5598,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);