@a9s/cli 1.0.7 → 1.0.9

package/dist/scripts/seed.js

@@ -93,7 +93,7 @@ async function checkLocalStack() {
         process.exit(1);
     }
 }
-async function runAws(args) {
+async function runAws(args, timeoutMs = 10000) {
     const env = {
         ...process.env,
         AWS_ACCESS_KEY_ID: "test",
@@ -102,7 +102,7 @@ async function runAws(args) {
     };
     const { stdout } = await execFileAsync("aws", ["--endpoint-url", "http://localhost:4566", ...args], {
         env,
-        timeout: 5000,
+        timeout: timeoutMs,
     });
     return stdout;
 }
@@ -195,6 +195,182 @@ async function ensureAttachedRolePolicy(roleName, policyArn) {
     await runAws(["iam", "attach-role-policy", "--role-name", roleName, "--policy-arn", policyArn]);
     console.log(`  Attached managed policy to ${roleName}`);
 }
+async function seedDynamoDB() {
+    console.log("\nSeeding DynamoDB:");
+    const tables = [
+        {
+            name: "Users",
+            pkName: "userId",
+            skName: "timestamp",
+            items: [
+                { userId: "user-001", timestamp: "2024-01-15T10:00:00Z", email: "alice@example.com", role: "admin" },
+                { userId: "user-002", timestamp: "2024-01-16T14:30:00Z", email: "bob@example.com", role: "user" },
+                { userId: "user-003", timestamp: "2024-01-17T09:45:00Z", email: "charlie@example.com", role: "user" },
+            ],
+        },
+        {
+            name: "Orders",
+            pkName: "orderId",
+            items: [
+                { orderId: "order-001", status: "completed", total: "99.99", items: "3" },
+                { orderId: "order-002", status: "pending", total: "149.50", items: "5" },
+                { orderId: "order-003", status: "shipped", total: "299.00", items: "1" },
+            ],
+        },
+    ];
+    for (const table of tables) {
+        // Try to create table
+        try {
+            const keySchema = [{ AttributeName: table.pkName, KeyType: "HASH" }];
+            const attrDefs = [{ AttributeName: table.pkName, AttributeType: "S" }];
+            if (table.skName) {
+                keySchema.push({ AttributeName: table.skName, KeyType: "RANGE" });
+                attrDefs.push({ AttributeName: table.skName, AttributeType: "S" });
+            }
+            await runAws([
+                "dynamodb",
+                "create-table",
+                "--table-name",
+                table.name,
+                "--key-schema",
+                JSON.stringify(keySchema),
+                "--attribute-definitions",
+                JSON.stringify(attrDefs),
+                "--billing-mode",
+                "PAY_PER_REQUEST",
+                "--output",
+                "json",
+            ], 15000);
+            console.log(`  Created table: ${table.name}`);
+        }
+        catch (e) {
+            const err = e;
+            if (err.message?.includes("already exists")) {
+                console.log(`  Table already exists: ${table.name}`);
+            }
+            else {
+                throw e;
+            }
+        }
+        // Add items to the table (whether newly created or existing)
+        let addedCount = 0;
+        for (const item of table.items) {
+            const itemObj = {};
+            for (const [k, v] of Object.entries(item)) {
+                itemObj[k] = { S: String(v) };
+            }
+            try {
+                await runAws([
+                    "dynamodb",
+                    "put-item",
+                    "--table-name",
+                    table.name,
+                    "--item",
+                    JSON.stringify(itemObj),
+                ], 10000);
+                addedCount++;
+            }
+            catch (e) {
+                console.log(`    Warning: could not add item: ${e.message}`);
+            }
+        }
+        console.log(`    Added ${addedCount}/${table.items.length} items`);
+    }
+}
+async function seedRoute53() {
+    console.log("\nSeeding Route53:");
+    const zones = [
+        { name: "example.com.", isPrivate: false },
+        { name: "internal.local.", isPrivate: true },
+        { name: "staging.test.", isPrivate: false },
+    ];
+    for (const zone of zones) {
+        try {
+            // First check if zone already exists
+            const listOut = await runAws([
+                "route53",
+                "list-hosted-zones",
+                "--output",
+                "json",
+            ], 10000).catch(() => "");
+            let zoneId;
+            if (listOut) {
+                try {
+                    const listParsed = JSON.parse(listOut);
+                    const existingZone = listParsed.HostedZones?.find((z) => z.Name === zone.name);
+                    if (existingZone) {
+                        zoneId = existingZone.Id;
+                        console.log(`  Hosted zone already exists: ${zone.name}`);
+                    }
+                }
+                catch (e) {
+                    // Ignore parse errors
+                    console.log(`  List zones error: ${e.message}`);
+                }
+            }
+            // If not found, create it
+            if (!zoneId) {
+                const createOut = await runAws([
+                    "route53",
+                    "create-hosted-zone",
+                    "--name",
+                    zone.name,
+                    "--caller-reference",
+                    `zone-${Date.now()}-${Math.random()}`,
+                    "--hosted-zone-config",
+                    JSON.stringify({ PrivateZone: zone.isPrivate, Comment: `Test zone for ${zone.name}` }),
+                    "--output",
+                    "json",
+                ], 10000);
+                const parsed = JSON.parse(createOut);
+                zoneId = parsed.HostedZone?.Id;
+                if (!zoneId)
+                    throw new Error(`Failed creating hosted zone ${zone.name}`);
+                console.log(`  Created hosted zone: ${zone.name} (${zoneId})`);
+            }
+            // Add some DNS records to the zone
+            const records = [
+                { name: `www.${zone.name}`, type: "A", value: "192.0.2.1" },
+                { name: `api.${zone.name}`, type: "A", value: "192.0.2.2" },
+                { name: `mail.${zone.name}`, type: "A", value: "192.0.2.3" },
+                { name: zone.name, type: "MX", value: "10 mail.example.com." },
+            ];
+            for (const record of records) {
+                try {
+                    await runAws([
+                        "route53",
+                        "change-resource-record-sets",
+                        "--hosted-zone-id",
+                        zoneId,
+                        "--change-batch",
+                        JSON.stringify({
+                            Changes: [
+                                {
+                                    Action: "UPSERT",
+                                    ResourceRecordSet: {
+                                        Name: record.name,
+                                        Type: record.type,
+                                        TTL: 300,
+                                        ResourceRecords: [{ Value: record.value }],
+                                    },
+                                },
+                            ],
+                        }),
+                    ], 10000);
+                    console.log(`    Ensured record: ${record.name} (${record.type})`);
+                }
+                catch (e) {
+                    const err = e;
+                    console.log(`    Warning adding record ${record.name}: ${err.message ?? String(e)}`);
+                }
+            }
+        }
+        catch (e) {
+            const err = e;
+            console.error(`  Error seeding zone ${zone.name}: ${err.message ?? String(e)}`);
+        }
+    }
+}
 async function seedSecretsManager() {
     console.log("\nSeeding Secrets Manager:");
     const secrets = [
@@ -299,8 +475,30 @@ async function main() {
         process.stdout.write("  Objects: ");
         await seedBucket(bucket);
     }
-    await seedIam();
-    await seedSecretsManager();
+    try {
+        await seedDynamoDB();
+    }
+    catch (e) {
+        console.error(`\nDynamoDB seeding failed: ${e.message}`);
+    }
+    try {
+        await seedRoute53();
+    }
+    catch (e) {
+        console.error(`\nRoute53 seeding failed: ${e.message}`);
+    }
+    try {
+        await seedIam();
+    }
+    catch (e) {
+        console.error(`\nIAM seeding failed: ${e.message}`);
+    }
+    try {
+        await seedSecretsManager();
+    }
+    catch (e) {
+        console.error(`\nSecrets Manager seeding failed: ${e.message}`);
+    }
     console.log("\nDone! LocalStack seeded with test data.");
     console.log("Run: pnpm dev:local");
 }

package/dist/src/App.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useApp } from "ink";
 import { useAtom } from "jotai";
 import clipboardy from "clipboardy";
@@ -24,7 +24,9 @@ import { deriveYankHeaderMarkers } from "./hooks/yankHeaderMarkers.js";
 import { AppMainView } from "./features/AppMainView.js";
 import { AVAILABLE_COMMANDS } from "./constants/commands.js";
 import { buildHelpTabs, triggerToString } from "./constants/keybindings.js";
-import { currentlySelectedServiceAtom, selectedRegionAtom, selectedProfileAtom, revealSecretsAtom, } from "./state/atoms.js";
+import { useTheme } from "./contexts/ThemeContext.js";
+import { saveConfig } from "./utils/config.js";
+import { currentlySelectedServiceAtom, selectedRegionAtom, selectedProfileAtom, revealSecretsAtom, themeNameAtom, } from "./state/atoms.js";
 const INITIAL_AWS_PROFILE = process.env.AWS_PROFILE;
 export function App({ initialService, endpointUrl }) {
     const { exit } = useApp();
@@ -33,6 +35,13 @@ export function App({ initialService, endpointUrl }) {
     const [selectedProfile, setSelectedProfile] = useAtom(selectedProfileAtom);
     const [currentService, setCurrentService] = useAtom(currentlySelectedServiceAtom);
     const [revealSecrets, setRevealSecrets] = useAtom(revealSecretsAtom);
+    const [themeName, setThemeName] = useAtom(themeNameAtom);
+    const THEME = useTheme();
+    // Live theme preview: refs to restore original when picker is cancelled
+    const themeNameRef = useRef(themeName);
+    themeNameRef.current = themeName; // always in sync, not a dep
+    const originalThemeRef = useRef(themeName);
+    const themePickerConfirmedRef = useRef(false);
     const { accountName, accountId, awsProfile, currentIdentity, region } = useAwsContext(endpointUrl, selectedRegion, selectedProfile);
     const availableRegions = useAwsRegions(selectedRegion, selectedProfile);
     const availableProfiles = useAwsProfiles();
@@ -73,6 +82,23 @@ export function App({ initialService, endpointUrl }) {
         pickers.openPicker("resource");
         setDidOpenInitialResources(true);
     }, [didOpenInitialResources, pickers]);
+    // Save original theme when theme picker opens; restore it if picker is cancelled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (pickers.theme.open) {
+            originalThemeRef.current = themeNameRef.current;
+            themePickerConfirmedRef.current = false;
+        }
+        else if (!themePickerConfirmedRef.current) {
+            setThemeName(originalThemeRef.current);
+        }
+    }, [pickers.theme.open]);
+    // Live preview: apply hovered theme immediately as selection changes
+    useEffect(() => {
+        if (!pickers.theme.open || !pickers.theme.selectedRow)
+            return;
+        setThemeName(pickers.theme.selectedRow.id);
+    }, [pickers.theme.open, pickers.theme.selectedRow, setThemeName]);
     const switchAdapter = useCallback((serviceId) => {
         setCurrentService(serviceId);
         actions.setFilterText("");
@@ -207,6 +233,7 @@ export function App({ initialService, endpointUrl }) {
         openProfilePicker: () => pickers.openPicker("profile"),
         openRegionPicker: () => pickers.openPicker("region"),
         openResourcePicker: () => pickers.openPicker("resource"),
+        openThemePicker: () => pickers.openPicker("theme"),
         exit,
     });
     const handleFilterChange = useCallback((value) => {
@@ -373,6 +400,11 @@ export function App({ initialService, endpointUrl }) {
                     onSelectResource: switchAdapter,
                     onSelectRegion: setSelectedRegion,
                     onSelectProfile: setSelectedProfile,
+                    onSelectTheme: (name) => {
+                        themePickerConfirmedRef.current = true;
+                        setThemeName(name);
+                        saveConfig({ theme: name });
+                    },
                 }),
             },
             mode: {
@@ -472,5 +504,5 @@ export function App({ initialService, endpointUrl }) {
     });
     useMainInput(inputDispatch);
     const activePickerFilter = pickers.activePicker?.filter ?? state.filterText;
-    return (_jsx(FullscreenBox, { children: _jsxs(Box, { flexDirection: "column", width: termCols, height: termRows, children: [_jsx(HUD, { serviceLabel: adapter.label, hudColor: adapter.hudColor, path: path, accountName: accountName, accountId: accountId, awsProfile: awsProfile, currentIdentity: currentIdentity, region: region, terminalWidth: termCols, loading: isLoading || Boolean(state.describeState?.loading) }), _jsx(Box, { flexDirection: "row", width: "100%", flexGrow: 1, children: _jsx(AppMainView, { helpPanel: helpPanel, helpTabs: helpTabs, pickers: pickers, error: error, describeState: state.describeState, isLoading: isLoading, filteredRows: filteredRows, columns: columns, selectedIndex: navigation.selectedIndex, scrollOffset: navigation.scrollOffset, filterText: state.filterText, adapter: adapter, termCols: termCols, tableHeight: tableHeight, yankHelpOpen: state.yankHelpOpen, yankOptions: yankOptions, yankHelpRow: selectedRow, uploadPending: state.uploadPending, uploadPreview: uploadPreview, panelScrollOffset: panelScrollOffset, ...(yankHeaderMarkers ? { headerMarkers: yankHeaderMarkers } : {}) }) }), !helpPanel.helpOpen && state.yankFeedbackMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "green", children: state.yankFeedbackMessage }) })), state.pendingAction && state.pendingAction.effect.type === "prompt" && (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: "cyan", children: [state.pendingAction.effect.label, " "] }), _jsx(AdvancedTextInput, { value: state.pendingAction.inputValue, onChange: (value) => actions.setPendingInputValue(value), onSubmit: () => submitPendingAction(state.pendingAction, true), focus: true })] })), state.pendingAction && state.pendingAction.effect.type === "confirm" && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "yellow", children: [state.pendingAction.effect.message, " (y/n)"] }) })), _jsx(ModeBar, { mode: state.mode, filterText: activePickerFilter, commandText: state.commandText, commandCursorToEndToken: state.commandCursorToEndToken, hintOverride: bottomHint, pickerSearchActive: pickers.activePicker?.pickerMode === "search", onFilterChange: handleFilterChange, onCommandChange: actions.setCommandText, onFilterSubmit: handleFilterSubmit, onCommandSubmit: handleCommandSubmit })] }) }));
+    return (_jsx(FullscreenBox, { children: _jsxs(Box, { flexDirection: "column", width: termCols, height: termRows, backgroundColor: THEME.global.mainBg, children: [_jsx(HUD, { serviceLabel: adapter.label, hudColor: THEME.serviceColors[adapter.id] ?? adapter.hudColor, path: path, accountName: accountName, accountId: accountId, awsProfile: awsProfile, currentIdentity: currentIdentity, region: region, terminalWidth: termCols, loading: isLoading || Boolean(state.describeState?.loading) }), _jsx(Box, { flexDirection: "row", width: "100%", flexGrow: 1, children: _jsx(AppMainView, { helpPanel: helpPanel, helpTabs: helpTabs, pickers: pickers, error: error, describeState: state.describeState, isLoading: isLoading, filteredRows: filteredRows, columns: columns, selectedIndex: navigation.selectedIndex, scrollOffset: navigation.scrollOffset, filterText: state.filterText, adapter: adapter, termCols: termCols, tableHeight: tableHeight, yankHelpOpen: state.yankHelpOpen, yankOptions: yankOptions, yankHelpRow: selectedRow, uploadPending: state.uploadPending, uploadPreview: uploadPreview, panelScrollOffset: panelScrollOffset, ...(yankHeaderMarkers ? { headerMarkers: yankHeaderMarkers } : {}) }) }), !helpPanel.helpOpen && state.yankFeedbackMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: THEME.feedback.successText, children: state.yankFeedbackMessage }) })), state.pendingAction && state.pendingAction.effect.type === "prompt" && (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: THEME.feedback.promptText, children: [state.pendingAction.effect.label, " "] }), _jsx(AdvancedTextInput, { value: state.pendingAction.inputValue, onChange: (value) => actions.setPendingInputValue(value), onSubmit: () => submitPendingAction(state.pendingAction, true), focus: true })] })), state.pendingAction && state.pendingAction.effect.type === "confirm" && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: THEME.feedback.confirmText, children: [state.pendingAction.effect.message, " (y/n)"] }) })), _jsx(ModeBar, { mode: state.mode, filterText: activePickerFilter, commandText: state.commandText, commandCursorToEndToken: state.commandCursorToEndToken, hintOverride: bottomHint, pickerSearchActive: pickers.activePicker?.pickerMode === "search", onFilterChange: handleFilterChange, onCommandChange: actions.setCommandText, onFilterSubmit: handleFilterSubmit, onCommandSubmit: handleCommandSubmit })] }) }));
 }

