feat: cli can update itself when prompted (#21)

Author: dines-rl

RELEASE.md

@@ -21,48 +21,51 @@ export const Breadcrumb = ({
   const isDevEnvironment = env === "dev";
 
   return (
-    <Box marginBottom={1} paddingX={0} paddingY={0}>
-      <Box
-        borderStyle="round"
-        borderColor={colors.primary}
-        paddingX={2}
-        paddingY={0}
-      >
-        <Text color={colors.primary} bold>
-          rl
-        </Text>
-        {isDevEnvironment && (
-          <Text color={colors.error} bold>
-            {" "}
-            (dev)
+    <Box
+      justifyContent="space-between"
+      marginBottom={1}
+      paddingX={0}
+      paddingY={0}
+    >
+      <Box flexShrink={0}>
+        <Box
+          borderStyle="round"
+          borderColor={colors.primary}
+          paddingX={2}
+          paddingY={0}
+        >
+          <Text color={colors.primary} bold>
+            rl
           </Text>
-        )}
-        <Text color={colors.textDim}> › </Text>
-        {items.map((item, index) => {
-          // Limit label length to prevent Yoga layout engine errors
-          const MAX_LABEL_LENGTH = 80;
-          const truncatedLabel =
-            item.label.length > MAX_LABEL_LENGTH
-              ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
-              : item.label;
+          {isDevEnvironment && (
+            <Text color={colors.error} bold>
+              {" "}
+              (dev)
+            </Text>
+          )}
+          <Text color={colors.textDim}> › </Text>
+          {items.map((item, index) => {
+            // Limit label length to prevent Yoga layout engine errors
+            const MAX_LABEL_LENGTH = 80;
+            const truncatedLabel =
+              item.label.length > MAX_LABEL_LENGTH
+                ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
+                : item.label;
 
-          return (
-            <React.Fragment key={index}>
-              <Text color={item.active ? colors.primary : colors.textDim}>
-                {truncatedLabel}
-              </Text>
-              {index < items.length - 1 && (
-                <Text color={colors.textDim}> › </Text>
-              )}
-            </React.Fragment>
-          );
-        })}
-      </Box>
-      {showVersionCheck && (
-        <Box paddingX={2} marginTop={0}>
-          <UpdateNotification />
+            return (
+              <React.Fragment key={index}>
+                <Text color={item.active ? colors.primary : colors.textDim}>
+                  {truncatedLabel}
+                </Text>
+                {index < items.length - 1 && (
+                  <Text color={colors.textDim}> › </Text>
+                )}
+              </React.Fragment>
+            );
+          })}
         </Box>
-      )}
+      </Box>
+      {showVersionCheck && <UpdateNotification />}
     </Box>
   );
 };

package-lock.json

@@ -5,8 +5,10 @@ import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
+import { execCommand } from "../utils/exec.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 
 interface MenuItem {
   key: string;
@@ -51,6 +53,9 @@ export const MainMenu = ({ onSelect }: MainMenuProps) => {
   // Use centralized viewport hook for consistent layout
   const { terminalHeight } = useViewportHeight({ overhead: 0 });
 
+  // Check for updates
+  const { updateAvailable } = useUpdateCheck();
+
   // Handle Ctrl+C to exit
   useExitOnCtrlC();
 
@@ -69,6 +74,12 @@ export const MainMenu = ({ onSelect }: MainMenuProps) => {
       onSelect("blueprints");
     } else if (input === "s" || input === "3") {
       onSelect("snapshots");
+    } else if (input === "u" && updateAvailable) {
+      // Release terminal and exec into update command (never returns)
+      execCommand("sh", [
+        "-c",
+        "npm install -g @runloop/rl-cli@latest && exec rli",
+      ]);
     }
   });
 
@@ -125,6 +136,7 @@ export const MainMenu = ({ onSelect }: MainMenuProps) => {
             {figures.arrowUp}
             {figures.arrowDown} Navigate • [1-3] Quick select • [Enter] Select •
             [Esc] Quit
+            {updateAvailable && " • [u] Update"}
           </Text>
         </Box>
       </Box>
@@ -204,6 +216,7 @@ export const MainMenu = ({ onSelect }: MainMenuProps) => {
             {figures.arrowUp}
             {figures.arrowDown} Navigate • [1-3] Quick select • [Enter] Select •
             [Esc] Quit
+            {updateAvailable && " • [u] Update"}
           </Text>
         </Box>
       </Box>