@devang0907/agent-dev 0.1.0 → 0.1.2

package/dist/agent/loop.js

@@ -13,7 +13,7 @@ async function collectStream(model, messages, settings, systemPrompt, signal, on
         systemPrompt,
         thinkingLevel: settings.thinkingLevel,
         signal,
-    });
+    }, settings);
     for await (const event of stream) {
         if (event.type === "text_delta") {
             content += event.delta;

package/dist/config/settings.d.ts

@@ -1,10 +1,9 @@
 import type { ProviderId } from "../providers/types.js";
-import type { ThinkingLevel, Theme } from "../providers/types.js";
+import type { ThinkingLevel } from "../providers/types.js";
 export interface Settings {
     defaultProvider: ProviderId;
     defaultModel: string;
     thinkingLevel: ThinkingLevel;
-    theme: Theme;
     apiKeys?: Partial<Record<ProviderId, string>>;
 }
 export declare function loadSettings(): Settings;

package/dist/config/settings.js

@@ -4,7 +4,6 @@ const DEFAULT_SETTINGS = {
     defaultProvider: "free",
     defaultModel: "meta-llama/llama-3.3-70b-instruct:free",
     thinkingLevel: "off",
-    theme: "dark",
 };
 export function loadSettings() {
     if (!existsSync(SETTINGS_PATH)) {
@@ -12,7 +11,14 @@ export function loadSettings() {
     }
     try {
         const raw = readFileSync(SETTINGS_PATH, "utf-8");
-        return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
+        const parsed = JSON.parse(raw);
+        return {
+            ...DEFAULT_SETTINGS,
+            defaultProvider: parsed.defaultProvider ?? DEFAULT_SETTINGS.defaultProvider,
+            defaultModel: parsed.defaultModel ?? DEFAULT_SETTINGS.defaultModel,
+            thinkingLevel: parsed.thinkingLevel ?? DEFAULT_SETTINGS.thinkingLevel,
+            apiKeys: parsed.apiKeys,
+        };
     }
     catch {
         return { ...DEFAULT_SETTINGS };

package/dist/providers/types.d.ts

@@ -1,6 +1,5 @@
 export type ProviderId = "openai" | "groq" | "gemini" | "free";
 export type ThinkingLevel = "off" | "minimal" | "low" | "medium" | "high";
-export type Theme = "dark" | "light";
 export interface Model {
     provider: ProviderId;
     id: string;

package/dist/ui/ApiKeyPrompt.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ThemeColors } from "./theme.js";
+import type { Model, ProviderId } from "../providers/types.js";
+interface ApiKeyPromptProps {
+    theme: ThemeColors;
+    provider: ProviderId;
+    model: Model;
+    onSubmit: (apiKey: string) => void;
+    onCancel: () => void;
+}
+export declare function ApiKeyPrompt({ theme, provider, model, onSubmit, onCancel }: ApiKeyPromptProps): React.JSX.Element;
+export {};

package/dist/ui/ApiKeyPrompt.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { PROVIDER_LABELS } from "../config/models.js";
+import { PROVIDER_ENV_VARS } from "../providers/registry.js";
+import { LeftBorder } from "./LeftBorder.js";
+import { Panel } from "./Panel.js";
+function BlinkingCursor({ theme, visible }) {
+    if (!visible)
+        return null;
+    return _jsx(Text, { color: theme.primary, children: "\u258C" });
+}
+export function ApiKeyPrompt({ theme, provider, model, onSubmit, onCancel }) {
+    const [value, setValue] = useState("");
+    const [cursorOn, setCursorOn] = useState(true);
+    useEffect(() => {
+        const id = setInterval(() => setCursorOn((v) => !v), 530);
+        return () => clearInterval(id);
+    }, []);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            const trimmed = value.trim();
+            if (trimmed)
+                onSubmit(trimmed);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setValue((v) => v + input);
+        }
+    });
+    const envVars = PROVIDER_ENV_VARS[provider];
+    const masked = "•".repeat(value.length);
+    return (_jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(LeftBorder, { theme: theme, borderColor: theme.borderActive, children: [_jsx(Text, { color: theme.text, bold: true, children: "API key required" }), _jsx(Text, { color: theme.textMuted, children: " Enter save \u00B7 Esc back" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.textMuted, children: ["Provider: ", PROVIDER_LABELS[provider]] }), _jsxs(Text, { color: theme.textMuted, children: ["Model: ", model.name] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Panel, { theme: theme, borderColor: theme.primary, marginBottom: 0, children: _jsx(Box, { flexDirection: "row", children: value.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text, children: masked }), _jsx(BlinkingCursor, { theme: theme, visible: cursorOn })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textMuted, children: "Paste API key\u2026" }), _jsx(BlinkingCursor, { theme: theme, visible: cursorOn })] })) }) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.textMuted, children: ["Or set env: ", envVars.join(" · ")] }) })] }) }));
+}