package/dist/src/components/AdvancedTextInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Text, useInput } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
@@ -153,6 +154,7 @@ export function applyAdvancedInputEdit(currentValue, currentCursor, input, key)
     };
 }
 export function AdvancedTextInput({ value, onChange, onSubmit, placeholder, focus = true, cursorToEndToken, }) {
+    const THEME = useTheme();
     const [cursor, setCursor] = useState(value.length);
     useEffect(() => {
         setCursor((prev) => clamp(prev, 0, value.length));
@@ -194,7 +196,7 @@ export function AdvancedTextInput({ value, onChange, onSubmit, placeholder, focu
         };
     }, [cursor, placeholder, value]);
     if (rendered.isPlaceholder) {
-        return _jsx(Text, { color: "gray", children: rendered.text });
+        return _jsx(Text, { color: THEME.input.placeholderText, children: rendered.text });
     }
     return (_jsxs(Text, { children: [rendered.before, _jsx(Text, { inverse: true, children: rendered.at }), rendered.after] }));
 }

package/dist/src/components/AutocompleteInput.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { Box, Text } from "ink";
 import { AdvancedTextInput } from "./AdvancedTextInput.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 export const AutocompleteInput = React.forwardRef(({ value, onChange, onSubmit, placeholder, suggestions = [], focus = true, cursorToEndToken }, ref) => {
+    const THEME = useTheme();
     const [inputKey, setInputKey] = useState(0);
     const matchingSuggestions = useMemo(() => {
         if (!value || suggestions.length === 0)
@@ -25,5 +27,5 @@ export const AutocompleteInput = React.forwardRef(({ value, onChange, onSubmit,
             return;
         setInputKey((k) => k + 1);
     }, [cursorToEndToken]);
-    return (_jsxs(Box, { children: [_jsx(AdvancedTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, focus: focus, ...(cursorToEndToken !== undefined ? { cursorToEndToken } : {}) }, `autocomplete-input-${inputKey}`), suggestion && (_jsx(Text, { color: "gray", dimColor: true, children: suggestion }))] }));
+    return (_jsxs(Box, { children: [_jsx(AdvancedTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, focus: focus, ...(cursorToEndToken !== undefined ? { cursorToEndToken } : {}) }, `autocomplete-input-${inputKey}`), suggestion && (_jsx(Text, { color: THEME.input.suggestionText, dimColor: true, children: suggestion }))] }));
 });

