cc-hub 0.1.0

package/dist/tui/app.js

@@ -0,0 +1,163 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// src/tui/app.tsx
+import React from "react";
+import { useApp, useInput, Box, Text } from "ink";
+import { loadConfig, saveConfig, setActiveModel, findModel, updateScenarioModels, removeModelFromProvider, getConfigError, clearConfigError, } from "../store/config-store.js";
+import { activateModel } from "../store/claude-config.js";
+import { Dashboard } from "./dashboard.js";
+import { ScenarioConfig } from "./scenario-config.js";
+import { Modal } from "../components/ui/modal.js";
+export function App() {
+    const { exit } = useApp();
+    const [store, setStore] = React.useState(() => loadConfig());
+    const [screen, setScreen] = React.useState({ type: "dashboard" });
+    const [statusMessage, setStatusMessage] = React.useState(() => getConfigError());
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    // Auto-clear status message
+    React.useEffect(() => {
+        if (!statusMessage)
+            return;
+        const timer = setTimeout(() => setStatusMessage(null), 3000);
+        return () => clearTimeout(timer);
+    }, [statusMessage]);
+    React.useEffect(() => {
+        clearConfigError();
+    }, []);
+    // Model-only rows for navigation (no headers)
+    function getModelRows() {
+        return store.providers.flatMap((p) => p.models.map((m) => ({ providerId: p.id, modelId: m })));
+    }
+    React.useEffect(() => {
+        const n = getModelRows().length;
+        if (n === 0)
+            return;
+        setSelectedIndex((prev) => Math.max(0, Math.min(prev, n - 1)));
+    }, [store.providers.length]);
+    // --- Action handlers ---
+    const handleSelect = React.useCallback((modelId) => {
+        const updated = setActiveModel(store, modelId);
+        // Always sync scenarioModels to the selected model
+        const withScenarios = updateScenarioModels(updated, {
+            opusModelId: modelId,
+            sonnetModelId: modelId,
+            haikuModelId: modelId,
+            subagentModelId: modelId,
+        });
+        setStore(withScenarios);
+        saveConfig(withScenarios);
+        const resolved = findModel(withScenarios, modelId);
+        if (resolved) {
+            activateModel(withScenarios, modelId, withScenarios.scenarioModels);
+        }
+    }, [store]);
+    const handleDelete = React.useCallback((providerId, modelId) => {
+        const provider = store.providers.find((p) => p.id === providerId);
+        if (!provider || !provider.models.includes(modelId))
+            return;
+        setScreen({
+            type: "confirm",
+            message: `Delete model "${modelId}"?`,
+            onConfirm: () => {
+                let updated = removeModelFromProvider(store, providerId, modelId);
+                // Clean up scenarioModels references to the deleted model
+                const sm = updated.scenarioModels;
+                if (sm.opusModelId === modelId ||
+                    sm.sonnetModelId === modelId ||
+                    sm.haikuModelId === modelId ||
+                    sm.subagentModelId === modelId) {
+                    updated = {
+                        ...updated,
+                        scenarioModels: {
+                            opusModelId: sm.opusModelId === modelId ? undefined : sm.opusModelId,
+                            sonnetModelId: sm.sonnetModelId === modelId ? undefined : sm.sonnetModelId,
+                            haikuModelId: sm.haikuModelId === modelId ? undefined : sm.haikuModelId,
+                            subagentModelId: sm.subagentModelId === modelId
+                                ? undefined
+                                : sm.subagentModelId,
+                        },
+                    };
+                }
+                setStore(updated);
+                saveConfig(updated);
+                setScreen({ type: "dashboard" });
+                setStatusMessage(`Deleted ${modelId}`);
+            },
+        });
+    }, [store]);
+    const handleConfirmCancel = React.useCallback(() => setScreen({ type: "dashboard" }), []);
+    const handleScenarioSave = React.useCallback((updates) => {
+        const updated = {
+            ...store,
+            scenarioModels: updates,
+        };
+        setStore(updated);
+        saveConfig(updated);
+        // Stay on scenario page, only Esc goes back to dashboard
+        if (updated.activeModelId) {
+            activateModel(updated, updated.activeModelId, updated.scenarioModels);
+        }
+    }, [store]);
+    const handleScenarioCancel = React.useCallback(() => setScreen({ type: "dashboard" }), []);
+    // --- Centralized keyboard handling ---
+    useInput((input, key) => {
+        if (input === "q") {
+            exit();
+            return;
+        }
+        switch (screen.type) {
+            case "dashboard": {
+                if (input === "s") {
+                    setScreen({ type: "scenario" });
+                    return;
+                }
+                if (key.escape) {
+                    exit();
+                    return;
+                }
+                if (key.upArrow || key.downArrow) {
+                    const models = getModelRows();
+                    if (models.length === 0)
+                        return;
+                    const nextPos = key.upArrow
+                        ? (selectedIndex - 1 + models.length) % models.length
+                        : (selectedIndex + 1) % models.length;
+                    setSelectedIndex(nextPos);
+                    return;
+                }
+                if (key.return) {
+                    const models = getModelRows();
+                    const row = models[selectedIndex];
+                    if (row)
+                        handleSelect(row.modelId);
+                    return;
+                }
+                if (input === "d") {
+                    const models = getModelRows();
+                    const row = models[selectedIndex];
+                    if (row) {
+                        handleDelete(row.providerId, row.modelId);
+                    }
+                    return;
+                }
+                return;
+            }
+            case "scenario": {
+                // ScenarioConfig handles its own keyboard input (↑↓←→Enter Esc)
+                return;
+            }
+            case "confirm": {
+                if (input === "y" || input === "Y") {
+                    screen.onConfirm();
+                    return;
+                }
+                if (input === "n" || input === "N" || input === "escape") {
+                    setScreen({ type: "dashboard" });
+                    return;
+                }
+                return;
+            }
+        }
+    });
+    // --- Render ---
+    return (_jsxs(Box, { flexDirection: "column", children: [statusMessage && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "green", children: ["\u2713 ", statusMessage] }) })), screen.type === "dashboard" && (_jsx(Dashboard, { store: store, selectedIndex: selectedIndex, onSelect: handleSelect, onDelete: handleDelete, onScenario: () => setScreen({ type: "scenario" }) })), screen.type === "scenario" && (_jsx(ScenarioConfig, { store: store, onSave: handleScenarioSave, onCancel: handleScenarioCancel })), screen.type === "confirm" && (_jsx(Modal, { title: "Confirm", borderColor: "yellow", borderStyle: "round", onClose: () => setScreen({ type: "dashboard" }), children: _jsxs(Box, { paddingX: 2, paddingY: 1, flexDirection: "column", children: [_jsx(Text, { children: screen.message }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { inverse: true, bold: true, children: [" ", "Y", " "] }), _jsx(Text, { dimColor: true, children: " Yes" })] }), _jsxs(Text, { children: [_jsxs(Text, { inverse: true, bold: true, children: [" ", "N", " "] }), _jsx(Text, { dimColor: true, children: " No" })] }), _jsxs(Text, { children: [_jsxs(Text, { inverse: true, bold: true, children: [" ", "Esc", " "] }), _jsx(Text, { dimColor: true, children: " Cancel" })] })] })] }) }))] }));
+}

