@jvittechs/jai1-cli 1.0.0 → 1.0.2

package/dist/cli.js

@@ -33,7 +33,7 @@ var NetworkError = class extends Jai1Error {
 // package.json
 var package_default = {
   name: "@jvittechs/jai1-cli",
-  version: "1.0.0",
+  version: "1.0.2",
   description: "A unified CLI tool for JV-IT TECHS developers to manage Jai1 Framework. Please contact TeamAI for usage instructions.",
   type: "module",
   bin: {
@@ -1358,6 +1358,7 @@ var UnifiedApplyApp = ({
   const [cursorIndex, setCursorIndex] = useState(0);
   const [focusArea, setFocusArea] = useState("packages");
   const [selectedPackageIndex, setSelectedPackageIndex] = useState(0);
+  const [activePackageFilter, setActivePackageFilter] = useState(null);
   const [installProgress, setInstallProgress] = useState([]);
   const [installStats, setInstallStats] = useState({ total: 0, completed: 0, added: 0, updated: 0, failed: 0 });
   const [availableIdes, setAvailableIdes] = useState([]);
@@ -1377,6 +1378,9 @@ var UnifiedApplyApp = ({
         setComponents(comps);
         setTags(tagList);
         setInstalledPaths(new Set(Object.keys(installed)));
+        if (tagList.length > 0) {
+          setActivePackageFilter(tagList[0].tag);
+        }
         setLoading(false);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load");
@@ -1387,21 +1391,20 @@ var UnifiedApplyApp = ({
     setAvailableIdes(getMigrationIDEs());
   }, []);
   const filteredComponents = useMemo(() => {
-    if (focusArea === "packages" && tags.length > 0) {
-      const selectedTag = tags[selectedPackageIndex];
-      if (selectedTag) {
-        return components.filter((c) => c.tags?.includes(selectedTag.tag));
-      }
+    if (activePackageFilter) {
+      return components.filter((c) => c.tags?.includes(activePackageFilter));
     }
-    if (!searchQuery.trim()) return components;
-    const query = searchQuery.toLowerCase();
-    return components.filter(
-      (c) => c.filepath.toLowerCase().includes(query) || c.tags?.some((t) => t.toLowerCase().includes(query))
-    );
-  }, [components, searchQuery, focusArea, selectedPackageIndex, tags]);
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      return components.filter(
+        (c) => c.filepath.toLowerCase().includes(query) || c.tags?.some((t) => t.toLowerCase().includes(query))
+      );
+    }
+    return components;
+  }, [components, searchQuery, activePackageFilter]);
   useInput((input5, key) => {
     if (viewState === "done") {
-      if (key.return || input5 === "q" || key.escape) {
+      if (key.return || input5 === "q" && key.ctrl || key.escape) {
         onExit();
       }
       return;
@@ -1409,7 +1412,7 @@ var UnifiedApplyApp = ({
     if (viewState === "summary") {
       if (key.return) {
         setViewState("ide-sync");
-      } else if (input5 === "s" || input5 === "q" || key.escape) {
+      } else if (input5 === "s" || input5 === "q" && key.ctrl || key.escape) {
         onExit();
       }
       return;
@@ -1440,7 +1443,7 @@ var UnifiedApplyApp = ({
         if (selectedIdes.size > 0) {
           handleIdeSync();
         }
-      } else if (input5 === "s" || input5 === "q" || key.escape) {
+      } else if (input5 === "s" || input5 === "q" && key.ctrl || key.escape) {
         onExit();
       }
       return;
@@ -1452,12 +1455,19 @@ var UnifiedApplyApp = ({
       return;
     }
     if (key.tab) {
-      if (focusArea === "packages") setFocusArea("components");
-      else if (focusArea === "components") setFocusArea("search");
-      else setFocusArea("packages");
+      if (focusArea === "packages") {
+        setFocusArea("components");
+      } else if (focusArea === "components") {
+        setFocusArea("search");
+        setActivePackageFilter(null);
+      } else {
+        setFocusArea("packages");
+        const tag = tags[selectedPackageIndex];
+        if (tag) setActivePackageFilter(tag.tag);
+      }
       return;
     }
-    if (key.escape || input5 === "q") {
+    if (key.escape || input5 === "q" && key.ctrl) {
       onExit();
       return;
     }
@@ -1502,9 +1512,19 @@ var UnifiedApplyApp = ({
     }
     if (focusArea === "packages") {
       if (key.leftArrow) {
-        setSelectedPackageIndex((prev) => Math.max(0, prev - 1));
+        setSelectedPackageIndex((prev) => {
+          const newIndex = Math.max(0, prev - 1);
+          const tag = tags[newIndex];
+          if (tag) setActivePackageFilter(tag.tag);
+          return newIndex;
+        });
       } else if (key.rightArrow) {
-        setSelectedPackageIndex((prev) => Math.min(tags.length - 1, prev + 1));
+        setSelectedPackageIndex((prev) => {
+          const newIndex = Math.min(tags.length - 1, prev + 1);
+          const tag = tags[newIndex];
+          if (tag) setActivePackageFilter(tag.tag);
+          return newIndex;
+        });
       } else if (input5 === " " || key.return) {
         const tag = tags[selectedPackageIndex];
         if (tag) {
@@ -1609,7 +1629,7 @@ var UnifiedApplyApp = ({
     return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "cyan" }, "\u{1F4E6} Installing Components")), /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(ProgressBar, { current: installStats.completed, total: installStats.total, width: 50 })), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 1, height: 10 }, installProgress.slice(-8).map((item) => /* @__PURE__ */ React3.createElement(Box2, { key: item.filepath }, /* @__PURE__ */ React3.createElement(StatusIcon, { status: item.status === "success" ? "success" : item.status === "error" ? "error" : item.status === "downloading" ? "loading" : "pending" }), /* @__PURE__ */ React3.createElement(Text3, null, " ", item.filepath), item.error && /* @__PURE__ */ React3.createElement(Text3, { color: "red", dimColor: true }, " (", item.error, ")")))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "\u{1F4CA} ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, installStats.added, " added"), " \xB7 ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, installStats.updated, " updated"), " \xB7 ", /* @__PURE__ */ React3.createElement(Text3, { color: "red" }, installStats.failed, " failed"))));
   }
   if (viewState === "summary") {
-    return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "green" }, "\u2705 Installation Complete!")), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, installStats.total, " components processed:"), /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, installStats.added), " newly added"), /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, installStats.updated), " updated"), installStats.failed > 0 && /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "red" }, installStats.failed), " failed")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "\u{1F4C1} Location: ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, process.cwd(), "/.jai1"))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "yellow" }, "\u{1F4E6} Next Step: Sync to IDE(s)?"), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "Sync .jai1/ content to your IDE directories (rules, workflows)")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "[Enter] Select IDE(s) to sync \xB7 [S/Q] Skip and exit")));
+    return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "green" }, "\u2705 Installation Complete!")), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, installStats.total, " components processed:"), /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, installStats.added), " newly added"), /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, installStats.updated), " updated"), installStats.failed > 0 && /* @__PURE__ */ React3.createElement(Text3, null, "  \u2514\u2500 ", /* @__PURE__ */ React3.createElement(Text3, { color: "red" }, installStats.failed), " failed")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "\u{1F4C1} Location: ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, process.cwd(), "/.jai1"))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "yellow" }, "\u{1F4E6} Next Step: Sync to IDE(s)?"), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "Sync .jai1/ content to your IDE directories (rules, workflows)")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "[Enter] Select IDE(s) to sync \xB7 [S/Ctrl+Q] Skip and exit")));
   }
   if (viewState === "ide-sync") {
     return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "cyan" }, "\u{1F504} Select IDE(s) to Sync")), /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "Sync .jai1/ content (rules, workflows) to IDE-specific directories")), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1 }, availableIdes.map((ide, i) => {
@@ -1617,7 +1637,7 @@ var UnifiedApplyApp = ({
       const isCursor = i === ideCursorIndex;
       const isChecked = selectedIdes.has(ide);
       return /* @__PURE__ */ React3.createElement(Box2, { key: ide }, /* @__PURE__ */ React3.createElement(Text3, { color: isCursor ? "cyan" : "white" }, isCursor ? "\u276F " : "  ", isChecked ? "[\u2713]" : "[ ]", " ", ideConfig.icon, " ", ideConfig.name));
-    })), selectedIdes.size > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "Selected: ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, selectedIdes.size), " IDE(s)")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "[\u2191\u2193] Navigate \xB7 [\u2423] Toggle \xB7 [A] Select all \xB7 [C] Clear \xB7 [Enter] Sync \xB7 [S/Q] Skip")));
+    })), selectedIdes.size > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "Selected: ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, selectedIdes.size), " IDE(s)")), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "[\u2191\u2193] Navigate \xB7 [\u2423] Toggle \xB7 [A] Select all \xB7 [C] Clear \xB7 [Enter] Sync \xB7 [S/Ctrl+Q] Skip")));
   }
   if (viewState === "syncing") {
     return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true, color: "cyan" }, "\u{1F504} Syncing to IDE(s)")), /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(ProgressBar, { current: syncStats.completed, total: syncStats.total, width: 50 })), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 1, height: 10 }, syncProgress.slice(-8).map((item, idx) => /* @__PURE__ */ React3.createElement(Box2, { key: `${item.targetPath}-${idx}` }, /* @__PURE__ */ React3.createElement(StatusIcon, { status: item.status === "success" ? "success" : item.status === "error" ? "error" : item.status === "syncing" ? "loading" : "pending" }), /* @__PURE__ */ React3.createElement(Text3, null, " ", item.targetPath), item.error && /* @__PURE__ */ React3.createElement(Text3, { color: "red", dimColor: true }, " (", item.error, ")")))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, null, "\u{1F4CA} ", /* @__PURE__ */ React3.createElement(Text3, { color: "green" }, syncStats.created, " created"), " \xB7 ", /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, syncStats.updated, " updated"), syncStats.skipped > 0 && /* @__PURE__ */ React3.createElement(React3.Fragment, null, " \xB7 ", /* @__PURE__ */ React3.createElement(Text3, { color: "yellow" }, syncStats.skipped, " skipped")), syncStats.errors > 0 && /* @__PURE__ */ React3.createElement(React3.Fragment, null, " \xB7 ", /* @__PURE__ */ React3.createElement(Text3, { color: "red" }, syncStats.errors, " errors")))));
