ccstatusline 2.2.2 → 2.2.3

package/dist/ccstatusline.js

@@ -56103,7 +56103,7 @@ function getTerminalWidth() {
 function canDetectTerminalWidth() {
   return probeTerminalWidth() !== null;
 }
-var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src/utils", PACKAGE_VERSION = "2.2.2";
+var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src/utils", PACKAGE_VERSION = "2.2.3";
 var init_terminal = () => {};
 
 // src/utils/renderer.ts
@@ -58939,7 +58939,7 @@ var init_usage_types = __esm(() => {
   init_zod();
   FIVE_HOUR_BLOCK_MS = 5 * 60 * 60 * 1000;
   SEVEN_DAY_WINDOW_MS = 7 * 24 * 60 * 60 * 1000;
-  UsageErrorSchema = exports_external.enum(["no-credentials", "timeout", "api-error", "parse-error"]);
+  UsageErrorSchema = exports_external.enum(["no-credentials", "timeout", "rate-limited", "api-error", "parse-error"]);
 });
 
 // src/utils/usage-fetch.ts
@@ -58994,20 +58994,30 @@ function parseUsageApiResponse(rawJson) {
     extraUsageUtilization: parsed.extra_usage?.utilization ?? undefined
   };
 }
-function setCachedUsageError(error48, now2) {
+function ensureCacheDirExists() {
+  if (!fs3.existsSync(CACHE_DIR)) {
+    fs3.mkdirSync(CACHE_DIR, { recursive: true });
+  }
+}
+function setCachedUsageError(error48, now2, maxAge = LOCK_MAX_AGE) {
   const errorData = { error: error48 };
   cachedUsageData = errorData;
   usageCacheTime = now2;
+  usageErrorCacheMaxAge = maxAge;
   return errorData;
 }
-function getStaleUsageOrError(error48, now2) {
+function cacheUsageData(data, now2) {
+  cachedUsageData = data;
+  usageCacheTime = now2;
+  usageErrorCacheMaxAge = LOCK_MAX_AGE;
+  return data;
+}
+function getStaleUsageOrError(error48, now2, errorCacheMaxAge = LOCK_MAX_AGE) {
   const stale = readStaleUsageCache();
   if (stale && !stale.error) {
-    cachedUsageData = stale;
-    usageCacheTime = now2;
-    return stale;
+    return cacheUsageData(stale, now2);
   }
-  return setCachedUsageError(error48, now2);
+  return setCachedUsageError(error48, now2, errorCacheMaxAge);
 }
 function getUsageToken() {
   const now2 = Math.floor(Date.now() / 1000);
@@ -59043,6 +59053,60 @@ function readStaleUsageCache() {
     return null;
   }
 }
+function writeUsageLock(blockedUntil, error48) {
+  try {
+    ensureCacheDirExists();
+    fs3.writeFileSync(LOCK_FILE, JSON.stringify({ blockedUntil, error: error48 }));
+  } catch {}
+}
+function readActiveUsageLock(now2) {
+  let hasValidJsonLock = false;
+  try {
+    const parsed = parseJsonWithSchema(fs3.readFileSync(LOCK_FILE, "utf8"), UsageLockSchema);
+    if (parsed) {
+      hasValidJsonLock = true;
+      if (parsed.blockedUntil > now2) {
+        return {
+          blockedUntil: parsed.blockedUntil,
+          error: parsed.error ?? "timeout"
+        };
+      }
+      return null;
+    }
+  } catch {}
+  if (hasValidJsonLock) {
+    return null;
+  }
+  try {
+    const lockStat = fs3.statSync(LOCK_FILE);
+    const lockMtime = Math.floor(lockStat.mtimeMs / 1000);
+    const blockedUntil = lockMtime + LOCK_MAX_AGE;
+    if (blockedUntil > now2) {
+      return {
+        blockedUntil,
+        error: "timeout"
+      };
+    }
+  } catch {}
+  return null;
+}
+function parseRetryAfterSeconds(headerValue, nowMs = Date.now()) {
+  const rawValue = Array.isArray(headerValue) ? headerValue[0] : headerValue;
+  const trimmedValue = rawValue?.trim();
+  if (!trimmedValue) {
+    return null;
+  }
+  if (/^\d+$/.test(trimmedValue)) {
+    const seconds = Number.parseInt(trimmedValue, 10);
+    return seconds > 0 ? seconds : null;
+  }
+  const retryAtMs = Date.parse(trimmedValue);
+  if (Number.isNaN(retryAtMs)) {
+    return null;
+  }
+  const retryAfterSeconds = Math.ceil((retryAtMs - nowMs) / 1000);
+  return retryAfterSeconds > 0 ? retryAfterSeconds : null;
+}
 function getUsageApiProxyUrl() {
   const proxyUrl = process.env.HTTPS_PROXY?.trim();
   if (proxyUrl === "") {
@@ -59080,7 +59144,7 @@ async function fetchFromUsageApi(token) {
     };
     const requestOptions = getUsageApiRequestOptions(token);
     if (!requestOptions) {
-      finish(null);
+      finish({ kind: "error" });
       return;
     }
     const request2 = https.request(requestOptions, (response) => {
@@ -59091,18 +59155,25 @@ async function fetchFromUsageApi(token) {
       });
       response.on("end", () => {
         if (response.statusCode === 200 && data) {
-          finish(data);
+          finish({ kind: "success", body: data });
+          return;
+        }
+        if (response.statusCode === 429) {
+          finish({
+            kind: "rate-limited",
+            retryAfterSeconds: parseRetryAfterSeconds(response.headers["retry-after"]) ?? DEFAULT_RATE_LIMIT_BACKOFF
+          });
           return;
         }
-        finish(null);
+        finish({ kind: "error" });
       });
     });
     request2.on("error", () => {
-      finish(null);
+      finish({ kind: "error" });
     });
     request2.on("timeout", () => {
       request2.destroy();
-      finish(null);
+      finish({ kind: "error" });
     });
     request2.end();
   });
@@ -59114,7 +59185,7 @@ async function fetchUsageData() {
     if (!cachedUsageData.error && cacheAge < CACHE_MAX_AGE) {
       return cachedUsageData;
     }
-    if (cachedUsageData.error && cacheAge < LOCK_MAX_AGE) {
+    if (cachedUsageData.error && cacheAge < usageErrorCacheMaxAge) {
       return cachedUsageData;
     }
   }
@@ -59124,9 +59195,7 @@ async function fetchUsageData() {
     if (fileAge < CACHE_MAX_AGE) {
       const fileData = parseCachedUsageData(fs3.readFileSync(CACHE_FILE, "utf8"));
       if (fileData && !fileData.error) {
-        cachedUsageData = fileData;
-        usageCacheTime = now2;
-        return fileData;
+        return cacheUsageData(fileData, now2);
       }
     }
   } catch {}
@@ -59134,29 +59203,21 @@ async function fetchUsageData() {
   if (!token) {
     return getStaleUsageOrError("no-credentials", now2);
   }
-  try {
-    const lockStat = fs3.statSync(LOCK_FILE);
-    const lockAge = now2 - Math.floor(lockStat.mtimeMs / 1000);
-    if (lockAge < LOCK_MAX_AGE) {
-      const stale = readStaleUsageCache();
-      if (stale && !stale.error)
-        return stale;
-      return { error: "timeout" };
-    }
-  } catch {}
-  try {
-    const lockDir = path2.dirname(LOCK_FILE);
-    if (!fs3.existsSync(lockDir)) {
-      fs3.mkdirSync(lockDir, { recursive: true });
-    }
-    fs3.writeFileSync(LOCK_FILE, "");
-  } catch {}
+  const activeLock = readActiveUsageLock(now2);
+  if (activeLock) {
+    return getStaleUsageOrError(activeLock.error, now2, Math.max(1, activeLock.blockedUntil - now2));
+  }
+  writeUsageLock(now2 + LOCK_MAX_AGE, "timeout");
   try {
     const response = await fetchFromUsageApi(token);
-    if (!response) {
+    if (response.kind === "rate-limited") {
+      writeUsageLock(now2 + response.retryAfterSeconds, "rate-limited");
+      return getStaleUsageOrError("rate-limited", now2, response.retryAfterSeconds);
+    }
+    if (response.kind === "error") {
       return getStaleUsageOrError("api-error", now2);
     }
-    const usageData = parseUsageApiResponse(response);
+    const usageData = parseUsageApiResponse(response.body);
     if (!usageData) {
       return getStaleUsageOrError("parse-error", now2);
     }
@@ -59164,19 +59225,15 @@ async function fetchUsageData() {
       return getStaleUsageOrError("parse-error", now2);
     }
     try {
-      if (!fs3.existsSync(CACHE_DIR)) {
-        fs3.mkdirSync(CACHE_DIR, { recursive: true });
-      }
+      ensureCacheDirExists();
       fs3.writeFileSync(CACHE_FILE, JSON.stringify(usageData));
     } catch {}
-    cachedUsageData = usageData;
-    usageCacheTime = now2;
-    return usageData;
+    return cacheUsageData(usageData, now2);
   } catch {
     return getStaleUsageOrError("parse-error", now2);
   }
 }
-var import_https_proxy_agent, CACHE_DIR, CACHE_FILE, LOCK_FILE, CACHE_MAX_AGE = 180, LOCK_MAX_AGE = 30, TOKEN_CACHE_MAX_AGE = 3600, UsageCredentialsSchema, CachedUsageDataSchema, UsageApiResponseSchema, cachedUsageData = null, usageCacheTime = 0, cachedUsageToken = null, usageTokenCacheTime = 0, USAGE_API_HOST = "api.anthropic.com", USAGE_API_PATH = "/api/oauth/usage", USAGE_API_TIMEOUT_MS = 5000;
+var import_https_proxy_agent, CACHE_DIR, CACHE_FILE, LOCK_FILE, CACHE_MAX_AGE = 180, LOCK_MAX_AGE = 30, DEFAULT_RATE_LIMIT_BACKOFF = 300, TOKEN_CACHE_MAX_AGE = 3600, UsageCredentialsSchema, UsageLockErrorSchema, UsageLockSchema, CachedUsageDataSchema, UsageApiResponseSchema, cachedUsageData = null, usageCacheTime = 0, cachedUsageToken = null, usageTokenCacheTime = 0, usageErrorCacheMaxAge, USAGE_API_HOST = "api.anthropic.com", USAGE_API_PATH = "/api/oauth/usage", USAGE_API_TIMEOUT_MS = 5000;
 var init_usage_fetch = __esm(() => {
   init_zod();
   init_claude_settings();
@@ -59186,6 +59243,11 @@ var init_usage_fetch = __esm(() => {
   CACHE_FILE = path2.join(CACHE_DIR, "usage.json");
   LOCK_FILE = path2.join(CACHE_DIR, "usage.lock");
   UsageCredentialsSchema = exports_external.object({ claudeAiOauth: exports_external.object({ accessToken: exports_external.string().nullable().optional() }).optional() });
+  UsageLockErrorSchema = exports_external.enum(["timeout", "rate-limited"]);
+  UsageLockSchema = exports_external.object({
+    blockedUntil: exports_external.number(),
+    error: UsageLockErrorSchema.optional()
+  });
   CachedUsageDataSchema = exports_external.object({
     sessionUsage: exports_external.number().nullable().optional(),
     sessionResetAt: exports_external.string().nullable().optional(),
@@ -59213,11 +59275,12 @@ var init_usage_fetch = __esm(() => {
       utilization: exports_external.number().nullable().optional()
     }).optional()
   });
+  usageErrorCacheMaxAge = LOCK_MAX_AGE;
 });
 
 // node_modules/fdir/dist/index.mjs
 import { createRequire as createRequire2 } from "module";
-import { basename, dirname as dirname2, normalize, relative, resolve, sep } from "path";
+import { basename, dirname, normalize, relative, resolve, sep } from "path";
 import * as nativeFs from "fs";
 function cleanPath(path3) {
   let normalized = normalize(path3);
@@ -59310,7 +59373,7 @@ function build$2(options, isSynchronous) {
 function isRecursive(path3, resolved, state) {
   if (state.options.useRealPaths)
     return isRecursiveUsingRealPaths(resolved, state);
-  let parent = dirname2(path3);
+  let parent = dirname(path3);
   let depth = 1;
   while (parent !== state.root && depth < 2) {
     const resolvedPath = state.symlinks.get(parent);
@@ -59318,7 +59381,7 @@ function isRecursive(path3, resolved, state) {
     if (isSameRoot)
       depth++;
     else
-      parent = dirname2(parent);
+      parent = dirname(parent);
   }
   state.symlinks.set(path3, resolved);
   return depth > 1;
@@ -59571,7 +59634,7 @@ var __require2, SLASHES_REGEX, WINDOWS_ROOT_DIR_REGEX, pushDirectory = (director
           } else {
             resolvedPath = useRealPaths ? resolvedPath : path3;
             const filename = basename(resolvedPath);
-            const directoryPath$1 = normalizePath(dirname2(resolvedPath), this.state.options);
+            const directoryPath$1 = normalizePath(dirname(resolvedPath), this.state.options);
             resolvedPath = this.joinPath(filename, directoryPath$1);
             this.pushFile(resolvedPath, files, this.state.counts, filters);
           }
@@ -62180,10 +62243,13 @@ function getWeeklyUsageWindowFromResetAt(weeklyResetAt, nowMs = Date.now()) {
 function resolveWeeklyUsageWindow(usageData, nowMs = Date.now()) {
   return getWeeklyUsageWindowFromResetAt(usageData.weeklyResetAt, nowMs);
 }
-function formatUsageDuration(durationMs) {
+function formatUsageDuration(durationMs, compact2 = false) {
   const clampedMs = Math.max(0, durationMs);
   const elapsedHours = Math.floor(clampedMs / (1000 * 60 * 60));
   const elapsedMinutes = Math.floor(clampedMs % (1000 * 60 * 60) / (1000 * 60));
+  if (compact2) {
+    return elapsedMinutes === 0 ? `${elapsedHours}h` : `${elapsedHours}h${elapsedMinutes}m`;
+  }
   if (elapsedMinutes === 0) {
     return `${elapsedHours}hr`;
   }
@@ -62195,6 +62261,8 @@ function getUsageErrorMessage(error48) {
       return "[No credentials]";
     case "timeout":
       return "[Timeout]";
+    case "rate-limited":
+      return "[Rate limited]";
     case "api-error":
       return "[API Error]";
     case "parse-error":
@@ -62235,7 +62303,13 @@ function getUsageProgressBarWidth(mode) {
 function isUsageInverted(item) {
   return isMetadataFlagEnabled(item, "invert");
 }
-function getUsageDisplayModifierText(item) {
+function isUsageCompact(item) {
+  return isMetadataFlagEnabled(item, "compact");
+}
+function toggleUsageCompact(item) {
+  return toggleMetadataFlag(item, "compact");
+}
+function getUsageDisplayModifierText(item, options = {}) {
   const mode = getUsageDisplayMode(item);
   const modifiers = [];
   if (mode === "progress") {
@@ -62246,6 +62320,9 @@ function getUsageDisplayModifierText(item) {
   if (isUsageInverted(item)) {
     modifiers.push("inverted");
   }
+  if (options.includeCompact && isUsageCompact(item)) {
+    modifiers.push("compact");
+  }
   return makeModifierText(modifiers);
 }
 function cycleUsageDisplayMode(item) {
@@ -62292,7 +62369,7 @@ class BlockTimerWidget {
   getEditorDisplay(item) {
     return {
       displayText: this.getDisplayName(),
-      modifierText: getUsageDisplayModifierText(item)
+      modifierText: getUsageDisplayModifierText(item, { includeCompact: true })
     };
   }
   handleEditorAction(action, item) {
@@ -62302,11 +62379,15 @@ class BlockTimerWidget {
     if (action === "toggle-invert") {
       return toggleUsageInverted(item);
     }
+    if (action === "toggle-compact") {
+      return toggleUsageCompact(item);
+    }
     return null;
   }
   render(item, context, settings) {
     const displayMode = getUsageDisplayMode(item);
     const inverted = isUsageInverted(item);
+    const compact2 = isUsageCompact(item);
     if (context.isPreview) {
       const previewPercent = inverted ? 26.1 : 73.9;
       if (isUsageProgressMode(displayMode)) {
@@ -62314,7 +62395,7 @@ class BlockTimerWidget {
         const progressBar = makeTimerProgressBar(previewPercent, barWidth);
         return formatRawOrLabeledValue(item, "Block ", `[${progressBar}] ${previewPercent.toFixed(1)}%`);
       }
-      return formatRawOrLabeledValue(item, "Block: ", "3hr 45m");
+      return formatRawOrLabeledValue(item, "Block: ", compact2 ? "3h45m" : "3hr 45m");
     }
     const usageData = context.usageData ?? {};
     const window2 = resolveUsageWindowWithFallback(usageData, context.blockMetrics);
@@ -62324,7 +62405,7 @@ class BlockTimerWidget {
         const emptyBar = "░".repeat(barWidth);
         return formatRawOrLabeledValue(item, "Block ", `[${emptyBar}] 0.0%`);
       }
-      return formatRawOrLabeledValue(item, "Block: ", "0hr 0m");
+      return formatRawOrLabeledValue(item, "Block: ", compact2 ? "0h" : "0hr 0m");
     }
     if (isUsageProgressMode(displayMode)) {
       const barWidth = getUsageProgressBarWidth(displayMode);
@@ -62333,13 +62414,14 @@ class BlockTimerWidget {
       const percentage = percent.toFixed(1);
       return formatRawOrLabeledValue(item, "Block ", `[${progressBar}] ${percentage}%`);
     }
-    const elapsedTime = formatUsageDuration(window2.elapsedMs);
+    const elapsedTime = formatUsageDuration(window2.elapsedMs, compact2);
     return formatRawOrLabeledValue(item, "Block: ", elapsedTime);
   }
   getCustomKeybinds() {
     return [
       { key: "p", label: "(p)rogress toggle", action: "toggle-progress" },
-      { key: "v", label: "in(v)ert fill", action: "toggle-invert" }
+      { key: "v", label: "in(v)ert fill", action: "toggle-invert" },
+      { key: "s", label: "(s)hort time", action: "toggle-compact" }
     ];
   }
   supportsRawValue() {
@@ -63285,7 +63367,7 @@ class BlockResetTimerWidget {
   getEditorDisplay(item) {
     return {
       displayText: this.getDisplayName(),
-      modifierText: getUsageDisplayModifierText(item)
+      modifierText: getUsageDisplayModifierText(item, { includeCompact: true })
     };
   }
   handleEditorAction(action, item) {
@@ -63295,11 +63377,15 @@ class BlockResetTimerWidget {
     if (action === "toggle-invert") {
       return toggleUsageInverted(item);
     }
+    if (action === "toggle-compact") {
+      return toggleUsageCompact(item);
+    }
     return null;
   }
   render(item, context, settings) {
     const displayMode = getUsageDisplayMode(item);
     const inverted = isUsageInverted(item);
+    const compact2 = isUsageCompact(item);
     if (context.isPreview) {
       const previewPercent = inverted ? 90 : 10;
       if (isUsageProgressMode(displayMode)) {
@@ -63307,7 +63393,7 @@ class BlockResetTimerWidget {
         const progressBar = makeTimerProgressBar2(previewPercent, barWidth);
         return formatRawOrLabeledValue(item, "Reset ", `[${progressBar}] ${previewPercent.toFixed(1)}%`);
       }
-      return formatRawOrLabeledValue(item, "Reset: ", "4hr 30m");
+      return formatRawOrLabeledValue(item, "Reset: ", compact2 ? "4h30m" : "4hr 30m");
     }
     const usageData = context.usageData ?? {};
     const window2 = resolveUsageWindowWithFallback(usageData, context.blockMetrics);
@@ -63324,13 +63410,14 @@ class BlockResetTimerWidget {
       const percentage = percent.toFixed(1);
       return formatRawOrLabeledValue(item, "Reset ", `[${progressBar}] ${percentage}%`);
     }
-    const remainingTime = formatUsageDuration(window2.remainingMs);
+    const remainingTime = formatUsageDuration(window2.remainingMs, compact2);
     return formatRawOrLabeledValue(item, "Reset: ", remainingTime);
   }
   getCustomKeybinds() {
     return [
       { key: "p", label: "(p)rogress toggle", action: "toggle-progress" },
-      { key: "v", label: "in(v)ert fill", action: "toggle-invert" }
+      { key: "v", label: "in(v)ert fill", action: "toggle-invert" },
+      { key: "s", label: "(s)hort time", action: "toggle-compact" }
     ];
   }
   supportsRawValue() {
@@ -63369,7 +63456,7 @@ class WeeklyResetTimerWidget {
   getEditorDisplay(item) {
     return {
       displayText: this.getDisplayName(),
-      modifierText: getUsageDisplayModifierText(item)
+      modifierText: getUsageDisplayModifierText(item, { includeCompact: true })
     };
   }
   handleEditorAction(action, item) {
@@ -63379,11 +63466,15 @@ class WeeklyResetTimerWidget {
     if (action === "toggle-invert") {
       return toggleUsageInverted(item);
     }
+    if (action === "toggle-compact") {
+      return toggleUsageCompact(item);
+    }
     return null;
   }
   render(item, context, settings) {
     const displayMode = getUsageDisplayMode(item);
     const inverted = isUsageInverted(item);
+    const compact2 = isUsageCompact(item);
     if (context.isPreview) {
       const previewPercent = inverted ? 90 : 10;
       if (isUsageProgressMode(displayMode)) {
@@ -63391,7 +63482,7 @@ class WeeklyResetTimerWidget {
         const progressBar = makeTimerProgressBar3(previewPercent, barWidth);
         return formatRawOrLabeledValue(item, "Weekly Reset ", `[${progressBar}] ${previewPercent.toFixed(1)}%`);
       }
-      return formatRawOrLabeledValue(item, "Weekly Reset: ", "36hr 30m");
+      return formatRawOrLabeledValue(item, "Weekly Reset: ", compact2 ? "36h30m" : "36hr 30m");
     }
     const usageData = context.usageData ?? {};
     const window2 = resolveWeeklyUsageWindow(usageData);
@@ -63408,13 +63499,14 @@ class WeeklyResetTimerWidget {
       const percentage = percent.toFixed(1);
       return formatRawOrLabeledValue(item, "Weekly Reset ", `[${progressBar}] ${percentage}%`);
     }
-    const remainingTime = formatUsageDuration(window2.remainingMs);
+    const remainingTime = formatUsageDuration(window2.remainingMs, compact2);
     return formatRawOrLabeledValue(item, "Weekly Reset: ", remainingTime);
   }
   getCustomKeybinds() {
     return [
       { key: "p", label: "(p)rogress toggle", action: "toggle-progress" },
-      { key: "v", label: "in(v)ert fill", action: "toggle-invert" }
+      { key: "v", label: "in(v)ert fill", action: "toggle-invert" },
+      { key: "s", label: "(s)hort time", action: "toggle-compact" }
     ];
   }
   supportsRawValue() {
@@ -64879,7 +64971,7 @@ var dist_default4 = Gradient;
 
 // src/tui/App.tsx
 init_claude_settings();
-var import_react48 = __toESM(require_react(), 1);
+var import_react46 = __toESM(require_react(), 1);
 
 // src/utils/clone-settings.ts
 function cloneSettings(settings) {
@@ -65626,60 +65718,184 @@ var import_react36 = __toESM(require_react(), 1);
 
 // src/tui/components/ConfirmDialog.tsx
 await init_build2();
+
+// src/tui/components/List.tsx
+await init_build2();
 var import_react35 = __toESM(require_react(), 1);
 var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
-var ConfirmDialog = ({ message, onConfirm, onCancel, inline = false }) => {
-  const [selectedIndex, setSelectedIndex] = import_react35.useState(0);
-  use_input_default((input, key) => {
+function List({
+  items,
+  onSelect,
+  onSelectionChange,
+  initialSelection = 0,
+  showBackButton,
+  color,
+  wrapNavigation = false,
+  ...boxProps
+}) {
+  const [selectedIndex, setSelectedIndex] = import_react35.useState(initialSelection);
+  const latestOnSelectionChangeRef = import_react35.useRef(onSelectionChange);
+  const _items = import_react35.useMemo(() => {
+    if (showBackButton) {
+      return [...items, "-", { label: "← Back", value: "back" }];
+    }
+    return items;
+  }, [items, showBackButton]);
+  const selectableItems = _items.filter((item) => item !== "-" && !item.disabled);
+  const selectedItem = selectableItems[selectedIndex];
+  const selectedValue = selectedItem?.value;
+  const actualIndex = _items.findIndex((item) => item === selectedItem);
+  import_react35.useEffect(() => {
+    latestOnSelectionChangeRef.current = onSelectionChange;
+  }, [onSelectionChange]);
+  import_react35.useEffect(() => {
+    const maxIndex = Math.max(selectableItems.length - 1, 0);
+    setSelectedIndex(Math.min(initialSelection, maxIndex));
+  }, [initialSelection, selectableItems.length]);
+  import_react35.useEffect(() => {
+    if (selectedValue !== undefined) {
+      latestOnSelectionChangeRef.current?.(selectedValue, selectedIndex);
+    }
+  }, [selectedIndex, selectedValue]);
+  use_input_default((_, key) => {
     if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-    } else if (key.downArrow) {
-      setSelectedIndex(Math.min(1, selectedIndex + 1));
-    } else if (key.return) {
-      if (selectedIndex === 0) {
-        onConfirm();
-      } else {
-        onCancel();
-      }
-    } else if (key.escape) {
-      onCancel();
+      const prev = selectedIndex - 1;
+      const prevIndex = prev < 0 ? wrapNavigation ? selectableItems.length - 1 : 0 : prev;
+      setSelectedIndex(prevIndex);
+      return;
+    }
+    if (key.downArrow) {
+      const next = selectedIndex + 1;
+      const nextIndex = next > selectableItems.length - 1 ? wrapNavigation ? 0 : selectableItems.length - 1 : next;
+      setSelectedIndex(nextIndex);
+      return;
+    }
+    if (key.return && selectedItem) {
+      onSelect(selectedItem.value, selectedIndex);
+      return;
     }
   });
-  const renderOptions = () => {
-    const yesStyle = selectedIndex === 0 ? { color: "cyan" } : {};
-    const noStyle = selectedIndex === 1 ? { color: "cyan" } : {};
-    return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
-      flexDirection: "column",
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+    flexDirection: "column",
+    ...boxProps,
+    children: [
+      _items.map((item, index) => {
+        if (item === "-") {
+          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(ListSeparator, {}, index, false, undefined, this);
+        }
+        const isSelected = index === actualIndex;
+        return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(ListItem, {
+          isSelected,
+          color,
+          disabled: item.disabled,
+          ...item.props,
+          children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+                children: item.label
+              }, undefined, false, undefined, this),
+              item.sublabel && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+                dimColor: !isSelected,
+                children: [
+                  " ",
+                  item.sublabel
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, index, false, undefined, this);
+      }),
+      selectedItem?.description && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+        marginTop: 1,
+        paddingLeft: 2,
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+          dimColor: true,
+          wrap: "wrap",
+          children: selectedItem.description
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ListItem({
+  children,
+  isSelected,
+  color = "green",
+  disabled,
+  ...boxProps
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+    ...boxProps,
+    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+      color: isSelected ? color : undefined,
+      dimColor: disabled,
       children: [
         /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
-          ...yesStyle,
-          children: [
-            selectedIndex === 0 ? "▶ " : "  ",
-            "Yes"
-          ]
-        }, undefined, true, undefined, this),
+          children: isSelected ? "▶  " : "   "
+        }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
-          ...noStyle,
-          children: [
-            selectedIndex === 1 ? "▶ " : "  ",
-            "No"
-          ]
-        }, undefined, true, undefined, this)
+          children
+        }, undefined, false, undefined, this)
       ]
-    }, undefined, true, undefined, this);
-  };
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ListSeparator() {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+    children: " "
+  }, undefined, false, undefined, this);
+}
+
+// src/tui/components/ConfirmDialog.tsx
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var CONFIRM_OPTIONS = [
+  {
+    label: "Yes",
+    value: true
+  },
+  {
+    label: "No",
+    value: false
+  }
+];
+var ConfirmDialog = ({ message, onConfirm, onCancel, inline = false }) => {
+  use_input_default((_, key) => {
+    if (key.escape) {
+      onCancel();
+    }
+  });
   if (inline) {
-    return renderOptions();
+    return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(List, {
+      items: CONFIRM_OPTIONS,
+      onSelect: (confirmed) => {
+        if (confirmed) {
+          onConfirm();
+          return;
+        }
+        onCancel();
+      },
+      color: "cyan"
+    }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
         children: message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
         marginTop: 1,
-        children: renderOptions()
+        children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(List, {
+          items: CONFIRM_OPTIONS,
+          onSelect: (confirmed) => {
+            if (confirmed) {
+              onConfirm();
+              return;
+            }
+            onCancel();
+          },
+          color: "cyan"
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -65792,7 +66008,7 @@ function cycleWidgetColor({
 }
 
 // src/tui/components/ColorMenu.tsx
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
 var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
   const [showSeparators, setShowSeparators] = import_react36.useState(false);
   const [hexInputMode, setHexInputMode] = import_react36.useState(false);
@@ -65942,30 +66158,30 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
     }
   });
   if (hasNoItems) {
-    return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
           bold: true,
           children: [
             "Configure Colors",
             lineIndex !== undefined ? ` - Line ${lineIndex + 1}` : ""
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             children: "No colorable widgets in the status line."
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
           dimColor: true,
           children: "Add a widget first to continue."
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: "Press any key to go back..."
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
@@ -66058,36 +66274,36 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
     }
   }
   if (showClearConfirm) {
-    return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
           bold: true,
           color: "yellow",
           children: "⚠ Confirm Clear All Colors"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           marginTop: 1,
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               children: "This will reset all colors for all widgets to their defaults."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: "red",
               children: "This action cannot be undone!"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           marginTop: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: "Continue?"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(ConfirmDialog, {
+          children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ConfirmDialog, {
             inline: true,
             onConfirm: () => {
               const newItems = clearAllWidgetStyling(widgets);
@@ -66105,12 +66321,12 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
   const hasGlobalFgOverride = !!settings.overrideForegroundColor;
   const hasGlobalBgOverride = !!settings.overrideBackgroundColor && !powerlineEnabled;
   const globalOverrideMessage = hasGlobalFgOverride && hasGlobalBgOverride ? "⚠ Global override for FG and BG active" : hasGlobalFgOverride ? "⚠ Global override for FG active" : hasGlobalBgOverride ? "⚠ Global override for BG active" : null;
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             bold: true,
             children: [
               "Configure Colors",
@@ -66118,7 +66334,7 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
               editingBackground && source_default.yellow(" [Background Mode]")
             ]
           }, undefined, true, undefined, this),
-          globalOverrideMessage && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          globalOverrideMessage && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             color: "yellow",
             dimColor: true,
             children: [
@@ -66128,56 +66344,56 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hexInputMode ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+      hexInputMode ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: "Enter 6-digit hex color code (without #):"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: [
               "#",
               hexInput,
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 dimColor: true,
                 children: hexInput.length < 6 ? "_".repeat(6 - hexInput.length) : ""
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: " "
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             children: "Press Enter when done, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : ansi256InputMode ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+      }, undefined, true, undefined, this) : ansi256InputMode ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: "Enter ANSI 256 color code (0-255):"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: [
               ansi256Input,
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 dimColor: true,
                 children: ansi256Input.length === 0 ? "___" : ansi256Input.length === 1 ? "__" : ansi256Input.length === 2 ? "_" : ""
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: " "
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             children: "Press Enter when done, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(jsx_dev_runtime8.Fragment, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             children: [
               "↑↓ to select, ←→ to cycle",
@@ -66189,16 +66405,16 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
               "(r)eset, (c)lear all, ESC to go back"
             ]
           }, undefined, true, undefined, this),
-          !settings.powerline.enabled && !settings.defaultSeparator && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          !settings.powerline.enabled && !settings.defaultSeparator && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             children: [
               "(s)how separators:",
               showSeparators ? source_default.green("ON") : source_default.gray("OFF")
             ]
           }, undefined, true, undefined, this),
-          selectedWidget ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+          selectedWidget ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               children: [
                 "Current",
                 " ",
@@ -66212,19 +66428,19 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
                 selectedWidget.bold && source_default.bold(" [BOLD]")
               ]
             }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               children: " "
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
         marginTop: 1,
-        children: hexInputMode || ansi256InputMode ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+        children: hexInputMode || ansi256InputMode ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
           flexDirection: "column",
-          children: menuItems.map((item) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          children: menuItems.map((item) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             color: item.value === highlightedItemId ? "cyan" : "white",
             bold: item.value === highlightedItemId,
             children: [
@@ -66232,28 +66448,28 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
               item.label
             ]
           }, item.value, true, undefined, this))
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(SelectInput_default, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(SelectInput_default, {
           items: menuItems,
           onSelect: handleSelect,
           onHighlight: handleHighlight,
           initialIndex: Math.max(0, menuItems.findIndex((item) => item.value === highlightedItemId)),
-          indicatorComponent: ({ isSelected }) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          indicatorComponent: ({ isSelected }) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: isSelected ? "▶" : "  "
           }, undefined, false, undefined, this),
-          itemComponent: ({ isSelected, label }) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          itemComponent: ({ isSelected, label }) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: ` ${label}`
           }, undefined, false, undefined, this)
         }, `${showSeparators}-${highlightedItemId}`, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
         marginTop: 1,
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             color: "yellow",
             children: "⚠ VSCode Users: "
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             dimColor: true,
             wrap: "wrap",
             children: 'If colors appear incorrect in the VSCode integrated terminal, the "Terminal › Integrated: Minimum Contrast Ratio" (`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors. You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors.'
@@ -66268,7 +66484,7 @@ init_colors();
 init_input_guards();
 await init_build2();
 var import_react37 = __toESM(require_react(), 1);
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
   const [editingPadding, setEditingPadding] = import_react37.useState(false);
   const [editingSeparator, setEditingSeparator] = import_react37.useState(false);
@@ -66378,95 +66594,95 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
       }
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
         bold: true,
         children: "Global Overrides"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
         dimColor: true,
         children: "Configure automatic padding and separators between widgets"
       }, undefined, false, undefined, this),
-      isPowerlineEnabled && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      isPowerlineEnabled && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         marginTop: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
           color: "yellow",
           children: "⚠ Some options are disabled while Powerline mode is active"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         marginTop: 1
       }, undefined, false, undefined, this),
-      editingPadding ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      editingPadding ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "Enter default padding (applied to left and right of each widget): "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 color: "cyan",
                 children: paddingInput ? `"${paddingInput}"` : "(empty)"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
             dimColor: true,
             children: "Press Enter to save, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : editingSeparator ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      }, undefined, true, undefined, this) : editingSeparator ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "Enter default separator (placed between widgets): "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 color: "cyan",
                 children: separatorInput ? `"${separatorInput}"` : "(empty - no separator will be added)"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
             dimColor: true,
             children: "Press Enter to save, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : confirmingSeparator ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      }, undefined, true, undefined, this) : confirmingSeparator ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             marginBottom: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
               color: "yellow",
               children: "⚠ Warning: Setting a default separator will remove all existing manual separators from your status lines."
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "New default separator: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 color: "cyan",
                 children: separatorInput ? `"${separatorInput}"` : "(empty)"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
               children: "Do you want to continue? "
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ConfirmDialog, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ConfirmDialog, {
               inline: true,
               onConfirm: () => {
                 const updatedSettings = {
@@ -66484,47 +66700,47 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "      Global Bold: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 color: globalBold ? "green" : "red",
                 children: globalBold ? "✓ Enabled" : "✗ Disabled"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: " - Press (o) to toggle"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "  Default Padding: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 color: "cyan",
                 children: settings.defaultPadding ? `"${settings.defaultPadding}"` : "(none)"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: " - Press (p) to edit"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "Override FG Color: "
               }, undefined, false, undefined, this),
               (() => {
                 const fgColor = settings.overrideForegroundColor ?? "none";
                 if (fgColor === "none") {
-                  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: "gray",
                     children: "(none)"
                   }, undefined, false, undefined, this);
@@ -66532,31 +66748,31 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
                   const displayName = getColorDisplayName(fgColor);
                   const fgChalk = getChalkColor(fgColor, "ansi16", false);
                   const display = fgChalk ? fgChalk(displayName) : displayName;
-                  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     children: display
                   }, undefined, false, undefined, this);
                 }
               })(),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: " - (f) cycle, (g) clear"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "Override BG Color: "
               }, undefined, false, undefined, this),
-              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: "[disabled - Powerline active]"
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
                 children: [
                   (() => {
                     const bgColor = settings.overrideBackgroundColor ?? "none";
                     if (bgColor === "none") {
-                      return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                      return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                         color: "gray",
                         children: "(none)"
                       }, undefined, false, undefined, this);
@@ -66564,12 +66780,12 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
                       const displayName = getColorDisplayName(bgColor);
                       const bgChalk = getChalkColor(bgColor, "ansi16", true);
                       const display = bgChalk ? bgChalk(` ${displayName} `) : displayName;
-                      return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                      return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                         children: display
                       }, undefined, false, undefined, this);
                     }
                   })(),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     dimColor: true,
                     children: " - (b) cycle, (c) clear"
                   }, undefined, false, undefined, this)
@@ -66577,21 +66793,21 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "   Inherit Colors: "
               }, undefined, false, undefined, this),
-              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: "[disabled - Powerline active]"
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: inheritColors ? "green" : "red",
                     children: inheritColors ? "✓ Enabled" : "✗ Disabled"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     dimColor: true,
                     children: " - Press (i) to toggle"
                   }, undefined, false, undefined, this)
@@ -66599,21 +66815,21 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: "Default Separator: "
               }, undefined, false, undefined, this),
-              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              isPowerlineEnabled ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 children: "[disabled - Powerline active]"
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(jsx_dev_runtime9.Fragment, {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: "cyan",
                     children: settings.defaultSeparator ? `"${settings.defaultSeparator}"` : "(none)"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     dimColor: true,
                     children: " - Press (s) to edit"
                   }, undefined, false, undefined, this)
@@ -66621,33 +66837,33 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             marginTop: 2,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
               dimColor: true,
               children: "Press ESC to go back"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             marginTop: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
                 children: "Note: These settings are applied during rendering and don't add widgets to your widget list."
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
                 children: "• Inherit colors: Separators will use colors from the preceding widget"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
                 children: "• Global Bold: Makes all text bold regardless of individual settings"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
                 children: "• Override colors: All widgets will use these colors instead of their configured colors"
@@ -66662,54 +66878,57 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
 // src/tui/components/InstallMenu.tsx
 init_claude_settings();
 await init_build2();
-var import_react38 = __toESM(require_react(), 1);
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
 var InstallMenu = ({
   bunxAvailable,
   existingStatusLine,
   onSelectNpx,
   onSelectBunx,
-  onCancel
+  onCancel,
+  initialSelection = 0
 }) => {
-  const [selectedIndex, setSelectedIndex] = import_react38.useState(0);
-  const maxIndex = 2;
-  use_input_default((input, key) => {
+  use_input_default((_, key) => {
     if (key.escape) {
       onCancel();
-    } else if (key.upArrow) {
-      if (selectedIndex === 2) {
-        setSelectedIndex(bunxAvailable ? 1 : 0);
-      } else {
-        setSelectedIndex(Math.max(0, selectedIndex - 1));
-      }
-    } else if (key.downArrow) {
-      if (selectedIndex === 0) {
-        setSelectedIndex(bunxAvailable ? 1 : 2);
-      } else if (selectedIndex === 1 && bunxAvailable) {
-        setSelectedIndex(2);
-      } else {
-        setSelectedIndex(Math.min(maxIndex, selectedIndex + 1));
-      }
-    } else if (key.return) {
-      if (selectedIndex === 0) {
+    }
+  });
+  function onSelect(value) {
+    switch (value) {
+      case "npx":
         onSelectNpx();
-      } else if (selectedIndex === 1 && bunxAvailable) {
-        onSelectBunx();
-      } else if (selectedIndex === 2) {
+        break;
+      case "bunx":
+        if (bunxAvailable) {
+          onSelectBunx();
+        }
+        break;
+      case "back":
         onCancel();
-      }
+        break;
     }
-  });
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+  }
+  const listItems = [
+    {
+      label: "npx - Node Package Execute",
+      value: "npx"
+    },
+    {
+      label: "bunx - Bun Package Execute",
+      sublabel: bunxAvailable ? undefined : "(not installed)",
+      value: "bunx",
+      disabled: !bunxAvailable
+    }
+  ];
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
         bold: true,
         children: "Install ccstatusline to Claude Code"
       }, undefined, false, undefined, this),
-      existingStatusLine && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      existingStatusLine && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           color: "yellow",
           children: [
             '⚠ Current status line: "',
@@ -66718,51 +66937,29 @@ var InstallMenu = ({
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           dimColor: true,
           children: "Select package manager to use:"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(List, {
+        color: "blue",
         marginTop: 1,
-        flexDirection: "column",
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
-              color: selectedIndex === 0 ? "blue" : undefined,
-              children: [
-                selectedIndex === 0 ? "▶  " : "   ",
-                "npx - Node Package Execute"
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
-              color: selectedIndex === 1 && bunxAvailable ? "blue" : undefined,
-              dimColor: !bunxAvailable,
-              children: [
-                selectedIndex === 1 && bunxAvailable ? "▶  " : "   ",
-                "bunx - Bun Package Execute",
-                !bunxAvailable && " (not installed)"
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-            marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
-              color: selectedIndex === 2 ? "blue" : undefined,
-              children: [
-                selectedIndex === 2 ? "▶  " : "   ",
-                "← Back"
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+        items: listItems,
+        onSelect: (line) => {
+          if (line === "back") {
+            onCancel();
+            return;
+          }
+          onSelect(line);
+        },
+        initialSelection,
+        showBackButton: true
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         marginTop: 2,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           dimColor: true,
           children: [
             "The selected command will be written to",
@@ -66771,9 +66968,9 @@ var InstallMenu = ({
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         marginTop: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           dimColor: true,
           children: "Press Enter to select, ESC to cancel"
         }, undefined, false, undefined, this)
@@ -66788,7 +66985,7 @@ await __promiseAll([
   init_build2(),
   init_widgets2()
 ]);
-var import_react39 = __toESM(require_react(), 1);
+var import_react38 = __toESM(require_react(), 1);
 
 // src/tui/components/items-editor/input-handlers.ts
 await init_widgets2();
@@ -67100,14 +67297,32 @@ function handleNormalInputMode({
   }
 }
 
+// src/tui/components/items-editor/keybind-visibility.ts
+function isProgressMode(widget) {
+  const mode = widget.metadata?.display;
+  return mode === "progress" || mode === "progress-short";
+}
+function shouldShowCustomKeybind(widget, keybind) {
+  if (keybind.action === "edit-list-limit") {
+    return widget.type === "skills" && widget.metadata?.mode === "list";
+  }
+  if (keybind.action === "toggle-invert") {
+    return isProgressMode(widget);
+  }
+  if (keybind.action === "toggle-compact") {
+    return !isProgressMode(widget);
+  }
+  return true;
+}
+
 // src/tui/components/ItemsEditor.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
 var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
-  const [selectedIndex, setSelectedIndex] = import_react39.useState(0);
-  const [moveMode, setMoveMode] = import_react39.useState(false);
-  const [customEditorWidget, setCustomEditorWidget] = import_react39.useState(null);
-  const [widgetPicker, setWidgetPicker] = import_react39.useState(null);
-  const [showClearConfirm, setShowClearConfirm] = import_react39.useState(false);
+  const [selectedIndex, setSelectedIndex] = import_react38.useState(0);
+  const [moveMode, setMoveMode] = import_react38.useState(false);
+  const [customEditorWidget, setCustomEditorWidget] = import_react38.useState(null);
+  const [widgetPicker, setWidgetPicker] = import_react38.useState(null);
+  const [showClearConfirm, setShowClearConfirm] = import_react38.useState(false);
   const separatorChars = ["|", "-", ",", " "];
   const widgetCatalog = getWidgetCatalog(settings);
   const widgetCategories = ["All", ...getWidgetCatalogCategories(widgetCatalog)];
@@ -67136,16 +67351,6 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
   const handleEditorCancel = () => {
     setCustomEditorWidget(null);
   };
-  const shouldShowCustomKeybind = (widget, keybind) => {
-    if (keybind.action !== "toggle-invert") {
-      if (keybind.action === "edit-list-limit") {
-        return widget.type === "skills" && widget.metadata?.mode === "list";
-      }
-      return true;
-    }
-    const mode = widget.metadata?.display;
-    return mode === "progress" || mode === "progress-short";
-  };
   const getVisibleCustomKeybinds = (widgetImpl, widget) => {
     if (!widgetImpl.getCustomKeybinds) {
       return [];
@@ -67304,19 +67509,19 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
     });
   }
   if (showClearConfirm) {
-    return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           bold: true,
           color: "yellow",
           children: "⚠ Confirm Clear Line"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
           marginTop: 1,
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               children: [
                 "This will remove all widgets from Line",
                 " ",
@@ -67324,21 +67529,21 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
                 "."
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               color: "red",
               children: "This action cannot be undone!"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
           marginTop: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             children: "Continue?"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ConfirmDialog, {
+          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ConfirmDialog, {
             inline: true,
             onConfirm: () => {
               onUpdate([]);
@@ -67353,12 +67558,12 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             bold: true,
             children: [
               "Edit Line",
@@ -67367,17 +67572,17 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
               " "
             ]
           }, undefined, true, undefined, this),
-          moveMode && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          moveMode && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             color: "blue",
             children: "[MOVE MODE]"
           }, undefined, false, undefined, this),
-          widgetPicker && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          widgetPicker && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             color: "cyan",
             children: `[${pickerActionLabel.toUpperCase()}]`
           }, undefined, false, undefined, this),
-          (settings.powerline.enabled || Boolean(settings.defaultSeparator)) && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+          (settings.powerline.enabled || Boolean(settings.defaultSeparator)) && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             marginLeft: 2,
-            children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               color: "yellow",
               children: [
                 "⚠",
@@ -67388,46 +67593,46 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      moveMode ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      moveMode ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         flexDirection: "column",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           dimColor: true,
           children: "↑↓ to move widget, ESC or Enter to exit move mode"
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : widgetPicker ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      }, undefined, false, undefined, this) : widgetPicker ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         flexDirection: "column",
-        children: widgetPicker.level === "category" ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        children: widgetPicker.level === "category" ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
-            widgetPicker.categoryQuery.trim().length > 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            widgetPicker.categoryQuery.trim().length > 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               dimColor: true,
               children: "↑↓ select widget match, Enter apply, ESC clear/cancel"
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               dimColor: true,
               children: "↑↓ select category, type to search all widgets, Enter continue, ESC cancel"
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               children: [
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   dimColor: true,
                   children: "Search: "
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: "cyan",
                   children: widgetPicker.categoryQuery || "(none)"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           ]
-        }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
-            /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
               dimColor: true,
               children: "↑↓ select widget, type to search widgets, Enter apply, ESC back"
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               children: [
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   dimColor: true,
                   children: [
                     "Category:",
@@ -67438,7 +67643,7 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
                     " "
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: "cyan",
                   children: widgetPicker.widgetQuery || "(none)"
                 }, undefined, false, undefined, this)
@@ -67446,132 +67651,132 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
             }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             dimColor: true,
             children: helpText
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             dimColor: true,
             children: customKeybindsText || " "
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasFlexSeparator && !widthDetectionAvailable && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      hasFlexSeparator && !widthDetectionAvailable && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         marginTop: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             color: "yellow",
             children: "⚠ Note: Terminal width detection is currently unavailable in your environment."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             dimColor: true,
             children: "  Flex separators will act as normal separators until width detection is available."
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      widgetPicker && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      widgetPicker && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         marginTop: 1,
         flexDirection: "column",
-        children: widgetPicker.level === "category" ? widgetPicker.categoryQuery.trim().length > 0 ? topLevelSearchEntries.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: widgetPicker.level === "category" ? widgetPicker.categoryQuery.trim().length > 0 ? topLevelSearchEntries.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           dimColor: true,
           children: "No widgets match the search."
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
             topLevelSearchEntries.map((entry, index) => {
               const isSelected = entry.type === selectedTopLevelSearchEntry?.type;
-              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 flexDirection: "row",
                 flexWrap: "nowrap",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     width: 3,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                       color: isSelected ? "green" : undefined,
                       children: isSelected ? "▶ " : "  "
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     color: isSelected ? "green" : undefined,
                     children: `${index + 1}. ${entry.displayName}`
                   }, undefined, false, undefined, this)
                 ]
               }, entry.type, true, undefined, this);
             }),
-            selectedTopLevelSearchEntry && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            selectedTopLevelSearchEntry && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               marginTop: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                 dimColor: true,
                 children: selectedTopLevelSearchEntry.description
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this) : pickerCategories.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        }, undefined, true, undefined, this) : pickerCategories.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           dimColor: true,
           children: "No categories available."
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
             pickerCategories.map((category, index) => {
               const isSelected = category === selectedPickerCategory;
-              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 flexDirection: "row",
                 flexWrap: "nowrap",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     width: 3,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                       color: isSelected ? "green" : undefined,
                       children: isSelected ? "▶ " : "  "
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     color: isSelected ? "green" : undefined,
                     children: `${index + 1}. ${category}`
                   }, undefined, false, undefined, this)
                 ]
               }, category, true, undefined, this);
             }),
