kob-cli 1.0.4 → 1.0.6

package/src/ui/colors.ts

@@ -0,0 +1,19 @@
+// Shared color tokens for the TUI
+// Used by code-tui.tsx, model-picker.tsx, and any future sub-components.
+export const c = {
+    bg: '#0b0e14',
+    panel: '#11151c',
+    border: '#1f2937',
+    borderDim: '#374151',
+    borderAccent: '#38bdf8',
+    text: '#e5e7eb',
+    textDim: '#6b7280',
+    textMuted: '#9ca3af',
+    brand: '#38bdf8',     // cyan
+    accent: '#a78bfa',    // purple
+    green: '#34d399',
+    yellow: '#fbbf24',
+    red: '#ef4444',
+    pink: '#f472b6',
+    blue: '#60a5fa',
+};

package/src/ui/config-form.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { c } from './colors.js';
+import { readEnvFile, writeEnvFile, describeEnvPath } from '../utils/env-file.js';
+
+type Field = 'baseUrl' | 'apiKey' | 'modelId';
+
+const FIELDS: { key: Field; label: string; placeholder: string; help: string; secret?: boolean }[] = [
+    {
+        key: 'baseUrl',
+        label: 'Base URL',
+        placeholder: 'https://www.kob-ai.dev',
+        help: 'Endpoint root — /v1, /v2 suffixes will be stripped automatically.',
+    },
+    {
+        key: 'apiKey',
+        label: 'API Key',
+        placeholder: 'kob_xxx:your_token  (or just kob_xxx)',
+        help: 'Format: kob_xxx:your_token, or just kob_xxx.',
+        secret: true,
+    },
+    {
+        key: 'modelId',
+        label: 'Default Model',
+        placeholder: 'deepseek/deepseek-v4-flash',
+        help: 'Optional. Used as the fallback model when none is specified.',
+    },
+];
+
+interface Props {
+    onDone: (saved: boolean) => void;
+}
+
+export function ConfigForm({ onDone }: Props) {
+    const envPath = describeEnvPath();
+    const initial = readEnvFile();
+    const [values, setValues] = useState<Record<Field, string>>({
+        baseUrl: initial.KOB_API_BASE_URL || 'https://www.kob-ai.dev',
+        apiKey: initial.KOB_API_KEY || '',
+        modelId: initial.KOB_MODEL_ID || '',
+    });
+    const [idx, setIdx] = useState<number>(0);
+    const [draft, setDraft] = useState<string>('');
+    const [editing, setEditing] = useState<boolean>(true);
+    const [saved, setSaved] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        // When field changes, seed draft with the current value
+        const f = FIELDS[idx]!;
+        setDraft(values[f.key]);
+    }, [idx]);
+
+    useInput((input, key) => {
+        if (!editing) return;
+        if (key.escape) {
+            onDone(false);
+            return;
+        }
+        if (key.return) {
+            // Commit draft, advance or save
+            const f = FIELDS[idx]!;
+            const next = { ...values, [f.key]: draft };
+            setValues(next);
+            if (idx < FIELDS.length - 1) {
+                setIdx(idx + 1);
+            } else {
+                // Save and exit
+                try {
+                    const updates: Record<string, string> = {};
+                    const comments: Record<string, string> = {};
+                    if (next.baseUrl && next.baseUrl !== initial.KOB_API_BASE_URL) {
+                        updates.KOB_API_BASE_URL = next.baseUrl;
+                        comments.KOB_API_BASE_URL = 'Base URL for KOB AI API';
+                    }
+                    if (next.apiKey && next.apiKey !== initial.KOB_API_KEY) {
+                        updates.KOB_API_KEY = next.apiKey;
+                        comments.KOB_API_KEY = 'Your API Key (format: kob_xxx:your_token or just kob_xxx)';
+                    }
+                    if (next.modelId && next.modelId !== initial.KOB_MODEL_ID) {
+                        updates.KOB_MODEL_ID = next.modelId;
+                        comments.KOB_MODEL_ID = 'Default AI Model ID (optional)';
+                    }
+                    if (Object.keys(updates).length > 0) {
+                        writeEnvFile(updates, comments);
+                    }
+                    setSaved(true);
+                    setEditing(false);
+                } catch (e: any) {
+                    setError(e?.message || String(e));
+                }
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setDraft((d) => d.slice(0, -1));
+            return;
+        }
+        if (key.tab) {
+            // Optional: skip optional empty fields
+            const f = FIELDS[idx]!;
+            const next = { ...values, [f.key]: draft };
+            setValues(next);
+            setIdx((idx + 1) % FIELDS.length);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setDraft((d) => d + input);
+        }
+    });
+
+    if (saved) {
+        return (
+            <Box flexDirection="column" borderStyle="round" borderColor={c.green} paddingX={1} marginTop={1}>
+                <Box>
+                    <Text color={c.green} bold>✓ Configuration saved</Text>
+                </Box>
+                <Box>
+                    <Text color={c.textDim}>File: </Text>
+                    <Text color={c.text}>{envPath}</Text>
+                </Box>
+                <Box marginTop={1}>
+                    <Text color={c.yellow}>↻ Restart KOB CLI to apply the new settings (env vars are loaded at startup).</Text>
+                </Box>
+                <Box marginTop={1}>
+                    <Text color={c.textDim}>Press any key to return to the chat…</Text>
+                </Box>
+            </Box>
+        );
+    }
+
+    return (
+        <Box
+            flexDirection="column"
+            borderStyle="round"
+            borderColor={c.brand}
+            paddingX={1}
+            marginTop={1}
+        >
+            <Box>
+                <Text color={c.brand} bold>◆ /config</Text>
+                <Text color={c.textDim}>  </Text>
+                <Text color={c.text}>edit </Text>
+                <Text color={c.pink} bold>{FIELDS[idx]!.label}</Text>
+                <Text color={c.textDim}>  ({idx + 1}/{FIELDS.length})</Text>
+                <Box flexGrow={1} />
+                <Text color={c.textDim}>↵ next/save · esc cancel</Text>
+            </Box>
+
+            <Box flexDirection="column" marginTop={1}>
+                {FIELDS.map((f, i) => {
+                    const isActive = i === idx;
+                    const showDraft = isActive ? draft : values[f.key];
+                    const display = f.secret && showDraft ? '•'.repeat(Math.max(0, showDraft.length)) : (showDraft || f.placeholder);
+                    const displayColor = isActive
+                        ? (showDraft ? c.text : c.textDim)
+                        : (values[f.key] ? c.text : c.textDim);
+                    return (
+                        <Box key={f.key}>
+                            <Text color={isActive ? c.brand : c.textDim}>
+                                {isActive ? '▶ ' : '  '}
+                            </Text>
+                            <Text color={isActive ? c.text : c.textMuted}>{f.label.padEnd(14)}</Text>
+                            <Text color={isActive ? c.text : c.textMuted}>: </Text>
+                            <Text color={displayColor} bold={isActive}>{display}</Text>
+                            {isActive && <Text color={c.pink}>▌</Text>}
+                        </Box>
+                    );
+                })}
+            </Box>
+
+            <Box marginTop={1}>
+                <Text color={c.textDim}>↳ {FIELDS[idx]!.help}</Text>
+            </Box>
+
+            <Box marginTop={1}>
+                <Text color={c.textDim}>File: {envPath}</Text>
+            </Box>
+
+            {error && (
+                <Box marginTop={1}>
+                    <Text color={c.red}>✗ {error}</Text>
+                </Box>
+            )}
+        </Box>
+    );
+}