package/dist/src/components/DetailPanel.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function DetailPanel({ title, fields, isLoading, scrollOffset, visibleLines, }) {
+    const THEME = useTheme();
     const labelWidth = Math.max(...fields.map((f) => f.label.length), 12);
     // Clamp scrollOffset to valid range
     const clampedOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, fields.length - visibleLines)));
@@ -8,5 +10,5 @@ export function DetailPanel({ title, fields, isLoading, scrollOffset, visibleLin
     const visibleFields = fields.slice(clampedOffset, clampedOffset + visibleLines);
     const hasMoreAbove = clampedOffset > 0;
     const hasMoreBelow = clampedOffset + visibleLines < fields.length;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: "blue", children: title }), _jsx(Text, { color: "gray", children: "─".repeat(40) }), isLoading ? (_jsx(Text, { color: "gray", children: "Loading..." })) : (_jsxs(_Fragment, { children: [hasMoreAbove && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " more above"] })), visibleFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: f.label.padEnd(labelWidth + 2) }), _jsx(Text, { children: f.value })] }, f.label))), hasMoreBelow && (_jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", fields.length - clampedOffset - visibleLines, " more below"] }))] })), _jsx(Text, { color: "gray", children: "─".repeat(40) }), _jsx(Text, { color: "gray", children: "j/k scroll \u2022 Esc close" })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [_jsx(Text, { bold: true, color: THEME.panel.panelTitleText, children: title }), _jsx(Text, { color: THEME.panel.panelDividerText, children: "─".repeat(40) }), isLoading ? (_jsx(Text, { color: THEME.panel.panelHintText, children: "Loading..." })) : (_jsxs(_Fragment, { children: [hasMoreAbove && (_jsxs(Text, { color: THEME.panel.panelHintText, dimColor: true, children: ["\u2191 ", clampedOffset, " more above"] })), visibleFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { color: THEME.panel.detailFieldLabelText, children: f.label.padEnd(labelWidth + 2) }), _jsx(Text, { children: f.value })] }, f.label))), hasMoreBelow && (_jsxs(Text, { color: THEME.panel.panelHintText, dimColor: true, children: ["\u2193 ", fields.length - clampedOffset - visibleLines, " more below"] }))] })), _jsx(Text, { color: THEME.panel.panelDividerText, children: "─".repeat(40) }), _jsx(Text, { color: THEME.panel.panelHintText, children: "j/k scroll \u2022 Esc close" })] }));
 }

