cc-hub 0.1.0

package/README.md

@@ -0,0 +1,92 @@
+# cc-hub
+
+A terminal TUI tool for managing Claude Code model configurations. Switch between LLM providers and models without manually editing config files.
+
+## Features
+
+- Switch active model with one key press
+- Manage multiple providers and models
+- Map Claude Code role aliases (opus/sonnet/haiku/subagent) to any model
+- Atomic config writes to prevent corruption
+- JSON5 config file with comment support
+
+## Install
+
+```bash
+pnpm install
+pnpm run build
+```
+
+For global install:
+
+```bash
+pnpm add -g .
+```
+
+## Usage
+
+Run the TUI:
+
+```bash
+cc-hub
+```
+
+### Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `↑` `↓` | Navigate models |
+| `Enter` | Switch to selected model |
+| `d` | Delete selected model |
+| `s` | Scenario alias mapping |
+| `q` | Quit |
+
+### Scenario Mapping
+
+Press `s` to map Claude Code's built-in aliases to your models:
+
+| Alias | Env Var |
+|-------|---------|
+| Opus | `ANTHROPIC_DEFAULT_OPUS_MODEL` |
+| Sonnet | `ANTHROPIC_DEFAULT_SONNET_MODEL` |
+| Haiku | `ANTHROPIC_DEFAULT_HAIKU_MODEL` |
+| Subagent | `CLAUDE_CODE_SUBAGENT_MODEL` |
+
+## Configuration
+
+Edit `~/.cc-hub/config.json` to add providers:
+
+```jsonc
+{
+  "providers": [
+    {
+      "id": "dashscope",
+      "name": "DashScope",
+      "baseUrl": "https://dashscope.aliyuncs.com/compatible-mode/v1",
+      "apiKey": "sk-your-api-key",
+      "models": ["qwen3.6-plus", "qwen-max"]
+    },
+    {
+      "id": "deepseek",
+      "name": "DeepSeek",
+      "baseUrl": "https://api.deepseek.com/v1",
+      "apiKey": "sk-your-api-key",
+      "models": ["deepseek-chat", "deepseek-reasoner"]
+    }
+  ],
+  "scenarioModels": {}
+}
+```
+
+When you select a model, cc-hub writes the provider's credentials and model ID into `~/.claude/settings.json`. **Restart Claude Code for the change to take effect.**
+
+## Development
+
+```bash
+pnpm run dev        # Build and run
+pnpm run dev:watch  # Auto-rebuild on file changes
+```
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,92 @@
+# cc-hub
+
+一个终端 TUI 工具，用于管理 Claude Code 的模型配置。无需手动编辑配置文件，即可在不同 LLM 提供商和模型之间切换。
+
+## 功能
+
+- 一键切换当前使用的模型
+- 管理多个提供商和模型
+- 将 Claude Code 的角色别名（opus/sonnet/haiku/subagent）映射到任意模型
+- 原子写入配置，防止文件损坏
+- 配置文件支持 JSON5（可写注释）
+
+## 安装
+
+```bash
+pnpm install
+pnpm run build
+```
+
+全局安装：
+
+```bash
+pnpm add -g .
+```
+
+## 使用
+
+启动 TUI：
+
+```bash
+cc-hub
+```
+
+### 快捷键
+
+| 按键 | 操作 |
+|------|------|
+| `↑` `↓` | 导航模型列表 |
+| `Enter` | 切换到选中的模型 |
+| `d` | 删除选中的模型 |
+| `s` | 场景别名映射 |
+| `q` | 退出 |
+
+### 场景映射
+
+按 `s` 将 Claude Code 内置别名映射到你的模型：
+
+| 别名 | 环境变量 |
+|------|---------|
+| Opus | `ANTHROPIC_DEFAULT_OPUS_MODEL` |
+| Sonnet | `ANTHROPIC_DEFAULT_SONNET_MODEL` |
+| Haiku | `ANTHROPIC_DEFAULT_HAIKU_MODEL` |
+| Subagent | `CLAUDE_CODE_SUBAGENT_MODEL` |
+
+## 配置
+
+编辑 `~/.cc-hub/config.json` 添加提供商：
+
+```jsonc
+{
+  "providers": [
+    {
+      "id": "dashscope",
+      "name": "DashScope",
+      "baseUrl": "https://dashscope.aliyuncs.com/compatible-mode/v1",
+      "apiKey": "sk-your-api-key",
+      "models": ["qwen3.6-plus", "qwen-max"]
+    },
+    {
+      "id": "deepseek",
+      "name": "DeepSeek",
+      "baseUrl": "https://api.deepseek.com/v1",
+      "apiKey": "sk-your-api-key",
+      "models": ["deepseek-chat", "deepseek-reasoner"]
+    }
+  ],
+  "scenarioModels": {}
+}
+```
+
+选中模型后，cc-hub 会将提供商的凭证和模型 ID 写入 `~/.claude/settings.json`。**需要重启 Claude Code 才能生效。**
+
+## 开发
+
+```bash
+pnpm run dev        # 构建并运行
+pnpm run dev:watch  # 监听文件变更自动重建
+```
+
+## 许可证
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cli.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+// src/cli.ts
+import { render } from "ink";
+import { App } from "./tui/app.js";
+render(_jsx(App, {}));