package/dist/ui/App.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Box, Text, useInput, useApp } from "ink";
+import { Box, useInput, useApp } from "ink";
 import { ChatView } from "./ChatView.js";
 import { Editor } from "./Editor.js";
 import { Footer } from "./Footer.js";
 import { ModelSelector } from "./ModelSelector.js";
+import { ApiKeyPrompt } from "./ApiKeyPrompt.js";
 import { SettingsView } from "./SettingsView.js";
+import { hasProviderAuth } from "../providers/registry.js";
+import { StartupBanner } from "./StartupBanner.js";
 import { getTheme } from "./theme.js";
 import { saveSettings } from "../config/settings.js";
 export function App({ session, workdir, onQuit }) {
@@ -18,11 +21,12 @@ export function App({ session, workdir, onQuit }) {
     const [streamingText, setStreamingText] = useState("");
     const [overlay, setOverlay] = useState("none");
     const [modelFilter, setModelFilter] = useState();
+    const [pendingModel, setPendingModel] = useState(null);
     const [settings, setSettings] = useState(session.getSettings());
     const [model, setModel] = useState(session.getModel());
     const [running, setRunning] = useState(false);
     const streamingRef = useRef("");
-    const theme = getTheme(settings.theme);
+    const theme = getTheme();
     useEffect(() => {
         const handler = (event) => {
             switch (event.type) {
@@ -115,7 +119,13 @@ export function App({ session, workdir, onQuit }) {
             return;
         await session.prompt(value);
     }, [session, running, onQuit, exit]);
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.header, bold: true, children: "agent-dev" }), _jsx(Text, { color: theme.muted, children: " \u2014 /model /settings /new /quit | Esc abort" })] }), _jsx(ChatView, { messages: displayMessages, theme: theme, streamingText: streamingText }), _jsx(Footer, { workdir: workdir, model: model, theme: theme, running: running }), overlay === "none" && (_jsx(Editor, { theme: theme, disabled: running, onSubmit: handleSubmit })), overlay === "model" && (_jsx(ModelSelector, { theme: theme, settings: settings, filter: modelFilter, onSelect: (m) => {
+    const hasChat = displayMessages.length > 0 || streamingText.length > 0;
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { paddingX: 2, marginBottom: 1, children: _jsx(StartupBanner, { theme: theme, compact: hasChat }) }), _jsx(ChatView, { messages: displayMessages, theme: theme, model: model, streamingText: streamingText, running: running }), _jsx(Footer, { workdir: workdir, model: model, theme: theme }), overlay === "none" && (_jsx(Editor, { theme: theme, model: model, disabled: running, running: running, onSubmit: handleSubmit })), overlay === "model" && (_jsx(ModelSelector, { theme: theme, settings: settings, filter: modelFilter, onSelect: (m) => {
+                    if (!hasProviderAuth(m.provider, settings)) {
+                        setPendingModel(m);
+                        setOverlay("apiKey");
+                        return;
+                    }
                     session.setModel(m);
                     setModel(m);
                     setOverlay("none");
@@ -123,6 +133,21 @@ export function App({ session, workdir, onQuit }) {
                 }, onClose: () => {
                     setOverlay("none");
                     setModelFilter(undefined);
+                } })), overlay === "apiKey" && pendingModel && (_jsx(ApiKeyPrompt, { theme: theme, provider: pendingModel.provider, model: pendingModel, onSubmit: (apiKey) => {
+                    const updated = {
+                        ...settings,
+                        apiKeys: { ...settings.apiKeys, [pendingModel.provider]: apiKey },
+                    };
+                    session.updateSettings(updated);
+                    setSettings(updated);
+                    session.setModel(pendingModel);
+                    setModel(pendingModel);
+                    setPendingModel(null);
+                    setOverlay("none");
+                    setModelFilter(undefined);
+                }, onCancel: () => {
+                    setPendingModel(null);
+                    setOverlay("model");
                 } })), overlay === "settings" && (_jsx(SettingsView, { theme: theme, settings: settings, onUpdate: (s) => {
                     session.updateSettings(s);
                     setSettings(s);

package/dist/ui/ChatView.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import type { DisplayMessage } from "./App.js";
 import type { ThemeColors } from "./theme.js";
+import type { Model } from "../providers/types.js";
 interface ChatViewProps {
     messages: DisplayMessage[];
     theme: ThemeColors;
+    model: Model;
     streamingText?: string;
+    running?: boolean;
 }
-export declare function ChatView({ messages, theme, streamingText }: ChatViewProps): React.JSX.Element;
+export declare function ChatView({ messages, theme, model, streamingText, running }: ChatViewProps): React.JSX.Element | null;
 export {};

package/dist/ui/ChatView.js

@@ -1,5 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Box, Text } from "ink";
-export function ChatView({ messages, theme, streamingText }) {
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, marginBottom: 1, children: [messages.length === 0 && !streamingText && (_jsx(Text, { color: theme.muted, children: "Type a message or /model to select a provider. /settings for options." })), messages.map((msg, i) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [msg.role === "user" && (_jsxs(Text, { color: theme.user, bold: true, children: ["You: ", msg.content] })), msg.role === "assistant" && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.assistant, bold: true, children: "Assistant:" }), _jsx(Text, { color: theme.assistant, children: msg.content || "" })] })), msg.role === "tool" && (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { color: theme.tool, children: ["[", msg.toolName, "] ", msg.content.slice(0, 200), msg.content.length > 200 ? "..." : ""] }) }))] }, i))), streamingText && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.assistant, bold: true, children: "Assistant:" }), _jsx(Text, { color: theme.assistant, children: streamingText })] }))] }));
+import { SPINNER_FRAMES, TOOL_ICONS } from "./theme.js";
+import { LeftBorder } from "./LeftBorder.js";
+import { Panel } from "./Panel.js";
+import { modelRef } from "../config/models.js";
+function truncate(text, max) {
+    return text.length > max ? text.slice(0, max) + "…" : text;
+}
+export function ChatView({ messages, theme, model, streamingText, running }) {
+    const [spinIdx, setSpinIdx] = useState(0);
+    const hasContent = messages.length > 0 || (streamingText?.length ?? 0) > 0;
+    useEffect(() => {
+        if (!running && !streamingText)
+            return;
+        const id = setInterval(() => setSpinIdx((i) => (i + 1) % SPINNER_FRAMES.length), 80);
+        return () => clearInterval(id);
+    }, [running, streamingText]);
+    if (!hasContent) {
+        return null;
+    }
+    return (_jsxs(Panel, { theme: theme, flexGrow: 1, borderColor: theme.border, children: [messages.map((msg, i) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [msg.role === "user" && (_jsx(LeftBorder, { theme: theme, borderColor: theme.primary, marginBottom: 0, children: _jsx(Text, { color: theme.text, children: msg.content }) })), msg.role === "assistant" && (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(Text, { color: theme.text, children: msg.content || "" }), _jsxs(Text, { color: theme.textMuted, children: [_jsx(Text, { color: theme.primary, children: "\u25A3 " }), modelRef(model)] })] })), msg.role === "tool" && (_jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: theme.text, children: [_jsx(Text, { color: theme.textMuted, children: TOOL_ICONS[msg.toolName ?? ""] ?? "⚙" }), " ", _jsx(Text, { bold: true, children: msg.toolName }), _jsxs(Text, { color: theme.textMuted, children: [" ", truncate(msg.content, 200)] })] }) }))] }, i))), streamingText && (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(Text, { color: theme.text, children: streamingText }), _jsxs(Text, { color: theme.textMuted, children: [_jsxs(Text, { color: theme.primary, children: [SPINNER_FRAMES[spinIdx], " "] }), "responding\u2026"] })] })), running && !streamingText && messages.length > 0 && (_jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: theme.textMuted, children: [_jsx(Text, { color: theme.primary, children: SPINNER_FRAMES[spinIdx] }), " working\u2026"] }) }))] }));
 }