package/dist/src/components/DiffViewer.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function DiffViewer({ oldValue, newValue, scrollOffset, visibleLines }) {
+    const THEME = useTheme();
     const oldLines = oldValue.split("\n");
     const newLines = newValue.split("\n");
     const maxLines = Math.max(oldLines.length, newLines.length);
@@ -13,5 +15,5 @@ export function DiffViewer({ oldValue, newValue, scrollOffset, visibleLines }) {
     const hasMoreBelow = clampedOffset + visibleLines < maxLines;
     // Calculate column width
     const colWidth = 35;
-    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: "red", bold: true, children: "Original" }) }), _jsx(Box, { children: _jsx(Text, { color: "green", bold: true, children: "Updated" }) })] }), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: "gray", children: "-".repeat(30) }) }), _jsx(Text, { color: "gray", children: "-".repeat(30) })] }), _jsxs(Box, { gap: 2, flexDirection: "column", children: [hasMoreAbove && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] }) }), _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] })] })), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { children: oldDisplay }) }), _jsx(Box, { children: _jsx(Text, { children: newDisplay }) })] }), hasMoreBelow && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] }) }), _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] })] }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: THEME.diff.originalHeaderText, bold: true, children: "Original" }) }), _jsx(Box, { children: _jsx(Text, { color: THEME.diff.updatedHeaderText, bold: true, children: "Updated" }) })] }), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { color: THEME.diff.diffDividerText, children: "-".repeat(30) }) }), _jsx(Text, { color: THEME.diff.diffDividerText, children: "-".repeat(30) })] }), _jsxs(Box, { gap: 2, flexDirection: "column", children: [hasMoreAbove && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] }) }), _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2191 ", clampedOffset, " lines above"] })] })), _jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsx(Text, { children: oldDisplay }) }), _jsx(Box, { children: _jsx(Text, { children: newDisplay }) })] }), hasMoreBelow && (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: colWidth, children: _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] }) }), _jsxs(Text, { color: THEME.diff.diffDividerText, dimColor: true, children: ["\u2193 ", maxLines - clampedOffset - visibleLines, " more lines"] })] }))] })] }));
 }