package/dist/components/ui/modal.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface ModalProps {
+    children: ReactNode;
+    title?: string;
+    borderColor?: string;
+    borderStyle?: 'single' | 'double' | 'round' | 'bold' | 'singleDouble' | 'doubleSingle' | 'classic' | 'arrow';
+    onClose?: () => void;
+}
+export declare function Modal({ children, title, borderColor, borderStyle, onClose, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/components/ui/modal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+export function Modal({ children, title, borderColor = 'blue', borderStyle = 'round', onClose, }) {
+    useInput((_input, key) => {
+        if (key.escape && onClose) {
+            onClose();
+        }
+    });
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: borderStyle, borderColor: borderColor, children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: borderColor, children: title }) })), children] }) }));
+}
+export default Modal;

package/dist/components/ui/status-bar.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export interface StatusBarItem {
+    /** The key or key combination (e.g., "Tab", "←→", "q") */
+    key: string;
+    /** Description of the action (e.g., "switch focus", "quit") */
+    label: string;
+}
+export interface StatusBarProps {
+    /** Keybinding hints to display */
+    items: StatusBarItem[];
+    /** Optional extra content to display before the keybinding hints */
+    extra?: ReactNode;
+}
+export declare function StatusBar({ items, extra, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export default StatusBar;

package/dist/components/ui/status-bar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function StatusBar({ items, extra, }) {
+    return (_jsxs(Box, { gap: 2, children: [extra, extra && _jsx(Text, { dimColor: true, children: "\u2502" }), _jsx(Box, { gap: 1, children: items.map((item) => (_jsxs(Box, { gap: 0, children: [_jsxs(Text, { inverse: true, bold: true, children: [" ", item.key, " "] }), _jsxs(Text, { dimColor: true, children: [" ", item.label] })] }, item.key + item.label))) })] }));
+}
+export default StatusBar;

package/dist/components/ui/tab-bar.d.ts

@@ -0,0 +1,14 @@
+export interface TabBarProps {
+    /** Label shown before the options (e.g., "View", "Mode") */
+    label?: string;
+    /** The options to display */
+    options: string[];
+    /** Index of the currently selected option */
+    selectedIndex: number;
+    /** Whether this tab bar is currently focused (affects visual styling) */
+    focused?: boolean;
+    /** Color for the selected tab when focused */
+    activeColor?: string;
+}
+export declare function TabBar({ label, options, selectedIndex, focused, activeColor, }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export default TabBar;

package/dist/components/ui/tab-bar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+export function TabBar({ label, options, selectedIndex, focused = true, activeColor = 'cyan', }) {
+    return (_jsxs(Box, { children: [label && (_jsx(Text, { dimColor: !focused, bold: focused, children: label })), _jsx(Text, { children: " " }), options.map((opt, i) => {
+                const selected = i === selectedIndex;
+                return (_jsx(React.Fragment, { children: selected ? (_jsxs(Text, { inverse: true, bold: true, color: focused ? activeColor : undefined, dimColor: !focused, children: [' ', opt, ' '] })) : (_jsxs(Text, { dimColor: !focused, children: [' ', opt, ' '] })) }, opt));
+            })] }));
+}
+export default TabBar;

package/dist/components/ui/table.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+export interface Column {
+    header: string;
+    width?: number;
+    minWidth?: number;
+    align?: 'left' | 'right';
+    headerColor?: string;
+}
+export interface Cell {
+    text: string;
+    color?: string;
+    bold?: boolean;
+    dimColor?: boolean;
+    /** Custom node for rendering. `text` is still required for width calculation. */
+    node?: ReactNode;
+}
+type TableBaseProps = {
+    padding?: number;
+    /** Max header width before truncating with … */
+    maxHeaderWidth?: number;
+};
+type SimpleTableProps<T> = TableBaseProps & {
+    data: T[];
+    columns?: (keyof T)[];
+    rows?: never;
+    footerRows?: never;
+};
+type AdvancedTableProps = TableBaseProps & {
+    columns: Column[];
+    rows: Cell[][];
+    footerRows?: Cell[][];
+    data?: never;
+};
+export type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = SimpleTableProps<T> | AdvancedTableProps;
+export declare function Table<T extends Record<string, unknown>>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/ui/table.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+// ── Helpers ─
+function buildBorder(type, widths) {
+    const c = {
+        top: { l: '╭', r: '╮', m: '┬', h: '─' },
+        mid: { l: '├', r: '┤', m: '┼', h: '─' },
+        bot: { l: '╰', r: '╯', m: '┴', h: '─' },
+    }[type];
+    return c.l + widths.map(w => c.h.repeat(w + 2)).join(c.m) + c.r;
+}
+function truncate(s, max) {
+    return s.length > max ? s.slice(0, max - 1) + '…' : s;
+}
+function computeWidths(columns, rows, footerRows, maxHeader) {
+    return columns.map((col, i) => {
+        let w = Math.min(col.header.length, maxHeader);
+        if (col.minWidth)
+            w = Math.max(w, col.minWidth);
+        for (const row of rows) {
+            const cell = row[i];
+            if (cell)
+                w = Math.max(w, cell.text.length);
+        }
+        for (const row of footerRows) {
+            const cell = row[i];
+            if (cell)
+                w = Math.max(w, cell.text.length);
+        }
+        return col.width ?? w;
+    });
+}
+function pad(s, w, align) {
+    return align === 'right' ? s.padStart(w) : s.padEnd(w);
+}
+function V() {
+    return _jsx(Text, { dimColor: true, children: "\u2502" });
+}
+function renderRow(cells, widths, columns) {
+    return (_jsxs(Box, { children: [cells.map((cell, i) => {
+                const w = widths[i];
+                const align = columns[i]?.align ?? 'left';
+                return (_jsxs(React.Fragment, { children: [_jsx(V, {}), cell.node ? (_jsxs(Box, { width: w + 2, justifyContent: align === 'right' ? 'flex-end' : undefined, children: [_jsx(Text, { children: " " }), cell.node, align === 'right' && _jsx(Text, { children: " " })] })) : (_jsxs(Text, { color: cell.color, bold: cell.bold, dimColor: cell.dimColor, children: [' ', pad(cell.text, w, align), ' '] }))] }, i));
+            }), _jsx(V, {})] }));
+}
+// ── Simple → Advanced conversion ──
+function toAdvanced(data, columnKeys) {
+    const keys = columnKeys ?? Array.from(data.reduce((set, row) => {
+        for (const k in row)
+            set.add(k);
+        return set;
+    }, new Set()));
+    const columns = keys.map(k => ({ header: String(k) }));
+    const rows = data.map(row => keys.map(k => ({ text: row[k] == null ? '' : String(row[k]) })));
+    return { columns, rows };
+}
+// ── Component ──
+export function Table(props) {
+    let columns;
+    let rows;
+    let footerRows = [];
+    let maxHeaderWidth;
+    if ('data' in props && props.data !== undefined) {
+        const converted = toAdvanced(props.data, props.columns);
+        columns = converted.columns;
+        rows = converted.rows;
+        maxHeaderWidth = props.maxHeaderWidth ?? Infinity;
+    }
+    else {
+        columns = props.columns;
+        rows = props.rows;
+        footerRows = props.footerRows ?? [];
+        maxHeaderWidth = props.maxHeaderWidth ?? 8;
+    }
+    const widths = computeWidths(columns, rows, footerRows, maxHeaderWidth);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: buildBorder('top', widths) }), _jsxs(Box, { children: [columns.map((col, i) => (_jsxs(React.Fragment, { children: [_jsx(V, {}), _jsxs(Text, { bold: true, color: col.headerColor, children: [' ', pad(truncate(col.header, maxHeaderWidth), widths[i], col.align ?? 'left'), ' '] })] }, i))), _jsx(V, {})] }), _jsx(Text, { dimColor: true, children: buildBorder('mid', widths) }), rows.map((row, i) => (_jsx(React.Fragment, { children: renderRow(row, widths, columns) }, i))), footerRows.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: buildBorder('mid', widths) }), footerRows.map((row, i) => (_jsx(React.Fragment, { children: renderRow(row, widths, columns) }, i)))] })), _jsx(Text, { dimColor: true, children: buildBorder('bot', widths) })] }));
+}
+export default Table;