package/dist/ui/Editor.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import type { ThemeColors } from "./theme.js";
+import type { Model } from "../providers/types.js";
 interface EditorProps {
     theme: ThemeColors;
+    model: Model;
     disabled?: boolean;
+    running?: boolean;
     onSubmit: (value: string) => void;
-    filterHint?: string;
 }
-export declare function Editor({ theme, disabled, onSubmit, filterHint }: EditorProps): React.JSX.Element;
+export declare function Editor({ theme, model, disabled, running, onSubmit }: EditorProps): React.JSX.Element;
 export {};

package/dist/ui/Editor.js

@@ -1,10 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
-const SLASH_COMMANDS = ["/model", "/settings", "/new", "/quit"];
-export function Editor({ theme, disabled, onSubmit, filterHint }) {
-    const [value, setValue] = useState(filterHint ?? "");
+import { modelRef } from "../config/models.js";
+import { matchSlashCommands, completeSlashInput, } from "./slash-commands.js";
+import { Panel } from "./Panel.js";
+import { SPINNER_FRAMES } from "./theme.js";
+function BlinkingCursor({ theme, visible }) {
+    if (!visible)
+        return null;
+    return _jsx(Text, { color: theme.primary, children: "\u258C" });
+}
+export function Editor({ theme, model, disabled, running, onSubmit }) {
+    const [value, setValue] = useState("");
     const [suggestions, setSuggestions] = useState([]);
+    const [spinIdx, setSpinIdx] = useState(0);
+    const [cursorOn, setCursorOn] = useState(true);
+    useEffect(() => {
+        if (!running)
+            return;
+        const id = setInterval(() => setSpinIdx((i) => (i + 1) % SPINNER_FRAMES.length), 80);
+        return () => clearInterval(id);
+    }, [running]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const id = setInterval(() => setCursorOn((v) => !v), 530);
+        return () => clearInterval(id);
+    }, [disabled]);
+    const updateSuggestions = (text) => {
+        if (text.startsWith("/")) {
+            setSuggestions(matchSlashCommands(text));
+        }
+        else {
+            setSuggestions([]);
+        }
+    };
     useInput((input, key) => {
         if (disabled)
             return;
@@ -16,20 +46,33 @@ export function Editor({ theme, disabled, onSubmit, filterHint }) {
             setSuggestions([]);
             return;
         }
+        if (key.tab) {
+            if (value.startsWith("/")) {
+                const completed = completeSlashInput(value);
+                if (completed) {
+                    setValue(completed);
+                    setSuggestions(matchSlashCommands(completed));
+                }
+                else if (suggestions.length > 0) {
+                    setValue(suggestions[0].cmd);
+                    setSuggestions(matchSlashCommands(suggestions[0].cmd));
+                }
+            }
+            return;
+        }
         if (key.backspace || key.delete) {
-            setValue((v) => v.slice(0, -1));
+            const newVal = value.slice(0, -1);
+            setValue(newVal);
+            updateSuggestions(newVal);
             return;
         }
         if (input && !key.ctrl && !key.meta) {
             const newVal = value + input;
             setValue(newVal);
-            if (newVal.startsWith("/")) {
-                setSuggestions(SLASH_COMMANDS.filter((c) => c.startsWith(newVal)));
-            }
-            else {
-                setSuggestions([]);
-            }
+            updateSuggestions(newVal);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, children: [suggestions.length > 0 && (_jsx(Text, { color: theme.muted, children: suggestions.join("  ") })), _jsxs(Text, { children: [_jsx(Text, { color: theme.accent, children: "> " }), _jsx(Text, { children: value }), _jsx(Text, { color: theme.muted, children: "\u2588" })] })] }));
+    const placeholder = "Ask anything…";
+    const showCursor = !disabled && cursorOn;
+    return (_jsxs(Box, { flexDirection: "column", marginX: 2, children: [suggestions.length > 0 && (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginBottom: 1, children: suggestions.map((s) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.primary, children: s.cmd }), _jsxs(Text, { color: theme.textMuted, children: [" \u2014 ", s.desc] })] }, s.cmd))) })), _jsxs(Panel, { theme: theme, borderColor: disabled ? theme.border : theme.primary, marginBottom: 0, children: [_jsx(Box, { flexDirection: "row", children: value.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text, children: value }), _jsx(BlinkingCursor, { theme: theme, visible: showCursor })] })) : showCursor ? (_jsx(BlinkingCursor, { theme: theme, visible: true })) : (_jsx(Text, { color: theme.textMuted, children: placeholder })) }), _jsxs(Text, { color: theme.textMuted, children: ["agent-dev \u00B7 ", _jsx(Text, { color: theme.text, children: modelRef(model) })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: running ? (_jsxs(Text, { color: theme.textMuted, children: [_jsx(Text, { color: theme.primary, children: SPINNER_FRAMES[spinIdx] }), " ", "esc interrupt"] })) : (_jsx(Text, { color: theme.textMuted, children: "Tab completes /commands" })) })] }));
 }