package/dist/src/components/ErrorStatePanel.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function ErrorStatePanel({ title, message, hint }) {
-    return (_jsx(Box, { width: "100%", borderStyle: "round", borderColor: "red", children: _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "red", children: title }), _jsx(Text, { children: message }), hint ? _jsx(Text, { color: "gray", children: hint }) : null] }) }));
+    const THEME = useTheme();
+    return (_jsx(Box, { width: "100%", borderStyle: "round", borderColor: THEME.error.errorBorderText, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: THEME.error.errorTitleText, children: title }), _jsx(Text, { children: message }), hint ? _jsx(Text, { color: THEME.error.errorHintText, children: hint }) : null] }) }));
 }

package/dist/src/components/HUD.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 export function HUD({ serviceLabel, hudColor, path, accountName, accountId, awsProfile, currentIdentity, region, terminalWidth, loading = false, }) {
+    const THEME = useTheme();
     const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
     const [spinnerIndex, setSpinnerIndex] = React.useState(0);
     React.useEffect(() => {
@@ -27,5 +29,5 @@ export function HUD({ serviceLabel, hudColor, path, accountName, accountId, awsP
     const label = ` ${serviceLabel.toUpperCase()} `;
     const pathDisplay = ` ${path} `;
     const padLen = Math.max(0, terminalWidth - label.length - pathDisplay.length);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "blue", bold: true, children: compactName }), _jsx(Text, { color: "yellow", bold: true, children: idPart }), _jsx(Text, { color: "gray", bold: true, children: "\u00B7" }), _jsx(Text, { color: "green", bold: true, children: region }), _jsx(Text, { color: "gray", bold: true, children: "\u00B7" }), _jsx(Text, { color: "magenta", bold: true, children: profilePart }), _jsx(Text, { children: " ".repeat(topPadLen) }), loading ? (_jsx(Text, { color: "cyan", bold: true, children: SPINNER_FRAMES[spinnerIndex] })) : null] }), _jsxs(Text, { color: "cyan", wrap: "truncate-end", children: [identityLine, " ".repeat(identityPadLen)] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: hudColor.bg, color: hudColor.fg, bold: true, children: label }), _jsxs(Text, { backgroundColor: "gray", color: "white", children: [pathDisplay, " ".repeat(padLen)] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: THEME.hud.accountNameText, bold: true, children: compactName }), _jsx(Text, { color: THEME.hud.accountIdText, bold: true, children: idPart }), _jsx(Text, { color: THEME.hud.separatorText, bold: true, children: "\u00B7" }), _jsx(Text, { color: THEME.hud.regionText, bold: true, children: region }), _jsx(Text, { color: THEME.hud.separatorText, bold: true, children: "\u00B7" }), _jsx(Text, { color: THEME.hud.profileText, bold: true, children: profilePart }), _jsx(Text, { children: " ".repeat(topPadLen) }), loading ? (_jsx(Text, { color: THEME.hud.loadingSpinnerText, bold: true, children: SPINNER_FRAMES[spinnerIndex] })) : null] }), _jsxs(Text, { color: THEME.hud.currentIdentityText, wrap: "truncate-end", children: [identityLine, " ".repeat(identityPadLen)] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: hudColor.bg, color: hudColor.fg, bold: true, children: label }), _jsxs(Text, { backgroundColor: THEME.hud.pathBarBg, color: THEME.hud.pathBarText, children: [pathDisplay, " ".repeat(padLen)] })] })] }));
 }