-            selectedPickerCategory === "All" && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            selectedPickerCategory === "All" && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               marginTop: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                 dimColor: true,
                 children: "Search across all widget categories."
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this) : pickerEntries.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        }, undefined, true, undefined, this) : pickerEntries.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           dimColor: true,
           children: "No widgets match the current category/search."
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
             pickerEntries.map((entry, index) => {
               const isSelected = entry.type === selectedPickerEntry?.type;
-              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 flexDirection: "row",
                 flexWrap: "nowrap",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     width: 3,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                       color: isSelected ? "green" : undefined,
                       children: isSelected ? "▶ " : "  "
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     color: isSelected ? "green" : undefined,
                     children: `${index + 1}. ${entry.displayName}`
                   }, undefined, false, undefined, this)
                 ]
               }, entry.type, true, undefined, this);
             }),
-            selectedPickerEntry && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            selectedPickerEntry && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               marginTop: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                 dimColor: true,
                 children: selectedPickerEntry.description
               }, undefined, false, undefined, this)
@@ -67579,60 +67784,60 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      !widgetPicker && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      !widgetPicker && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         marginTop: 1,
         flexDirection: "column",
-        children: widgets.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: widgets.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           dimColor: true,
           children: "No widgets. Press 'a' to add one."
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
           children: [
             widgets.map((widget, index) => {
               const isSelected = index === selectedIndex;
               const widgetImpl = widget.type !== "separator" && widget.type !== "flex-separator" ? getWidget(widget.type) : null;
               const { displayText, modifierText } = widgetImpl?.getEditorDisplay(widget) ?? { displayText: getWidgetDisplay(widget) };
               const supportsRawValue = widgetImpl?.supportsRawValue() ?? false;
-              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 flexDirection: "row",
                 flexWrap: "nowrap",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     width: 3,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                       color: isSelected ? moveMode ? "blue" : "green" : undefined,
                       children: isSelected ? moveMode ? "◆ " : "▶ " : "  "
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     color: isSelected ? moveMode ? "blue" : "green" : undefined,
                     children: `${index + 1}. ${displayText || getWidgetDisplay(widget)}`
                   }, undefined, false, undefined, this),
-                  modifierText && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  modifierText && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     dimColor: true,
                     children: [
                       " ",
                       modifierText
                     ]
                   }, undefined, true, undefined, this),