package/dist/config/presets.d.ts

@@ -0,0 +1,2 @@
+import { PresetProvider } from "../types.js";
+export declare const PRESETS: PresetProvider[];

package/dist/config/presets.js

@@ -0,0 +1,57 @@
+// src/config/presets.ts
+export const PRESETS = [
+    {
+        id: "dashscope",
+        name: "DashScope (通义千问)",
+        baseUrl: "https://coding.dashscope.aliyuncs.com/apps/anthropic",
+        models: [
+            { id: "qwen-plus", name: "Qwen 3.6 Plus", modelId: "qwen3.6-plus" },
+            { id: "qwen-max", name: "Qwen Max", modelId: "qwen-max" },
+        ],
+    },
+    {
+        id: "moonshot",
+        name: "Moonshot (Kimi)",
+        baseUrl: "https://api.moonshot.cn/v1",
+        models: [{ id: "kimi-k2", name: "Kimi K2.5", modelId: "kimi-k2-0905" }],
+    },
+    {
+        id: "minimax",
+        name: "MiniMax",
+        baseUrl: "https://api.minimax.chat/v1",
+        models: [
+            { id: "minimax-m2", name: "MiniMax M2.7", modelId: "MiniMax-M2.7" },
+        ],
+    },
+    {
+        id: "zhipu",
+        name: "Zhipu (智谱)",
+        baseUrl: "https://open.bigmodel.cn/api/paas/v4",
+        models: [{ id: "glm-5", name: "GLM 5.1", modelId: "glm-5" }],
+    },
+    {
+        id: "deepseek",
+        name: "DeepSeek",
+        baseUrl: "https://api.deepseek.com/v1",
+        models: [
+            { id: "deepseek-chat", name: "DeepSeek V3", modelId: "deepseek-chat" },
+            {
+                id: "deepseek-reasoner",
+                name: "DeepSeek R1",
+                modelId: "deepseek-reasoner",
+            },
+        ],
+    },
+    {
+        id: "siliconflow",
+        name: "SiliconFlow",
+        baseUrl: "https://api.siliconflow.cn/v1",
+        models: [
+            {
+                id: "siliconflow-qwen",
+                name: "SiliconFlow Qwen",
+                modelId: "Qwen/Qwen2.5-72B-Instruct",
+            },
+        ],
+    },
+];