package/dist/tui/confirm.d.ts

@@ -0,0 +1,7 @@
+interface ConfirmProps {
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare function Confirm({ message, onConfirm, onCancel }: ConfirmProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tui/confirm.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+export function Confirm({ message, onConfirm, onCancel }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { children: message }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "green", children: "[Y]" }), _jsx(Text, { children: "es " }), _jsx(Text, { color: "red", children: "[N]" }), _jsx(Text, { children: "o" })] })] }));
+}

package/dist/tui/dashboard.d.ts

@@ -0,0 +1,10 @@
+import { ConfigStore } from "../types.js";
+interface DashboardProps {
+    store: ConfigStore;
+    selectedIndex: number;
+    onSelect: (modelId: string) => void;
+    onDelete: (providerId: string, modelId: string) => void;
+    onScenario: () => void;
+}
+export declare function Dashboard({ store, selectedIndex }: DashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tui/dashboard.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/tui/dashboard.tsx
+import { Box, Text } from "ink";
+import { Table } from "../components/ui/table.js";
+import { StatusBar } from "../components/ui/status-bar.js";
+export function Dashboard({ store, selectedIndex }) {
+    const rows = [];
+    for (const p of store.providers) {
+        for (const m of p.models) {
+            rows.push({
+                providerName: p.name,
+                modelId: m,
+                active: m === store.activeModelId,
+                isSelected: rows.length === selectedIndex,
+            });
+        }
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "cc-hub" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "dim", children: "Select a model to switch your active Claude Code configuration." }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: rows.length === 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "dim", children: "No providers configured." }), _jsxs(Text, { color: "dim", children: ["Edit ", _jsx(Text, { color: "cyan", children: "~/.cc-hub/config.json" }), " to add providers, then restart."] })] })) : (_jsx(Table, { columns: [
+                        { header: "Provider", minWidth: 10 },
+                        { header: "Model", minWidth: 24 },
+                        { header: "Active", width: 8 },
+                    ], rows: rows.map((row) => [
+                        {
+                            text: row.providerName,
+                            color: row.isSelected ? "green" : undefined,
+                            bold: row.isSelected,
+                        },
+                        {
+                            text: row.modelId,
+                            color: row.isSelected ? "green" : undefined,
+                            bold: row.isSelected,
+                        },
+                        {
+                            text: row.active ? "●" : "",
+                            color: row.active ? "green" : undefined,
+                            bold: row.active,
+                        },
+                    ]) })) }), _jsx(Box, { marginTop: 1, children: _jsx(StatusBar, { items: [
+                        { key: "Enter", label: "Switch" },
+                        { key: "↑↓", label: "Navigate" },
+                        { key: "d", label: "Delete" },
+                        { key: "s", label: "Scenarios" },
+                        { key: "q", label: "Quit" },
+                    ] }) })] }));
+}