package/dist/ui/Footer.d.ts

@@ -5,7 +5,6 @@ interface FooterProps {
     workdir: string;
     model: Model;
     theme: ThemeColors;
-    running: boolean;
 }
-export declare function Footer({ workdir, model, theme, running }: FooterProps): React.JSX.Element;
+export declare function Footer({ workdir, model, theme }: FooterProps): React.JSX.Element;
 export {};

package/dist/ui/Footer.js

@@ -1,6 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { modelRef } from "../config/models.js";
-export function Footer({ workdir, model, theme, running }) {
-    return (_jsx(Box, { borderStyle: "single", borderColor: theme.border, paddingX: 1, children: _jsxs(Text, { color: theme.muted, children: [workdir, " | ", modelRef(model), " ", running ? "| working..." : ""] }) }));
+function shortPath(path, max = 56) {
+    if (path.length <= max)
+        return path;
+    return "…" + path.slice(-(max - 1));
+}
+export function Footer({ workdir, model, theme }) {
+    return (_jsx(Box, { borderStyle: "single", borderColor: theme.border, borderLeft: false, borderRight: false, borderBottom: false, paddingX: 2, marginBottom: 1, children: _jsxs(Text, { color: theme.textMuted, children: [_jsx(Text, { color: theme.primary, children: "\u2302 " }), shortPath(workdir), "  ", _jsx(Text, { color: theme.text, children: modelRef(model) })] }) }));
 }

package/dist/ui/LeftBorder.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ThemeColors } from "./theme.js";
+interface LeftBorderProps {
+    theme: ThemeColors;
+    borderColor?: string;
+    marginBottom?: number;
+    children: React.ReactNode;
+}
+/** OpenCode-style left ┃ accent border */
+export declare function LeftBorder({ theme, borderColor, marginBottom, children, }: LeftBorderProps): React.JSX.Element;
+export {};

