@devang0907/agent-dev 0.1.1 → 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/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

@@ -5,7 +5,9 @@ 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";
@@ -19,6 +21,7 @@ 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);
@@ -118,6 +121,11 @@ export function App({ session, workdir, onQuit }) {
     }, [session, running, onQuit, exit]);
     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");
@@ -125,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/ModelSelector.js

@@ -33,12 +33,11 @@ export function ModelSelector({ theme, settings, filter, onSelect, onClose }) {
     });
     const providers = ["openai", "groq", "gemini", "free"];
     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" }), 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 hasKey = hasProviderAuth(m.provider, settings);
+    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, !hasKey && _jsx(Text, { color: theme.warning, children: " (no key)" }), selected && _jsxs(Text, { color: theme.textMuted, children: [" ", modelRef(m)] })] })] }, modelRef(m)));
+                            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}`;

package/dist/ui/StartupBanner.js

@@ -1,82 +1,48 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { Box, Text } from "ink";
-const INNER = 42;
-const CHAR_COLORS = {
-    "#": "gray",
-    "@": "cyan",
-    "$": "green",
-    "%": "yellow",
-    "^": "blue",
-    "&": "magenta",
-    "*": "white",
+/**
+ * 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 BOX_CHARS = "+-|";
-function colorForChar(char, theme) {
-    if (BOX_CHARS.includes(char) || char === " ")
-        return theme.border;
-    return CHAR_COLORS[char] ?? theme.text;
+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;
 }
-function ColoredLine({ line, theme }) {
-    const segments = [];
-    let run = "";
-    let runColor = "";
-    for (const char of line) {
-        const color = colorForChar(char, theme);
-        if (run && color !== runColor) {
-            segments.push({ text: run, color: runColor });
-            run = char;
-            runColor = color;
-        }
-        else {
-            run += char;
-            runColor = color;
-        }
+/** 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));
     }
-    if (run)
-        segments.push({ text: run, color: runColor });
-    return (_jsx(Text, { children: segments.map((s, i) => (_jsx(Text, { color: s.color, children: s.text }, i))) }));
+    return lines;
 }
-function center(text) {
-    if (text.length >= INNER)
-        return text.slice(0, INNER);
-    const pad = INNER - text.length;
-    const left = Math.floor(pad / 2);
-    return " ".repeat(left) + text + " ".repeat(pad - left);
-}
-function row(content) {
-    const inner = content.length > INNER ? content.slice(0, INNER) : content.padEnd(INNER);
-    return "|" + inner + "|";
-}
-function border() {
-    return "+" + "-".repeat(INNER) + "+";
-}
-function buildRobotLines() {
-    // Every line in `head` is built to the same fixed width (23 chars) so
-    // center() applies identical padding to each one and the face stays
-    // aligned: antenna -> rounded head -> eyes -> mouth grille -> bolts.
-    const head = [
-        "." + "-".repeat(21) + ".", // head top, rounded corners
-        "|" + " ".repeat(6) + "@@" + " ".repeat(5) + "@@" + " ".repeat(6) + "|", // eyes
-        "|" + " ".repeat(21) + "|", // visor gap
-        "|" + " ".repeat(6) + "# # # # #" + " ".repeat(6) + "|", // mouth grille
-        "'" + "-".repeat(21) + "'", // head bottom, rounded corners
-        " ".repeat(9) + "+" + " ".repeat(3) + "+" + " ".repeat(9), // neck bolts
-    ];
-    return [
-        border(),
-        row(center("#%@$^&*  AGENT-DEV  *&^$@#%")),
-        row(""),
-        ...head.map((line) => row(center(line))),
-        row(""),
-        border(),
-    ];
-}
-const ROBOT_LINES = buildRobotLines();
-const ROBOT_MINI = "<@ @>  AGENT-DEV  <@ @>";
+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(ColoredLine, { line: ROBOT_MINI, theme: theme }) }));
+        return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: color, bold: true, children: LOGO_MINI }) }));
     }
-    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: ROBOT_LINES.map((line, i) => (_jsx(ColoredLine, { line: line, theme: theme }, i))) }));
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: LOGO_LINES.map((line, i) => (_jsx(Text, { color: color, bold: true, children: line }, i))) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devang0907/agent-dev",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Minimal terminal coding agent",
   "type": "module",
   "license": "MIT",