@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/components/Breadcrumb.js

@@ -1,8 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text } from 'ink';
-export const Breadcrumb = React.memo(({ items }) => {
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../utils/theme.js";
+import { VERSION } from "../cli.js";
+// Version check component
+const VersionCheck = () => {
+    const [updateAvailable, setUpdateAvailable] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
+    React.useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const currentVersion = process.env.npm_package_version || "0.0.1";
+                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
+                if (response.ok) {
+                    const data = await response.json();
+                    const latestVersion = data.version;
+                    if (latestVersion && latestVersion !== currentVersion) {
+                        // Check if current version is older than latest
+                        const compareVersions = (version1, version2) => {
+                            const v1parts = version1.split('.').map(Number);
+                            const v2parts = version2.split('.').map(Number);
+                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
+                                const v1part = v1parts[i] || 0;
+                                const v2part = v2parts[i] || 0;
+                                if (v1part > v2part)
+                                    return 1;
+                                if (v1part < v2part)
+                                    return -1;
+                            }
+                            return 0;
+                        };
+                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
+                        if (isUpdateAvailable) {
+                            setUpdateAvailable(latestVersion);
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                // Silently fail
+            }
+            finally {
+                setIsChecking(false);
+            }
+        };
+        checkForUpdates();
+    }, []);
+    if (isChecking || !updateAvailable) {
+        return null;
+    }
+    return (_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: VERSION }), _jsxs(Text, { color: colors.primary, bold: true, children: [" ", "\u2192", " "] }), _jsx(Text, { color: colors.success, bold: true, children: updateAvailable }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
+};
+export const Breadcrumb = React.memo(({ items, showVersionCheck = false }) => {
     const env = process.env.RUNLOOP_ENV?.toLowerCase();
-    const isDevEnvironment = env === 'dev';
-    return (_jsx(Box, { marginBottom: 1, paddingX: 2, paddingY: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: "rl" }), isDevEnvironment && _jsx(Text, { color: "redBright", bold: true, children: " (dev)" }), _jsx(Text, { color: "gray", dimColor: true, children: " \u203A " }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? 'white' : 'gray', bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsx(Text, { color: "gray", dimColor: true, children: " \u203A " }))] }, index)))] }) }));
+    const isDevEnvironment = env === "dev";
+    return (_jsxs(Box, { marginBottom: 1, paddingX: 1, paddingY: 0, flexDirection: "column", children: [_jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: "redBright", bold: true, children: [" ", "(dev)"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u203A", " "] }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.text : colors.textDim, bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u203A", " "] }))] }, index)))] }), showVersionCheck && (_jsx(Box, { paddingX: 2, marginTop: 0, children: _jsx(VersionCheck, {}) }))] }));
 });

package/dist/components/DetailView.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { Box, Text } from "ink";
+import { colors } from "../utils/theme.js";
 /**
  * Reusable detail view component for displaying entity information
  * Organizes data into sections with labeled items
  */
 export const DetailView = ({ sections }) => {
-    return (_jsx(Box, { flexDirection: "column", gap: 1, children: sections.map((section, sectionIndex) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", bold: true, children: section.title }), section.items.map((item, itemIndex) => (_jsx(Box, { children: _jsxs(Text, { color: item.color || 'gray', dimColor: true, children: [item.label, ": ", item.value] }) }, itemIndex))), sectionIndex < sections.length - 1 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: " " }) }))] }, sectionIndex))) }));
+    return (_jsx(Box, { flexDirection: "column", gap: 1, children: sections.map((section, sectionIndex) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.warning, bold: true, children: section.title }), section.items.map((item, itemIndex) => (_jsx(Box, { children: _jsxs(Text, { color: item.color || colors.textDim, dimColor: true, children: [item.label, ": ", item.value] }) }, itemIndex))), sectionIndex < sections.length - 1 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: " " }) }))] }, sectionIndex))) }));
 };
 /**
  * Helper to build detail sections from an object
  */
 export function buildDetailSections(data, config) {
-    return Object.entries(config).map(([sectionName, sectionConfig]) => ({
+    return Object.entries(config)
+        .map(([sectionName, sectionConfig]) => ({
         title: sectionName,
         items: sectionConfig.fields
             .map((field) => {
@@ -25,5 +27,6 @@ export function buildDetailSections(data, config) {
             };
         })
             .filter(Boolean),
-    })).filter((section) => section.items.length > 0);
+    }))
+        .filter((section) => section.items.length > 0);
 }