package/src/ui/model-picker.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { KobApiClient } from '../utils/api.js';
+import { getConfig } from '../utils/config.js';
+import type { ModelsResponse, ProviderModels, AIModel } from '../types/index.js';
+import { c } from './colors.js';
+
+interface FlatModel extends AIModel {
+    provider: string;
+}
+
+interface Props {
+    onSelect: (modelId: string, displayName: string) => void;
+    onClose: () => void;
+    currentModel?: string;
+}
+
+export function ModelPicker({ onSelect, onClose, currentModel }: Props) {
+    const [providers, setProviders] = useState<ProviderModels[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(0);
+    const listAreaHeight = 12;
+    const { exit } = useApp();
+
+    useEffect(() => {
+        let alive = true;
+        const client = new KobApiClient(getConfig());
+        client
+            .post<ModelsResponse>('/api/models')
+            .then((data) => {
+                if (!alive) return;
+                setProviders(data.providers || []);
+                setLoading(false);
+            })
+            .catch((e) => {
+                if (!alive) return;
+                setError(e?.message || 'Failed to load models');
+                setLoading(false);
+            });
+        return () => {
+            alive = false;
+        };
+    }, []);
+
+    const flat: FlatModel[] = useMemo(() => {
+        const out: FlatModel[] = [];
+        for (const p of providers) {
+            for (const m of p.models) {
+                out.push({ ...m, provider: p.provider });
+            }
+        }
+        return out;
+    }, [providers]);
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) return flat;
+        return flat.filter(
+            (m) =>
+                m.displayName.toLowerCase().includes(q) ||
+                m.modelId.toLowerCase().includes(q) ||
+                m.provider.toLowerCase().includes(q)
+        );
+    }, [flat, query]);
+
+    // Keep selection in bounds
+    useEffect(() => {
+        if (selected >= filtered.length) setSelected(Math.max(0, filtered.length - 1));
+    }, [filtered.length, selected]);
+
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (loading || error) return;
+        if (key.return) {
+            const m = filtered[selected];
+            if (m) {
+                onSelect(m.modelId, m.displayName);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            setSelected((s) => Math.min(filtered.length - 1, s + 1));
+            return;
+        }
+        if (key.upArrow) {
+            setSelected((s) => Math.max(0, s - 1));
+            return;
+        }
+        if (key.pageDown) {
+            setSelected((s) => Math.min(filtered.length - 1, s + listAreaHeight));
+            return;
+        }
+        if (key.pageUp) {
+            setSelected((s) => Math.max(0, s - listAreaHeight));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((q) => q.slice(0, -1));
+            setSelected(0);
+            return;
+        }
+        // Plain character → append to query
+        if (input && !key.ctrl && !key.meta && !key.tab) {
+            setQuery((q) => q + input);
+            setSelected(0);
+        }
+    });
+
+    const total = filtered.length;
+    const start = Math.max(0, Math.min(selected - Math.floor(listAreaHeight / 2), Math.max(0, total - listAreaHeight)));
+    const end = Math.min(total, start + listAreaHeight);
+    const visible = filtered.slice(start, end);
+
+    return (
+        <Box
+            flexDirection="column"
+            borderStyle="round"
+            borderColor={c.brand}
+            paddingX={1}
+            marginTop={1}
+        >
+            <Box>
+                <Text color={c.brand} bold>◆ /models</Text>
+                <Text color={c.textDim}>  </Text>
+                <Text color={c.text}>search: </Text>
+                <Text color={c.text} bold>{query || '​'}</Text>
+                <Text color={c.pink}>{loading ? '  ⋯ loading' : `  ${total} match${total === 1 ? '' : 'es'}`}</Text>
+                <Box flexGrow={1} />
+                <Text color={c.textDim}>↑↓ move · type to search · ↵ pick · esc close</Text>
+            </Box>
+
+            <Box flexDirection="column" marginTop={1}>
+                {error && (
+                    <Text color={c.red}>✗ {error}</Text>
+                )}
+                {!error && loading && (
+                    <Text color={c.textDim}>Fetching model catalog…</Text>
+                )}
+                {!error && !loading && total === 0 && (
+                    <Text color={c.yellow}>No models match "{query}".</Text>
+                )}
+                {!error && !loading && total > 0 && (
+                    <>
+                        {visible.map((m, i) => {
+                            const absoluteIdx = start + i;
+                            const isSel = absoluteIdx === selected;
+                            const isCurrent = currentModel && m.modelId === currentModel;
+                            const provider = m.provider.padEnd(10).slice(0, 10);
+                            const price = `$${m.inputPricePer1M.toFixed(2)}/$${m.outputPricePer1M.toFixed(2)}/M`;
+                            return (
+                                <Box key={`${m.provider}-${m.modelId}`}>
+                                    <Text color={isSel ? c.brand : c.textDim}>{isSel ? '▶ ' : '  '}</Text>
+                                    <Text color={isSel ? c.text : c.text} bold={isSel}>
+                                        {m.displayName}
+                                    </Text>
+                                    {isCurrent && <Text color={c.green}>  ●current</Text>}
+                                    <Text color={c.textDim}>  </Text>
+                                    <Text color={c.textMuted}>{provider}</Text>
+                                    <Text color={c.textDim}>  </Text>
+                                    <Text color={c.yellow}>{price}</Text>
+                                    <Text color={c.textDim}>  </Text>
+                                    <Text color={c.textMuted}>{m.modelId}</Text>
+                                </Box>
+                            );
+                        })}
+                        {total > listAreaHeight && (
+                            <Box marginTop={1}>
+                                <Text color={c.textDim}>
+                                    {start + 1}–{end} of {total}
+                                </Text>
+                            </Box>
+                        )}
+                    </>
+                )}
+            </Box>
+        </Box>
+    );
+}