package/dist/src/components/HelpPanel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTheme } from "../contexts/ThemeContext.js";
 function truncate(text, maxLen) {
     if (text.length <= maxLen)
         return text;
@@ -8,6 +9,7 @@ function truncate(text, maxLen) {
     return `${text.slice(0, maxLen - 1)}…`;
 }
 export function HelpPanel({ title, scopeLabel, tabs, activeTab, terminalWidth, maxRows, scrollOffset, }) {
+    const THEME = useTheme();
     const currentTab = tabs[activeTab] ?? tabs[0];
     const keyColWidth = 12;
     const descColWidth = Math.max(16, terminalWidth - keyColWidth - 8);
@@ -24,10 +26,10 @@ export function HelpPanel({ title, scopeLabel, tabs, activeTab, terminalWidth, m
     }
     const listRowsBudget = Math.max(1, maxRows);
     const visibleItems = (currentTab?.items ?? []).slice(scrollOffset, scrollOffset + listRowsBudget);
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, color: "blue", children: title }), _jsx(Text, { color: "gray", children: scopeLabel }), _jsx(Box, { children: tabRow.map((chip) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, color: THEME.panel.panelTitleText, children: title }), _jsx(Text, { color: THEME.panel.panelHintText, children: scopeLabel }), _jsx(Box, { children: tabRow.map((chip) => {
                     const isActive = chip.idx === activeTab;
                     return (_jsx(Text, { ...(isActive
-                            ? { backgroundColor: "blue", color: "white" }
-                            : { color: "cyan" }), bold: isActive, children: chip.label }, `chip-${chip.idx}`));
-                }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, idx) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", bold: true, children: truncate(item.key, keyColWidth).padEnd(keyColWidth) }), _jsx(Text, { children: truncate(item.description, descColWidth) })] }, `${item.key}-${scrollOffset + idx}`))) })] }));
+                            ? { backgroundColor: THEME.panel.activeTabBg, color: THEME.panel.activeTabText }
+                            : { color: THEME.panel.inactiveTabText }), bold: isActive, children: chip.label }, `chip-${chip.idx}`));
+                }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, idx) => (_jsxs(Box, { children: [_jsx(Text, { color: THEME.panel.keyText, bold: true, children: truncate(item.key, keyColWidth).padEnd(keyColWidth) }), _jsx(Text, { children: truncate(item.description, descColWidth) })] }, `${item.key}-${scrollOffset + idx}`))) })] }));
 }

package/dist/src/components/ModeBar.js

@@ -3,17 +3,14 @@ import React, { useRef } from "react";
 import { Box, Text } from "ink";
 import { AutocompleteInput } from "./AutocompleteInput.js";
 import { AVAILABLE_COMMANDS } from "../constants/commands.js";
+import { useTheme } from "../contexts/ThemeContext.js";
 const MODE_ICONS = {
     navigate: "◉",
     search: "/",
     command: ":",
 };