@@ -1648,12 +1668,12 @@ var UnifiedApplyApp = ({
       tag.count,
       "]"
     ));
-  })), focusArea === "packages" && tags.length > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "\u2190 \u2192 to browse packages \xB7 Space/Enter to select package"))), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: focusArea === "components" ? "cyan" : "gray", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Components "), focusArea === "packages" && tags.length > 0 && /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, "[", tags[selectedPackageIndex]?.tag, "] "), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "(", filteredComponents.length, " shown", hasMore ? `, scroll for more` : "", ")")), visibleComponents.map((comp, i) => {
+  })), focusArea === "packages" && tags.length > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "\u2190 \u2192 to browse packages \xB7 Space/Enter to select package"))), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", borderStyle: "round", borderColor: focusArea === "components" ? "cyan" : "gray", padding: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Components "), activePackageFilter && /* @__PURE__ */ React3.createElement(Text3, { color: "cyan" }, "[", activePackageFilter, "] "), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "(", filteredComponents.length, " shown", hasMore ? `, scroll for more` : "", ")")), visibleComponents.map((comp, i) => {
     const isCursor = i === cursorIndex && focusArea === "components";
     const isChecked = selectedPaths.has(comp.filepath);
     const isInstalled = installedPaths.has(comp.filepath);
     return /* @__PURE__ */ React3.createElement(Box2, { key: comp.filepath }, /* @__PURE__ */ React3.createElement(Text3, { color: isCursor ? "cyan" : "white" }, isCursor ? "\u276F " : "  ", isChecked ? "[\u2713]" : "[ ]", " ", comp.filepath), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, " ", isInstalled ? "\u2713 installed" : "\u25CB new"));
-  }), filteredComponents.length === 0 && /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "No components match your search")), selectedPaths.size > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Selected: ", selectedPaths.size, " components"), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", marginLeft: 2 }, Array.from(selectedPaths).slice(0, 4).map((fp) => /* @__PURE__ */ React3.createElement(Text3, { key: fp, dimColor: true }, "\u{1F4CC} ", fp)), selectedPaths.size > 4 && /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "   ... and ", selectedPaths.size - 4, " more"))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, focusArea === "packages" && "[\u2190\u2192] Browse packages \xB7 [\u2423/Enter] Select package", focusArea === "components" && "[\u2191\u2193] Navigate \xB7 [\u2423] Toggle", focusArea === "search" && "Type to search...", " \xB7 [Tab] Switch area \xB7 [A] All \xB7 [C] Clear \xB7 [Enter] Apply \xB7 [Q] Quit")));
+  }), filteredComponents.length === 0 && /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "No components match your search")), selectedPaths.size > 0 && /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Selected: ", selectedPaths.size, " components"), /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", marginLeft: 2 }, Array.from(selectedPaths).slice(0, 4).map((fp) => /* @__PURE__ */ React3.createElement(Text3, { key: fp, dimColor: true }, "\u{1F4CC} ", fp)), selectedPaths.size > 4 && /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "   ... and ", selectedPaths.size - 4, " more"))), /* @__PURE__ */ React3.createElement(Box2, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, focusArea === "packages" && "[\u2190\u2192] Browse packages \xB7 [\u2423/Enter] Select package", focusArea === "components" && "[\u2191\u2193] Navigate \xB7 [\u2423] Toggle", focusArea === "search" && "Type to search...", " \xB7 [Tab] Switch area \xB7 [A] All \xB7 [C] Clear \xB7 [Enter] Apply \xB7 [Ctrl+Q] Quit")));
 };
 
 // src/commands/apply.ts