package/dist/ui/LeftBorder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+/** OpenCode-style left ┃ accent border */
+export function LeftBorder({ theme, borderColor = theme.primary, marginBottom = 0, children, }) {
+    return (_jsx(Box, { flexDirection: "column", borderStyle: "single", borderColor: borderColor, borderLeft: true, borderTop: false, borderRight: false, borderBottom: false, paddingLeft: 1, marginBottom: marginBottom, children: children }));
+}

package/dist/ui/ModelSelector.js

@@ -3,12 +3,13 @@ import { useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { ALL_MODELS, modelRef, PROVIDER_LABELS } from "../config/models.js";
 import { hasProviderAuth } from "../providers/registry.js";
+import { LeftBorder } from "./LeftBorder.js";
 function fuzzyMatch(text, query) {
     if (!query)
         return true;
     const lower = text.toLowerCase();
     const q = query.toLowerCase();
-    return lower.includes(q) || modelRef({ provider: "openai", id: text, name: text }).includes(q);
+    return lower.includes(q);
 }
 export function ModelSelector({ theme, settings, filter, onSelect, onClose }) {
     const filtered = ALL_MODELS.filter((m) => {
@@ -17,7 +18,7 @@ export function ModelSelector({ theme, settings, filter, onSelect, onClose }) {
     });
     const [index, setIndex] = useState(0);
     const safeIndex = Math.min(index, Math.max(0, filtered.length - 1));
-    useInput((input, key) => {
+    useInput((_, key) => {
         if (key.escape) {
             onClose();
             return;
@@ -29,14 +30,16 @@ export function ModelSelector({ theme, settings, filter, onSelect, onClose }) {
         if (key.return && filtered[safeIndex]) {
             onSelect(filtered[safeIndex]);
         }
-        if (input && !key.ctrl) {
-            // typing not used in overlay mode
-        }
     });
     const providers = ["openai", "groq", "gemini", "free"];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: theme.accent, padding: 1, children: [_jsx(Text, { color: theme.header, bold: true, children: "/model \u2014 select provider & model (Esc to close)" }), filter && _jsxs(Text, { color: theme.muted, children: ["Filter: ", filter] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [filtered.length === 0 && _jsx(Text, { color: theme.muted, children: "No models match" }), filtered.map((m, i) => {
-                        const hasKey = hasProviderAuth(m.provider, settings);
-                        const selected = i === safeIndex;
-                        return (_jsxs(Text, { color: selected ? theme.accent : theme.assistant, children: [selected ? "> " : "  ", "[", PROVIDER_LABELS[m.provider], "] ", m.name, !hasKey ? " (no key)" : ""] }, modelRef(m)));
-                    })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.muted, children: ["Providers: ", providers.map((p) => `${PROVIDER_LABELS[p]}${hasProviderAuth(p, settings) ? "" : " (no key)"}`).join(" | ")] }) })] }));
+    let lastProvider;
+    return (_jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(LeftBorder, { theme: theme, borderColor: theme.borderActive, children: [_jsx(Text, { color: theme.text, bold: true, children: "/model" }), _jsx(Text, { color: theme.textMuted, children: " \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close" }), _jsx(Text, { color: theme.textMuted, children: " Models without a key will prompt for an API key" }), filter && _jsxs(Text, { color: theme.textMuted, children: [" filter: ", filter] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [filtered.length === 0 && _jsx(Text, { color: theme.textMuted, children: "No models match" }), filtered.map((m, i) => {
+                            const selected = i === safeIndex;
+                            const showHeader = m.provider !== lastProvider;
+                            lastProvider = m.provider;
+                            return (_jsxs(Box, { flexDirection: "column", children: [showHeader && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.textMuted, children: PROVIDER_LABELS[m.provider] }) })), _jsxs(Text, { color: selected ? theme.primary : theme.text, children: [selected ? "› " : "  ", m.name, selected && _jsxs(Text, { color: theme.textMuted, children: [" ", modelRef(m)] })] })] }, modelRef(m)));
+                        })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.textMuted, children: providers.map((p) => {
+                            const ok = hasProviderAuth(p, settings);
+                            return `${ok ? "●" : "○"} ${p}`;
+                        }).join("  ") }) })] }) }));
 }