package/dist/tui/edit-model.d.ts

@@ -0,0 +1,8 @@
+import { ModelConfig } from "../types.js";
+interface EditModelProps {
+    model: ModelConfig;
+    onSave: (updates: Partial<ModelConfig>) => void;
+    onCancel: () => void;
+}
+export declare function EditModel({ model, onSave, onCancel }: EditModelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/tui/edit-model.js

@@ -0,0 +1,54 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// src/tui/edit-model.tsx
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+export function EditModel({ model, onSave, onCancel }) {
+    const [field, setField] = React.useState("name");
+    const [name, setName] = React.useState(model.name);
+    const [baseUrl, setBaseUrl] = React.useState(model.baseUrl);
+    const [apiKey, setApiKey] = React.useState(model.apiKey);
+    const [modelId, setModelId] = React.useState(model.modelId || "");
+    // Handle escape BEFORE TextInput's useInput can process it
+    useInput((_, key) => {
+        if (key.escape) {
+            onCancel();
+        }
+    });
+    if (field === "done") {
+        onSave({ name, baseUrl, apiKey, modelId: modelId || undefined });
+        return null;
+    }
+    const fields = [
+        { key: "name", label: "Name" },
+        { key: "baseUrl", label: "Base URL" },
+        { key: "apiKey", label: "API Key" },
+        { key: "modelId", label: "Model ID (optional)" },
+    ];
+    const valueMap = { name, baseUrl, apiKey, modelId };
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, children: ["Edit Model: ", model.id] }), _jsx(Text, { children: "─".repeat(50) }), fields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { children: f.key === field ? "> " : "  " }), _jsx(Text, { color: "dim", children: f.label.padEnd(16) }), f.key === field ? (_jsx(Text, { color: "green", children: maskIf(f.key === "apiKey", valueMap[f.key]) })) : (_jsx(Text, { color: "dim", children: maskIf(f.key === "apiKey", valueMap[f.key]) }))] }, f.key))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(TextInput, { value: valueMap[field], onChange: (v) => {
+                            if (field === "name")
+                                setName(v);
+                            else if (field === "baseUrl")
+                                setBaseUrl(v);
+                            else if (field === "apiKey")
+                                setApiKey(v);
+                            else if (field === "modelId")
+                                setModelId(v);
+                        }, onSubmit: () => {
+                            const idx = fields.findIndex((f) => f.key === field);
+                            if (idx < fields.length - 1) {
+                                setField(fields[idx + 1].key);
+                            }
+                            else {
+                                setField("done");
+                            }
+                        }, focus: false }), _jsx(Text, { color: "dim", children: "Press Enter for next field, Esc to cancel" })] })] }));
+}
+function maskIf(shouldMask, value) {
+    if (!shouldMask)
+        return value;
+    if (value.length <= 6)
+        return "••••••";
+    return value.slice(0, 3) + "••••••" + value.slice(-3);
+}

package/dist/tui/edit-provider.d.ts

