@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/components/Table.example.js

@@ -1,55 +1,85 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { Table, createTextColumn, createComponentColumn } from './Table.js';
-import { StatusBadge } from './StatusBadge.js';
-import figures from 'figures';
-function BlueprintsTable({ blueprints, selectedIndex, terminalWidth }) {
+import { Box, Text } from "ink";
+import { Table, createTextColumn, createComponentColumn } from "./Table.js";
+import { StatusBadge } from "./StatusBadge.js";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
+function BlueprintsTable({ blueprints, selectedIndex, terminalWidth, }) {
     // Responsive column widths
     const showDescription = terminalWidth >= 120;
     const showFullId = terminalWidth >= 80;
     return (_jsx(Table, { data: blueprints, keyExtractor: (bp) => bp.id, selectedIndex: selectedIndex, columns: [
             // Status badge column
-            createComponentColumn('status', 'Status', (bp) => _jsx(StatusBadge, { status: bp.status, showText: false }), { width: 2 }),
+            createComponentColumn("status", "Status", (bp) => _jsx(StatusBadge, { status: bp.status, showText: false }), { width: 2 }),
             // ID column (responsive)
-            createTextColumn('id', 'ID', (bp) => showFullId ? bp.id : bp.id.slice(0, 13), { width: showFullId ? 25 : 15, color: 'gray', dimColor: true, bold: false }),
+            createTextColumn("id", "ID", (bp) => (showFullId ? bp.id : bp.id.slice(0, 13)), {
+                width: showFullId ? 25 : 15,
+                color: colors.textDim,
+                dimColor: true,
+                bold: false,
+            }),
             // Name column
-            createTextColumn('name', 'Name', (bp) => bp.name || '(unnamed)', { width: 30 }),
+            createTextColumn("name", "Name", (bp) => bp.name || "(unnamed)", { width: 30 }),
             // Description column (optional)
-            createTextColumn('description', 'Description', (bp) => bp.description || '', { width: 40, color: 'gray', dimColor: true, bold: false, visible: showDescription }),
+            createTextColumn("description", "Description", (bp) => bp.description || "", {
+                width: 40,
+                color: colors.textDim,
+                dimColor: true,
+                bold: false,
+                visible: showDescription,
+            }),
             // Created time column
-            createTextColumn('created', 'Created', (bp) => new Date(bp.created_at).toLocaleDateString(), { width: 15, color: 'gray', dimColor: true, bold: false }),
-        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: "yellow", children: [figures.info, " No blueprints found"] }) }) }));
+            createTextColumn("created", "Created", (bp) => new Date(bp.created_at).toLocaleDateString(), { width: 15, color: colors.textDim, dimColor: true, bold: false }),
+        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: colors.warning, children: [figures.info, " No blueprints found"] }) }) }));
 }