package/dist/ui/Panel.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ThemeColors } from "./theme.js";
+interface PanelProps {
+    theme: ThemeColors;
+    marginBottom?: number;
+    flexGrow?: number;
+    borderColor?: string;
+    children: React.ReactNode;
+}
+export declare function Panel({ theme, marginBottom, flexGrow, borderColor, children, }: PanelProps): React.JSX.Element;
+export {};

package/dist/ui/Panel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+export function Panel({ theme, marginBottom = 1, flexGrow, borderColor = theme.border, children, }) {
+    return (_jsx(Box, { flexDirection: "column", flexGrow: flexGrow, borderStyle: "round", borderColor: borderColor, paddingX: 1, paddingY: 1, marginX: 2, marginBottom: marginBottom, children: children }));
+}

package/dist/ui/SettingsView.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { PROVIDER_ENV_VARS } from "../providers/registry.js";
+import { LeftBorder } from "./LeftBorder.js";
 const THINKING_LEVELS = ["off", "minimal", "low", "medium", "high"];
-const THEMES = ["dark", "light"];
 export function SettingsView({ theme, settings, onUpdate, onClose }) {
     const [index, setIndex] = useState(0);
-    const items = ["thinkingLevel", "theme", "envKeys"];
+    const items = ["thinkingLevel", "envKeys"];
     useInput((_, key) => {
         if (key.escape)
             onClose();
@@ -21,17 +21,12 @@ export function SettingsView({ theme, settings, onUpdate, onClose }) {
                 const next = THINKING_LEVELS[(cur + 1) % THINKING_LEVELS.length];
                 onUpdate({ ...settings, thinkingLevel: next });
             }
-            else if (item === "theme") {
-                const cur = THEMES.indexOf(settings.theme);
-                const next = THEMES[(cur + 1) % THEMES.length];
-                onUpdate({ ...settings, theme: next });
-            }
         }
     });
     const providers = ["openai", "groq", "gemini", "free"];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: theme.accent, padding: 1, children: [_jsx(Text, { color: theme.header, bold: true, children: "/settings (Enter to cycle, Esc to close)" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: index === 0 ? theme.accent : theme.assistant, children: [index === 0 ? "> " : "  ", "Thinking level: ", settings.thinkingLevel] }), _jsxs(Text, { color: index === 1 ? theme.accent : theme.assistant, children: [index === 1 ? "> " : "  ", "Theme: ", settings.theme] }), _jsxs(Text, { color: index === 2 ? theme.accent : theme.muted, children: [index === 2 ? "> " : "  ", "API keys (env vars):"] }), providers.map((p) => {
-                        const vars = PROVIDER_ENV_VARS[p];
-                        const set = vars.some((v) => process.env[v]);
-                        return (_jsxs(Text, { color: theme.muted, children: ["    ", p, ": ", vars.join(" or "), " \u2014 ", set ? "set" : "not set"] }, p));
-                    })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "Set OPENAI_API_KEY, GROQ_API_KEY, GEMINI_API_KEY, OPENROUTER_API_KEY" }) })] }));
+    return (_jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(LeftBorder, { theme: theme, borderColor: theme.borderActive, children: [_jsx(Text, { color: theme.text, bold: true, children: "/settings" }), _jsx(Text, { color: theme.textMuted, children: " Enter cycle \u00B7 Esc close" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: index === 0 ? theme.primary : theme.text, children: [index === 0 ? "› " : "  ", "Thinking:", " ", _jsx(Text, { bold: true, children: settings.thinkingLevel })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: index === 1 ? theme.primary : theme.textMuted, children: [index === 1 ? "› " : "  ", "API keys"] }) }), providers.map((p) => {
+                            const vars = PROVIDER_ENV_VARS[p];
+                            const set = vars.some((v) => process.env[v]);
+                            return (_jsxs(Text, { color: set ? theme.success : theme.textMuted, children: ["    ", set ? "✓" : "○", " ", p, ": ", vars.join(" · ")] }, p));
+                        })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.textMuted, children: "OPENAI_API_KEY \u00B7 GROQ_API_KEY \u00B7 GEMINI_API_KEY \u00B7 OPENROUTER_API_KEY" }) })] }) }));
 }

