@demirarch/recode 0.1.0

package/src/components/ChatScreen.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { useAgent, type DisplayMessage } from '../hooks/useAgent.js';
+import { TopBar } from './TopBar.js';
+import { StatusBar } from './StatusBar.js';
+import { parseCommand } from '../lib/commands.js';
+import { saveConfig } from '../lib/config.js';
+import path from 'path';
+
+const MODEL_EXAMPLES = [
+  'anthropic/claude-sonnet-4-5',
+  'openai/gpt-4o',
+  'google/gemini-2.5-pro',
+  'deepseek/deepseek-r1',
+  'meta-llama/llama-4-maverick',
+  'mistralai/codestral-latest',
+  'qwen/qwen3-235b-a22b',
+  'x-ai/grok-3',
+];
+
+interface ChatScreenProps {
+  model: string;
+  apiKey: string;
+  initialCwd: string;
+  onModelChange: (model: string) => void;
+}
+
+// ── Message Renderer ─────────────────────────────────────────
+
+function RenderMessage({ msg }: { msg: DisplayMessage }) {
+  switch (msg.type) {
+    case 'user':
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold color="#F26207">You</Text>
+          <Text>{msg.content}</Text>
+        </Box>
+      );
+
+    case 'assistant':
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold color="cyan">Recode</Text>
+          <Text wrap="wrap">{msg.content}</Text>
+        </Box>
+      );
+
+    case 'tool_call': {
+      let preview = '';
+      try {
+        const args = JSON.parse(msg.args) as Record<string, unknown>;
+        const firstVal = Object.values(args)[0];
+        preview = typeof firstVal === 'string' ? firstVal.slice(0, 50) : '';
+      } catch { preview = ''; }
+
+      const icon  = msg.status === 'running' ? '⟳' : msg.status === 'done' ? '✓' : '✗';
+      const color = msg.status === 'running' ? 'yellow' : msg.status === 'done' ? 'green' : 'red';
+
+      return (
+        <Box marginBottom={0}>
+          <Text color={color}>{icon} </Text>
+          <Text color="gray">{msg.name}</Text>
+          {preview ? <Text color="gray">  {preview}</Text> : null}
+        </Box>
+      );
+    }
+
+    case 'system':
+      return (
+        <Box flexDirection="column" marginBottom={1} borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text color="gray">{msg.content}</Text>
+        </Box>
+      );
+
+    case 'error':
+      return (
+        <Box marginBottom={1}>
+          <Text color="red">Error: {msg.content}</Text>
+        </Box>
+      );
+
+    default:
+      return null;
+  }
+}
+
+// ── Model Input Overlay ───────────────────────────────────────
+
+function ModelOverlay({
+  currentModel,
+  onConfirm,
+  onCancel,
+}: {
+  currentModel: string;
+  onConfirm: (model: string) => void;
+  onCancel: () => void;
+}) {
+  const [value, setValue] = useState(currentModel);
+  const [error, setError] = useState<string | null>(null);
+
+  useInput((_, key) => {
+    if (key.escape) { onCancel(); return; }
+    if (key.return) {
+      const m = value.trim();
+      if (!m.includes('/')) {
+        setError('Must include provider, e.g.  anthropic/claude-sonnet-4-5');
+        return;
+      }
+      onConfirm(m);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" borderStyle="double" borderColor="#F26207" padding={1} marginX={2}>
+      <Text bold color="#F26207">Change Model  <Text color="gray">(Esc to cancel)</Text></Text>
+      <Box marginTop={1}>
+        <Text color="#F26207">{'> '}</Text>
+        <TextInput value={value} onChange={setValue} placeholder="provider/model-name" />
+      </Box>
+      <Text color="gray" dimColor>Press Enter to confirm</Text>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color="gray" dimColor>Examples:</Text>
+        {MODEL_EXAMPLES.map((e) => (
+          <Text key={e} color="gray" dimColor>  {e}</Text>
+        ))}
+      </Box>
+
+      {error && <Text color="red">{error}</Text>}
+    </Box>
+  );
+}
+
+// ── Main Chat Screen ─────────────────────────────────────────
+
+export function ChatScreen({ model, apiKey, initialCwd, onModelChange }: ChatScreenProps) {
+  const { exit } = useApp();
+  const [cwd, setCwd] = useState(initialCwd);
+  const [input, setInput] = useState('');
+  const [showModelInput, setShowModelInput] = useState(false);
+
+  const { display, thinking, sendMessage, clearHistory, addSystemMessage } =
+    useAgent(model, apiKey, cwd);
+
+  const handleSubmit = async (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed || thinking) return;
+    setInput('');
+
+    const result = parseCommand(trimmed, cwd);
+
+    switch (result.type) {
+      case 'system':       addSystemMessage(result.content); return;
+      case 'open_model_select': setShowModelInput(true);     return;
+      case 'clear':        clearHistory();                   return;
+      case 'exit':         exit();                           return;
+      case 'cd': {
+        const newCwd = path.isAbsolute(result.path)
+          ? result.path
+          : path.resolve(cwd, result.path);
+        setCwd(newCwd);
+        addSystemMessage(`cwd: ${newCwd}`);
+        return;
+      }
+      case 'send_to_ai':   await sendMessage(result.content); return;
+      case 'none':         await sendMessage(trimmed);         return;
+    }
+  };
+
+  const handleModelConfirm = async (newModel: string) => {
+    setShowModelInput(false);
+    onModelChange(newModel);
+    try { await saveConfig({ apiKey, model: newModel }); } catch { /* ignore */ }
+    addSystemMessage(`Model: ${newModel}`);
+  };
+
+  useInput((inp, key) => {
+    if (key.ctrl && inp === 'l') clearHistory();
+    if (key.ctrl && inp === 'c') exit();
+  });
+
+  const visibleMessages = display.slice(-40);
+
+  return (
+    <Box flexDirection="column" height="100%">
+      <TopBar model={model} cwd={cwd} />
+
+      {showModelInput ? (
+        <ModelOverlay
+          currentModel={model}
+          onConfirm={(m) => { void handleModelConfirm(m); }}
+          onCancel={() => setShowModelInput(false)}
+        />
+      ) : (
+        <Box flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
+          {visibleMessages.length === 0 && (
+            <Box marginTop={1}>
+              <Text color="gray">
+                Type a message or <Text color="#F26207">/help</Text> for commands.
+              </Text>
+            </Box>
+          )}
+          {visibleMessages.map((msg, i) => (
+            <RenderMessage key={i} msg={msg} />
+          ))}
+          {thinking && (
+            <Box>
+              <Spinner type="dots" />
+              <Text color="#F26207"> Thinking...</Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box borderStyle="single" borderColor="#F26207" paddingX={1}>
+        <Text bold color="#F26207">{'> '}</Text>
+        <TextInput
+          value={input}
+          onChange={setInput}
+          onSubmit={(v) => { void handleSubmit(v); }}
+          placeholder={thinking ? 'Waiting...' : 'Message Recode...'}
+          focus={!showModelInput}
+        />
+      </Box>
+
+      <StatusBar />
+    </Box>
+  );
+}

package/src/components/SetupScreen.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { saveConfig, type RecodeConfig } from '../lib/config.js';
+
+const EXAMPLES = [
+  'anthropic/claude-sonnet-4-5',
+  'openai/gpt-4o',
+  'google/gemini-2.5-pro',
+  'deepseek/deepseek-r1',
+  'meta-llama/llama-4-maverick',
+  'mistralai/codestral-latest',
+  'qwen/qwen3-235b-a22b',
+  'x-ai/grok-3',
+];
+
+type Step = 'apiKey' | 'model' | 'saving';
+
+interface SetupScreenProps {
+  onComplete: (config: RecodeConfig) => void;
+}
+
+export function SetupScreen({ onComplete }: SetupScreenProps) {
+  const [step, setStep]     = useState<Step>('apiKey');
+  const [apiKey, setApiKey] = useState('');
+  const [model, setModel]   = useState('');
+  const [error, setError]   = useState<string | null>(null);
+
+  useInput((_, key) => {
+    if (!key.return) return;
+
+    if (step === 'apiKey') {
+      if (apiKey.trim().length < 10) {
+        setError('API key too short — paste your OpenRouter key');
+        return;
+      }
+      setError(null);
+      setStep('model');
+      return;
+    }
+
+    if (step === 'model') {
+      const m = model.trim();
+      if (!m.includes('/')) {
+        setError('Model must include provider, e.g.  anthropic/claude-sonnet-4-5');
+        return;
+      }
+      setError(null);
+      void save(m);
+    }
+  });
+
+  const save = async (m: string) => {
+    setStep('saving');
+    const config: RecodeConfig = { apiKey: apiKey.trim(), model: m };
+    try {
+      await saveConfig(config);
+      onComplete(config);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setStep('model');
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={2} gap={1}>
+      <Box flexDirection="column">
+        <Text bold color="#F26207">Recode — First Launch Setup</Text>
+        <Text color="gray">Autonomous AI coding agent by DemirArch</Text>
+        <Text color="gray">Config: ~/recode-data/config.json</Text>
+      </Box>
+
+      {step === 'apiKey' && (
+        <Box flexDirection="column" gap={1} marginTop={1}>
+          <Text>OpenRouter API key:</Text>
+          <Text color="gray" dimColor>Get one at openrouter.ai/keys</Text>
+          <Box>
+            <Text color="#F26207">{'> '}</Text>
+            <TextInput value={apiKey} onChange={setApiKey} mask="*" placeholder="sk-or-..." />
+          </Box>
+          <Text color="gray" dimColor>Press Enter to continue</Text>
+          {error && <Text color="red">{error}</Text>}
+        </Box>
+      )}
+
+      {step === 'model' && (
+        <Box flexDirection="column" gap={1} marginTop={1}>
+          <Text>Model ID  <Text color="gray">(provider/model-name)</Text></Text>
+          <Box>
+            <Text color="#F26207">{'> '}</Text>
+            <TextInput
+              value={model}
+              onChange={setModel}
+              placeholder="anthropic/claude-sonnet-4-5"
+            />
+          </Box>
+          <Text color="gray" dimColor>Press Enter to confirm  •  /model to change later</Text>
+
+          <Box flexDirection="column" marginTop={1}>
+            <Text color="gray" dimColor>Examples:</Text>
+            {EXAMPLES.map((e) => (
+              <Text key={e} color="gray" dimColor>  {e}</Text>
+            ))}
+          </Box>
+
+          {error && <Text color="red">{error}</Text>}
+        </Box>
+      )}
+
+      {step === 'saving' && <Text color="#F26207">Saving config...</Text>}
+    </Box>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+const CMD = ({ c, label }: { c: string; label: string }) => (
+  <Box gap={0} marginRight={2}>
+    <Text bold color="#F26207">{c}</Text>
+    <Text color="gray"> {label}</Text>
+  </Box>
+);
+
+export function StatusBar() {
+  return (
+    <Box borderStyle="single" borderColor="gray" paddingX={1}>
+      <CMD c="/help"  label="help"  />
+      <CMD c="/model" label="model" />
+      <CMD c="/clear" label="clear" />
+      <CMD c="/cd"    label="cd"    />
+      <CMD c="/ls"    label="ls"    />
+      <CMD c="/read"  label="read"  />
+      <CMD c="/exit"  label="exit"  />
+    </Box>
+  );
+}

package/src/components/TopBar.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getModelLabel } from '../lib/models.js';
+import path from 'path';
+import os from 'os';
+
+interface TopBarProps {
+  model: string;
+  cwd: string;
+}
+
+function shortenPath(p: string): string {
+  const home = os.homedir();
+  if (p.startsWith(home)) return '~' + p.slice(home.length);
+  return p;
+}
+
+export function TopBar({ model, cwd }: TopBarProps) {
+  const shortModel = getModelLabel(model);
+  const shortCwd = shortenPath(cwd);
+
+  return (
+    <Box borderStyle="single" borderColor="#F26207" paddingX={1} justifyContent="space-between">
+      <Box gap={2}>
+        <Text bold color="#F26207">Recode</Text>
+        <Text color="gray">{shortCwd}</Text>
+      </Box>
+      <Text color="gray">
+        {'model: '}<Text color="#F26207">{shortModel}</Text>
+      </Text>
+    </Box>
+  );
+}

package/src/hooks/useAgent.ts

@@ -0,0 +1,132 @@
+import { useState, useRef, useCallback } from 'react';
+import { callOpenRouter, type Message, type ToolCall } from '../lib/openrouter.js';
+import { executeTool } from '../lib/tools.js';
+
+export type DisplayMessage =
+  | { type: 'user';      content: string }
+  | { type: 'assistant'; content: string }
+  | { type: 'tool_call'; name: string; args: string; status: 'running' | 'done' | 'error'; result?: string }
+  | { type: 'system';    content: string }
+  | { type: 'error';     content: string };
+
+export function useAgent(model: string, apiKey: string, cwd: string) {
+  const displayRef = useRef<DisplayMessage[]>([]);
+  const [display, setDisplay] = useState<DisplayMessage[]>([]);
+  const [apiMessages, setApiMessages] = useState<Message[]>([]);
+  const [thinking, setThinking] = useState(false);
+
+  // Sync ref → state
+  const flush = () => setDisplay([...displayRef.current]);
+
+  const addDisplay = (msg: DisplayMessage): number => {
+    const idx = displayRef.current.length;
+    displayRef.current = [...displayRef.current, msg];
+    flush();
+    return idx;
+  };
+
+  const updateDisplay = (idx: number, updates: Partial<DisplayMessage>) => {
+    displayRef.current = displayRef.current.map((m, i) =>
+      i === idx ? { ...m, ...updates } as DisplayMessage : m
+    );
+    flush();
+  };
+
+  const addSystemMessage = useCallback((content: string) => {
+    addDisplay({ type: 'system', content });
+  }, []);
+
+  const clearHistory = useCallback(() => {
+    displayRef.current = [];
+    setDisplay([]);
+    setApiMessages([]);
+  }, []);
+
+  const sendMessage = useCallback(
+    async (userInput: string) => {
+      if (thinking) return;
+
+      // Add user message to display
+      addDisplay({ type: 'user', content: userInput });
+      setThinking(true);
+
+      // Build current API messages
+      const newUserMsg: Message = { role: 'user', content: userInput };
+      let currentMessages: Message[] = [...apiMessages, newUserMsg];
+      setApiMessages(currentMessages);
+
+      try {
+        // Agentic loop — run until no more tool calls
+        while (true) {
+          const response = await callOpenRouter(currentMessages, model, apiKey);
+
+          if (response.tool_calls && response.tool_calls.length > 0) {
+            // Record assistant message with tool calls
+            currentMessages = [
+              ...currentMessages,
+              {
+                role: 'assistant',
+                content: response.content,
+                tool_calls: response.tool_calls,
+              },
+            ];
+
+            // Execute each tool
+            const toolResultMessages: Message[] = [];
+
+            for (const tc of response.tool_calls) {
+              const displayIdx = addDisplay({
+                type: 'tool_call',
+                name: tc.function.name,
+                args: tc.function.arguments,
+                status: 'running',
+              });
+
+              let result: string;
+              let status: 'done' | 'error' = 'done';
+
+              try {
+                const parsedArgs = JSON.parse(tc.function.arguments) as Record<string, unknown>;
+                result = await executeTool(tc.function.name, parsedArgs, cwd);
+              } catch (err) {
+                result = `Error: ${err instanceof Error ? err.message : String(err)}`;
+                status = 'error';
+              }
+
+              updateDisplay(displayIdx, { status, result });
+
+              toolResultMessages.push({
+                role: 'tool',
+                content: result,
+                tool_call_id: tc.id,
+              });
+            }
+
+            currentMessages = [...currentMessages, ...toolResultMessages];
+          } else {
+            // Final text response
+            const content = response.content ?? '(no response)';
+            addDisplay({ type: 'assistant', content });
+            setApiMessages(currentMessages);
+            break;
+          }
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        addDisplay({ type: 'error', content: msg });
+      } finally {
+        setThinking(false);
+      }
+    },
+    [apiMessages, model, apiKey, cwd, thinking]
+  );
+
+  return {
+    display,
+    thinking,
+    sendMessage,
+    clearHistory,
+    addSystemMessage,
+    apiMessages,
+  };
+}

package/src/lib/commands.ts

@@ -0,0 +1,101 @@
+import { MODELS } from './models.js';
+
+export type CommandResult =
+  | { type: 'system'; content: string }
+  | { type: 'open_model_select' }
+  | { type: 'clear' }
+  | { type: 'exit' }
+  | { type: 'cd'; path: string }
+  | { type: 'none' }
+  | { type: 'send_to_ai'; content: string };
+
+export const HELP_TEXT = `
+Recode — AI Coding Agent  (github.com/demirgitbuh/recode)
+
+SLASH COMMANDS
+  /help              Show this help
+  /model             Change AI model
+  /models            List all available models
+  /clear             Clear conversation history
+  /exit  /quit       Exit Recode
+  /cd <path>         Change working directory
+  /ls [path]         List directory contents
+  /read <path>       Read file and show contents
+  /tools             List available AI tools
+  /cwd               Show current working directory
+  /version           Show Recode version
+
+KEYBINDINGS
+  Enter              Send message
+  Ctrl+C             Exit
+  Ctrl+L             Clear screen
+`.trim();
+
+const TOOLS_TEXT = `
+AI TOOLS (called automatically by the AI)
+  read_file <path>            Read file contents
+  write_file <path> <content> Create or overwrite a file
+  list_directory [path]       List directory entries
+  create_directory <path>     Create directory (recursive)
+  delete_file <path>          Delete a file
+  execute_command <cmd>       Run shell command in cwd
+  search_files <pattern>      Search files for pattern
+`.trim();
+
+export function parseCommand(input: string, cwd: string): CommandResult {
+  const trimmed = input.trim();
+  if (!trimmed.startsWith('/')) return { type: 'none' };
+
+  const [cmd, ...rest] = trimmed.slice(1).split(' ');
+  const arg = rest.join(' ').trim();
+
+  switch (cmd.toLowerCase()) {
+    case 'help':
+      return { type: 'system', content: HELP_TEXT };
+
+    case 'model':
+      return { type: 'open_model_select' };
+
+    case 'models': {
+      const list = MODELS.map((m) => `  ${m.provider.padEnd(11)} ${m.label.padEnd(22)} ${m.id}`).join('\n');
+      return { type: 'system', content: `Available models:\n\n${list}` };
+    }
+
+    case 'clear':
+      return { type: 'clear' };
+
+    case 'exit':
+    case 'quit':
+    case 'q':
+      return { type: 'exit' };
+
+    case 'cd':
+      if (!arg) return { type: 'system', content: `Usage: /cd <path>` };
+      return { type: 'cd', path: arg };
+
+    case 'ls': {
+      const p = arg || cwd;
+      return { type: 'send_to_ai', content: `List the directory: ${p}` };
+    }
+
+    case 'read': {
+      if (!arg) return { type: 'system', content: `Usage: /read <path>` };
+      return { type: 'send_to_ai', content: `Read and show the file: ${arg}` };
+    }
+
+    case 'tools':
+      return { type: 'system', content: TOOLS_TEXT };
+
+    case 'cwd':
+      return { type: 'system', content: `Working directory: ${cwd}` };
+
+    case 'version':
+      return { type: 'system', content: 'Recode v0.1.0 — by DemirArch' };
+
+    default:
+      return {
+        type: 'system',
+        content: `Unknown command: /${cmd}\nType /help for available commands.`,
+      };
+  }
+}

package/src/lib/config.ts

@@ -0,0 +1,29 @@
+import { promises as fs } from 'fs';
+import os from 'os';
+import path from 'path';
+
+export interface RecodeConfig {
+  apiKey: string;
+  model: string;
+}
+
+const CONFIG_DIR = path.join(os.homedir(), 'recode-data');
+const CONFIG_PATH = path.join(CONFIG_DIR, 'config.json');
+
+export async function loadConfig(): Promise<RecodeConfig | null> {
+  try {
+    const raw = await fs.readFile(CONFIG_PATH, 'utf-8');
+    const parsed = JSON.parse(raw) as Partial<RecodeConfig>;
+    if (parsed.apiKey && parsed.model) {
+      return { apiKey: parsed.apiKey, model: parsed.model };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function saveConfig(config: RecodeConfig): Promise<void> {
+  await fs.mkdir(CONFIG_DIR, { recursive: true });
+  await fs.writeFile(CONFIG_PATH, JSON.stringify(config, null, 2), 'utf-8');
+}