-function SnapshotsTable({ snapshots, selectedIndex, terminalWidth }) {
+function SnapshotsTable({ snapshots, selectedIndex, terminalWidth, }) {
     // Responsive column widths
     const showSize = terminalWidth >= 100;
     const showFullId = terminalWidth >= 80;
     return (_jsx(Table, { data: snapshots, keyExtractor: (snap) => snap.id, selectedIndex: selectedIndex, columns: [
             // Status badge column
-            createComponentColumn('status', 'Status', (snap) => _jsx(StatusBadge, { status: snap.status, showText: false }), { width: 2 }),
+            createComponentColumn("status", "Status", (snap) => _jsx(StatusBadge, { status: snap.status, showText: false }), { width: 2 }),
             // ID column (responsive)
-            createTextColumn('id', 'ID', (snap) => showFullId ? snap.id : snap.id.slice(0, 13), { width: showFullId ? 25 : 15, color: 'gray', dimColor: true, bold: false }),
+            createTextColumn("id", "ID", (snap) => (showFullId ? snap.id : snap.id.slice(0, 13)), {
+                width: showFullId ? 25 : 15,
+                color: colors.textDim,
+                dimColor: true,
+                bold: false,
+            }),
             // Name column
-            createTextColumn('name', 'Name', (snap) => snap.name || '(unnamed)', { width: 25 }),
+            createTextColumn("name", "Name", (snap) => snap.name || "(unnamed)", { width: 25 }),
             // Devbox ID column
-            createTextColumn('devbox', 'Devbox', (snap) => snap.devbox_id.slice(0, 13), { width: 15, color: 'cyan', dimColor: true, bold: false }),
+            createTextColumn("devbox", "Devbox", (snap) => snap.devbox_id.slice(0, 13), {
+                width: 15,
+                color: colors.primary,
+                dimColor: true,
+                bold: false,
+            }),
             // Size column (optional)
-            createTextColumn('size', 'Size', (snap) => snap.size_gb ? `${snap.size_gb.toFixed(1)}GB` : '', { width: 10, color: 'yellow', dimColor: true, bold: false, visible: showSize }),
+            createTextColumn("size", "Size", (snap) => (snap.size_gb ? `${snap.size_gb.toFixed(1)}GB` : ""), {
+                width: 10,
+                color: colors.warning,
+                dimColor: true,
+                bold: false,
+                visible: showSize,
+            }),
             // Created time column
-            createTextColumn('created', 'Created', (snap) => new Date(snap.created_at).toLocaleDateString(), { width: 15, color: 'gray', dimColor: true, bold: false }),
-        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: "yellow", children: [figures.info, " No snapshots found"] }) }) }));
+            createTextColumn("created", "Created", (snap) => new Date(snap.created_at).toLocaleDateString(), { width: 15, color: colors.textDim, dimColor: true, bold: false }),
+        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: colors.warning, children: [figures.info, " No snapshots found"] }) }) }));
 }
 // ============================================================================
 // EXAMPLE 3: Custom Column with Complex Rendering
 // ============================================================================
 function CustomComplexColumn() {
     const data = [
-        { id: '1', name: 'Item 1', tags: ['tag1', 'tag2'] },
-        { id: '2', name: 'Item 2', tags: ['tag3'] },
+        { id: "1", name: "Item 1", tags: ["tag1", "tag2"] },
+        { id: "2", name: "Item 2", tags: ["tag3"] },
     ];
     return (_jsx(Table, { data: data, keyExtractor: (item) => item.id, selectedIndex: 0, columns: [
-            createTextColumn('name', 'Name', (item) => item.name, { width: 20 }),
+            createTextColumn("name", "Name", (item) => item.name, {
+                width: 20,
+            }),
             // Custom component column with complex rendering
-            createComponentColumn('tags', 'Tags', (item, index, isSelected) => (_jsx(Box, { width: 30, children: _jsx(Text, { color: isSelected ? 'cyan' : 'blue', dimColor: true, children: item.tags.map(tag => `[${tag}]`).join(' ') }) })), { width: 30 }),
+            createComponentColumn("tags", "Tags", (item, index, isSelected) => (_jsx(Box, { width: 30, children: _jsx(Text, { color: isSelected ? colors.primary : colors.info, dimColor: true, children: item.tags.map((tag) => `[${tag}]`).join(" ") }) })), { width: 30 }),
         ] }));
 }