-const MODE_COLORS = {
-    navigate: "blue",
-    search: "blue",
-    command: "blue",
-};
 export const ModeBar = React.forwardRef(({ mode, filterText, commandText, commandCursorToEndToken, hintOverride, pickerSearchActive, onFilterChange, onCommandChange, onFilterSubmit, onCommandSubmit, }, ref) => {
+    const THEME = useTheme();
     const commandInputRef = useRef(null);
     const filterInputRef = useRef(null);
     const renderHint = (hint) => {
@@ -22,11 +19,11 @@ export const ModeBar = React.forwardRef(({ mode, filterText, commandText, comman
             .split("•")
             .map((x) => x.trim())
             .filter(Boolean);
-        return (_jsx(Text, { color: "gray", wrap: "truncate-end", children: entries.map((entry, idx) => {
+        return (_jsx(Text, { color: THEME.modebar.keybindingDescText, wrap: "truncate-end", children: entries.map((entry, idx) => {
                 const [rawKey, rawDesc] = entry.split("·").map((x) => x.trim());
                 const keyPart = rawKey ?? entry;
                 const descPart = rawDesc ?? "";
-                return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "yellow", children: keyPart }), descPart ? _jsxs(Text, { color: "gray", children: [" ", descPart] }) : null, idx < entries.length - 1 ? _jsx(Text, { color: "gray", children: " \u2022 " }) : null] }, `hint-${idx}`));
+                return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: THEME.modebar.keybindingKeyText, children: keyPart }), descPart ? _jsxs(Text, { color: THEME.modebar.keybindingDescText, children: [" ", descPart] }) : null, idx < entries.length - 1 ? _jsx(Text, { color: THEME.modebar.keybindingSeparatorText, children: " \u2022 " }) : null] }, `hint-${idx}`));
             }) }));
     };
     React.useImperativeHandle(ref, () => ({
@@ -37,7 +34,7 @@ export const ModeBar = React.forwardRef(({ mode, filterText, commandText, comman
     const icon = isPickerSearch ? "/" : MODE_ICONS[mode];
     const showNavigateHint = mode === "navigate" && !isPickerSearch;
     const showFilterInput = mode === "search" || isPickerSearch;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: MODE_COLORS[mode], bold: true, children: icon }), _jsx(Text, { children: " " }), showNavigateHint && renderHint(hintOverride ?? ""), showFilterInput && (_jsx(AutocompleteInput, { ref: filterInputRef, value: filterText, onChange: onFilterChange, onSubmit: onFilterSubmit, placeholder: "Type to filter", focus: showFilterInput })), mode === "command" && (_jsx(AutocompleteInput, { ref: commandInputRef, value: commandText, onChange: onCommandChange, onSubmit: onCommandSubmit, placeholder: "Type a command", suggestions: [...AVAILABLE_COMMANDS], focus: mode === "command", ...(commandCursorToEndToken !== undefined
+    return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: THEME.modebar.modeIconText, bold: true, children: icon }), _jsx(Text, { children: " " }), showNavigateHint && renderHint(hintOverride ?? ""), showFilterInput && (_jsx(AutocompleteInput, { ref: filterInputRef, value: filterText, onChange: onFilterChange, onSubmit: onFilterSubmit, placeholder: "Type to filter", focus: showFilterInput })), mode === "command" && (_jsx(AutocompleteInput, { ref: commandInputRef, value: commandText, onChange: onCommandChange, onSubmit: onCommandSubmit, placeholder: "Type a command", suggestions: [...AVAILABLE_COMMANDS], focus: mode === "command", ...(commandCursorToEndToken !== undefined
                         ? { cursorToEndToken: commandCursorToEndToken }
                         : {}) }))] }) }));
 });

package/dist/src/components/Table/index.js