package/dist/store/claude-config.d.ts

@@ -0,0 +1,5 @@
+import { Provider, ScenarioModels } from "../types.js";
+export declare function activateModel(store: {
+    providers: Provider[];
+}, modelId: string, scenarioModels: ScenarioModels): void;
+export declare function getActiveModelName(): string | null;

package/dist/store/claude-config.js

@@ -0,0 +1,79 @@
+// src/store/claude-config.ts
+import { existsSync, readFileSync, writeFileSync, renameSync } from "fs";
+import { join } from "path";
+import { homedir } from "os";
+import { findModel } from "./config-store.js";
+const CLAUDE_SETTINGS = join(homedir(), ".claude", "settings.json");
+export function activateModel(store, modelId, scenarioModels) {
+    const dir = join(homedir(), ".claude");
+    if (!existsSync(dir)) {
+        return;
+    }
+    const resolved = findModel(store, modelId);
+    if (!resolved)
+        return;
+    const { provider, modelId: resolvedModelId } = resolved;
+    let settings = {};
+    if (existsSync(CLAUDE_SETTINGS)) {
+        try {
+            settings = JSON.parse(readFileSync(CLAUDE_SETTINGS, "utf8"));
+        }
+        catch {
+            settings = {};
+        }
+    }
+    // Determine which auth env var to use based on existing settings
+    // Priority: ANTHROPIC_AUTH_TOKEN > ANTHROPIC_API_KEY
+    const existingEnv = settings.env || {};
+    const hasAuthToken = "ANTHROPIC_AUTH_TOKEN" in existingEnv;
+    const hasApiKey = "ANTHROPIC_API_KEY" in existingEnv;
+    const env = { ...existingEnv };
+    if (hasAuthToken) {
+        // Prefer AUTH_TOKEN, remove API_KEY if both exist
+        env.ANTHROPIC_AUTH_TOKEN = provider.apiKey;
+        delete env.ANTHROPIC_API_KEY;
+    }
+    else if (hasApiKey) {
+        env.ANTHROPIC_API_KEY = provider.apiKey;
+    }
+    else {
+        // Default to AUTH_TOKEN for new setups
+        env.ANTHROPIC_AUTH_TOKEN = provider.apiKey;
+    }
+    env.ANTHROPIC_BASE_URL = provider.baseUrl;
+    env.ANTHROPIC_MODEL = resolvedModelId;
+    // Set scenario model IDs: use configured mapping, or fall back to current model
+    const scenarioEntries = [
+        ["opusModelId", "ANTHROPIC_DEFAULT_OPUS_MODEL"],
+        ["sonnetModelId", "ANTHROPIC_DEFAULT_SONNET_MODEL"],
+        ["haikuModelId", "ANTHROPIC_DEFAULT_HAIKU_MODEL"],
+        ["subagentModelId", "CLAUDE_CODE_SUBAGENT_MODEL"],
+    ];
+    for (const [scenarioKey, envVar] of scenarioEntries) {
+        const configuredModelId = scenarioModels[scenarioKey];
+        if (configuredModelId) {
+            const r = findModel(store, configuredModelId);
+            if (r)
+                env[envVar] = r.modelId;
+        }
+        else {
+            // Not configured — default to current model
+            env[envVar] = resolvedModelId;
+        }
+    }
+    settings.env = env;
+    const tmpPath = CLAUDE_SETTINGS + ".tmp";
+    writeFileSync(tmpPath, JSON.stringify(settings, null, 2) + "\n", "utf8");
+    renameSync(tmpPath, CLAUDE_SETTINGS);
+}
+export function getActiveModelName() {
+    if (!existsSync(CLAUDE_SETTINGS))
+        return null;
+    try {
+        const settings = JSON.parse(readFileSync(CLAUDE_SETTINGS, "utf8"));
+        return settings.env?.ANTHROPIC_BASE_URL || null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/store/config-store.d.ts

@@ -0,0 +1,15 @@
+import { ConfigStore, Provider, ScenarioModels } from "../types.js";
+export declare function getConfigError(): string | null;
+export declare function clearConfigError(): void;
+export declare function loadConfig(): ConfigStore;
+export declare function saveConfig(store: ConfigStore): void;
+export declare function findModel(store: {
+    providers: Provider[];
+}, modelId: string): {
+    provider: Provider;
+    modelId: string;
+} | undefined;
+export declare function getAllModels(store: ConfigStore): string[];
+export declare function setActiveModel(store: ConfigStore, modelId: string): ConfigStore;
+export declare function updateScenarioModels(store: ConfigStore, updates: Partial<ScenarioModels>): ConfigStore;
+export declare function removeModelFromProvider(store: ConfigStore, providerId: string, modelId: string): ConfigStore;