-                  supportsRawValue && widget.rawValue && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  supportsRawValue && widget.rawValue && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     dimColor: true,
                     children: " (raw value)"
                   }, undefined, false, undefined, this),
-                  widget.merge === true && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  widget.merge === true && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     dimColor: true,
                     children: " (merged→)"
                   }, undefined, false, undefined, this),
-                  widget.merge === "no-padding" && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  widget.merge === "no-padding" && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     dimColor: true,
                     children: " (merged-no-pad→)"
                   }, undefined, false, undefined, this)
                 ]
               }, widget.id, true, undefined, this);
             }),
-            currentWidget && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            currentWidget && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
               marginTop: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                 dimColor: true,
                 children: (() => {
                   if (currentWidget.type === "separator") {
@@ -67655,8 +67860,8 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
 // src/tui/components/LineSelector.tsx
 await init_build2();
 var import_pluralize = __toESM(require_pluralize(), 1);
-var import_react40 = __toESM(require_react(), 1);
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react39 = __toESM(require_react(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 var LineSelector = ({
   lines,
   onSelect,
@@ -67668,14 +67873,17 @@ var LineSelector = ({
   settings,
   allowEditing = false
 }) => {
-  const [selectedIndex, setSelectedIndex] = import_react40.useState(initialSelection);
-  const [showDeleteDialog, setShowDeleteDialog] = import_react40.useState(false);
-  const [moveMode, setMoveMode] = import_react40.useState(false);
-  const [localLines, setLocalLines] = import_react40.useState(lines);
-  import_react40.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = import_react39.useState(initialSelection);
+  const [showDeleteDialog, setShowDeleteDialog] = import_react39.useState(false);
+  const [moveMode, setMoveMode] = import_react39.useState(false);
+  const [localLines, setLocalLines] = import_react39.useState(lines);
+  import_react39.useEffect(() => {
     setLocalLines(lines);
   }, [lines]);
-  const selectedLine = import_react40.useMemo(() => localLines[selectedIndex], [localLines, selectedIndex]);
+  import_react39.useEffect(() => {
+    setSelectedIndex(initialSelection);
+  }, [initialSelection]);
+  const selectedLine = import_react39.useMemo(() => localLines[selectedIndex], [localLines, selectedIndex]);
   const appendLine = () => {
     const newLines = [...localLines, []];
     setLocalLines(newLines);
@@ -67735,7 +67943,7 @@ var LineSelector = ({
         }
         return;
       case "d":
-        if (allowEditing && localLines.length > 1) {
+        if (allowEditing && localLines.length > 1 && selectedIndex < localLines.length) {
           setShowDeleteDialog(true);
         }
         return;
@@ -67747,29 +67955,19 @@ var LineSelector = ({
     }
     if (key.escape) {
       onBack();
-    } else if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-    } else if (key.downArrow) {
-      setSelectedIndex(Math.min(localLines.length, selectedIndex + 1));
-    } else if (key.return) {
-      if (selectedIndex === localLines.length) {
-        onBack();
-      } else {
-        onSelect(selectedIndex);
-      }
     }
   });
   if (isThemeManaged) {
-    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           bold: true,
           children: title ?? "Select Line"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
             color: "yellow",
             children: [
               "⚠ Colors are currently managed by the Powerline theme:",
@@ -67777,30 +67975,30 @@ var LineSelector = ({
             ]
           }, undefined, true, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
             dimColor: true,
             children: "To customize colors, either:"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginLeft: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
             dimColor: true,
             children: "• Change to 'Custom' theme in Powerline Configuration → Themes"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginLeft: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
             dimColor: true,
             children: "• Disable Powerline mode in Powerline Configuration"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginTop: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
             children: "Press any key to go back..."
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
@@ -67809,26 +68007,25 @@ var LineSelector = ({
   }
   if (showDeleteDialog && selectedLine) {
     const suffix = selectedLine.length > 0 ? import_pluralize.default("widget", selectedLine.length, true) : "empty";
-    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           flexDirection: "column",
           gap: 1,
           children: [
-            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
               bold: true,
-              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                     children: [
                       "☰ Line",
-                      " ",
                       selectedIndex + 1
                     ]
                   }, undefined, true, undefined, this),
                   " ",
-                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                     dimColor: true,
                     children: [
                       "(",
@@ -67839,15 +68036,15 @@ var LineSelector = ({
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
               bold: true,
               children: "Are you sure you want to delete line?"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ConfirmDialog, {
+          children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ConfirmDialog, {
             inline: true,
             onConfirm: () => {
               deleteLine(selectedIndex);
@@ -67862,190 +68059,201 @@ var LineSelector = ({
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
-    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+  const lineItems = localLines.map((line, index) => ({
+    label: `☰ Line ${index + 1}`,
+    sublabel: `(${line.length > 0 ? import_pluralize.default("widget", line.length, true) : "empty"})`,
+    value: index
+  }));
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
+    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           children: [
-            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
               bold: true,
               children: [
                 title ?? "Select Line to Edit",
                 " "
               ]
             }, undefined, true, undefined, this),
-            moveMode && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            moveMode && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
               color: "blue",
               children: "[MOVE MODE]"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           dimColor: true,
           children: "Choose which status line to configure"
         }, undefined, false, undefined, this),
-        moveMode ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        moveMode ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           dimColor: true,
           children: "↑↓ to move line, ESC or Enter to exit move mode"
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           dimColor: true,
           children: allowEditing ? localLines.length > 1 ? "(a) to append new line, (d) to delete line, (m) to move line, ESC to go back" : "(a) to append new line, ESC to go back" : "ESC to go back"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        moveMode ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
           marginTop: 1,
           flexDirection: "column",
-          children: [
-            localLines.map((line, index) => {
-              const isSelected = selectedIndex === index;
-              const suffix = line.length ? import_pluralize.default("widget", line.length, true) : "empty";
-              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                  color: isSelected ? moveMode ? "blue" : "green" : undefined,
-                  children: [
-                    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                      children: isSelected ? moveMode ? "◆  " : "▶  " : "   "
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                      children: [
-                        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                          children: [
-                            "☰ Line",
-                            " ",
-                            index + 1
-                          ]
-                        }, undefined, true, undefined, this),
-                        " ",
-                        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                          dimColor: !isSelected,
-                          children: [
-                            "(",
-                            suffix,
-                            ")"
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, index, false, undefined, this);
-            }),
-            !moveMode && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-              marginTop: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-                color: selectedIndex === localLines.length ? "green" : undefined,
+          children: localLines.map((line, index) => {
+            const isSelected = selectedIndex === index;
+            const suffix = line.length ? import_pluralize.default("widget", line.length, true) : "empty";
+            return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+              children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: isSelected ? "blue" : undefined,
                 children: [
-                  selectedIndex === localLines.length ? "▶  " : "   ",
-                  "← Back"
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                    children: isSelected ? "◆  " : "   "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                    children: [
+                      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                        children: [
+                          "☰ Line",
+                          " ",
+                          index + 1
+                        ]
+                      }, undefined, true, undefined, this),
+                      " ",
+                      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                        dimColor: !isSelected,
+                        children: [
+                          "(",
+                          suffix,
+                          ")"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
+            }, index, false, undefined, this);
+          })
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(List, {
+          marginTop: 1,
+          items: lineItems,
+          onSelect: (line) => {
+            if (line === "back") {
+              onBack();
+              return;
+            }
+            onSelect(line);
+          },
+          onSelectionChange: (_, index) => {
+            setSelectedIndex(index);
+          },
+          initialSelection: selectedIndex,
+          showBackButton: true
+        }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 };
 // src/tui/components/MainMenu.tsx
 await init_build2();
-var import_react41 = __toESM(require_react(), 1);
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
-var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges, initialSelection = 0, powerlineFontStatus, settings, previewIsTruncated }) => {
-  const [selectedIndex, setSelectedIndex] = import_react41.useState(initialSelection);
+var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var MainMenu = ({
+  onSelect,
+  isClaudeInstalled,
+  hasChanges,
+  initialSelection = 0,
+  powerlineFontStatus,
+  settings,
+  previewIsTruncated
+}) => {
   const menuItems = [
-    { label: "\uD83D\uDCDD Edit Lines", value: "lines", selectable: true },
-    { label: "\uD83C\uDFA8 Edit Colors", value: "colors", selectable: true },
-    { label: "⚡ Powerline Setup", value: "powerline", selectable: true },
-    { label: "", value: "_gap1", selectable: false },
-    { label: "\uD83D\uDCBB Terminal Options", value: "terminalConfig", selectable: true },
-    { label: "\uD83C\uDF10 Global Overrides", value: "globalOverrides", selectable: true },
-    { label: "", value: "_gap2", selectable: false },
-    { label: isClaudeInstalled ? "\uD83D\uDD0C Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code", value: "install", selectable: true }
+    {
+      label: "\uD83D\uDCDD Edit Lines",
+      value: "lines",
+      description: "Configure any number of status lines with various widgets like model info, git status, and token usage"
+    },
+    {
+      label: "\uD83C\uDFA8 Edit Colors",
+      value: "colors",
+      description: "Customize colors for each widget including foreground, background, and bold styling"
+    },
+    {
+      label: "⚡ Powerline Setup",
+      value: "powerline",
+      description: "Install Powerline fonts for enhanced visual separators and symbols in your status line"
+    },
+    "-",
+    {
+      label: "\uD83D\uDCBB Terminal Options",
+      value: "terminalConfig",
+      description: "Configure terminal-specific settings for optimal display"
+    },
+    {
+      label: "\uD83C\uDF10 Global Overrides",
+      value: "globalOverrides",
+      description: "Set global padding, separators, and color overrides that apply to all widgets"
+    },
+    "-",
+    {
+      label: isClaudeInstalled ? "\uD83D\uDD0C Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code",
+      value: "install",
+      description: isClaudeInstalled ? "Remove ccstatusline from your Claude Code settings" : "Add ccstatusline to your Claude Code settings for automatic status line rendering"
+    }
   ];
   if (hasChanges) {
-    menuItems.push({ label: "\uD83D\uDCBE Save & Exit", value: "save", selectable: true }, { label: "❌ Exit without saving", value: "exit", selectable: true }, { label: "", value: "_gap3", selectable: false }, { label: "⭐ Like ccstatusline? Star us on GitHub", value: "starGithub", selectable: true });
+    menuItems.push({
+      label: "\uD83D\uDCBE Save & Exit",
+      value: "save",
+      description: "Save all changes and exit the configuration tool"
+    }, {
+      label: "❌ Exit without saving",
+      value: "exit",
+      description: "Exit without saving your changes"
+    }, "-", {
+      label: "⭐ Like ccstatusline? Star us on GitHub",
+      value: "starGithub",
+      description: "Open the ccstatusline GitHub repository in your browser so you can star the project"
+    });
   } else {
-    menuItems.push({ label: "\uD83D\uDEAA Exit", value: "exit", selectable: true }, { label: "", value: "_gap3", selectable: false }, { label: "⭐ Like ccstatusline? Star us on GitHub", value: "starGithub", selectable: true });
+    menuItems.push({
+      label: "\uD83D\uDEAA Exit",
+      value: "exit",
+      description: "Exit the configuration tool"
+    }, "-", {
+      label: "⭐ Like ccstatusline? Star us on GitHub",
+      value: "starGithub",
+      description: "Open the ccstatusline GitHub repository in your browser so you can star the project"
+    });
   }
-  const selectableItems = menuItems.filter((item) => item.selectable);
-  use_input_default((input, key) => {
-    if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-    } else if (key.downArrow) {
-      setSelectedIndex(Math.min(selectableItems.length - 1, selectedIndex + 1));
-    } else if (key.return) {
-      const item = selectableItems[selectedIndex];
-      if (item) {
-        onSelect(item.value);
-      }
-    }
-  });
-  const getDescription = (value) => {
-    const descriptions = {
-      lines: "Configure any number of status lines with various widgets like model info, git status, and token usage",
-      colors: "Customize colors for each widget including foreground, background, and bold styling",
-      powerline: "Install Powerline fonts for enhanced visual separators and symbols in your status line",
-      globalOverrides: "Set global padding, separators, and color overrides that apply to all widgets",
-      install: isClaudeInstalled ? "Remove ccstatusline from your Claude Code settings" : "Add ccstatusline to your Claude Code settings for automatic status line rendering",
-      terminalConfig: "Configure terminal-specific settings for optimal display",
-      starGithub: "Open the ccstatusline GitHub repository in your browser so you can star the project",
-      save: "Save all changes and exit the configuration tool",
-      exit: hasChanges ? "Exit without saving your changes" : "Exit the configuration tool"
-    };
-    return descriptions[value] ?? "";
-  };
-  const selectedItem = selectableItems[selectedIndex];
-  const description = selectedItem ? getDescription(selectedItem.value) : "";
   const showTruncationWarning = previewIsTruncated && settings?.flexMode === "full-minus-40";
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      showTruncationWarning && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+      showTruncationWarning && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
           color: "yellow",
           children: "⚠ Some lines are truncated, see Terminal Options → Terminal Width for info"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
         bold: true,
         children: "Main Menu"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(List, {
+        items: menuItems,
         marginTop: 1,
-        flexDirection: "column",
-        children: menuItems.map((item, idx) => {
-          if (!item.selectable && item.value.startsWith("_gap")) {
-            return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
-              children: " "
-            }, item.value, false, undefined, this);
+        onSelect: (value, index) => {
+          if (value === "back") {
+            return;
           }
-          const selectableIdx = selectableItems.indexOf(item);
-          const isSelected = selectableIdx === selectedIndex;
-          return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
-            color: isSelected ? "green" : undefined,
-            children: [
-              isSelected ? "▶  " : "   ",
-              item.label
-            ]
-          }, item.value, true, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      description && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
-        marginTop: 1,
-        paddingLeft: 2,
-        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
-          dimColor: true,
-          wrap: "wrap",
-          children: description
-        }, undefined, false, undefined, this)
+          onSelect(value, index);
+        },
+        initialSelection
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 // src/tui/components/PowerlineSetup.tsx
 await init_build2();
-var import_react44 = __toESM(require_react(), 1);
+var import_react42 = __toESM(require_react(), 1);
 import * as os11 from "os";
 
 // src/utils/powerline-settings.ts
@@ -68076,8 +68284,8 @@ function buildEnabledPowerlineSettings(settings, removeManualSeparators) {
 // src/tui/components/PowerlineSeparatorEditor.tsx
 init_input_guards();
 await init_build2();
-var import_react42 = __toESM(require_react(), 1);
-var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react40 = __toESM(require_react(), 1);
+var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
 var PowerlineSeparatorEditor = ({
   settings,
   mode,
@@ -68097,10 +68305,10 @@ var PowerlineSeparatorEditor = ({
   };
   const separators = getItems();
   const invertBgs = mode === "separator" ? powerlineConfig.separatorInvertBackground : [];
-  const [selectedIndex, setSelectedIndex] = import_react42.useState(0);
-  const [hexInputMode, setHexInputMode] = import_react42.useState(false);
-  const [hexInput, setHexInput] = import_react42.useState("");
-  const [cursorPos, setCursorPos] = import_react42.useState(0);
+  const [selectedIndex, setSelectedIndex] = import_react40.useState(0);
+  const [hexInputMode, setHexInputMode] = import_react40.useState(false);
+  const [hexInput, setHexInput] = import_react40.useState("");
+  const [cursorPos, setCursorPos] = import_react40.useState(0);
   const getPresets = () => {
     if (mode === "separator") {
       return [
@@ -68293,18 +68501,18 @@ var PowerlineSeparatorEditor = ({
   };
   const canAdd = mode === "separator" || separators.length < 3;
   const canDelete = mode !== "separator" || separators.length > 1;
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
         bold: true,
         children: getTitle()
       }, undefined, false, undefined, this),
-      hexInputMode ? /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
+      hexInputMode ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
         marginTop: 2,
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
             children: [
               "Enter hex code (4-6 digits) for",
               " ",
@@ -68313,51 +68521,51 @@ var PowerlineSeparatorEditor = ({
               ":"
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
             children: [
               "U+",
               hexInput.slice(0, cursorPos),
-              /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
                 backgroundColor: "gray",
                 color: "black",
                 children: hexInput[cursorPos] ?? "_"
               }, undefined, false, undefined, this),
               hexInput.slice(cursorPos + 1),
-              hexInput.length < 6 && hexInput.length === cursorPos && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+              hexInput.length < 6 && hexInput.length === cursorPos && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
                 dimColor: true,
                 children: "_".repeat(6 - hexInput.length - 1)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
             dimColor: true,
             children: "Enter 4-6 hex digits (0-9, A-F) for a Unicode code point, then press Enter. ESC to cancel."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
             dimColor: true,
             children: "Examples: E0B0 (powerline), 1F984 (\uD83E\uDD84), 2764 (❤)"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(jsx_dev_runtime14.Fragment, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
-            children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+            children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
               dimColor: true,
               children: `↑↓ select, ← → cycle${canAdd ? ", (a)dd, (i)nsert" : ""}${canDelete ? ", (d)elete" : ""}, (c)lear, (h)ex${mode === "separator" ? ", (t)oggle invert" : ""}, ESC back`
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
             marginTop: 2,
             flexDirection: "column",
-            children: separators.length > 0 ? separators.map((sep2, index) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
-              children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+            children: separators.length > 0 ? separators.map((sep2, index) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+              children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
                 color: index === selectedIndex ? "green" : undefined,
                 children: [
                   index === selectedIndex ? "▶  " : "   ",
                   `${index + 1}: ${getSeparatorDisplay(sep2, index)}`
                 ]
               }, undefined, true, undefined, this)
-            }, index, false, undefined, this)) : /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+            }, index, false, undefined, this)) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
               dimColor: true,
               children: "(none configured - press 'a' to add)"
             }, undefined, false, undefined, this)
@@ -68372,143 +68580,150 @@ var PowerlineSeparatorEditor = ({
 init_ColorLevel();
 init_colors();
 await init_build2();
-var import_react43 = __toESM(require_react(), 1);
-var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react41 = __toESM(require_react(), 1);
+var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+function buildPowerlineThemeItems(themes, originalTheme) {
+  return themes.map((themeName) => {
+    const theme = getPowerlineTheme(themeName);
+    return {
+      label: theme?.name ?? themeName,
+      sublabel: themeName === originalTheme ? "(original)" : undefined,
+      value: themeName,
+      description: theme?.description ?? ""
+    };
+  });
+}
+function applyCustomPowerlineTheme(settings, themeName) {
+  const theme = getPowerlineTheme(themeName);
+  if (!theme || themeName === "custom") {
+    return null;
+  }
+  const colorLevel = getColorLevelString(settings.colorLevel);
+  const colorLevelKey = colorLevel === "ansi16" ? "1" : colorLevel === "ansi256" ? "2" : "3";
+  const themeColors = theme[colorLevelKey];
+  if (!themeColors) {
+    return null;
+  }
+  const lines = settings.lines.map((line) => {
+    let widgetColorIndex = 0;
+    return line.map((widget) => {
+      if (widget.type === "separator" || widget.type === "flex-separator") {
+        return widget;
+      }
+      const fgColor = themeColors.fg[widgetColorIndex % themeColors.fg.length];
+      const bgColor = themeColors.bg[widgetColorIndex % themeColors.bg.length];
+      widgetColorIndex++;
+      return {
+        ...widget,
+        color: fgColor,
+        backgroundColor: bgColor
+      };
+    });
+  });
+  return {
+    ...settings,
+    powerline: {
+      ...settings.powerline,
+      theme: "custom"
+    },
+    lines
+  };
+}
 var PowerlineThemeSelector = ({
   settings,
   onUpdate,
   onBack
 }) => {
-  const themes = getPowerlineThemes();
+  const themes = import_react41.useMemo(() => getPowerlineThemes(), []);
   const currentTheme = settings.powerline.theme ?? "custom";
-  const [selectedIndex, setSelectedIndex] = import_react43.useState(Math.max(0, themes.indexOf(currentTheme)));
-  const [showCustomizeConfirm, setShowCustomizeConfirm] = import_react43.useState(false);
-  const originalThemeRef = import_react43.useRef(currentTheme);
-  const originalSettingsRef = import_react43.useRef(settings);
-  const applyTheme = (themeName) => {
-    const updatedSettings = {
-      ...settings,
-      powerline: {
-        ...settings.powerline,
-        theme: themeName
-      }
-    };
-    onUpdate(updatedSettings);
-  };
-  const customizeTheme = () => {
-    const currentThemeName = themes[selectedIndex];
-    if (!currentThemeName) {
+  const [selectedIndex, setSelectedIndex] = import_react41.useState(Math.max(0, themes.indexOf(currentTheme)));
+  const [showCustomizeConfirm, setShowCustomizeConfirm] = import_react41.useState(false);
+  const originalThemeRef = import_react41.useRef(currentTheme);
+  const originalSettingsRef = import_react41.useRef(settings);
+  const latestSettingsRef = import_react41.useRef(settings);
+  const latestOnUpdateRef = import_react41.useRef(onUpdate);
+  const didHandleInitialSelectionRef = import_react41.useRef(false);
+  import_react41.useEffect(() => {
+    latestSettingsRef.current = settings;
+    latestOnUpdateRef.current = onUpdate;
+  }, [settings, onUpdate]);
+  import_react41.useEffect(() => {
+    const themeName = themes[selectedIndex];
+    if (!themeName) {
       return;
     }
-    const theme = getPowerlineTheme(currentThemeName);
-    if (!theme || currentThemeName === "custom") {
-      onBack();
+    if (!didHandleInitialSelectionRef.current) {
+      didHandleInitialSelectionRef.current = true;
       return;
     }
-    const colorLevel = getColorLevelString(settings.colorLevel);
-    const colorLevelKey = colorLevel === "ansi16" ? "1" : colorLevel === "ansi256" ? "2" : "3";
-    const themeColors = theme[colorLevelKey];
-    if (themeColors) {
-      const newLines = settings.lines.map((line) => {
-        let widgetColorIndex = 0;
-        return line.map((widget) => {
-          if (widget.type === "separator" || widget.type === "flex-separator") {
-            return widget;
-          }
-          const fgColor = themeColors.fg[widgetColorIndex % themeColors.fg.length];
-          const bgColor = themeColors.bg[widgetColorIndex % themeColors.bg.length];
-          widgetColorIndex++;
-          return {
-            ...widget,
-            color: fgColor,
-            backgroundColor: bgColor
-          };
-        });
-      });
-      const updatedSettings = {
-        ...settings,
-        powerline: {
-          ...settings.powerline,
-          theme: "custom"
-        },
-        lines: newLines
-      };
-      onUpdate(updatedSettings);
-    }
-    onBack();
-  };
+    latestOnUpdateRef.current({
+      ...latestSettingsRef.current,
+      powerline: {
+        ...latestSettingsRef.current.powerline,
+        theme: themeName
+      }
+    });
+  }, [selectedIndex, themes]);
   use_input_default((input, key) => {
     if (showCustomizeConfirm) {
       return;
     }
-    {
-      if (key.escape) {
-        onUpdate(originalSettingsRef.current);
-        onBack();
-      } else if (key.upArrow) {
-        const newIndex = Math.max(0, selectedIndex - 1);
-        setSelectedIndex(newIndex);
-        const newTheme = themes[newIndex];
-        if (newTheme) {
-          applyTheme(newTheme);
-        }
-      } else if (key.downArrow) {
-        const newIndex = Math.min(themes.length - 1, selectedIndex + 1);
-        setSelectedIndex(newIndex);
-        const newTheme = themes[newIndex];
-        if (newTheme) {
-          applyTheme(newTheme);
-        }
-      } else if (key.return) {
-        onBack();
-      } else if (input === "c" || input === "C") {
-        const currentThemeName = themes[selectedIndex];
-        if (currentThemeName && currentThemeName !== "custom") {
-          setShowCustomizeConfirm(true);
-        }
+    if (key.escape) {
+      onUpdate(originalSettingsRef.current);
+      onBack();
+    } else if (input === "c" || input === "C") {
+      const currentThemeName = themes[selectedIndex];
+      if (currentThemeName && currentThemeName !== "custom") {
+        setShowCustomizeConfirm(true);
       }
     }
   });
   const selectedThemeName = themes[selectedIndex];
-  const selectedTheme = selectedThemeName ? getPowerlineTheme(selectedThemeName) : undefined;
+  const themeItems = import_react41.useMemo(() => buildPowerlineThemeItems(themes, originalThemeRef.current), [themes]);
   if (showCustomizeConfirm) {
-    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
           bold: true,
           color: "yellow",
           children: "⚠ Confirm Customization"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
           marginTop: 1,
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
               children: "This will copy the current theme colors to your widgets"
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
               children: "and switch to Custom theme mode."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
               color: "red",
               children: "This will overwrite any existing custom colors!"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
           marginTop: 2,
-          children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
             children: "Continue?"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(ConfirmDialog, {
+          children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ConfirmDialog, {
             inline: true,
             onConfirm: () => {
-              customizeTheme();
+              if (selectedThemeName) {
+                const updatedSettings = applyCustomPowerlineTheme(settings, selectedThemeName);
+                if (updatedSettings) {
+                  onUpdate(updatedSettings);
+                }
+              }
               setShowCustomizeConfirm(false);
+              onBack();
             },
             onCancel: () => {
               setShowCustomizeConfirm(false);
@@ -68518,82 +68733,150 @@ var PowerlineThemeSelector = ({
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
         bold: true,
         children: [
           `Powerline Theme Selection  |  `,
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
             dimColor: true,
             children: `Original: ${originalThemeRef.current}`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-        children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
           dimColor: true,
           children: `↑↓ navigate, Enter apply${selectedThemeName && selectedThemeName !== "custom" ? ", (c)ustomize theme" : ""}, ESC cancel`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(List, {
         marginTop: 1,
-        flexDirection: "column",
-        children: themes.map((themeName, index) => {
-          const theme = getPowerlineTheme(themeName);
-          const isSelected = index === selectedIndex;
-          const isOriginal = themeName === originalThemeRef.current;
-          return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-            children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-              color: isSelected ? "green" : undefined,
-              children: [
-                isSelected ? "▶ " : "  ",
-                theme?.name ?? themeName,
-                isOriginal && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-                  dimColor: true,
-                  children: " (original)"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, themeName, false, undefined, this);
-        })
+        items: themeItems,
+        onSelect: () => {
+          onBack();
+        },
+        onSelectionChange: (themeName, index) => {
+          if (themeName === "back") {
+            return;
+          }
+          setSelectedIndex(index);
+        },
+        initialSelection: selectedIndex
       }, undefined, false, undefined, this),
-      selectedTheme && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-        marginTop: 2,
-        flexDirection: "column",
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-            dimColor: true,
-            children: "Description:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-            marginLeft: 2,
-            children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-              children: selectedTheme.description
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          selectedThemeName && selectedThemeName !== "custom" && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-            marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-              dimColor: true,
-              children: "Press (c) to customize this theme - copies colors to widgets"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          settings.colorLevel === 1 && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
-            children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
-              color: "yellow",
-              children: "⚠ 16 color mode themes have a very limited palette, we recommend switching color level in Terminal Options"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+      selectedThemeName && selectedThemeName !== "custom" && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+          dimColor: true,
+          children: "Press (c) to customize this theme - copies colors to widgets"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      settings.colorLevel === 1 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+          color: "yellow",
+          children: "⚠ 16 color mode themes have a very limited palette, we recommend switching color level in Terminal Options"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 
 // src/tui/components/PowerlineSetup.tsx
-var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
+var POWERLINE_MENU_LABEL_WIDTH = 11;
+function formatPowerlineMenuLabel(label) {
+  return label.padEnd(POWERLINE_MENU_LABEL_WIDTH, " ");
+}
+function getSeparatorDisplay(powerlineConfig) {
+  const seps = powerlineConfig.separators;
+  if (seps.length > 1) {
+    return "multiple";
+  }
+  const sep2 = seps[0] ?? "";
+  const presets = [
+    { char: "", name: "Triangle Right" },
+    { char: "", name: "Triangle Left" },
+    { char: "", name: "Round Right" },
+    { char: "", name: "Round Left" }
+  ];
+  const preset = presets.find((item) => item.char === sep2);
+  if (preset) {
+    return `${preset.char} - ${preset.name}`;
+  }
+  return `${sep2} - Custom`;
+}
+function getCapDisplay(powerlineConfig, type) {
+  const caps = type === "start" ? powerlineConfig.startCaps : powerlineConfig.endCaps;
+  if (caps.length === 0) {
+    return "none";
+  }
+  if (caps.length > 1) {
+    return "multiple";
+  }
+  const cap = caps[0];
+  if (!cap) {
+    return "none";
+  }
+  const presets = type === "start" ? [
+    { char: "", name: "Triangle" },
+    { char: "", name: "Round" },
+    { char: "", name: "Lower Triangle" },
+    { char: "", name: "Diagonal" }
+  ] : [
+    { char: "", name: "Triangle" },
+    { char: "", name: "Round" },
+    { char: "", name: "Lower Triangle" },
+    { char: "", name: "Diagonal" }
+  ];
+  const preset = presets.find((item) => item.char === cap);
+  if (preset) {
+    return `${preset.char} - ${preset.name}`;
+  }
+  return `${cap} - Custom`;
+}
+function getThemeDisplay(powerlineConfig) {
+  const theme = powerlineConfig.theme;
+  if (!theme || theme === "custom") {
+    return "Custom";
+  }
+  return theme.charAt(0).toUpperCase() + theme.slice(1);
+}
+function buildPowerlineSetupMenuItems(powerlineConfig) {
+  const disabled = !powerlineConfig.enabled;
+  return [
+    {
+      label: formatPowerlineMenuLabel("Separator"),
+      sublabel: `(${getSeparatorDisplay(powerlineConfig)})`,
+      value: "separator",
+      disabled,
+      description: "Choose the glyph used between powerline segments."
+    },
+    {
+      label: formatPowerlineMenuLabel("Start Cap"),
+      sublabel: `(${getCapDisplay(powerlineConfig, "start")})`,
+      value: "startCap",
+      disabled,
+      description: "Configure the cap glyph that appears at the start of each powerline line."
+    },
+    {
+      label: formatPowerlineMenuLabel("End Cap"),
+      sublabel: `(${getCapDisplay(powerlineConfig, "end")})`,
+      value: "endCap",
+      disabled,
+      description: "Configure the cap glyph that appears at the end of each powerline line."
+    },
+    {
+      label: formatPowerlineMenuLabel("Themes"),
+      sublabel: `(${getThemeDisplay(powerlineConfig)})`,
+      value: "themes",
+      disabled,
+      description: "Preview built-in powerline themes or copy a theme into custom widget colors."
+    }
+  ];
+}
 var PowerlineSetup = ({
   settings,
   powerlineFontStatus,
@@ -68605,68 +68888,11 @@ var PowerlineSetup = ({
   onClearMessage
 }) => {
   const powerlineConfig = settings.powerline;
-  const [screen, setScreen] = import_react44.useState("menu");
-  const [selectedMenuItem, setSelectedMenuItem] = import_react44.useState(0);
-  const [confirmingEnable, setConfirmingEnable] = import_react44.useState(false);
-  const [confirmingFontInstall, setConfirmingFontInstall] = import_react44.useState(false);
+  const [screen, setScreen] = import_react42.useState("menu");
+  const [selectedMenuItem, setSelectedMenuItem] = import_react42.useState(0);
+  const [confirmingEnable, setConfirmingEnable] = import_react42.useState(false);
+  const [confirmingFontInstall, setConfirmingFontInstall] = import_react42.useState(false);
   const hasSeparatorItems = settings.lines.some((line) => line.some((item) => item.type === "separator" || item.type === "flex-separator"));
-  const menuItems = [
-    { label: "Separator", value: "separator" },
-    { label: "Start Cap", value: "startCap" },
-    { label: "End Cap", value: "endCap" },
-    { label: "Themes", value: "themes" },
-    { label: "← Back", value: "back" }
-  ];
-  const getSeparatorDisplay = () => {
-    const seps = powerlineConfig.separators;
-    if (seps.length > 1) {
-      return "multiple";
-    }
-    const sep2 = seps[0] ?? "";
-    const presets = [
-      { char: "", name: "Triangle Right" },
-      { char: "", name: "Triangle Left" },
-      { char: "", name: "Round Right" },
-      { char: "", name: "Round Left" }
-    ];
-    const preset = presets.find((p) => p.char === sep2);
-    if (preset) {
-      return `${preset.char} - ${preset.name}`;
-    }
-    return `${sep2} - Custom`;
-  };
-  const getCapDisplay = (type) => {
-    const caps = type === "start" ? powerlineConfig.startCaps : powerlineConfig.endCaps;
-    if (caps.length === 0)
-      return "none";
-    if (caps.length > 1)
-      return "multiple";
-    const cap = caps[0];
-    if (!cap)
-      return "none";
-    const presets = type === "start" ? [
-      { char: "", name: "Triangle" },
-      { char: "", name: "Round" },
-      { char: "", name: "Lower Triangle" },
-      { char: "", name: "Diagonal" }
-    ] : [
-      { char: "", name: "Triangle" },
-      { char: "", name: "Round" },
-      { char: "", name: "Lower Triangle" },
-      { char: "", name: "Diagonal" }
-    ];
-    const preset = presets.find((c) => c.char === cap);
-    if (preset) {
-      return `${preset.char} - ${preset.name}`;
-    }
-    return `${cap} - Custom`;
-  };
-  const getThemeDisplay = () => {
-    const theme = powerlineConfig.theme;
-    if (!theme || theme === "custom")
-      return "Custom";
-    return theme.charAt(0).toUpperCase() + theme.slice(1);
-  };
   use_input_default((input, key) => {
     if (fontInstallMessage || installingFonts) {
       if (fontInstallMessage && !key.escape) {
@@ -68680,19 +68906,6 @@ var PowerlineSetup = ({
     if (screen === "menu") {
       if (key.escape) {
         onBack();
-      } else if (key.upArrow) {
-        setSelectedMenuItem(Math.max(0, selectedMenuItem - 1));
-      } else if (key.downArrow) {
-        setSelectedMenuItem(Math.min(menuItems.length - 1, selectedMenuItem + 1));
-      } else if (key.return) {
-        const selected = menuItems[selectedMenuItem];
-        if (selected) {
-          if (selected.value === "back") {
-            onBack();
-          } else if (powerlineConfig.enabled) {
-            setScreen(selected.value);
-          }
-        }
       } else if (input === "t" || input === "T") {
         if (!powerlineConfig.enabled) {
           if (hasSeparatorItems) {
@@ -68701,19 +68914,29 @@ var PowerlineSetup = ({
             onUpdate(buildEnabledPowerlineSettings(settings, false));
           }
         } else {
-          const newConfig = { ...powerlineConfig, enabled: false };
-          onUpdate({ ...settings, powerline: newConfig });
+          onUpdate({
+            ...settings,
+            powerline: {
+              ...powerlineConfig,
+              enabled: false
+            }
+          });
         }
       } else if (input === "i" || input === "I") {
         setConfirmingFontInstall(true);
       } else if ((input === "a" || input === "A") && powerlineConfig.enabled) {
-        const newConfig = { ...powerlineConfig, autoAlign: !powerlineConfig.autoAlign };
-        onUpdate({ ...settings, powerline: newConfig });
+        onUpdate({
+          ...settings,
+          powerline: {
+            ...powerlineConfig,
+            autoAlign: !powerlineConfig.autoAlign
+          }
+        });
       }
     }
   });
   if (screen === "separator") {
-    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(PowerlineSeparatorEditor, {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(PowerlineSeparatorEditor, {
       settings,
       mode: "separator",
       onUpdate,
@@ -68723,7 +68946,7 @@ var PowerlineSetup = ({
     }, undefined, false, undefined, this);
   }
   if (screen === "startCap") {
-    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(PowerlineSeparatorEditor, {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(PowerlineSeparatorEditor, {
       settings,
       mode: "startCap",
       onUpdate,
@@ -68733,7 +68956,7 @@ var PowerlineSetup = ({
     }, undefined, false, undefined, this);
   }
   if (screen === "endCap") {
-    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(PowerlineSeparatorEditor, {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(PowerlineSeparatorEditor, {
       settings,
       mode: "endCap",
       onUpdate,
@@ -68743,7 +68966,7 @@ var PowerlineSetup = ({
     }, undefined, false, undefined, this);
   }
   if (screen === "themes") {
-    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(PowerlineThemeSelector, {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(PowerlineThemeSelector, {
       settings,
       onUpdate,
       onBack: () => {
@@ -68751,140 +68974,140 @@ var PowerlineSetup = ({
       }
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      !confirmingFontInstall && !installingFonts && !fontInstallMessage && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+      !confirmingFontInstall && !installingFonts && !fontInstallMessage && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
         bold: true,
         children: "Powerline Setup"
       }, undefined, false, undefined, this),
-      confirmingFontInstall ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+      confirmingFontInstall ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginBottom: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
               color: "cyan",
               bold: true,
               children: "Font Installation"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginBottom: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 bold: true,
                 children: "What will happen:"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "• Clone fonts from "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     color: "blue",
                     children: "https://github.com/powerline/fonts"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              os11.platform() === "darwin" && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+              os11.platform() === "darwin" && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "• Run install.sh script which will:"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "  - Copy all .ttf/.otf files to ~/Library/Fonts"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "  - Register fonts with macOS"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              os11.platform() === "linux" && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+              os11.platform() === "linux" && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "• Run install.sh script which will:"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "  - Copy all .ttf/.otf files to ~/.local/share/fonts"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "  - Run fc-cache to update font cache"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              os11.platform() === "win32" && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+              os11.platform() === "win32" && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "• Copy Powerline .ttf/.otf files to:"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: "  AppData\\Local\\Microsoft\\Windows\\Fonts"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: "• Clean up temporary files"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginBottom: 1,
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 color: "yellow",
                 bold: true,
                 children: "Requirements: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: "Git installed, Internet connection, Write permissions"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginBottom: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 color: "green",
                 bold: true,
                 children: "After install:"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: "• Restart terminal"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: "• Select a Powerline font"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: '  (e.g. "Meslo LG S for Powerline")'
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
               children: "Proceed? "
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ConfirmDialog, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(ConfirmDialog, {
               inline: true,
               onConfirm: () => {
                 setConfirmingFontInstall(false);
@@ -68896,36 +69119,36 @@ var PowerlineSetup = ({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : confirmingEnable ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+      }, undefined, true, undefined, this) : confirmingEnable ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
         flexDirection: "column",
         marginTop: 1,
         children: [
-          hasSeparatorItems && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+          hasSeparatorItems && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
-                children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
+                children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                   color: "yellow",
                   children: "⚠ Warning: Enabling Powerline mode will remove all existing separators and flex-separators from your status lines."
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                   dimColor: true,
                   children: "Powerline mode uses its own separator system and is incompatible with manual separators."
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: hasSeparatorItems ? 1 : 0,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
               children: "Do you want to continue? "
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ConfirmDialog, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(ConfirmDialog, {
               inline: true,
               onConfirm: () => {
                 onUpdate(buildEnabledPowerlineSettings(settings, true));
@@ -68937,51 +69160,51 @@ var PowerlineSetup = ({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : installingFonts ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+      }, undefined, true, undefined, this) : installingFonts ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
           color: "yellow",
           children: "Installing Powerline fonts... This may take a moment."
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : fontInstallMessage ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+      }, undefined, false, undefined, this) : fontInstallMessage ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
             color: fontInstallMessage.includes("success") ? "green" : "red",
             children: fontInstallMessage
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
               dimColor: true,
               children: "Press any key to continue..."
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             flexDirection: "column",
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
               children: [
                 "    Font Status: ",
-                powerlineFontStatus.installed ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+                powerlineFontStatus.installed ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
                   children: [
-                    /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                    /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                       color: "green",
                       children: "✓ Installed"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                    /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                       dimColor: true,
                       children: " - Ensure fonts are active in your terminal"
                     }, undefined, false, undefined, this)
                   ]
-                }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+                }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
                   children: [
-                    /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                    /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                       color: "yellow",
                       children: "✗ Not Installed"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                    /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                       dimColor: true,
                       children: " - Press (i) to install Powerline fonts"
                     }, undefined, false, undefined, this)
@@ -68990,105 +69213,70 @@ var PowerlineSetup = ({
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 children: " Powerline Mode: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 color: powerlineConfig.enabled ? "green" : "red",
                 children: powerlineConfig.enabled ? "✓ Enabled  " : "✗ Disabled "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                 dimColor: true,
                 children: " - Press (t) to toggle"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          powerlineConfig.enabled && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
+          powerlineConfig.enabled && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     children: "  Align Widgets: "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     color: powerlineConfig.autoAlign ? "green" : "red",
                     children: powerlineConfig.autoAlign ? "✓ Enabled  " : "✗ Disabled "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                     dimColor: true,
                     children: " - Press (a) to toggle"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
                 flexDirection: "column",
                 marginTop: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
                   dimColor: true,
                   children: "When enabled, global overrides are disabled and powerline separators are used"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
+          !powerlineConfig.enabled && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
             marginTop: 1,
-            flexDirection: "column",
-            children: powerlineConfig.enabled ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(jsx_dev_runtime16.Fragment, {
-              children: menuItems.map((item, index) => {
-                const isSelected = index === selectedMenuItem;
-                let displayValue = "";
-                switch (item.value) {
-                  case "separator":
-                    displayValue = getSeparatorDisplay();
-                    break;
-                  case "startCap":
-                    displayValue = getCapDisplay("start");
-                    break;
-                  case "endCap":
-                    displayValue = getCapDisplay("end");
-                    break;
-                  case "themes":
-                    displayValue = getThemeDisplay();
-                    break;
-                  case "back":
-                    displayValue = "";
-                    break;
-                }
-                if (item.value === "back") {
-                  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
-                    marginTop: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
-                      color: isSelected ? "green" : undefined,
-                      children: [
-                        isSelected ? "▶  " : "   ",
-                        item.label
-                      ]
-                    }, undefined, true, undefined, this)
-                  }, item.value, false, undefined, this);
-                }
-                return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
-                  children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
-                    color: isSelected ? "green" : undefined,
-                    children: [
-                      isSelected ? "▶  " : "   ",
-                      item.label.padEnd(11, " "),
-                      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
-                        dimColor: true,
-                        children: displayValue && `(${displayValue})`
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                }, item.value, false, undefined, this);
-              })
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Box_default, {
-              marginTop: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
-                dimColor: true,
-                children: "Press ESC to go back"
-              }, undefined, false, undefined, this)
+            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
+              dimColor: true,
+              children: "Enable Powerline mode to configure separators, caps, and themes."
             }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(List, {
+            marginTop: 1,
+            items: buildPowerlineSetupMenuItems(powerlineConfig),
+            onSelect: (value) => {
+              if (value === "back") {
+                onBack();
+                return;
+              }
+              setScreen(value);
+            },
+            onSelectionChange: (_, index) => {
+              setSelectedMenuItem(index);
+            },
+            initialSelection: selectedMenuItem,
+            showBackButton: true
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -69101,7 +69289,7 @@ await __promiseAll([
   init_build2(),
   init_renderer2()
 ]);
-var import_react45 = __toESM(require_react(), 1);
+var import_react43 = __toESM(require_react(), 1);
 
 // src/utils/separator-index.ts
 function countSeparatorSlots(widgets) {
@@ -69113,7 +69301,7 @@ function advanceGlobalSeparatorIndex(currentIndex, widgets) {
 }
 
 // src/tui/components/StatusLinePreview.tsx
-var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
 var renderSingleLine = (widgets, terminalWidth, settings, lineIndex, globalSeparatorIndex, preRenderedWidgets, preCalculatedMaxWidths) => {
   const context = {
     terminalWidth,
@@ -69124,7 +69312,7 @@ var renderSingleLine = (widgets, terminalWidth, settings, lineIndex, globalSepar
   return renderStatusLineWithInfo(widgets, settings, context, preRenderedWidgets, preCalculatedMaxWidths);
 };
 var StatusLinePreview = ({ lines, terminalWidth, settings, onTruncationChange }) => {
-  const { renderedLines, anyTruncated } = import_react45.default.useMemo(() => {
+  const { renderedLines, anyTruncated } = import_react43.default.useMemo(() => {
     if (!settings)
       return { renderedLines: [], anyTruncated: false };
     const preRenderedLines = preRenderAllWidgets(lines, settings, { terminalWidth, isPreview: true });
@@ -69146,29 +69334,29 @@ var StatusLinePreview = ({ lines, terminalWidth, settings, onTruncationChange })
     }
     return { renderedLines: result2, anyTruncated: truncated };
   }, [lines, terminalWidth, settings]);
-  import_react45.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     onTruncationChange?.(anyTruncated);
   }, [anyTruncated, onTruncationChange]);
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
         borderStyle: "round",
         borderColor: "gray",
         borderDimColor: true,
         width: "100%",
         paddingLeft: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
           children: [
             ">",
-            /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
               dimColor: true,
               children: " Preview  (ctrl+s to save configuration at any time)"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      renderedLines.map((line, index) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Text, {
+      renderedLines.map((line, index) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
         children: [
           "  ",
           line,
@@ -69181,7 +69369,7 @@ var StatusLinePreview = ({ lines, terminalWidth, settings, onTruncationChange })
 // src/tui/components/TerminalOptionsMenu.tsx
 init_source();
 await init_build2();
-var import_react46 = __toESM(require_react(), 1);
+var import_react44 = __toESM(require_react(), 1);
 
 // src/utils/color-sanitize.ts
 await init_widgets2();
@@ -69236,33 +69424,66 @@ function sanitizeLinesForColorLevel(lines, nextLevel) {
 }
 
 // src/tui/components/TerminalOptionsMenu.tsx
-var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
-var TerminalOptionsMenu = ({ settings, onUpdate, onBack }) => {
-  const [showColorWarning, setShowColorWarning] = import_react46.useState(false);
-  const [pendingColorLevel, setPendingColorLevel] = import_react46.useState(null);
-  const [selectedIndex, setSelectedIndex] = import_react46.useState(0);
-  const handleSelect = () => {
-    if (selectedIndex === 2) {
+var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
+function getNextColorLevel(level) {
+  return (level + 1) % 4;
+}
+function shouldWarnOnColorLevelChange(currentLevel, nextLevel, hasCustomColors) {
+  return hasCustomColors && (currentLevel === 2 && nextLevel !== 2 || currentLevel === 3 && nextLevel !== 3);
+}
+function buildTerminalOptionsItems(colorLevel) {
+  return [
+    {
+      label: "◱ Terminal Width",
+      value: "width",
+      description: "Configure how the status line uses available terminal width and when it should compact."
+    },
+    {
+      label: "▓ Color Level",
+      sublabel: `(${getColorLevelLabel(colorLevel)})`,
+      value: "colorLevel",
+      description: [
+        "Color level affects how colors are rendered:",
+        "• Truecolor: Full 24-bit RGB colors (16.7M colors)",
+        "• 256 Color: Extended color palette (256 colors)",
+        "• Basic: Standard 16-color terminal palette",
+        "• No Color: Disables all color output"
+      ].join(`
+`)
+    }
+  ];
+}
+var TerminalOptionsMenu = ({
+  settings,
+  onUpdate,
+  onBack
+}) => {
+  const [showColorWarning, setShowColorWarning] = import_react44.useState(false);
+  const [pendingColorLevel, setPendingColorLevel] = import_react44.useState(null);
+  const handleSelect = (value) => {
+    if (value === "back") {
       onBack();
-    } else if (selectedIndex === 0) {
+      return;
+    }
+    if (value === "width") {
       onBack("width");
-    } else if (selectedIndex === 1) {
-      const hasCustomColors = hasCustomWidgetColors(settings.lines);
-      const currentLevel = settings.colorLevel;
-      const nextLevel = (currentLevel + 1) % 4;
-      if (hasCustomColors && (currentLevel === 2 && nextLevel !== 2 || currentLevel === 3 && nextLevel !== 3)) {
-        setShowColorWarning(true);
-        setPendingColorLevel(nextLevel);
-      } else {
-        source_default.level = nextLevel;
-        const cleanedLines = sanitizeLinesForColorLevel(settings.lines, nextLevel);
-        onUpdate({
-          ...settings,
-          lines: cleanedLines,
-          colorLevel: nextLevel
-        });
-      }
+      return;
     }
+    const hasCustomColors = hasCustomWidgetColors(settings.lines);
+    const currentLevel = settings.colorLevel;
+    const nextLevel = getNextColorLevel(currentLevel);
+    if (shouldWarnOnColorLevelChange(currentLevel, nextLevel, hasCustomColors)) {
+      setShowColorWarning(true);
+      setPendingColorLevel(nextLevel);
+      return;
+    }
+    source_default.level = nextLevel;
+    const cleanedLines = sanitizeLinesForColorLevel(settings.lines, nextLevel);
+    onUpdate({
+      ...settings,
+      lines: cleanedLines,
+      colorLevel: nextLevel
+    });
   };
   const handleColorConfirm = () => {
     if (pendingColorLevel !== null) {
@@ -69281,42 +69502,32 @@ var TerminalOptionsMenu = ({ settings, onUpdate, onBack }) => {
     setShowColorWarning(false);
     setPendingColorLevel(null);
   };
-  use_input_default((input, key) => {
-    if (key.escape) {
-      if (!showColorWarning) {
-        onBack();
-      }
-    } else if (!showColorWarning) {
-      if (key.upArrow) {
-        setSelectedIndex(Math.max(0, selectedIndex - 1));
-      } else if (key.downArrow) {
-        setSelectedIndex(Math.min(2, selectedIndex + 1));
-      } else if (key.return) {
-        handleSelect();
-      }
+  use_input_default((_, key) => {
+    if (key.escape && !showColorWarning) {
+      onBack();
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
         bold: true,
         children: "Terminal Options"
       }, undefined, false, undefined, this),
-      showColorWarning ? /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
+      showColorWarning ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
         flexDirection: "column",
         marginTop: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
             color: "yellow",
             children: "⚠ Warning: Custom colors detected!"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
             children: "Switching color modes will reset custom ansi256 or hex colors to defaults."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
             marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(ConfirmDialog, {
+            children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(ConfirmDialog, {
               message: "Continue?",
               onConfirm: handleColorConfirm,
               onCancel: handleColorCancel,
@@ -69324,74 +69535,18 @@ var TerminalOptionsMenu = ({ settings, onUpdate, onBack }) => {
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(jsx_dev_runtime18.Fragment, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
             color: "white",
             children: "Configure terminal-specific settings for optimal display"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
-            marginTop: 1,
-            flexDirection: "column",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
-                children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                  color: selectedIndex === 0 ? "green" : undefined,
-                  children: [
-                    selectedIndex === 0 ? "▶  " : "   ",
-                    "◱ Terminal Width"
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
-                children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                  color: selectedIndex === 1 ? "green" : undefined,
-                  children: [
-                    selectedIndex === 1 ? "▶  " : "   ",
-                    "▓ Color Level:",
-                    " ",
-                    getColorLevelLabel(settings.colorLevel)
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
-                marginTop: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                  color: selectedIndex === 2 ? "green" : undefined,
-                  children: [
-                    selectedIndex === 2 ? "▶  " : "   ",
-                    "← Back"
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          selectedIndex === 1 && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(List, {
             marginTop: 1,
-            flexDirection: "column",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                dimColor: true,
-                children: "Color level affects how colors are rendered:"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                dimColor: true,
-                children: "• Truecolor: Full 24-bit RGB colors (16.7M colors)"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                dimColor: true,
-                children: "• 256 Color: Extended color palette (256 colors)"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                dimColor: true,
-                children: "• Basic: Standard 16-color terminal palette"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Text, {
-                dimColor: true,
-                children: "• No Color: Disables all color output"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
+            items: buildTerminalOptionsItems(settings.colorLevel),
+            onSelect: handleSelect,
+            showBackButton: true
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
@@ -69415,28 +69570,67 @@ var getColorLevelLabel = (level) => {
 // src/tui/components/TerminalWidthMenu.tsx
 init_input_guards();
 await init_build2();
-var import_react47 = __toESM(require_react(), 1);
-var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
-var TerminalWidthMenu = ({ settings, onUpdate, onBack }) => {
-  const [selectedOption, setSelectedOption] = import_react47.useState(settings.flexMode);
-  const [compactThreshold, setCompactThreshold] = import_react47.useState(settings.compactThreshold);
-  const [editingThreshold, setEditingThreshold] = import_react47.useState(false);
-  const [thresholdInput, setThresholdInput] = import_react47.useState(String(settings.compactThreshold));
-  const [validationError, setValidationError] = import_react47.useState(null);
-  const [selectedIndex, setSelectedIndex] = import_react47.useState(() => {
-    const options2 = ["full", "full-minus-40", "full-until-compact"];
-    return options2.indexOf(settings.flexMode);
-  });
-  const options = ["full", "full-minus-40", "full-until-compact"];
+var import_react45 = __toESM(require_react(), 1);
+var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
+var TERMINAL_WIDTH_OPTIONS = ["full", "full-minus-40", "full-until-compact"];
+function getTerminalWidthSelectionIndex(selectedOption) {
+  const selectedIndex = TERMINAL_WIDTH_OPTIONS.indexOf(selectedOption);
+  return selectedIndex >= 0 ? selectedIndex : 0;
+}
+function validateCompactThresholdInput(value) {
+  const parsedValue = parseInt(value, 10);
+  if (isNaN(parsedValue)) {
+    return "Please enter a valid number";
+  }
+  if (parsedValue < 1 || parsedValue > 99) {
+    return `Value must be between 1 and 99 (you entered ${parsedValue})`;
+  }
+  return null;
+}
+function buildTerminalWidthItems(selectedOption, compactThreshold) {
+  return [
+    {
+      value: "full",
+      label: "Full width always",
+      sublabel: selectedOption === "full" ? "(active)" : undefined,
+      description: `Uses the full terminal width minus 4 characters for terminal padding. If the auto-compact message appears, it may cause the line to wrap.
+
+NOTE: If /ide integration is enabled, it is not recommended to use this mode.`
+    },
+    {
+      value: "full-minus-40",
+      label: "Full width minus 40",
+      sublabel: selectedOption === "full-minus-40" ? "(active)" : "(default)",
+      description: "Leaves a gap to the right of the status line to accommodate the auto-compact message. This prevents wrapping but may leave unused space. This limitation exists because we cannot detect when the message will appear."
+    },
+    {
+      value: "full-until-compact",
+      label: "Full width until compact",
+      sublabel: selectedOption === "full-until-compact" ? `(threshold ${compactThreshold}%, active)` : `(threshold ${compactThreshold}%)`,
+      description: `Dynamically adjusts width based on context usage. When context reaches ${compactThreshold}%, it switches to leaving space for the auto-compact message.
+
+NOTE: If /ide integration is enabled, it is not recommended to use this mode.`
+    }
+  ];
+}
+var TerminalWidthMenu = ({
+  settings,
+  onUpdate,
+  onBack
+}) => {
+  const [selectedOption, setSelectedOption] = import_react45.useState(settings.flexMode);
+  const [compactThreshold, setCompactThreshold] = import_react45.useState(settings.compactThreshold);
+  const [editingThreshold, setEditingThreshold] = import_react45.useState(false);
+  const [thresholdInput, setThresholdInput] = import_react45.useState(String(settings.compactThreshold));
+  const [validationError, setValidationError] = import_react45.useState(null);
   use_input_default((input, key) => {
     if (editingThreshold) {
       if (key.return) {
-        const value = parseInt(thresholdInput, 10);
-        if (isNaN(value)) {
-          setValidationError("Please enter a valid number");
-        } else if (value < 1 || value > 99) {
-          setValidationError(`Value must be between 1 and 99 (you entered ${value})`);
+        const error48 = validateCompactThresholdInput(thresholdInput);
+        if (error48) {
+          setValidationError(error48);
         } else {
+          const value = parseInt(thresholdInput, 10);
           setCompactThreshold(value);
           const updatedSettings = {
             ...settings,
@@ -69461,77 +69655,33 @@ var TerminalWidthMenu = ({ settings, onUpdate, onBack }) => {
           setValidationError(null);
         }
       }
-    } else {
-      if (key.escape) {
-        onBack();
-      } else if (key.upArrow) {
-        setSelectedIndex(Math.max(0, selectedIndex - 1));
-      } else if (key.downArrow) {
-        setSelectedIndex(Math.min(3, selectedIndex + 1));
-      } else if (key.return) {
-        if (selectedIndex === 3) {
-          onBack();
-        } else if (selectedIndex >= 0 && selectedIndex < options.length) {
-          const mode = options[selectedIndex];
-          if (mode) {
-            setSelectedOption(mode);
-            const updatedSettings = {
-              ...settings,
-              flexMode: mode,
-              compactThreshold
-            };
-            onUpdate(updatedSettings);
-            if (mode === "full-until-compact") {
-              setEditingThreshold(true);
-            }
-          }
-        }
-      }
+      return;
     }
-  });
-  const optionDetails = [
-    {
-      value: "full",
-      label: "Full width always",
-      description: `Uses the full terminal width minus 4 characters for terminal padding. If the auto-compact message appears, it may cause the line to wrap.
-
-NOTE: If /ide integration is enabled, it's not recommended to use this mode.`
-    },
-    {
-      value: "full-minus-40",
-      label: "Full width minus 40 (default)",
-      description: "Leaves a gap to the right of the status line to accommodate the auto-compact message. This prevents wrapping but may leave unused space. This limitation exists because we cannot detect when the message will appear."
-    },
-    {
-      value: "full-until-compact",
-      label: "Full width until compact",
-      description: `Dynamically adjusts width based on context usage. When context reaches ${compactThreshold}%, it switches to leaving space for the auto-compact message.
-
-NOTE: If /ide integration is enabled, it's not recommended to use this mode.`
+    if (key.escape) {
+      onBack();
     }
-  ];
-  const currentOption = selectedIndex < 3 ? optionDetails[selectedIndex] : null;
-  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
+  });
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
         bold: true,
         children: "Terminal Width"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
         color: "white",
         children: "These settings affect where long lines are truncated, and where right-alignment occurs when using flex separators"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
         dimColor: true,
         wrap: "wrap",
         children: "Claude code does not currently provide an available width variable for the statusline and features like IDE integration, auto-compaction notices, etc all cause the statusline to wrap if we do not truncate it"
       }, undefined, false, undefined, this),
-      editingThreshold ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
+      editingThreshold ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Box_default, {
         marginTop: 1,
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
             children: [
               "Enter compact threshold (1-99):",
               " ",
@@ -69539,94 +69689,71 @@ NOTE: If /ide integration is enabled, it's not recommended to use this mode.`
               "%"
             ]
           }, undefined, true, undefined, this),
-          validationError ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+          validationError ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
             color: "red",
             children: validationError
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
             dimColor: true,
             children: "Press Enter to confirm, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
-            marginTop: 1,
-            flexDirection: "column",
-            children: [
-              optionDetails.map((opt, index) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
-                children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
-                  color: selectedIndex === index ? "green" : undefined,
-                  children: [
-                    selectedIndex === index ? "▶  " : "   ",
-                    opt.label,
-                    opt.value === selectedOption ? " ✓" : ""
-                  ]
-                }, undefined, true, undefined, this)
-              }, opt.value, false, undefined, this)),
-              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
-                marginTop: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
-                  color: selectedIndex === 3 ? "green" : undefined,
-                  children: [
-                    selectedIndex === 3 ? "▶  " : "   ",
-                    "← Back"
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          currentOption && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
-            marginTop: 1,
-            marginBottom: 1,
-            borderStyle: "round",
-            borderColor: "dim",
-            paddingX: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Box_default, {
-              flexDirection: "column",
-              children: [
-                /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
-                  children: [
-                    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
-                      color: "yellow",
-                      children: currentOption.label
-                    }, undefined, false, undefined, this),
-                    currentOption.value === "full-until-compact" && ` | Current threshold: ${compactThreshold}%`
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Text, {
-                  dimColor: true,
-                  wrap: "wrap",
-                  children: currentOption.description
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(List, {
+        marginTop: 1,
+        items: buildTerminalWidthItems(selectedOption, compactThreshold),
+        initialSelection: getTerminalWidthSelectionIndex(selectedOption),
+        onSelect: (value) => {
+          if (value === "back") {
+            onBack();
+            return;
+          }
+          setSelectedOption(value);
+          const updatedSettings = {
+            ...settings,
+            flexMode: value,
+            compactThreshold
+          };
+          onUpdate(updatedSettings);
+          if (value === "full-until-compact") {
+            setEditingThreshold(true);
+          }
+        },
+        showBackButton: true
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 // src/tui/App.tsx
-var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
 var GITHUB_REPO_URL = "https://github.com/sirmalloc/ccstatusline";
+function getConfirmCancelScreen(confirmDialog) {
+  return confirmDialog?.cancelScreen ?? "main";
+}
+function clearInstallMenuSelection(menuSelections) {
+  if (menuSelections.install === undefined) {
+    return menuSelections;
+  }
+  const next = { ...menuSelections };
+  delete next.install;
+  return next;
+}
 var App2 = () => {
   const { exit } = use_app_default();
-  const [settings, setSettings] = import_react48.useState(null);
-  const [originalSettings, setOriginalSettings] = import_react48.useState(null);
-  const [hasChanges, setHasChanges] = import_react48.useState(false);
-  const [screen, setScreen] = import_react48.useState("main");
-  const [selectedLine, setSelectedLine] = import_react48.useState(0);
-  const [menuSelections, setMenuSelections] = import_react48.useState({});
-  const [confirmDialog, setConfirmDialog] = import_react48.useState(null);
-  const [isClaudeInstalled, setIsClaudeInstalled] = import_react48.useState(false);
-  const [terminalWidth, setTerminalWidth] = import_react48.useState(process.stdout.columns || 80);
-  const [powerlineFontStatus, setPowerlineFontStatus] = import_react48.useState({ installed: false });
-  const [installingFonts, setInstallingFonts] = import_react48.useState(false);
-  const [fontInstallMessage, setFontInstallMessage] = import_react48.useState(null);
-  const [existingStatusLine, setExistingStatusLine] = import_react48.useState(null);
-  const [flashMessage, setFlashMessage] = import_react48.useState(null);
-  const [previewIsTruncated, setPreviewIsTruncated] = import_react48.useState(false);
-  import_react48.useEffect(() => {
+  const [settings, setSettings] = import_react46.useState(null);
+  const [originalSettings, setOriginalSettings] = import_react46.useState(null);
+  const [hasChanges, setHasChanges] = import_react46.useState(false);
+  const [screen, setScreen] = import_react46.useState("main");
+  const [selectedLine, setSelectedLine] = import_react46.useState(0);
+  const [menuSelections, setMenuSelections] = import_react46.useState({});
+  const [confirmDialog, setConfirmDialog] = import_react46.useState(null);
+  const [isClaudeInstalled, setIsClaudeInstalled] = import_react46.useState(false);
+  const [terminalWidth, setTerminalWidth] = import_react46.useState(process.stdout.columns || 80);
+  const [powerlineFontStatus, setPowerlineFontStatus] = import_react46.useState({ installed: false });
+  const [installingFonts, setInstallingFonts] = import_react46.useState(false);
+  const [fontInstallMessage, setFontInstallMessage] = import_react46.useState(null);
+  const [existingStatusLine, setExistingStatusLine] = import_react46.useState(null);
+  const [flashMessage, setFlashMessage] = import_react46.useState(null);
+  const [previewIsTruncated, setPreviewIsTruncated] = import_react46.useState(false);
+  import_react46.useEffect(() => {
     getExistingStatusLine().then(setExistingStatusLine);
     loadSettings().then((loadedSettings) => {
       source_default.level = loadedSettings.colorLevel;
@@ -69647,13 +69774,13 @@ var App2 = () => {
       process.stdout.off("resize", handleResize);
     };
   }, []);
-  import_react48.useEffect(() => {
+  import_react46.useEffect(() => {
     if (originalSettings) {
       const hasAnyChanges = JSON.stringify(settings) !== JSON.stringify(originalSettings);
       setHasChanges(hasAnyChanges);
     }
   }, [settings, originalSettings]);
-  import_react48.useEffect(() => {
+  import_react46.useEffect(() => {
     if (flashMessage) {
       const timer = setTimeout(() => {
         setFlashMessage(null);
@@ -69679,7 +69806,7 @@ var App2 = () => {
       })();
     }
   });
-  const handleInstallSelection = import_react48.useCallback((command, displayName, useBunx) => {
+  const handleInstallSelection = import_react46.useCallback((command, displayName, useBunx) => {
     getExistingStatusLine().then((existing) => {
       const isAlreadyInstalled = isKnownCommand(existing ?? "");
       let message;
@@ -69697,6 +69824,7 @@ Continue?`;
       }
       setConfirmDialog({
         message,
+        cancelScreen: "install",
         action: async () => {
           await installStatusLine(useBunx);
           setIsClaudeInstalled(true);
@@ -69708,14 +69836,20 @@ Continue?`;
       setScreen("confirm");
     });
   }, []);
-  const handleNpxInstall = import_react48.useCallback(() => {
+  const handleNpxInstall = import_react46.useCallback(() => {
+    setMenuSelections((prev) => ({ ...prev, install: 0 }));
     handleInstallSelection(CCSTATUSLINE_COMMANDS.NPM, "npx", false);
   }, [handleInstallSelection]);
-  const handleBunxInstall = import_react48.useCallback(() => {
+  const handleBunxInstall = import_react46.useCallback(() => {
+    setMenuSelections((prev) => ({ ...prev, install: 1 }));
     handleInstallSelection(CCSTATUSLINE_COMMANDS.BUNX, "bunx", true);
   }, [handleInstallSelection]);
+  const handleInstallMenuCancel = import_react46.useCallback(() => {
+    setMenuSelections(clearInstallMenuSelection);
+    setScreen("main");
+  }, []);
   if (!settings) {
-    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
+    return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
       children: "Loading settings..."
     }, undefined, false, undefined, this);
   }
@@ -69804,56 +69938,47 @@ ${GITHUB_REPO_URL}`,
     setSelectedLine(lineIndex);
     setScreen("items");
   };
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Box_default, {
         marginBottom: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
             bold: true,
-            children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(dist_default4, {
+            children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(dist_default4, {
               name: "retro",
               children: "CCStatusline Configuration"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
             bold: true,
             children: ` | ${getPackageVersion() && `v${getPackageVersion()}`}`
           }, undefined, false, undefined, this),
-          flashMessage && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
+          flashMessage && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
             color: flashMessage.color,
             bold: true,
             children: `  ${flashMessage.text}`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      isCustomConfigPath() && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Text, {
+      isCustomConfigPath() && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
         dimColor: true,
         children: `Config: ${getConfigPath()}`
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(StatusLinePreview, {
+      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(StatusLinePreview, {
         lines: settings.lines,
         terminalWidth,
         settings,
         onTruncationChange: setPreviewIsTruncated
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Box_default, {
         marginTop: 1,
         children: [
-          screen === "main" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(MainMenu, {
-            onSelect: (value) => {
+          screen === "main" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(MainMenu, {
+            onSelect: (value, index) => {
               if (value !== "save" && value !== "exit") {
-                const menuMap = {
-                  lines: 0,
-                  colors: 1,
-                  powerline: 2,
-                  terminalConfig: 3,
-                  globalOverrides: 4,
-                  install: 5,
-                  starGithub: hasChanges ? 8 : 7
-                };
-                setMenuSelections((prev) => ({ ...prev, main: menuMap[value] ?? 0 }));
+                setMenuSelections((prev) => ({ ...prev, main: index }));
               }
               handleMainMenuSelect(value);
             },
@@ -69864,7 +69989,7 @@ ${GITHUB_REPO_URL}`,
             settings,
             previewIsTruncated
           }, undefined, false, undefined, this),
-          screen === "lines" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(LineSelector, {
+          screen === "lines" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(LineSelector, {
             lines: settings.lines,
             onSelect: (line) => {
               setMenuSelections((prev) => ({ ...prev, lines: line }));
@@ -69879,7 +70004,7 @@ ${GITHUB_REPO_URL}`,
             title: "Select Line to Edit Items",
             allowEditing: true
           }, undefined, false, undefined, this),
-          screen === "items" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ItemsEditor, {
+          screen === "items" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(ItemsEditor, {
             widgets: settings.lines[selectedLine] ?? [],
             onUpdate: (widgets) => {
               updateLine(selectedLine, widgets);
@@ -69891,7 +70016,7 @@ ${GITHUB_REPO_URL}`,
             lineNumber: selectedLine + 1,
             settings
           }, undefined, false, undefined, this),
-          screen === "colorLines" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(LineSelector, {
+          screen === "colorLines" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(LineSelector, {
             lines: settings.lines,
             onLinesUpdate: updateLines,
             onSelect: (line) => {
@@ -69909,7 +70034,7 @@ ${GITHUB_REPO_URL}`,
             settings,
             allowEditing: false
           }, undefined, false, undefined, this),
-          screen === "colors" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ColorMenu, {
+          screen === "colors" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(ColorMenu, {
             widgets: settings.lines[selectedLine] ?? [],
             lineIndex: selectedLine,
             settings,
@@ -69922,7 +70047,7 @@ ${GITHUB_REPO_URL}`,
               setScreen("colorLines");
             }
           }, undefined, false, undefined, this),
-          screen === "terminalConfig" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(TerminalOptionsMenu, {
+          screen === "terminalConfig" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(TerminalOptionsMenu, {
             settings,
             onUpdate: (updatedSettings) => {
               setSettings(updatedSettings);
@@ -69936,7 +70061,7 @@ ${GITHUB_REPO_URL}`,
               }
             }
           }, undefined, false, undefined, this),
-          screen === "terminalWidth" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(TerminalWidthMenu, {
+          screen === "terminalWidth" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(TerminalWidthMenu, {
             settings,
             onUpdate: (updatedSettings) => {
               setSettings(updatedSettings);
@@ -69945,7 +70070,7 @@ ${GITHUB_REPO_URL}`,
               setScreen("terminalConfig");
             }
           }, undefined, false, undefined, this),
-          screen === "globalOverrides" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(GlobalOverridesMenu, {
+          screen === "globalOverrides" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(GlobalOverridesMenu, {
             settings,
             onUpdate: (updatedSettings) => {
               setSettings(updatedSettings);
@@ -69955,24 +70080,23 @@ ${GITHUB_REPO_URL}`,
               setScreen("main");
             }
           }, undefined, false, undefined, this),
-          screen === "confirm" && confirmDialog && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ConfirmDialog, {
+          screen === "confirm" && confirmDialog && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(ConfirmDialog, {
             message: confirmDialog.message,
             onConfirm: () => void confirmDialog.action(),
             onCancel: () => {
-              setScreen("main");
+              setScreen(getConfirmCancelScreen(confirmDialog));
               setConfirmDialog(null);
             }
           }, undefined, false, undefined, this),
-          screen === "install" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(InstallMenu, {
+          screen === "install" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(InstallMenu, {
             bunxAvailable: isBunxAvailable(),
             existingStatusLine,
             onSelectNpx: handleNpxInstall,
             onSelectBunx: handleBunxInstall,
-            onCancel: () => {
-              setScreen("main");
-            }
+            onCancel: handleInstallMenuCancel,
+            initialSelection: menuSelections.install
           }, undefined, false, undefined, this),
-          screen === "powerline" && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(PowerlineSetup, {
+          screen === "powerline" && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(PowerlineSetup, {
             settings,
             powerlineFontStatus,
             onUpdate: (updatedSettings) => {
@@ -70006,7 +70130,7 @@ ${GITHUB_REPO_URL}`,
 };
 function runTUI() {
   process.stdout.write("\x1B[2J\x1B[H");
-  render_default(/* @__PURE__ */ jsx_dev_runtime20.jsxDEV(App2, {}, undefined, false, undefined, this));
+  render_default(/* @__PURE__ */ jsx_dev_runtime21.jsxDEV(App2, {}, undefined, false, undefined, this));
 }
 // src/types/StatusJSON.ts
 init_zod();