@@ -2,16 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import { computeColumnWidths } from "./widths.js";
-// Color constants for table styling
-const COLORS = {
-    separator: "gray", // │ and ─ dividers
-    headerText: "blue", // Column header text
-    selectedBg: "cyan", // Selected row background
-    selectedText: "black", // Selected row text
-    highlightText: "yellow", // Filtered match highlight
-    emptyText: "gray", // Empty state text
-    highlightSelectedText: "black", // Highlight text on selected row
-};
+import { useTheme } from "../../contexts/ThemeContext.js";
 function truncate(str, maxLen) {
     if (str.length <= maxLen)
         return str.padEnd(maxLen);
@@ -26,14 +17,14 @@ function truncateNoPad(str, maxLen) {
         return "…";
     return str.slice(0, maxLen - 1) + "…";
 }
-function highlightMatch(text, filter, isSelected = false) {
+function highlightMatch(text, filter, isSelected, theme) {
     if (!filter || !text)
         return [text];
     const parts = [];
     const lowerText = text.toLowerCase();
     const lowerFilter = filter.toLowerCase();
     let lastIdx = 0;
-    const highlightColor = isSelected ? COLORS.highlightSelectedText : COLORS.highlightText;
+    const highlightColor = isSelected ? theme.table.filterMatchSelectedText : theme.table.filterMatchText;
     let idx = lowerText.indexOf(lowerFilter);
     while (idx !== -1) {
         if (idx > lastIdx) {
@@ -49,24 +40,26 @@ function highlightMatch(text, filter, isSelected = false) {
     return parts.length > 0 ? parts : [text];
 }
 const Row = React.memo(function Row({ row, isSelected, columns, colWidths, filterText }) {
+    const THEME = useTheme();
     const parts = [];
     columns.forEach((col, i) => {
         if (i > 0)
-            parts.push(_jsxs(Text, { color: COLORS.separator, children: [" ", "\u2502", " "] }, `sep-${i}`));
+            parts.push(_jsxs(Text, { color: THEME.table.rowSeparatorText, children: [" ", "\u2502", " "] }, `sep-${i}`));
         const cellData = row.cells[col.key] ?? "";
         const cellValue = typeof cellData === "string" ? cellData : cellData.displayName;
         const truncated = truncate(cellValue, colWidths[i]);
-        const highlighted = filterText && truncated ? highlightMatch(truncated, filterText, isSelected) : [truncated];
+        const highlighted = filterText && truncated ? highlightMatch(truncated, filterText, isSelected, THEME) : [truncated];
         if (isSelected) {
-            parts.push(_jsx(Text, { color: COLORS.selectedText, bold: true, children: highlighted }, `cell-${i}`));
+            parts.push(_jsx(Text, { color: THEME.table.selectedRowText, bold: true, children: highlighted }, `cell-${i}`));
         }
         else {
             parts.push(_jsx(Text, { children: highlighted }, `cell-${i}`));
         }
     });
-    return isSelected ? _jsx(Box, { backgroundColor: COLORS.selectedBg, children: parts }) : _jsx(Box, { children: parts });
+    return isSelected ? _jsx(Box, { backgroundColor: THEME.table.selectedRowBg, children: parts }) : _jsx(Box, { children: parts });
 });
 export const Table = React.memo(function Table({ columns, rows, selectedIndex, filterText, terminalWidth, maxHeight, scrollOffset, contextLabel, headerMarkers, }) {
+    const THEME = useTheme();
     // Memoize column widths computation
     const colWidths = useMemo(() => computeColumnWidths(columns, terminalWidth), [columns, terminalWidth]);
     // Rows are pre-filtered by parent, no need to filter again
@@ -76,34 +69,34 @@ export const Table = React.memo(function Table({ columns, rows, selectedIndex, f
         const parts = [];
         columns.forEach((col, i) => {
             if (i > 0)
-                parts.push(_jsxs(Text, { color: COLORS.separator, children: [" ", "\u2502", " "] }, `sep-${i}`));
+                parts.push(_jsxs(Text, { color: THEME.table.rowSeparatorText, children: [" ", "\u2502", " "] }, `sep-${i}`));
             const width = colWidths[i];
             const markers = headerMarkers?.[col.key] ?? [];
             const markerText = markers.length > 0 ? ` [${markers.join(",")}]` : "";
             if (!markerText) {
-                parts.push(_jsx(Text, { bold: true, color: COLORS.headerText, children: truncate(col.label, width) }, col.key));
+                parts.push(_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: truncate(col.label, width) }, col.key));
                 return;
             }
             if (markerText.length >= width) {
                 const markerDisplay = truncate(markerText, width);
-                parts.push(_jsx(Text, { color: "cyan", children: markerDisplay }, `${col.key}-markers-only`));
+                parts.push(_jsx(Text, { color: THEME.table.columnHeaderMarker, children: markerDisplay }, `${col.key}-markers-only`));
                 return;
             }
             const labelMax = width - markerText.length;
             const labelDisplay = truncateNoPad(col.label, labelMax);
             const trailingPadLen = Math.max(0, width - (labelDisplay.length + markerText.length));
-            parts.push(_jsx(Text, { bold: true, color: COLORS.headerText, children: labelDisplay }, `${col.key}-label`));
-            parts.push(_jsx(Text, { color: "cyan", children: markerText }, `${col.key}-markers`));
+            parts.push(_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: labelDisplay }, `${col.key}-label`));
+            parts.push(_jsx(Text, { color: THEME.table.columnHeaderMarker, children: markerText }, `${col.key}-markers`));
             if (trailingPadLen > 0) {
-                parts.push(_jsx(Text, { color: COLORS.headerText, children: " ".repeat(trailingPadLen) }, `${col.key}-pad`));
+                parts.push(_jsx(Text, { color: THEME.table.columnHeaderText, children: " ".repeat(trailingPadLen) }, `${col.key}-pad`));
             }
         });
         return _jsx(Box, { children: parts });
     };
-    const renderDivider = () => (_jsx(Text, { color: COLORS.separator, children: columns.map((col, i) => "─".repeat(colWidths[i])).join("─┼─") }));
-    const renderEmpty = () => (_jsx(Text, { color: COLORS.emptyText, children: filterText ? `No results for "${filterText}"` : "No items" }));
+    const renderDivider = () => (_jsx(Text, { color: THEME.table.rowSeparatorText, children: columns.map((col, i) => "─".repeat(colWidths[i])).join("─┼─") }));
+    const renderEmpty = () => (_jsx(Text, { color: THEME.table.emptyStateText, children: filterText ? `No results for "${filterText}"` : "No items" }));
     if (rows.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [contextLabel && (_jsx(Text, { bold: true, color: COLORS.headerText, children: contextLabel })), contextLabel && _jsx(Box, { height: 1 }), renderHeader(), renderDivider(), renderEmpty()] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [contextLabel && (_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: contextLabel })), contextLabel && _jsx(Box, { height: 1 }), renderHeader(), renderDivider(), renderEmpty()] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: COLORS.headerText, children: contextLabel }), _jsx(Box, { height: 1 })] })), renderHeader(), renderDivider(), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleRows.map((row, i) => (_jsx(Row, { row: row, isSelected: i === adjustedSelected, columns: columns, colWidths: colWidths, filterText: filterText }, row.id))) }), rows.length > maxHeight && (_jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: "gray", children: [scrollOffset + visibleRows.length, " / ", rows.length, " items"] }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [contextLabel && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: THEME.table.columnHeaderText, children: contextLabel }), _jsx(Box, { height: 1 })] })), renderHeader(), renderDivider(), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleRows.map((row, i) => (_jsx(Row, { row: row, isSelected: i === adjustedSelected, columns: columns, colWidths: colWidths, filterText: filterText }, row.id))) }), rows.length > maxHeight && (_jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: THEME.table.scrollPositionText, children: [scrollOffset + visibleRows.length, " / ", rows.length, " items"] }) }))] }));
 });