package/dist/ui/StartupBanner.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ThemeColors } from "./theme.js";
+interface StartupBannerProps {
+    theme: ThemeColors;
+    compact?: boolean;
+}
+export declare const StartupBanner: React.NamedExoticComponent<StartupBannerProps>;
+export {};

package/dist/ui/StartupBanner.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Box, Text } from "ink";
+/**
+ * 5x7 block-letter glyphs for the "AGENT-DEV" wordmark.
+ * "█" = lit pixel, " " = empty pixel. Every glyph is exactly 5 columns
+ * wide and 7 rows tall, so glyphs line up cleanly when concatenated
+ * row-by-row to spell out a word.
+ */
+const GLYPH_HEIGHT = 7;
+const GLYPH_WIDTH = 5;
+const GLYPHS = {
+    A: ["  █  ", " █ █ ", "█   █", "█████", "█   █", "█   █", "█   █"],
+    G: [" ███ ", "█    ", "█    ", "█ ███", "█   █", "█   █", " ███ "],
+    E: ["█████", "█    ", "█    ", "████ ", "█    ", "█    ", "█████"],
+    N: ["█   █", "██  █", "█ █ █", "█  ██", "█   █", "█   █", "█   █"],
+    T: ["█████", "  █  ", "  █  ", "  █  ", "  █  ", "  █  ", "  █  "],
+    "-": ["     ", "     ", "     ", "█████", "     ", "     ", "     "],
+    D: ["████ ", "█   █", "█   █", "█   █", "█   █", "█   █", "████ "],
+    V: ["█   █", "█   █", "█   █", "█   █", " █ █ ", " █ █ ", "  █  "],
+};
+const BLANK_GLYPH = Array(GLYPH_HEIGHT).fill(" ".repeat(GLYPH_WIDTH));
+/** Wordmark color — matches the brand logo regardless of active theme. */
+const LOGO_COLOR = "#F2A154";
+function glyphFor(char) {
+    return GLYPHS[char.toUpperCase()] ?? BLANK_GLYPH;
+}
+/** Builds the word as GLYPH_HEIGHT lines of text, gap columns between letters. */
+function buildBlockLines(word, gap = 1) {
+    const glyphs = word.split("").map(glyphFor);
+    const gapStr = " ".repeat(gap);
+    const lines = [];
+    for (let row = 0; row < GLYPH_HEIGHT; row++) {
+        lines.push(glyphs.map((g) => g[row]).join(gapStr));
+    }
+    return lines;
+}
+const LOGO_LINES = buildBlockLines("AGENT-DEV");
+const LOGO_MINI = "AGENT-DEV";
+export const StartupBanner = memo(function StartupBanner({ theme, compact, }) {
+    // Falls back to the brand orange; lets a theme override via an
+    // optional `accent` field without forcing it into ThemeColors.
+    const color = theme.accent ?? LOGO_COLOR;
+    if (compact) {
+        return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: color, bold: true, children: LOGO_MINI }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: LOGO_LINES.map((line, i) => (_jsx(Text, { color: color, bold: true, children: line }, i))) }));
+});

package/dist/ui/slash-commands.d.ts