package/src/utils/env-file.ts

@@ -0,0 +1,123 @@
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const ENV_CANDIDATES = ['.env.local', '.env'];
+
+/**
+ * Find the .env file path the CLI should read/write.
+ * Prefers .env.local (standard for secrets), falls back to .env.
+ * Returns the first existing one, or .env.local if neither exists yet.
+ */
+export function getEnvPath(): string {
+    const cwd = process.cwd();
+    for (const name of ENV_CANDIDATES) {
+        const p = join(cwd, name);
+        if (existsSync(p)) return p;
+    }
+    return join(cwd, '.env.local');
+}
+
+/**
+ * Parse a .env file into a key→value map. Preserves comments internally
+ * (so we can keep them when rewriting), but only returns the values.
+ */
+export function readEnvFile(): Record<string, string> {
+    const p = getEnvPath();
+    if (!existsSync(p)) return {};
+    const content = readFileSync(p, 'utf-8');
+    return parseEnvText(content);
+}
+
+function parseEnvText(text: string): Record<string, string> {
+    const out: Record<string, string> = {};
+    for (const rawLine of text.split(/\r?\n/)) {
+        const line = rawLine.trim();
+        if (!line || line.startsWith('#')) continue;
+        const eq = line.indexOf('=');
+        if (eq === -1) continue;
+        const key = line.substring(0, eq).trim();
+        let val = line.substring(eq + 1).trim();
+        // Strip surrounding quotes
+        if (
+            (val.startsWith('"') && val.endsWith('"')) ||
+            (val.startsWith("'") && val.endsWith("'"))
+        ) {
+            val = val.substring(1, val.length - 1);
+        }
+        out[key] = val;
+    }
+    return out;
+}
+
+/**
+ * Update keys in the .env file.
+ * - Preserves comments, blank lines, and key ordering.
+ * - If a key exists, its line is replaced in place.
+ * - If a key is missing, it is appended to the end (with a blank line separator).
+ * - If the .env file doesn't exist, seeds it from .env.example when present.
+ *
+ * @param updates  key→value map of entries to set
+ * @param comments optional key→comment map for newly-appended keys
+ */
+export function writeEnvFile(
+    updates: Record<string, string>,
+    comments?: Record<string, string>
+): void {
+    const p = getEnvPath();
+    const examplePath = join(process.cwd(), '.env.example');
+
+    let content: string;
+    if (existsSync(p)) {
+        content = readFileSync(p, 'utf-8');
+    } else if (existsSync(examplePath)) {
+        content = readFileSync(examplePath, 'utf-8');
+    } else {
+        content = '# KOB AI Configuration\n';
+    }
+
+    const lines = content.split(/\r?\n/);
+    const updatedKeys = new Set<string>();
+    const out: string[] = [];
+
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith('#')) {
+            out.push(line);
+            continue;
+        }
+        const eq = trimmed.indexOf('=');
+        if (eq === -1) {
+            out.push(line);
+            continue;
+        }
+        const key = trimmed.substring(0, eq).trim();
+        if (key in updates) {
+            out.push(`${key}=${updates[key]}`);
+            updatedKeys.add(key);
+        } else {
+            out.push(line);
+        }
+    }
+
+    // Append any keys that weren't already present
+    const toAppend = Object.entries(updates).filter(([k]) => !updatedKeys.has(k));
+    if (toAppend.length > 0) {
+        if (out.length > 0 && out[out.length - 1] !== '') out.push('');
+        for (const [key, val] of toAppend) {
+            if (comments && comments[key]) {
+                out.push(`# ${comments[key]}`);
+            }
+            out.push(`${key}=${val}`);
+        }
+    }
+
+    writeFileSync(p, out.join('\n'));
+}
+
+/**
+ * Get the human-readable path the CLI is reading from.
+ * Useful for UI hints (e.g. "/config" form).
+ */
+export function describeEnvPath(): string {
+    return getEnvPath();
+}