@@ -0,0 +1,12 @@
+import { Provider } from "../types.js";
+interface EditProviderProps {
+    provider: Provider;
+    onSave: (providerId: string, updates: {
+        name?: string;
+        baseUrl?: string;
+        apiKey?: string;
+    }) => void;
+    onCancel: () => void;
+}
+export declare function EditProvider({ provider, onSave, onCancel }: EditProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/tui/edit-provider.js

@@ -0,0 +1,140 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// src/tui/edit-provider.tsx
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+export function EditProvider({ provider, onSave, onCancel }) {
+    const [step, setStep] = React.useState("provider-name");
+    const [name, setName] = React.useState(provider.name);
+    const [baseUrl, setBaseUrl] = React.useState(provider.baseUrl);
+    const [apiKey, setApiKey] = React.useState(provider.apiKey);
+    const [modelList, setModelList] = React.useState(provider.models);
+    const [modelIndex, setModelIndex] = React.useState(0);
+    const [pendingModel, setPendingModel] = React.useState({ name: "", modelId: "", id: "" });
+    const [addName, setAddName] = React.useState("");
+    const [addModelId, setAddModelId] = React.useState("");
+    // Global keyboard handling
+    useInput((input, key) => {
+        if (key.escape) {
+            if (step.startsWith("edit-model-")) {
+                setStep("models");
+            }
+            else if (step.startsWith("add-model-")) {
+                setStep("models");
+            }
+            else {
+                onCancel();
+            }
+            return;
+        }
+        switch (step) {
+            case "models": {
+                if (key.upArrow) {
+                    setModelIndex((i) => Math.max(0, i - 1));
+                    return;
+                }
+                if (key.downArrow) {
+                    setModelIndex((i) => Math.min(modelList.length - 1, i + 1));
+                    return;
+                }
+                if (input === "e" && modelList.length > 0) {
+                    const m = modelList[modelIndex];
+                    setPendingModel({ name: m.name, modelId: m.modelId, id: m.id });
+                    setStep("edit-model-name");
+                    return;
+                }
+                if (input === "a") {
+                    setAddName("");
+                    setAddModelId("");
+                    setStep("add-model-name");
+                    return;
+                }
+                if (input === "d" && modelList.length > 0) {
+                    setModelList((list) => list.filter((_, i) => i !== modelIndex));
+                    setModelIndex((i) => Math.max(0, Math.min(i, modelList.length - 2)));
+                    return;
+                }
+                if (key.return) {
+                    setStep("done");
+                    return;
+                }
+                return;
+            }
+        }
+    });
+    if (step === "done") {
+        onSave(provider.id, { name, baseUrl, apiKey });
+        return null;
+    }
+    // Provider field editing steps
+    if (step === "provider-name" || step === "provider-baseurl" || step === "provider-apikey") {
+        const fieldMap = {
+            "provider-name": { label: "Provider name", value: name, set: setName, next: "provider-baseurl" },
+            "provider-baseurl": { label: "Base URL", value: baseUrl, set: setBaseUrl, next: "provider-apikey" },
+            "provider-apikey": { label: "API Key", value: apiKey, set: setApiKey, next: "models" },
+        };
+        const f = fieldMap[step];
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, children: ["Edit Provider: ", provider.id] }), _jsx(Text, { children: "─".repeat(40) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "green", children: "> " }), _jsxs(Text, { bold: true, children: [f.label, ": "] }), _jsx(Text, { color: "green", children: step === "provider-apikey" ? maskValue(f.value) : f.value })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(TextInput, { value: f.value, onChange: f.set, onSubmit: () => setStep(f.next), focus: false }), _jsx(Text, { color: "dim", children: "Press Enter for next field" })] })] }));
+    }
+    // Models list
+    if (step === "models") {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, children: ["Edit Provider: ", name] }), _jsx(Text, { children: "─".repeat(50) }), modelList.length === 0 ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "dim", children: "No models. Press " }), _jsx(Text, { color: "green", bold: true, children: "a" }), _jsx(Text, { color: "dim", children: " to add one." })] })) : (modelList.map((m, i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === modelIndex ? "> " : "  " }), _jsx(Text, { color: "dim", children: m.id.padEnd(20) }), _jsx(Text, { children: m.name }), _jsxs(Text, { color: "dim", children: [" (", m.modelId, ")"] })] }, m.id)))), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "dim", children: [_jsx(Text, { color: "green", bold: true, children: "e" }), ": Edit", " ", _jsx(Text, { color: "green", bold: true, children: "a" }), ": Add", " ", _jsx(Text, { color: "green", bold: true, children: "d" }), ": Delete", " ", _jsx(Text, { color: "green", bold: true, children: "Enter" }), ": Done", " ", _jsx(Text, { color: "green", bold: true, children: "Esc" }), ": Cancel"] }) })] }));
+    }
+    // Edit model fields
+    if (step.startsWith("edit-model-")) {
+        const editFields = [
+            { key: "edit-model-name", label: "Name", getValue: () => pendingModel.name, setValue: (v) => setPendingModel((p) => ({ ...p, name: v })), next: "edit-model-modelId" },
+            { key: "edit-model-modelId", label: "Model ID", getValue: () => pendingModel.modelId, setValue: (v) => setPendingModel((p) => ({ ...p, modelId: v })), next: "edit-model-id" },
+            { key: "edit-model-id", label: "Local ID", getValue: () => pendingModel.id, setValue: (v) => setPendingModel((p) => ({ ...p, id: v })), next: "models" },
+        ];
+        const current = editFields.find((f) => f.key === step);
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Edit Model" }), _jsx(Text, { children: "─".repeat(40) }), editFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { children: f.key === step ? "> " : "  " }), _jsx(Text, { color: "dim", children: f.label.padEnd(12) }), _jsx(Text, { color: f.key === step ? "green" : "dim", children: f.getValue() })] }, f.key))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(TextInput, { value: current.getValue(), onChange: current.setValue, onSubmit: () => {
+                                const idx = editFields.findIndex((f) => f.key === step);
+                                if (idx < editFields.length - 1) {
+                                    setStep(editFields[idx + 1].key);
+                                }
+                                else {
+                                    setModelList((list) => list.map((m) => m.id === pendingModel.id
+                                        ? { id: pendingModel.id, name: pendingModel.name, modelId: pendingModel.modelId }
+                                        : m));
+                                    setStep("models");
+                                }
+                            }, focus: false }), _jsx(Text, { color: "dim", children: "Press Enter for next field" })] })] }));
+    }
+    // Add model fields
+    if (step.startsWith("add-model-")) {
+        const addFields = [
+            { key: "add-model-name", label: "Name", value: addName, set: setAddName, next: "add-model-modelId" },
+            { key: "add-model-modelId", label: "Model ID", value: addModelId, set: setAddModelId, next: "models" },
+        ];
+        const current = addFields.find((f) => f.key === step);
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Add Model" }), _jsx(Text, { children: "─".repeat(40) }), addFields.map((f) => (_jsxs(Box, { children: [_jsx(Text, { children: f.key === step ? "> " : "  " }), _jsx(Text, { color: "dim", children: f.label.padEnd(12) }), _jsx(Text, { color: f.key === step ? "green" : "dim", children: f.value || "(empty)" })] }, f.key))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(TextInput, { value: current.value, onChange: current.set, onSubmit: () => {
+                                const idx = addFields.findIndex((f) => f.key === step);
+                                if (idx < addFields.length - 1) {
+                                    setStep(addFields[idx + 1].key);
+                                }
+                                else {
+                                    if (addName.trim()) {
+                                        const id = toKebabCase(addName);
+                                        setModelList((list) => [
+                                            ...list,
+                                            { id, name: addName.trim(), modelId: addModelId.trim() || id },
+                                        ]);
+                                    }
+                                    setStep("models");
+                                }
+                            }, focus: false }), _jsx(Text, { color: "dim", children: "Press Enter for next field" })] })] }));
+    }
+    return null;
+}
+function maskValue(value) {
+    if (value.length <= 6)
+        return "••••••";
+    return value.slice(0, 3) + "••••••" + value.slice(-3);
+}
+function toKebabCase(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+}