@@ -0,0 +1,16 @@
+export declare const SLASH_COMMANDS: readonly [{
+    readonly cmd: "/model";
+    readonly desc: "Select provider & model";
+}, {
+    readonly cmd: "/settings";
+    readonly desc: "Thinking level & API keys";
+}, {
+    readonly cmd: "/new";
+    readonly desc: "New session";
+}, {
+    readonly cmd: "/quit";
+    readonly desc: "Exit";
+}];
+export declare function matchSlashCommands(input: string): typeof SLASH_COMMANDS[number][];
+export declare function longestCommonPrefix(strings: string[]): string;
+export declare function completeSlashInput(input: string): string | null;

package/dist/ui/slash-commands.js

@@ -0,0 +1,31 @@
+export const SLASH_COMMANDS = [
+    { cmd: "/model", desc: "Select provider & model" },
+    { cmd: "/settings", desc: "Thinking level & API keys" },
+    { cmd: "/new", desc: "New session" },
+    { cmd: "/quit", desc: "Exit" },
+];
+export function matchSlashCommands(input) {
+    if (!input.startsWith("/"))
+        return [];
+    return SLASH_COMMANDS.filter((c) => c.cmd.startsWith(input));
+}
+export function longestCommonPrefix(strings) {
+    if (strings.length === 0)
+        return "";
+    let prefix = strings[0];
+    for (let i = 1; i < strings.length; i++) {
+        while (prefix && !strings[i].startsWith(prefix)) {
+            prefix = prefix.slice(0, -1);
+        }
+    }
+    return prefix;
+}
+export function completeSlashInput(input) {
+    const matches = matchSlashCommands(input).map((c) => c.cmd);
+    if (matches.length === 0)
+        return null;
+    if (matches.length === 1)
+        return matches[0];
+    const common = longestCommonPrefix(matches);
+    return common.length > input.length ? common : null;
+}

package/dist/ui/theme.d.ts

@@ -1,13 +1,16 @@
-import type { Theme } from "../providers/types.js";
 export interface ThemeColors {
-    user: string;
-    assistant: string;
-    tool: string;
-    border: string;
-    muted: string;
-    accent: string;
+    text: string;
+    textMuted: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
     error: string;
-    header: string;
+    border: string;
+    borderActive: string;
 }
-export declare const themes: Record<Theme, ThemeColors>;
-export declare function getTheme(theme: Theme): ThemeColors;
+/** OpenCode-inspired palette — standard terminal ANSI colors */
+export declare const theme: ThemeColors;
+export declare function getTheme(): ThemeColors;
+export declare const SPINNER_FRAMES: string[];
+export declare const TOOL_ICONS: Record<string, string>;

package/dist/ui/theme.js

@@ -1,25 +1,22 @@
-export const themes = {
-    dark: {
-        user: "cyan",
-        assistant: "white",
-        tool: "yellow",
-        border: "gray",
-        muted: "gray",
-        accent: "green",
-        error: "red",
-        header: "blue",
-    },
-    light: {
-        user: "blue",
-        assistant: "black",
-        tool: "yellow",
-        border: "gray",
-        muted: "gray",
-        accent: "green",
-        error: "red",
-        header: "blue",
-    },
+/** OpenCode-inspired palette — standard terminal ANSI colors */
+export const theme = {
+    text: "white",
+    textMuted: "gray",
+    primary: "cyan",
+    secondary: "blue",
+    success: "green",
+    warning: "yellow",
+    error: "red",
+    border: "gray",
+    borderActive: "white",
 };
-export function getTheme(theme) {
-    return themes[theme];
+export function getTheme() {
+    return theme;
 }
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export const TOOL_ICONS = {
+    bash: "$",
+    read: "→",
+    write: "⚙",
+    edit: "%",
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devang0907/agent-dev",
-  "version": "0.1.0",
-  "description": "Minimal pi-like terminal coding agent with Ink UI",
+  "version": "0.1.2",
+  "description": "Minimal terminal coding agent",
   "type": "module",
   "license": "MIT",
   "author": "Devang Rakholiya <rakholiyadevang@gmail.com>",
@@ -9,8 +9,17 @@
     "type": "git",
     "url": "git+https://github.com/Devang0907/agent-dev.git"
   },
-  "keywords": ["ai", "agent", "cli", "ink", "coding-agent"],
-  "files": ["dist", "README.md"],
+  "keywords": [
+    "ai",
+    "agent",
+    "cli",
+    "ink",
+    "coding-agent"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "bin": {
     "agent": "dist/cli.js"
   },