@almyty/chat 0.1.4 → 0.2.0

package/README.md

@@ -1,33 +1,40 @@
 # @almyty/chat
 
-Interactive chat REPL for almyty agents. Supports both workflow and autonomous agent modes.
+Interactive chat REPL for almyty agents. Built with [ink](https://github.com/vadimdemedes/ink) (React for CLI).
 
 ## Quick start
 
 ```bash
 $ npx @almyty/auth login
-$ npx @almyty/chat
-$ npx @almyty/chat my-research-bot
+$ npx @almyty/chat acme/support-bot
 ```
 
 ## Usage
 
-Run without arguments to pick an agent from an interactive menu, or pass a name or ID to connect directly.
-
-```bash
-$ npx @almyty/chat              # interactive agent picker
-$ npx @almyty/chat <name|id>    # connect to a specific agent
+```
+Usage:
+  npx @almyty/chat <org>/<agent-slug>
+  npx @almyty/chat <org>/<agent-slug> --resume <conversation-id>
+  npx @almyty/chat                    # interactive agent picker
+
+Commands:
+  /agents   browse and switch agents
+  /tools    show available tools
+  /help     show commands
+  /clear    clear conversation
+  /quit     exit (shows resume command)
 ```
 
-## REPL commands
+## Features
 
-| Command | Description |
-|---------|-------------|
-| `/switch <agent>` | Switch to a different agent |
-| `/agents` | List agents (current one marked) |
-| `/clear` | Clear the screen |
-| `/help` | Show available commands |
-| `/quit` | Exit the REPL |
+- **Gateway routing** -- agents addressed as `<org>/<agent-slug>`
+- **Resume conversations** -- `--resume <conversation-id>` picks up where you left off; `/quit` prints the resume command
+- **Arrow-key agent picker** -- run without arguments to browse and select
+- **Slash commands** -- tab autocomplete with fuzzy prefix matching
+- **Command palette** -- arrow-key navigation through matching commands
+- **Input history** -- up/down arrows cycle through previous messages (derived from conversation, including resumed history)
+- **SSE streaming** -- real-time tool calls and agent responses via server-sent events
+- **Markdown rendering** -- bold, inline code, code blocks, lists, headers
 
 ## Authentication
 

package/dist/app.d.ts

@@ -0,0 +1,17 @@
+import type { AlmytyClient, GatewayClient, AgentInfo } from '@almyty/client';
+import type { Message } from './components.js';
+export interface AppState {
+    agent: AgentInfo;
+    messages: Message[];
+    loading: boolean;
+    loadingLabel: string;
+    conversationId: string | null;
+    pendingRunId: string | null;
+}
+export declare let exitMessage: string;
+export declare function ChatApp({ client, initialAgent, gw, resumeConversationId }: {
+    client: AlmytyClient;
+    initialAgent: AgentInfo;
+    gw: GatewayClient;
+    resumeConversationId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { Header, MessageView, LoadingIndicator, AgentSelector } from './components.js';
+import { SLASH_COMMANDS, COMMAND_DESCS, resolveSlash, getSuggestion, ALIASES } from './commands.js';
+// Mutable module-level variable; written by ChatApp, read by main() after exit
+export let exitMessage = '';
+// ── Chat app ────────────────────────────────────────────────────
+export function ChatApp({ client, initialAgent, gw, resumeConversationId }) {
+    const { exit } = useApp();
+    const [state, setState] = useState({
+        agent: initialAgent,
+        messages: [],
+        loading: false,
+        loadingLabel: 'Thinking',
+        conversationId: resumeConversationId ?? null,
+        pendingRunId: null,
+    });
+    // Load conversation history on resume
+    useEffect(() => {
+        if (!resumeConversationId)
+            return;
+        (async () => {
+            setState(s => ({ ...s, loading: true, loadingLabel: 'Loading history' }));
+            try {
+                const history = await gw.getConversationMessages(resumeConversationId);
+                const msgs = history
+                    .filter(m => m.role === 'user' || m.role === 'assistant')
+                    .map(m => ({
+                    role: m.role === 'user' ? 'user' : 'agent',
+                    text: m.content,
+                }));
+                setState(s => ({ ...s, messages: msgs, loading: false }));
+            }
+            catch {
+                setState(s => ({ ...s, loading: false }));
+            }
+        })();
+    }, [resumeConversationId]);
+    const [input, setInput] = useState('');
+    const [paletteCursor, setPaletteCursor] = useState(0);
+    // Input history derived from conversation — includes resumed messages
+    const inputHistory = state.messages.filter(m => m.role === 'user').map(m => m.text);
+    const [historyIdx, setHistoryIdx] = useState(-1);
+    const [showPicker, setShowPicker] = useState(false);
+    const [pickerAgents, setPickerAgents] = useState([]);
+    // Command palette matches
+    const slashMatches = input.startsWith('/') && !input.includes(' ')
+        ? SLASH_COMMANDS.filter(c => c.startsWith(input.slice(1).toLowerCase()))
+        : [];
+    const paletteOpen = input.startsWith('/') && slashMatches.length > 0;
+    useInput((ch, key) => {
+        if (state.loading)
+            return;
+        // Command palette navigation
+        if (paletteOpen) {
+            if (key.upArrow) {
+                setPaletteCursor(c => (c - 1 + slashMatches.length) % slashMatches.length);
+                return;
+            }
+            if (key.downArrow) {
+                setPaletteCursor(c => (c + 1) % slashMatches.length);
+                return;
+            }
+            if (key.tab) {
+                setInput(`/${slashMatches[paletteCursor]}`);
+                setPaletteCursor(0);
+                return;
+            }
+            return;
+        }
+        // Input history — up/down arrows always, like Claude Code
+        if (key.upArrow && inputHistory.length > 0) {
+            const newIdx = Math.min(historyIdx + 1, inputHistory.length - 1);
+            setHistoryIdx(newIdx);
+            setInput(inputHistory[inputHistory.length - 1 - newIdx]);
+            return;
+        }
+        if (key.downArrow) {
+            if (historyIdx > 0) {
+                const newIdx = historyIdx - 1;
+                setHistoryIdx(newIdx);
+                setInput(inputHistory[inputHistory.length - 1 - newIdx]);
+            }
+            else if (historyIdx === 0) {
+                setHistoryIdx(-1);
+                setInput('');
+            }
+            return;
+        }
+    });
+    // Reset palette cursor when input changes
+    const handleInputChange = useCallback((val) => {
+        setInput(val);
+        setPaletteCursor(0);
+    }, []);
+    const addMessage = useCallback((msg) => {
+        setState(s => ({ ...s, messages: [...s.messages, msg] }));
+    }, []);
+    const handleSubmit = useCallback(async (value) => {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return;
+        setInput('');
+        setHistoryIdx(-1);
+        // Slash commands
+        if (trimmed.startsWith('/')) {
+            const [raw, ...args] = trimmed.slice(1).split(/\s+/);
+            const cmd = resolveSlash(raw);
+            if (!cmd) {
+                addMessage({ role: 'error', text: `Unknown command: /${raw}` });
+                addMessage({ role: 'info', text: `Commands: /help /agents /clear /quit` });
+                return;
+            }
+            if (cmd !== raw.toLowerCase() && !Object.entries(ALIASES).some(([k, v]) => k === raw.toLowerCase() && v === cmd)) {
+                addMessage({ role: 'info', text: `→ /${cmd}` });
+            }
+            switch (cmd) {
+                case 'quit':
+                    const agentRef = `${gw.orgSlug}/${gw.agentSlug}`;
+                    exitMessage = state.conversationId
+                        ? `\nTo resume: npx @almyty/chat ${agentRef} --resume ${state.conversationId}\n`
+                        : '';
+                    exit();
+                    return;
+                case 'clear':
+                    setState(s => ({ ...s, messages: [] }));
+                    return;
+                case 'help':
+                    addMessage({ role: 'info', text: '/agents  browse and switch agents' });
+                    addMessage({ role: 'info', text: '/tools   show available tools' });
+                    addMessage({ role: 'info', text: '/clear   clear conversation' });
+                    addMessage({ role: 'info', text: '/help    show this help' });
+                    addMessage({ role: 'info', text: '/quit    exit' });
+                    addMessage({ role: 'info', text: 'Tab to autocomplete commands.' });
+                    return;
+                case 'tools': {
+                    const tools = state.agent.tools;
+                    if (!tools?.length) {
+                        addMessage({ role: 'info', text: 'No tools configured for this agent.' });
+                        return;
+                    }
+                    addMessage({ role: 'info', text: `${tools.length} tool${tools.length > 1 ? 's' : ''} available:` });
+                    for (const tool of tools) {
+                        const desc = tool.description ? ` — ${tool.description}` : '';
+                        addMessage({ role: 'tool', text: `${tool.name}${desc}` });
+                    }
+                    return;
+                }
+                case 'agents': {
+                    const target = args.join(' ').trim();
+                    if (target) {
+                        setState(s => ({ ...s, loading: true, loadingLabel: 'Switching' }));
+                        const found = await client.findAgentByNameOrId(target);
+                        setState(s => ({ ...s, loading: false }));
+                        if (!found) {
+                            addMessage({ role: 'error', text: `Agent "${target}" not found` });
+                            return;
+                        }
+                        setState(s => ({
+                            ...s,
+                            agent: found,
+                            messages: [],
+                            conversationId: null,
+                            pendingRunId: null,
+                        }));
+                        return;
+                    }
+                    setState(s => ({ ...s, loading: true, loadingLabel: 'Loading' }));
+                    const agents = await client.listAgents();
+                    setState(s => ({ ...s, loading: false }));
+                    setPickerAgents(agents);
+                    setShowPicker(true);
+                    return;
+                }
+            }
+            return;
+        }
+        // Regular message
+        addMessage({ role: 'user', text: trimmed });
+        setState(s => ({ ...s, loading: true, loadingLabel: 'Thinking' }));
+        try {
+            if (state.agent.mode === 'autonomous') {
+                let runId;
+                if (state.pendingRunId) {
+                    await gw.sendRunInput(state.pendingRunId, trimmed);
+                    runId = state.pendingRunId;
+                    setState(s => ({ ...s, pendingRunId: null }));
+                }
+                else {
+                    const run = await gw.startRun(trimmed, {
+                        conversationId: state.conversationId ?? undefined,
+                    });
+                    runId = run.id;
+                    if (run.conversationId) {
+                        setState(s => ({ ...s, conversationId: run.conversationId }));
+                    }
+                }
+                // Stream events — show tool calls, sub-agents, chunks in real time
+                let streamedContent = '';
+                const result = await gw.streamRun(runId, (event) => {
+                    switch (event.type) {
+                        case 'llm.started':
+                            setState(s => ({ ...s, loadingLabel: 'Thinking' }));
+                            break;
+                        case 'llm.chunk': {
+                            const chunk = event.data.content;
+                            if (chunk)
+                                streamedContent += chunk;
+                            break;
+                        }
+                        case 'llm.response':
+                            setState(s => ({ ...s, loadingLabel: 'Processing' }));
+                            break;
+                        case 'tool.started': {
+                            const toolName = event.data.tool;
+                            if (toolName) {
+                                setState(s => ({ ...s, loading: false }));
+                                addMessage({ role: 'tool', text: toolName });
+                                setState(s => ({ ...s, loading: true, loadingLabel: `Running ${toolName}` }));
+                            }
+                            break;
+                        }
+                        case 'tool.result': {
+                            const tool = event.data.tool;
+                            const success = event.data.success;
+                            if (tool) {
+                                addMessage({ role: 'info', text: `${tool} ${success ? 'completed' : 'failed'}` });
+                            }
+                            break;
+                        }
+                        case 'step.completed':
+                            break;
+                        case 'run.completed': {
+                            const output = event.data.output;
+                            if (output) {
+                                const text = typeof output === 'string' ? output : JSON.stringify(output, null, 2);
+                                streamedContent = text;
+                            }
+                            break;
+                        }
+                        case 'run.failed': {
+                            const error = event.data.error;
+                            addMessage({ role: 'error', text: error || 'Run failed' });
+                            break;
+                        }
+                    }
+                });
+                setState(s => ({ ...s, loading: false }));
+                // If still running after stream, poll to completion
+                let finalResult = result;
+                if (result.status === 'running') {
+                    finalResult = await gw.pollRun(runId);
+                }
+                // Show final output
+                if (finalResult.status === 'completed') {
+                    const text = streamedContent
+                        || (finalResult.output != null ? (typeof finalResult.output === 'string' ? finalResult.output : JSON.stringify(finalResult.output, null, 2)) : '');
+                    if (text)
+                        addMessage({ role: 'agent', text });
+                }
+                else if (finalResult.status === 'waiting_input') {
+                    setState(s => ({ ...s, pendingRunId: runId }));
+                    addMessage({ role: 'info', text: 'Waiting for your input' });
+                }
+                else if (finalResult.status === 'failed' && !streamedContent) {
+                    addMessage({ role: 'error', text: finalResult.error || 'Run failed' });
+                }
+            }
+            else {
+                // Workflow: synchronous invoke
+                const result = await gw.invoke({ message: trimmed });
+                setState(s => ({ ...s, loading: false }));
+                const output = result?.output ?? result?.data?.output ?? result;
+                if (output != null) {
+                    const text = typeof output === 'string' ? output : JSON.stringify(output, null, 2);
+                    addMessage({ role: 'agent', text });
+                }
+            }
+        }
+        catch (err) {
+            setState(s => ({ ...s, loading: false }));
+            addMessage({ role: 'error', text: err.message });
+        }
+    }, [state.agent, state.conversationId, state.pendingRunId, client, addMessage, exit]);
+    const handlePickerSelect = useCallback((agent) => {
+        setShowPicker(false);
+        if (agent.id === state.agent.id)
+            return;
+        setState(s => ({
+            ...s,
+            agent,
+            messages: [],
+            conversationId: null,
+            pendingRunId: null,
+        }));
+    }, [state.agent.id]);
+    const suggestion = getSuggestion(input);
+    if (showPicker) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { agent: state.agent, conversationId: state.conversationId }), _jsx(AgentSelector, { agents: pickerAgents, onSelect: handlePickerSelect })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { agent: state.agent, conversationId: state.conversationId }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 2, overflow: "hidden", children: [state.messages.map((msg, i) => (_jsx(MessageView, { msg: msg }, i))), state.loading && _jsx(LoadingIndicator, { label: state.loadingLabel })] }), paletteOpen && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: slashMatches.map((cmd, i) => {
+                    const active = i === paletteCursor;
+                    const padded = `/${cmd}`.padEnd(10);
+                    const desc = COMMAND_DESCS[cmd] ?? '';
+                    const line = `${active ? '❯' : ' '} ${padded} ${desc}`;
+                    return _jsx(Text, { color: active ? '#8b5cf6' : undefined, bold: active, wrap: "truncate", children: line }, cmd);
+                }) })), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: '─'.repeat(Math.min(process.stdout.columns || 80, 120)) }) }), _jsxs(Box, { paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: "#8b5cf6", children: "\u276F " }), _jsx(Box, { flexGrow: 1, children: _jsx(TextInput, { value: input, onChange: handleInputChange, onSubmit: (val) => {
+                                if (paletteOpen && slashMatches.length > 0) {
+                                    const selected = `/${slashMatches[paletteCursor]}`;
+                                    setInput('');
+                                    setPaletteCursor(0);
+                                    handleSubmit(selected);
+                                    return;
+                                }
+                                handleSubmit(val);
+                            }, placeholder: "Type a message or / for commands" }) })] }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { dimColor: true, children: [state.agent.name, state.agent.tools?.length ? ` · ${state.agent.tools.length} tools` : '', state.conversationId ? ` · ${state.conversationId.slice(0, 8)}` : ''] }) })] }));
+}

package/dist/commands.d.ts

@@ -0,0 +1,5 @@
+export declare const SLASH_COMMANDS: readonly ["agents", "tools", "help", "clear", "quit"];
+export declare const ALIASES: Record<string, string>;
+export declare const COMMAND_DESCS: Record<string, string>;
+export declare function resolveSlash(input: string): string | null;
+export declare function getSuggestion(partial: string): string;

package/dist/commands.js

@@ -0,0 +1,36 @@
+// ── Slash command resolution ────────────────────────────────────
+export const SLASH_COMMANDS = ['agents', 'tools', 'help', 'clear', 'quit'];
+export const ALIASES = {
+    agent: 'agents', ag: 'agents', switch: 'agents', sw: 'agents',
+    tool: 'tools', t: 'tools',
+    h: 'help', '?': 'help',
+    cls: 'clear', c: 'clear',
+    exit: 'quit', q: 'quit',
+};
+export const COMMAND_DESCS = {
+    agents: 'browse and switch agents',
+    tools: 'show available tools',
+    help: 'show commands',
+    clear: 'clear conversation',
+    quit: 'exit',
+};
+export function resolveSlash(input) {
+    const name = input.toLowerCase();
+    if (SLASH_COMMANDS.includes(name))
+        return name;
+    if (ALIASES[name])
+        return ALIASES[name];
+    const prefixed = SLASH_COMMANDS.filter(c => c.startsWith(name));
+    if (prefixed.length === 1)
+        return prefixed[0];
+    return null;
+}
+export function getSuggestion(partial) {
+    if (!partial.startsWith('/') || partial.includes(' '))
+        return '';
+    const p = partial.slice(1).toLowerCase();
+    if (!p)
+        return '';
+    const match = SLASH_COMMANDS.find(c => c.startsWith(p) && c !== p);
+    return match ? `/${match}` : '';
+}

package/dist/components.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { AgentInfo } from '@almyty/client';
+export interface Message {
+    role: 'user' | 'agent' | 'error' | 'info' | 'tool';
+    text: string;
+}
+export declare function MarkdownText({ children, prefix, prefixColor }: {
+    children: string;
+    prefix?: string;
+    prefixColor?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InlineFormat({ text }: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function boldify(text: string): React.ReactElement;
+export declare function estimateLines(msg: Message, cols: number): number;
+export declare function MessageWindow({ messages, loading, loadingLabel, maxRows, scrollOffset }: {
+    messages: Message[];
+    loading: boolean;
+    loadingLabel: string;
+    maxRows: number;
+    scrollOffset?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ agent, conversationId }: {
+    agent: AgentInfo;
+    conversationId?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MessageView({ msg }: {
+    msg: Message;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function LoadingIndicator({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AgentSelector({ agents, onSelect }: {
+    agents: AgentInfo[];
+    onSelect: (a: AgentInfo) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+// ── Simple markdown rendering ───────────────────────────────────
+export function MarkdownText({ children, prefix, prefixColor }) {
+    const lines = children.split('\n');
+    const elements = [];
+    let inCode = false;
+    let codeLines = [];
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.trimStart().startsWith('```')) {
+            if (!inCode) {
+                inCode = true;
+                codeLines = [];
+            }
+            else {
+                inCode = false;
+                elements.push(_jsx(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, marginTop: 1, marginBottom: 1, children: codeLines.map((cl, j) => (_jsx(Text, { color: "white", backgroundColor: "#333", children: `  ${cl}  ` }, j))) }, `code-${i}`));
+            }
+            continue;
+        }
+        if (inCode) {
+            codeLines.push(line);
+            continue;
+        }
+        // Headers
+        const hm = line.match(/^(#{1,3})\s+(.*)/);
+        if (hm) {
+            elements.push(_jsx(Text, { bold: true, color: "#8b5cf6", children: hm[2] }, i));
+            continue;
+        }
+        // Unordered list
+        const ulm = line.match(/^(\s*)[*-]\s+(.*)/);
+        if (ulm) {
+            elements.push(_jsxs(Text, { children: [ulm[1], _jsx(Text, { color: "#8b5cf6", children: "\u2022" }), " ", _jsx(InlineFormat, { text: ulm[2] })] }, i));
+            continue;
+        }
+        // Ordered list
+        const olm = line.match(/^(\s*)(\d+)\.\s+(.*)/);
+        if (olm) {
+            elements.push(_jsxs(Text, { children: [olm[1], _jsxs(Text, { dimColor: true, children: [olm[2], "."] }), " ", _jsx(InlineFormat, { text: olm[3] })] }, i));
+            continue;
+        }
+        // Blank
+        if (!line.trim()) {
+            elements.push(_jsx(Text, { children: " " }, i));
+            continue;
+        }
+        elements.push(_jsx(Text, { children: _jsx(InlineFormat, { text: line }) }, i));
+    }
+    return _jsx(Box, { flexDirection: "column", children: elements });
+}
+export function InlineFormat({ text }) {
+    // Simple bold/code rendering via split
+    const parts = [];
+    let remaining = text;
+    let idx = 0;
+    while (remaining) {
+        // Inline code
+        const codeMatch = remaining.match(/^(.*?)`([^`]+)`(.*)/);
+        if (codeMatch) {
+            if (codeMatch[1])
+                parts.push(_jsx(Text, { children: boldify(codeMatch[1]) }, idx++));
+            parts.push(_jsx(Text, { backgroundColor: "#333", color: "white", children: ` ${codeMatch[2]} ` }, idx++));
+            remaining = codeMatch[3];
+            continue;
+        }
+        parts.push(_jsx(Text, { children: boldify(remaining) }, idx++));
+        break;
+    }
+    return _jsx(_Fragment, { children: parts });
+}
+export function boldify(text) {
+    const parts = [];
+    let remaining = text;
+    let idx = 0;
+    while (remaining) {
+        const bm = remaining.match(/^(.*?)\*\*(.+?)\*\*(.*)/);
+        if (bm) {
+            if (bm[1])
+                parts.push(_jsx(Text, { children: bm[1] }, idx++));
+            parts.push(_jsx(Text, { bold: true, children: bm[2] }, idx++));
+            remaining = bm[3];
+            continue;
+        }
+        parts.push(_jsx(Text, { children: remaining }, idx++));
+        break;
+    }
+    return _jsx(_Fragment, { children: parts });
+}
+// ── Message window (manual scroll) ──────────────────────────────
+export function estimateLines(msg, cols) {
+    const textWidth = Math.max(cols - 10, 20);
+    const lines = msg.text.split('\n');
+    let total = 1; // margin
+    for (const line of lines) {
+        total += Math.max(1, Math.ceil(Math.max(line.length, 1) / textWidth));
+    }
+    return total;
+}
+export function MessageWindow({ messages, loading, loadingLabel, maxRows, scrollOffset = 0 }) {
+    const cols = process.stdout.columns || 80;
+    const available = Math.max(maxRows, 5);
+    // Calculate the end of the visible window (shifted by scrollOffset)
+    const endIdx = Math.max(0, messages.length - scrollOffset);
+    // Walk backwards from endIdx to find how many messages fit
+    let usedRows = loading && scrollOffset === 0 ? 2 : 0;
+    let startIdx = endIdx;
+    for (let i = endIdx - 1; i >= 0; i--) {
+        const est = estimateLines(messages[i], cols);
+        if (usedRows + est > available && i < endIdx - 1)
+            break;
+        usedRows += est;
+        startIdx = i;
+    }
+    const visible = messages.slice(startIdx, endIdx);
+    const hasEarlier = startIdx > 0;
+    const hasLater = endIdx < messages.length;
+    return (_jsxs(Box, { flexDirection: "column", children: [hasEarlier && (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2191 ", startIdx, " earlier \u00B7 scroll to see more"] }) })), visible.map((msg, i) => (_jsx(MessageView, { msg: msg }, startIdx + i))), loading && scrollOffset === 0 && _jsx(LoadingIndicator, { label: loadingLabel }), hasLater && (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2193 ", messages.length - endIdx, " newer \u00B7 scroll to see more"] }) }))] }));
+}
+// ── Components ──────────────────────────────────────────────────
+export function Header({ agent, conversationId }) {
+    const convSuffix = conversationId ? `  ${conversationId.slice(0, 8)}` : '';
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "#555", paddingX: 1, flexDirection: "column", children: [_jsx(Text, { wrap: "truncate", children: `⚡ almyty · ${agent.name}  ${agent.mode || ''}${convSuffix}` }), agent.description && _jsx(Text, { dimColor: true, wrap: "truncate", children: agent.description })] }));
+}
+export function MessageView({ msg }) {
+    switch (msg.role) {
+        case 'user':
+            return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["\u276F ", msg.text] }) }));
+        case 'agent':
+            return (_jsxs(Box, { marginTop: 1, paddingLeft: 2, flexDirection: "column", children: [_jsx(Text, { color: "#8b5cf6", children: "\u2502" }), _jsx(Box, { paddingLeft: 2, children: _jsx(MarkdownText, { children: msg.text }) })] }));
+        case 'tool':
+            return (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2502 \u25B8 ", msg.text] }) }));
+        case 'error':
+            return (_jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsxs(Text, { color: "red", children: ["\u2502 ", msg.text] }) }));
+        case 'info':
+            return (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2502 ", msg.text] }) }));
+        default:
+            return null;
+    }
+}
+export function LoadingIndicator({ label }) {
+    return (_jsxs(Box, { marginTop: 1, paddingLeft: 2, children: [_jsx(Text, { color: "#8b5cf6", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { dimColor: true, children: [" ", label] })] }));
+}
+// ── Agent selector ──────────────────────────────────────────────
+export function AgentSelector({ agents, onSelect }) {
+    const [cursor, setCursor] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow)
+            setCursor(c => (c - 1 + agents.length) % agents.length);
+        if (key.downArrow)
+            setCursor(c => (c + 1) % agents.length);
+        if (key.return)
+            onSelect(agents[cursor]);
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Text, { dimColor: true, children: "  Select an agent:" }), _jsx(Text, { children: " " }), agents.map((ag, i) => (_jsxs(Box, { paddingLeft: 2, children: [_jsxs(Text, { color: i === cursor ? '#8b5cf6' : undefined, children: [i === cursor ? '❯' : ' ', ' '] }), _jsx(Text, { bold: i === cursor, children: ag.name }), _jsxs(Text, { dimColor: true, children: [" ", ag.mode] })] }, ag.id))), agents[cursor]?.description && (_jsx(Box, { paddingLeft: 4, paddingTop: 1, children: _jsx(Text, { dimColor: true, children: agents[cursor].description }) }))] }));
+}

package/dist/index.d.ts

@@ -1,9 +1,2 @@
 #!/usr/bin/env node
-/**
- * @almyty/chat — interactive agent chat.
- *
- *   npx @almyty/chat                       # pick from a menu
- *   npx @almyty/chat <agent>               # start chatting
- *   npx @almyty/chat <agent> --resume <id> # resume a conversation
- */
-export {};
+export declare const VERSION = "0.2.0";

package/dist/index.js

@@ -1,333 +1,10 @@
 #!/usr/bin/env node
-/**
- * @almyty/chat — interactive agent chat.
- *
- *   npx @almyty/chat                       # pick from a menu
- *   npx @almyty/chat <agent>               # start chatting
- *   npx @almyty/chat <agent> --resume <id> # resume a conversation
- */
-import { createInterface } from 'readline';
-import { AlmytyClient, resolveCredentialsOrExit } from '@almyty/client';
-const VERSION = '0.1.3';
-// ── ANSI helpers ────────────────────────────────────────────────
-const DIM = '\x1b[2m';
-const BOLD = '\x1b[1m';
-const RESET = '\x1b[0m';
-const VIOLET = '\x1b[38;5;141m';
-const CYAN = '\x1b[36m';
-const RED = '\x1b[31m';
-const GRAY = '\x1b[90m';
-const CLEAR_LINE = '\x1b[2K\r';
-const isTTY = process.stdout.isTTY ?? false;
-function dim(s) { return isTTY ? `${DIM}${s}${RESET}` : s; }
-function bold(s) { return isTTY ? `${BOLD}${s}${RESET}` : s; }
-function violet(s) { return isTTY ? `${VIOLET}${s}${RESET}` : s; }
-function cyan(s) { return isTTY ? `${CYAN}${s}${RESET}` : s; }
-function red(s) { return isTTY ? `${RED}${s}${RESET}` : s; }
-function gray(s) { return isTTY ? `${GRAY}${s}${RESET}` : s; }
-// ── Spinner ─────────────────────────────────────────────────────
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-class Spinner {
-    interval = null;
-    frame = 0;
-    start(label = 'Thinking') {
-        if (!isTTY)
-            return;
-        this.frame = 0;
-        this.interval = setInterval(() => {
-            const f = SPINNER_FRAMES[this.frame % SPINNER_FRAMES.length];
-            process.stdout.write(`${CLEAR_LINE}${GRAY}${f} ${label}...${RESET}`);
-            this.frame++;
-        }, 80);
-    }
-    stop() {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = null;
-            process.stdout.write(CLEAR_LINE);
-        }
-    }
-}
-// ── Word wrapping ───────────────────────────────────────────────
-function wordWrap(text, width) {
-    if (width <= 0)
-        return text;
-    const lines = [];
-    for (const paragraph of text.split('\n')) {
-        if (paragraph.length <= width) {
-            lines.push(paragraph);
-            continue;
-        }
-        let line = '';
-        for (const word of paragraph.split(/\s+/)) {
-            if (line.length + word.length + 1 > width && line.length > 0) {
-                lines.push(line);
-                line = word;
-            }
-            else {
-                line = line ? `${line} ${word}` : word;
-            }
-        }
-        if (line)
-            lines.push(line);
-    }
-    return lines.join('\n');
-}
-// ── Display ─────────────────────────────────────────────────────
-function printBanner(agent) {
-    const cols = process.stdout.columns || 80;
-    const line = gray('─'.repeat(Math.min(cols, 60)));
-    console.log('');
-    console.log(line);
-    console.log(`  ${violet(bold(agent.name))}  ${dim(agent.mode ?? '')}`);
-    if (agent.description)
-        console.log(`  ${dim(agent.description)}`);
-    console.log(line);
-    console.log(dim('  Type a message to chat. /help for commands, /quit to exit.'));
-    console.log('');
-}
-function printResponse(text) {
-    const cols = process.stdout.columns || 80;
-    const maxWidth = Math.min(cols - 2, 78);
-    const wrapped = wordWrap(text.trim(), maxWidth);
-    console.log('');
-    for (const line of wrapped.split('\n')) {
-        console.log(`  ${line}`);
-    }
-    console.log('');
-}
-function printToolCall(name) {
-    process.stdout.write(`${CLEAR_LINE}${gray(`  > ${name}`)}\n`);
-}
-function printError(msg) {
-    console.log(`\n  ${red('error')} ${msg}\n`);
-}
-// ── Agent picker ────────────────────────────────────────────────
-async function pickAgent(client) {
-    const agents = await client.listAgents();
-    if (agents.length === 0) {
-        printError('No agents found. Create one at https://app.almyty.com/agents');
-        return null;
-    }
-    if (agents.length === 1)
-        return agents[0];
-    console.log('');
-    console.log(bold('  Select an agent:'));
-    console.log('');
-    agents.forEach((a, i) => {
-        const mode = a.mode ? dim(` [${a.mode}]`) : '';
-        console.log(`  ${cyan(`${i + 1}.`)} ${a.name}${mode}`);
-    });
-    console.log('');
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    const answer = await new Promise((resolve) => {
-        rl.question(`  ${cyan('>')} `, (input) => {
-            rl.close();
-            resolve(input.trim());
-        });
-    });
-    const idx = parseInt(answer, 10) - 1;
-    if (Number.isNaN(idx) || idx < 0 || idx >= agents.length) {
-        printError('Invalid selection.');
-        return null;
-    }
-    return agents[idx];
-}
-// ── Slash commands ──────────────────────────────────────────────
-async function handleSlashCommand(command, state) {
-    const [cmd, ...rest] = command.slice(1).trim().split(/\s+/);
-    switch (cmd) {
-        case 'quit':
-        case 'exit':
-        case 'q':
-            return { exit: true };
-        case 'help':
-        case 'h':
-            console.log('');
-            console.log(`  ${cyan('/switch')} ${dim('<agent>')}   switch to a different agent`);
-            console.log(`  ${cyan('/agents')}            list available agents`);
-            console.log(`  ${cyan('/clear')}             clear the screen`);
-            console.log(`  ${cyan('/quit')}              exit`);
-            console.log('');
-            return {};
-        case 'clear':
-        case 'c':
-            process.stdout.write('\x1b[2J\x1b[H');
-            printBanner(state.agent);
-            return {};
-        case 'agents': {
-            const agents = await state.client.listAgents();
-            if (agents.length === 0) {
-                console.log(dim('  (no agents)'));
-                return {};
-            }
-            console.log('');
-            for (const a of agents) {
-                const marker = a.id === state.agent.id ? violet('>') : ' ';
-                const mode = a.mode ? dim(` [${a.mode}]`) : '';
-                console.log(`  ${marker} ${a.name}${mode}`);
-            }
-            console.log('');
-            return {};
-        }
-        case 'switch': {
-            const target = rest.join(' ').trim();
-            if (!target) {
-                console.log(dim('  Usage: /switch <agent>'));
-                return {};
-            }
-            const next = await state.client.findAgentByNameOrId(target);
-            if (!next) {
-                printError(`Agent "${target}" not found.`);
-                return {};
-            }
-            state.agent = next;
-            state.pendingRunId = null;
-            state.conversationId = null;
-            printBanner(state.agent);
-            return {};
-        }
-        default:
-            console.log(dim(`  Unknown command: /${cmd}`));
-            return {};
-    }
-}
-// ── Turn handling ───────────────────────────────────────────────
-async function handleAutonomousTurn(state, message) {
-    const spinner = new Spinner();
-    let runId;
-    try {
-        spinner.start();
-        if (state.pendingRunId) {
-            await state.client.sendRunInput(state.agent.id, state.pendingRunId, message);
-            runId = state.pendingRunId;
-            state.pendingRunId = null;
-        }
-        else {
-            const run = await state.client.startRun(state.agent.id, message, {
-                conversationId: state.conversationId ?? undefined,
-            });
-            runId = run.id;
-            if (run.conversationId) {
-                state.conversationId = run.conversationId;
-            }
-        }
-        // Poll for completion — show tool calls as they happen
-        const seenSteps = new Set();
-        const final = await state.client.pollRun(state.agent.id, runId, {
-            intervalMs: 800,
-            onStep: (run) => {
-                const steps = run.steps ?? [];
-                for (let i = 0; i < steps.length; i++) {
-                    if (seenSteps.has(i))
-                        continue;
-                    seenSteps.add(i);
-                    const step = steps[i];
-                    if (step?.type === 'tool_call' && step?.input?.tool) {
-                        spinner.stop();
-                        printToolCall(step.input.tool);
-                        spinner.start();
-                    }
-                }
-            },
-        });
-        spinner.stop();
-        if (final.status === 'waiting_input') {
-            state.pendingRunId = runId;
-            console.log(dim('\n  (waiting for your input)\n'));
-            return;
-        }
-        if (final.status === 'completed' && final.output != null) {
-            const text = typeof final.output === 'string' ? final.output : JSON.stringify(final.output, null, 2);
-            printResponse(text);
-            return;
-        }
-        if (final.status === 'failed') {
-            printError(final.error || 'Run failed');
-            return;
-        }
-        if (final.status === 'cancelled') {
-            console.log(dim('\n  (cancelled)\n'));
-            return;
-        }
-    }
-    catch (err) {
-        spinner.stop();
-        throw err;
-    }
-}
-async function handleWorkflowTurn(state, message) {
-    const spinner = new Spinner();
-    try {
-        spinner.start();
-        const result = await state.client.invokeAgent(state.agent.id, { message });
-        spinner.stop();
-        const output = result?.output ?? result?.data?.output ?? result;
-        if (output == null) {
-            console.log(dim('\n  (no output)\n'));
-            return;
-        }
-        const text = typeof output === 'string' ? output : JSON.stringify(output, null, 2);
-        printResponse(text);
-    }
-    catch (err) {
-        spinner.stop();
-        throw err;
-    }
-}
-async function handleUserTurn(state, message) {
-    if (state.agent.mode === 'autonomous') {
-        return handleAutonomousTurn(state, message);
-    }
-    return handleWorkflowTurn(state, message);
-}
-// ── Main loop ───────────────────────────────────────────────────
-async function startChat(client, agent, resumeConversationId) {
-    const state = { client, agent, pendingRunId: null, conversationId: resumeConversationId ?? null };
-    if (resumeConversationId) {
-        console.log(dim(`  Resuming conversation ${resumeConversationId}`));
-    }
-    printBanner(state.agent);
-    const prompt = `${VIOLET}>${RESET} `;
-    const rl = createInterface({
-        input: process.stdin,
-        output: process.stdout,
-        prompt: isTTY ? prompt : '> ',
-    });
-    rl.prompt();
-    rl.on('line', async (raw) => {
-        const line = raw.trim();
-        if (!line) {
-            rl.prompt();
-            return;
-        }
-        if (line.startsWith('/')) {
-            try {
-                const { exit } = await handleSlashCommand(line, state);
-                if (exit) {
-                    rl.close();
-                    return;
-                }
-            }
-            catch (err) {
-                printError(err.message);
-            }
-            rl.prompt();
-            return;
-        }
-        try {
-            await handleUserTurn(state, line);
-        }
-        catch (err) {
-            printError(err.message);
-        }
-        rl.prompt();
-    });
-    rl.on('close', () => {
-        console.log('');
-        process.exit(0);
-    });
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, Box, Text } from 'ink';
+import { AlmytyClient, resolveCredentialsOrExit, getOrgSlugFromToken } from '@almyty/client';
+import { AgentSelector } from './components.js';
+import { ChatApp, exitMessage } from './app.js';
+export const VERSION = '0.2.0';
 // ── Entry point ─────────────────────────────────────────────────
 async function main() {
     const argv = process.argv.slice(2);
@@ -336,57 +13,77 @@ async function main() {
         return;
     }
     if (argv.includes('--help') || argv.includes('-h')) {
-        console.log(`
-${bold('almyty chat')} ${dim(`v${VERSION}`)}
-
-${bold('Usage:')}
-  npx @almyty/chat                                 Pick an agent
-  npx @almyty/chat ${dim('<agent>')}                          Start chatting
-  npx @almyty/chat ${dim('<agent>')} --resume ${dim('<conv-id>')}    Resume conversation
-
-${bold('Commands:')}
-  /switch ${dim('<agent>')}   switch agent
-  /agents          list agents
-  /clear           clear screen
-  /quit            exit
-
-${bold('Auth:')}
-  npx @almyty/auth login
-`);
+        console.log(`almyty chat v${VERSION}\n\nUsage:\n  npx @almyty/chat <org>/<agent-slug>\n  npx @almyty/chat <org>/<agent-slug> --resume <conversation-id>\n\nExamples:\n  npx @almyty/chat acme/support-bot\n  npx @almyty/chat myorg/my-agent --resume 60d93c85-...\n\nCommands:\n  /help /agents /clear /quit\n\nAuth:\n  npx @almyty/auth login`);
         return;
     }
     const creds = resolveCredentialsOrExit();
     const client = new AlmytyClient(creds.url, creds.token);
-    let resumeConversationId;
-    const resumeIdx = argv.indexOf('--resume');
-    if (resumeIdx !== -1) {
-        const nextArg = argv[resumeIdx + 1];
-        if (!nextArg || nextArg.startsWith('-')) {
-            printError('Usage: --resume <conversation-id>');
+    let resumeId;
+    const ri = Math.max(argv.indexOf('--resume'), argv.indexOf('-resume'));
+    if (ri !== -1) {
+        resumeId = argv[ri + 1];
+        if (!resumeId || resumeId.startsWith('-')) {
+            console.error('--resume requires a conversation id');
             process.exit(1);
         }
-        resumeConversationId = nextArg;
     }
-    let agent = null;
-    const ref = argv.find((a) => !a.startsWith('-') && a !== resumeConversationId);
-    if (ref) {
-        const spinner = new Spinner();
-        spinner.start('Connecting');
-        agent = await client.findAgentByNameOrId(ref);
-        spinner.stop();
-        if (!agent) {
-            printError(`Agent not found: ${ref}`);
+    const ref = argv.find(arg => !arg.startsWith('-') && arg !== resumeId);
+    // Resolve org slug — from ref (org/slug) or JWT token
+    const defaultOrg = getOrgSlugFromToken(creds.token);
+    let orgSlug;
+    let agentSlug;
+    if (ref && ref.includes('/')) {
+        [orgSlug, agentSlug] = ref.split('/', 2);
+    }
+    else if (ref) {
+        // Bare slug — use org from JWT
+        if (!defaultOrg) {
+            console.error('Cannot determine org. Use org/agent-slug format or log in: npx @almyty/auth login');
             process.exit(1);
         }
+        orgSlug = defaultOrg;
+        agentSlug = ref;
     }
     else {
-        agent = await pickAgent(client);
-        if (!agent)
+        // No arg — interactive picker
+        if (!defaultOrg) {
+            console.error('Usage: npx @almyty/chat <org>/<agent-slug>');
             process.exit(1);
+        }
+        orgSlug = defaultOrg;
+        const agents = await client.listAgents();
+        if (!agents.length) {
+            console.error('No agents found. Create one at https://app.almyty.com/agents');
+            process.exit(1);
+        }
+        if (agents.length === 1) {
+            agentSlug = agents[0].slug || agents[0].name.toLowerCase().replace(/\s+/g, '-');
+        }
+        else {
+            const picked = await new Promise((resolve) => {
+                const { unmount } = render(_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingTop: 1, paddingLeft: 2, children: [_jsx(Text, { color: "#22d3ee", children: "\u26A1" }), _jsx(Text, { color: "#8b5cf6", bold: true, children: " almyty chat" })] }), _jsx(AgentSelector, { agents: agents, onSelect: (a) => { unmount(); resolve(a); } })] }), { exitOnCtrlC: true });
+            });
+            if (!picked)
+                process.exit(0);
+            agentSlug = picked.slug || picked.name.toLowerCase().replace(/\s+/g, '-');
+        }
+    }
+    const gw = client.gateway(orgSlug, agentSlug);
+    let agent;
+    try {
+        agent = await gw.getInfo();
+    }
+    catch {
+        console.error(`Agent not found: ${orgSlug}/${agentSlug}`);
+        process.exit(1);
+    }
+    const { waitUntilExit } = render(_jsx(ChatApp, { client: client, initialAgent: agent, gw: gw, resumeConversationId: resumeId }), { exitOnCtrlC: true });
+    await waitUntilExit();
+    if (exitMessage) {
+        process.stdout.write(exitMessage);
     }
-    await startChat(client, agent, resumeConversationId);
 }
-main().catch((err) => {
-    printError(err.message);
+main().catch(err => {
+    console.error(err.message);
     process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almyty/chat",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Interactive chat REPL with almyty agents",
   "type": "module",
   "main": "dist/index.js",
@@ -27,7 +27,13 @@
   "author": "almyty",
   "license": "BSL-1.1",
   "dependencies": {
-    "@almyty/client": "^0.1.0"
+    "@almyty/client": "^0.1.0",
+    "@types/react": "^19.2.14",
+    "ink": "^7.0.1",
+    "ink-spinner": "^5.0.0",
+    "ink-testing-library": "^4.0.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^19.2.5"
   },
   "devDependencies": {
     "@types/node": "^25.4.0",