package/dist/tui/scenario-config.d.ts

@@ -0,0 +1,8 @@
+import { ConfigStore, ScenarioModels } from "../types.js";
+interface ScenarioConfigProps {
+    store: ConfigStore;
+    onSave: (updates: ScenarioModels) => void;
+    onCancel: () => void;
+}
+export declare function ScenarioConfig({ store, onSave, onCancel, }: ScenarioConfigProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tui/scenario-config.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/tui/scenario-config.tsx
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { Table } from "../components/ui/table.js";
+import { StatusBar } from "../components/ui/status-bar.js";
+const FIELDS = [
+    { key: "opusModelId", label: "Opus", envVar: "ANTHROPIC_DEFAULT_OPUS_MODEL" },
+    {
+        key: "sonnetModelId",
+        label: "Sonnet",
+        envVar: "ANTHROPIC_DEFAULT_SONNET_MODEL",
+    },
+    {
+        key: "haikuModelId",
+        label: "Haiku",
+        envVar: "ANTHROPIC_DEFAULT_HAIKU_MODEL",
+    },
+    {
+        key: "subagentModelId",
+        label: "Subagent",
+        envVar: "CLAUDE_CODE_SUBAGENT_MODEL",
+    },
+];
+export function ScenarioConfig({ store, onSave, onCancel, }) {
+    const activeProvider = store.providers.find((p) => p.id === store.activeProviderId);
+    const allModels = activeProvider ? activeProvider.models : [];
+    const [index, setIndex] = React.useState(0);
+    const [values, setValues] = React.useState({
+        opusModelId: store.scenarioModels.opusModelId,
+        sonnetModelId: store.scenarioModels.sonnetModelId,
+        haikuModelId: store.scenarioModels.haikuModelId,
+        subagentModelId: store.scenarioModels.subagentModelId,
+    });
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.upArrow) {
+            setIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setIndex((i) => Math.min(FIELDS.length - 1, i + 1));
+            return;
+        }
+        if (key.leftArrow || key.rightArrow) {
+            const field = FIELDS[index].key;
+            const currentIdx = allModels.findIndex((m) => m === values[field]);
+            const dir = key.leftArrow ? -1 : 1;
+            const nextIdx = (currentIdx + dir + allModels.length + 1) % (allModels.length + 1);
+            const nextValue = nextIdx === allModels.length ? undefined : allModels[nextIdx];
+            setValues((v) => ({ ...v, [field]: nextValue }));
+            return;
+        }
+        if (key.return) {
+            onSave(values);
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Scenario Mappings" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "dim", children: "Map Claude Code's sonnet/opus/haiku/subagent aliases to your models." }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(Table, { columns: [
+                        { header: "Role", minWidth: 10 },
+                        { header: "Model", minWidth: 24 },
+                        { header: "Env Var", minWidth: 20 },
+                    ], rows: FIELDS.map((f, i) => [
+                        {
+                            text: f.label,
+                            color: i === index ? "green" : undefined,
+                            bold: i === index,
+                        },
+                        {
+                            text: values[f.key] || "(none)",
+                            color: i === index ? "green" : "dim",
+                            bold: i === index,
+                        },
+                        {
+                            text: f.envVar,
+                            color: "dim",
+                        },
+                    ]) }) }), _jsx(Box, { marginTop: 1, children: _jsx(StatusBar, { items: [
+                        { key: "Enter", label: "Save" },
+                        { key: "↑↓", label: "Switch role" },
+                        { key: "←→", label: "Switch model" },
+                        { key: "Esc", label: "Cancel" },
+                    ] }) })] }));
+}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+export interface Provider {
+    id: string;
+    name: string;
+    baseUrl: string;
+    apiKey: string;
+    models: string[];
+}
+export interface ScenarioModels {
+    opusModelId?: string;
+    sonnetModelId?: string;
+    haikuModelId?: string;
+    subagentModelId?: string;
+}
+export interface ConfigStore {
+    providers: Provider[];
+    activeProviderId: string | null;
+    activeModelId: string | null;
+    scenarioModels: ScenarioModels;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+// src/types.ts
+export {};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "cc-hub",
+  "version": "0.1.0",
+  "description": "TUI for managing Claude Code model configurations",
+  "type": "module",
+  "bin": {
+    "cc-hub": "dist/cli.js"
+  },
+  "scripts": {
+    "dev": "pnpm run build && pnpm start",
+    "dev:watch": "nodemon --watch src --ext ts,tsx --exec 'pnpm run build && pnpm start'",
+    "build": "node build.mjs",
+    "start": "node dist/cli.js"
+  },
+  "dependencies": {
+    "ink": "^6.0.0",
+    "ink-select-input": "^6.0.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
+    "json5": "^2.2.3",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/json5": "^2.2.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "nodemon": "^3.1.14",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "llm",
+    "tui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/slashspace/cc-hub.git"
+  },
+  "files": [
+    "dist"
+  ]
+}