package/dist/components/Table.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text } from 'ink';
-import figures from 'figures';
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
 /**
  * Reusable table component for displaying lists of data with optional selection
  * Designed to be responsive and work across devboxes, blueprints, and snapshots
@@ -11,11 +12,11 @@ export function Table({ data, columns, selectedIndex = -1, showSelection = true,
         return _jsx(_Fragment, { children: emptyState });
     }
     // Filter visible columns
-    const visibleColumns = columns.filter(col => col.visible !== false);
-    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsxs(Text, { color: "cyan", bold: true, children: ["\u256D\u2500 ", title, " ", '─'.repeat(Math.max(0, 10)), "\u256E"] }) })), _jsxs(Box, { flexDirection: "column", borderStyle: title ? 'single' : 'round', borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column) => (_jsx(Text, { bold: true, dimColor: true, children: column.label.slice(0, column.width).padEnd(column.width, ' ') }, `header-${column.key}`)))] }), data.map((row, index) => {
+    const visibleColumns = columns.filter((col) => col.visible !== false);
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsxs(Text, { color: colors.primary, bold: true, children: ["\u256D\u2500 ", title, " ", "─".repeat(Math.max(0, 10)), "\u256E"] }) })), _jsxs(Box, { flexDirection: "column", borderStyle: title ? "single" : "round", borderColor: colors.border, paddingX: 1, children: [_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column) => (_jsx(Text, { bold: true, dimColor: true, children: column.label.slice(0, column.width).padEnd(column.width, " ") }, `header-${column.key}`)))] }), data.map((row, index) => {
                         const isSelected = index === selectedIndex;
                         const rowKey = keyExtractor(row);
-                        return (_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: isSelected ? figures.pointer : ' ' }), _jsx(Text, { children: " " })] })), visibleColumns.map((column, colIndex) => (_jsx(React.Fragment, { children: column.render(row, index, isSelected) }, `${rowKey}-${column.key}`)))] }, rowKey));
+                        return (_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? colors.primary : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column, colIndex) => (_jsx(React.Fragment, { children: column.render(row, index, isSelected) }, `${rowKey}-${column.key}`)))] }, rowKey));
                     })] })] }));
 }
 /**
@@ -30,13 +31,20 @@ export function createTextColumn(key, label, getValue, options) {
         render: (row, index, isSelected) => {
             const value = getValue(row);
             const width = options?.width || 20;
-            const color = options?.color || (isSelected ? 'white' : 'white');
+            const color = options?.color || (isSelected ? colors.text : colors.text);
             const bold = options?.bold !== undefined ? options.bold : isSelected;
             const dimColor = options?.dimColor || false;
-            // Pad the value to fill the full width
-            const truncated = value.slice(0, width);
-            const padded = truncated.padEnd(width, ' ');
-            return (_jsx(Text, { color: isSelected ? 'white' : color, bold: bold, dimColor: !isSelected && dimColor, inverse: isSelected, children: padded }));
+            // Truncate and add ellipsis if text is too long
+            let truncated;
+            if (value.length > width) {
+                // Reserve space for ellipsis if truncating
+                truncated = value.slice(0, width - 1) + "…";
+            }
+            else {
+                truncated = value;
+            }
+            const padded = truncated.padEnd(width, " ");
+            return (_jsx(Text, { color: isSelected ? colors.text : color, bold: bold, dimColor: dimColor, inverse: isSelected, wrap: "truncate", children: padded }));
         },
     };
 }

package/dist/hooks/useCursorPagination.js

@@ -0,0 +1,125 @@
+import React from "react";
+export function useCursorPagination(config) {
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [totalCount, setTotalCount] = React.useState(0);
+    const [hasMore, setHasMore] = React.useState(false);
+    const [refreshing, setRefreshing] = React.useState(false);
+    // Cache for page data and cursors
+    const pageCache = React.useRef(new Map());
+    const lastIdCache = React.useRef(new Map());
+    const fetchData = React.useCallback(async (isInitialLoad = false) => {
+        try {
+            if (isInitialLoad) {
+                setRefreshing(true);
+            }
+            setLoading(true);
+            // Check cache first (skip on refresh)
+            if (!isInitialLoad && pageCache.current.has(currentPage)) {
+                setItems(pageCache.current.get(currentPage) || []);
+                setLoading(false);
+                return;
+            }
+            const pageItems = [];
+            // Get starting_at cursor from previous page's last ID
+            const startingAt = currentPage > 0
+                ? lastIdCache.current.get(currentPage - 1)
+                : undefined;
+            // Build query params
+            const queryParams = {
+                limit: config.pageSize,
+                ...config.queryParams,
+            };
+            if (startingAt) {
+                queryParams.starting_at = startingAt;
+            }
+            // Fetch the page
+            const result = await config.fetchPage(queryParams);
+            // Extract items (handle both array response and paginated response)
+            const fetchedItems = Array.isArray(result) ? result : result.items;
+            pageItems.push(...fetchedItems.slice(0, config.pageSize));
+            // Update pagination metadata
+            if (!Array.isArray(result)) {
+                setTotalCount(result.total_count || pageItems.length);
+                setHasMore(result.has_more || false);
+            }
+            else {
+                setTotalCount(pageItems.length);
+                setHasMore(false);
+            }
+            // Cache the page data and last ID
+            if (pageItems.length > 0) {
+                pageCache.current.set(currentPage, pageItems);
+                lastIdCache.current.set(currentPage, config.getItemId(pageItems[pageItems.length - 1]));
+            }
+            // Update items for current page
+            setItems(pageItems);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setLoading(false);
+            if (isInitialLoad) {
+                setTimeout(() => setRefreshing(false), 300);
+            }
+        }
+    }, [currentPage, config]);
+    // Initial load and page changes
+    React.useEffect(() => {
+        fetchData(true);
+    }, [fetchData, currentPage]);
+    // Auto-refresh
+    React.useEffect(() => {
+        if (!config.refreshInterval || config.refreshInterval <= 0) {
+            return;
+        }
+        const interval = setInterval(() => {
+            // Clear cache on refresh
+            pageCache.current.clear();
+            lastIdCache.current.clear();
+            fetchData(false);
+        }, config.refreshInterval);
+        return () => clearInterval(interval);
+    }, [config.refreshInterval, fetchData]);
+    const nextPage = React.useCallback(() => {
+        if (!loading && hasMore) {
+            setCurrentPage((prev) => prev + 1);
+        }
+    }, [loading, hasMore]);
+    const prevPage = React.useCallback(() => {
+        if (!loading && currentPage > 0) {
+            setCurrentPage((prev) => prev - 1);
+        }
+    }, [loading, currentPage]);
+    const goToPage = React.useCallback((page) => {
+        if (!loading && page >= 0) {
+            setCurrentPage(page);
+        }
+    }, [loading]);
+    const refresh = React.useCallback(() => {
+        pageCache.current.clear();
+        lastIdCache.current.clear();
+        fetchData(true);
+    }, [fetchData]);
+    const clearCache = React.useCallback(() => {
+        pageCache.current.clear();
+        lastIdCache.current.clear();
+    }, []);
+    return {
+        items,
+        loading,
+        error,
+        currentPage,
+        totalCount,
+        hasMore,
+        refreshing,
+        nextPage,
+        prevPage,
+        goToPage,
+        refresh,
+        clearCache,
+    };
+}