@@ -3831,7 +3851,7 @@ var Footer = ({ focusArea, isSearchOpen = false }) => {
         { key: "Enter", action: "Select" },
         { key: "\u2192/Tab", action: "Content" },
         { key: "/", action: "Search" },
-        { key: "q", action: "Quit" }
+        { key: "Ctrl+q", action: "Quit" }
       ];
     }
     return [
@@ -10158,7 +10178,7 @@ var UtilsApp = ({ onExit }) => {
       setSelectedIndex((prev) => prev < MENU_ITEMS2.length - 1 ? prev + 1 : 0);
     } else if (key.return) {
       setActiveView(MENU_ITEMS2[selectedIndex].id);
-    } else if (input5 === "q" || key.escape) {
+    } else if (input5 === "q" && key.ctrl || key.escape) {
       onExit();
       exit();
     }
@@ -10173,7 +10193,7 @@ var UtilsApp = ({ onExit }) => {
       marginBottom: 1
     },
     /* @__PURE__ */ React41.createElement(Text36, { bold: true, color: "cyan" }, "\u{1F6E0}\uFE0F  Developer Utilities - Interactive Mode"),
-    /* @__PURE__ */ React41.createElement(Box36, { marginLeft: "auto" }, /* @__PURE__ */ React41.createElement(Text36, { dimColor: true }, "Press 'q' to quit"))
+    /* @__PURE__ */ React41.createElement(Box36, { marginLeft: "auto" }, /* @__PURE__ */ React41.createElement(Text36, { dimColor: true }, "Press Ctrl+Q to quit"))
   ), /* @__PURE__ */ React41.createElement(Box36, { flexGrow: 1 }, /* @__PURE__ */ React41.createElement(
     Box36,
     {
@@ -10232,7 +10252,7 @@ var WelcomeView = ({ selectedItem }) => {
       marginBottom: 2
     },
     /* @__PURE__ */ React41.createElement(Box36, { flexDirection: "column" }, /* @__PURE__ */ React41.createElement(Text36, { bold: true, color: "yellow" }, selectedItem.icon, " ", selectedItem.label), /* @__PURE__ */ React41.createElement(Text36, { dimColor: true }, selectedItem.description))
-  ), /* @__PURE__ */ React41.createElement(Box36, { marginBottom: 1 }, /* @__PURE__ */ React41.createElement(Text36, { bold: true }, "Quick Actions:")), /* @__PURE__ */ React41.createElement(Box36, { flexDirection: "column", marginLeft: 2 }, /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "Enter"), " to open selected utility"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Use ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "\u2191/\u2193"), " or ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "j/k"), " to navigate"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "Esc"), " to go back or quit"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "q"), " to quit anytime")), /* @__PURE__ */ React41.createElement(Box36, { marginTop: 2 }, /* @__PURE__ */ React41.createElement(Text36, { dimColor: true }, "\u{1F4A1} Tip: Each utility provides an interactive interface for easy usage.")));
+  ), /* @__PURE__ */ React41.createElement(Box36, { marginBottom: 1 }, /* @__PURE__ */ React41.createElement(Text36, { bold: true }, "Quick Actions:")), /* @__PURE__ */ React41.createElement(Box36, { flexDirection: "column", marginLeft: 2 }, /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "Enter"), " to open selected utility"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Use ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "\u2191/\u2193"), " or ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "j/k"), " to navigate"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "Esc"), " to go back or quit"), /* @__PURE__ */ React41.createElement(Text36, null, "\u2022 Press ", /* @__PURE__ */ React41.createElement(Text36, { color: "green" }, "Ctrl+Q"), " to quit anytime")), /* @__PURE__ */ React41.createElement(Box36, { marginTop: 2 }, /* @__PURE__ */ React41.createElement(Text36, { dimColor: true }, "\u{1F4A1} Tip: Each utility provides an interactive interface for easy usage.")));
 };
 var ActiveUtilityView = ({ utilityType }) => {
   switch (utilityType) {