zerg-ztc 0.1.3 → 0.1.5

package/src/App.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useCallback, useMemo, useRef } from 'react';
-import { Box, useApp, useInput } from 'ink';
-import { Header, MessageList, InputArea, StatusBar, FullScreen, useScreenSize } from './components/index.js';
+import { Box, useApp, useInput, Static } from 'ink';
+import { Header, MessageList, SingleMessage, InputArea, StatusBar, FullScreen, ActivityLine, useScreenSize } from './components/index.js';
 import { buildAppView } from './ui/views/app.js';
 import { useMirror } from './web/mirror_hook.js';
 import { Agent } from './agent/index.js';
 import { commands, type CommandContext } from './agent/commands/index.js';
-import { Message, AgentState } from './types.js';
+import { Message, AgentState, InputMode } from './types.js';
 import { InputState } from './ui/core/input_state.js';
+import { estimateInputLines } from './ui/views/input_area.js';
 import { configStore } from './config.js';
 import { createInputBus } from './ui/core/input.js';
 import { loadEmulationProfiles, getEmulationProfile } from './emulation/catalog.js';
@@ -20,6 +21,10 @@ import { autoActivateSkills, buildSkillPrompt } from './skills/index.js';
 import { getSkillRegistry } from './skills/registry.js';
 import { Skill } from './skills/types.js';
 import { createAgentFromConfig } from './agent/factory.js';
+import { checkForUpdate } from './utils/update.js';
+import { getVersion } from './utils/version.js';
+import { DEFAULT_SPINNER_VERBS } from './utils/spinner_verbs.js';
+import { SPINNER_FRAMES } from './utils/spinner_frames.js';
 
 // --- Utilities ---
 
@@ -68,11 +73,17 @@ export const App: React.FC = () => {
   
   // State
   const [messages, setMessages] = useState<Message[]>([getWelcomeMessage()]);
+  const messagesRef = useRef<Message[]>(messages);
   const [agentState, setAgentState] = useState<AgentState>({ status: 'idle' });
   const [sessionId] = useState(generateId());
   const [agent, setAgent] = useState<Agent | null>(createAgent);
   const [expandToolOutputs, setExpandToolOutputs] = useState(false);
   const [skills, setSkills] = useState<Skill[]>([]);
+  const [inputMode, setInputMode] = useState<InputMode>('queue');
+  const queueRef = useRef<string[]>([]);
+  const activeRunIdRef = useRef<string | null>(null);
+  const runCounterRef = useRef(0);
+  const lastRunDurationRef = useRef<number | null>(null);
 
   React.useEffect(() => {
     let active = true;
@@ -101,6 +112,8 @@ export const App: React.FC = () => {
   const [retryAvailable, setRetryAvailable] = useState(false);
   const [toast, setToast] = useState<string | null>(null);
   const toastTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [spinnerLabel, setSpinnerLabel] = useState<string | null>(null);
+  const [spinnerFrame, setSpinnerFrame] = useState<string | null>(null);
   const streamingMessageId = React.useRef<string | null>(null);
   const streamedResponse = React.useRef(false);
   const toolStartTimes = React.useRef<Map<string, number[]>>(new Map());
@@ -112,21 +125,80 @@ export const App: React.FC = () => {
   );
   const contextLength = agentState.contextTokens ?? fallbackContextLength;
   const contextEstimated = agentState.contextTokens ? agentState.tokensEstimated : true;
+  const spinnerVerbs = configStore.get().spinnerVerbs || DEFAULT_SPINNER_VERBS;
+  const spinnerVerbsKey = spinnerVerbs.join('|');
 
   React.useEffect(() => {
     renderCount.current += 1;
     debugLog(`App render #${renderCount.current} (messages=${messages.length}, state=${agentState.status})`);
   });
+  React.useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
   const [debug, setDebug] = useState(false);
+  const scrollback = process.env.ZTC_SCROLLBACK === '1' || process.env.ZTC_ALT_SCREEN !== '1';
+
+  React.useEffect(() => {
+    if (agentState.status !== 'thinking' && agentState.status !== 'streaming') {
+      setSpinnerLabel(null);
+      setSpinnerFrame(null);
+      return;
+    }
+    if (spinnerVerbs.length === 0) {
+      setSpinnerLabel(null);
+      setSpinnerFrame(null);
+      return;
+    }
+    const verb = spinnerVerbs[Math.floor(Math.random() * spinnerVerbs.length)];
+    setSpinnerLabel(verb);
+  }, [agentState.status, spinnerVerbsKey]);
 
-  const inputHeight = 5; // 1 input line + 4 suggestion lines
-  const headerHeight = 1;
+  React.useEffect(() => {
+    if (agentState.status !== 'thinking' && agentState.status !== 'streaming') {
+      setSpinnerFrame(null);
+      return;
+    }
+    // Animation is now safe in scrollback mode because we use Ink's Static component
+    // for completed messages - only the live section below Static re-renders
+    let index = 0;
+    setSpinnerFrame(SPINNER_FRAMES[index]);
+    const interval = setInterval(() => {
+      index = (index + 1) % SPINNER_FRAMES.length;
+      setSpinnerFrame(SPINNER_FRAMES[index]);
+    }, 120);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [agentState.status]);
+
+  const headerHeight = scrollback ? 0 : 4; // border (2) + content (1) + margin (1)
   const statusHeight = 1;
+  const suggestionLines = 4;
+
+  const estimateBadgePreviewLines = useCallback((state: InputState): number => {
+    const segment = state.segments[state.cursor.index];
+    if (!segment || segment.type === 'text') return 0;
+    if (segment.type === 'paste') {
+      const lines = segment.text.split('\n');
+      return Math.min(3, lines.length) + (lines.length > 3 ? 1 : 0);
+    }
+    if (segment.type === 'image') {
+      return 16;
+    }
+    return 1;
+  }, []);
+
+  const inputHeight = useMemo(() => {
+    const inputLineCount = estimateInputLines(inputSnapshot.segments, columns);
+    const previewLines = estimateBadgePreviewLines(inputSnapshot);
+    const maxInputLines = Math.max(1, rows - (headerHeight + statusHeight + suggestionLines + 5));
+    return Math.min(Math.max(1, inputLineCount + previewLines), maxInputLines) + suggestionLines;
+  }, [columns, estimateBadgePreviewLines, inputSnapshot, rows]);
 
   // Calculate content height (total - header - input - status)
   const contentHeight = useMemo(
-    () => Math.max(rows - (headerHeight + inputHeight + statusHeight), 5),
-    [rows]
+    () => scrollback ? undefined : Math.max(rows - (headerHeight + inputHeight + statusHeight), 5),
+    [rows, scrollback, inputHeight]
   );
 
   // Reload agent when config changes
@@ -172,6 +244,21 @@ export const App: React.FC = () => {
     }]);
   }, []);
 
+  React.useEffect(() => {
+    if (process.env.ZTC_DISABLE_UPDATE === '1') return;
+    if (process.env.ZTC_WEB_MIRROR === '1') return;
+    let active = true;
+    const current = getVersion();
+    checkForUpdate(current).then(info => {
+      if (!active || !info.hasUpdate) return;
+      addMessage({
+        role: 'system',
+        content: `Update available: v${info.latest} (current v${info.current}). Run /update to install.`
+      });
+    }).catch(() => {});
+    return () => { active = false; };
+  }, [addMessage]);
+
   const clearMessages = useCallback(() => {
     setMessages([]);
   }, []);
@@ -193,15 +280,22 @@ export const App: React.FC = () => {
     return lower.includes('overloaded') || lower.includes('529') || lower.includes('429') || lower.includes('rate limit');
   }, []);
 
-  const runWithRetry = useCallback(async (requestMessages: Message[], runAgent: Agent, isManual = false) => {
+  const runWithRetry = useCallback(async (
+    requestMessages: Message[],
+    runAgent: Agent,
+    isManual = false,
+    isActive?: () => boolean
+  ) => {
     const maxRetries = 3;
     let attempt = 0;
     setRetryAvailable(false);
     while (attempt < maxRetries) {
       attempt += 1;
+      if (isActive && !isActive()) return;
       try {
         streamedResponse.current = false;
         const result = await runAgent.run(requestMessages);
+        if (isActive && !isActive()) return;
         if (!streamedResponse.current) {
           addMessage({
             role: 'assistant',
@@ -220,6 +314,7 @@ export const App: React.FC = () => {
         return;
       } catch (err) {
         const errorMsg = (err as Error).message || 'Agent error';
+        if (isActive && !isActive()) return;
         if (!isRetryableError(errorMsg) || attempt >= maxRetries) {
           throw err;
         }
@@ -242,9 +337,14 @@ export const App: React.FC = () => {
       addMessage({ role: 'system', content: 'No previous request to retry.' });
       return;
     }
+    const runId = `${Date.now()}_${runCounterRef.current++}`;
+    activeRunIdRef.current = runId;
+    const isActive = () => activeRunIdRef.current === runId;
+    const runStartedAt = Date.now();
     setAgentState({ status: 'thinking', startedAt: new Date() });
-    void runWithRetry(last.messages, last.agent, true).catch((err) => {
+    void runWithRetry(last.messages, last.agent, true, isActive).catch((err) => {
       const message = (err as Error).message || 'Agent error';
+      if (!isActive()) return;
       addMessage({ role: 'system', content: `Error: ${message}` });
       if (isRetryableError(message)) {
         addMessage({ role: 'system', content: 'Retries exhausted. Use /retry to try again.' });
@@ -282,8 +382,10 @@ export const App: React.FC = () => {
     },
     skills: {
       list: async () => getSkillRegistry()
-    }
-  }), [addMessage, clearMessages, getMessages, reloadAgent, exit, shellController, retryLast]);
+    },
+    getInputMode: () => inputMode,
+    setInputMode: (mode) => setInputMode(mode)
+  }), [addMessage, clearMessages, getMessages, reloadAgent, exit, shellController, retryLast, inputMode]);
 
   // Handle commands
   const handleCommand = useCallback((cmd: string, args: string[]) => {
@@ -322,6 +424,22 @@ export const App: React.FC = () => {
       return;
     }
 
+    const busy = agentState.status !== 'idle' && agentState.status !== 'error';
+    if (busy) {
+      if (inputMode === 'queue') {
+        queueRef.current.push(text);
+        addMessage({
+          role: 'system',
+          content: `Queued (${queueRef.current.length})`
+        });
+        return;
+      }
+      addMessage({
+        role: 'system',
+        content: 'Interrupting current response...'
+      });
+    }
+
     let currentAgent = agent;
 
     if (skills.length > 0) {
@@ -373,12 +491,19 @@ export const App: React.FC = () => {
       timestamp: new Date()
     };
     setMessages(prev => [...prev, userMsg]);
-    const requestMessages = [...messages, userMsg];
+    const requestMessages = [...messagesRef.current, userMsg];
     lastRequestRef.current = { messages: requestMessages, agent: currentAgent };
 
+    const runId = `${Date.now()}_${runCounterRef.current++}`;
+    activeRunIdRef.current = runId;
+    const isActive = () => activeRunIdRef.current === runId;
+    const runStartedAt = Date.now();
     setAgentState({ status: 'thinking', startedAt: new Date() });
+    streamingMessageId.current = null;
+    streamedResponse.current = false;
 
     const cleanup = currentAgent.on((event) => {
+      if (!isActive()) return;
       switch (event.type) {
         case 'thinking_start':
           setAgentState(s => ({ ...s, status: 'thinking' }));
@@ -436,7 +561,7 @@ export const App: React.FC = () => {
           toolStartTimes.current.set(key, bucket);
           const duration = started ? Date.now() - started : undefined;
           const emulationId = configStore.getEmulationId();
-          if (getTraceStyle(emulationId) === 'claude_code') {
+          if (getTraceStyle(emulationId) === 'claude_code' || getTraceStyle(emulationId) === 'codex') {
             const output = buildToolOutputMessage(event.tool, event.result, duration, emulationId);
             addMessage({
               role: 'tool',
@@ -475,9 +600,10 @@ export const App: React.FC = () => {
     });
 
     try {
-      await runWithRetry(requestMessages, currentAgent);
+      await runWithRetry(requestMessages, currentAgent, false, isActive);
     } catch (err) {
       const errorMsg = (err as Error).message;
+      if (!isActive()) return;
       
       const isAuthError = errorMsg.includes('401') || errorMsg.includes('authentication');
       if (isAuthError) {
@@ -504,11 +630,30 @@ export const App: React.FC = () => {
         setAgentState({ status: 'idle' });
       }, 3000);
     } finally {
-      streamedResponse.current = false;
-      streamingMessageId.current = null;
-      cleanup();
+      if (isActive()) {
+        streamedResponse.current = false;
+        streamingMessageId.current = null;
+        activeRunIdRef.current = null;
+        lastRunDurationRef.current = Date.now() - runStartedAt;
+        if (getTraceStyle(configStore.getEmulationId()) === 'codex') {
+          const seconds = Math.max(0, Math.round((lastRunDurationRef.current || 0) / 1000));
+          addMessage({
+            role: 'tool',
+            content: `✻ Worked for ${seconds}s`
+          });
+        }
+        cleanup();
+        if (inputMode === 'queue' && queueRef.current.length > 0) {
+          const next = queueRef.current.shift();
+          if (next) {
+            void handleSubmit(next);
+          }
+        }
+      } else {
+        cleanup();
+      }
     }
-  }, [messages, agent, addMessage, isRetryableError, runWithRetry]);
+  }, [agent, agentState.status, addMessage, handleCommand, inputMode, isRetryableError, runWithRetry]);
 
   const layoutTree = useMemo(() => {
     if (!mirrorEnabled) return null;
@@ -521,16 +666,20 @@ export const App: React.FC = () => {
       rows,
       commands,
       hasApiKey: configStore.hasApiKey(),
+      version: getVersion(),
       contextLength,
       contextEstimated,
       provider,
       model,
       emulationId,
+      inputMode,
       toast,
+      spinnerLabel,
+      spinnerFrame,
       debug,
       expandToolOutputs
     });
-  }, [mirrorEnabled, messages, agentState, inputSnapshot, sessionId, rows, contextLength, contextEstimated, provider, model, emulationId, toast, debug, expandToolOutputs]);
+  }, [mirrorEnabled, messages, agentState, inputSnapshot, sessionId, rows, contextLength, contextEstimated, provider, model, emulationId, inputMode, toast, spinnerLabel, spinnerFrame, debug, expandToolOutputs]);
 
   const showToast = useCallback((message: string) => {
     setToast(message);
@@ -544,26 +693,70 @@ export const App: React.FC = () => {
 
   useMirror(layoutTree, inputBus);
 
+  // Compute messages for Static (completed) vs live (streaming)
+  // Static component handles deduplication by key - it only renders new items
+  const { staticMessages, streamingMessage } = useMemo(() => {
+    if (!scrollback) {
+      return { staticMessages: [], streamingMessage: null };
+    }
+
+    // Completed messages go to Static (rendered once, kept in scrollback)
+    const completed = messages.filter(m => !m.isStreaming);
+    // Streaming message stays in live section (can update)
+    const streaming = messages.find(m => m.isStreaming) || null;
+
+    return {
+      staticMessages: completed,
+      streamingMessage: streaming
+    };
+  }, [messages, scrollback]);
+
   return (
-    <FullScreen debug={debug}>
-      <Header version="0.1.0" debug={debug} />
-      
-      <MessageList 
-        messages={messages} 
-        height={contentHeight}
-        debug={debug}
-        expandToolOutputs={expandToolOutputs}
+    <FullScreen debug={debug} scrollback={scrollback}>
+      {!scrollback && <Header version={getVersion()} debug={debug} />}
+
+      {scrollback ? (
+        <Box flexDirection="column">
+          {/* Static: each message rendered ONCE, stays in scrollback buffer */}
+          <Static items={staticMessages}>
+            {(msg: Message) => (
+              <Box key={msg.id} flexDirection="column">
+                <SingleMessage message={msg} expandToolOutputs={expandToolOutputs} />
+              </Box>
+            )}
+          </Static>
+
+          {/* Live section: streaming message can update */}
+          {streamingMessage && (
+            <SingleMessage message={streamingMessage} expandToolOutputs={expandToolOutputs} />
+          )}
+        </Box>
+      ) : (
+        <MessageList
+          messages={messages}
+          height={contentHeight}
+          debug={debug}
+          expandToolOutputs={expandToolOutputs}
+          scrollback={scrollback}
+        />
+      )}
+
+      <ActivityLine
+        state={agentState}
+        spinnerLabel={spinnerLabel}
+        spinnerFrame={spinnerFrame}
+        inputMode={inputMode}
       />
-      
+
       <InputArea 
         onSubmit={handleSubmit}
         onCommand={handleCommand}
         commands={commands}
-        onStateChange={mirrorEnabled ? setInputSnapshot : undefined}
+        onStateChange={setInputSnapshot}
         onToast={showToast}
         cols={columns}
         inputBus={inputBus}
-        disabled={agentState.status !== 'idle' && agentState.status !== 'error'}
+        disabled={false}
         debug={debug}
         placeholder={
           !configStore.hasApiKey() ? 'Set API key with /config key <key>' :
@@ -573,17 +766,18 @@ export const App: React.FC = () => {
           'Type a message or /help for commands...'
         }
       />
-      
+
       <StatusBar 
         state={agentState} 
         sessionId={sessionId}
-        version="0.1.0"
+        version={getVersion()}
         connectionStatus={configStore.hasApiKey() ? 'connected' : 'disconnected'}
         contextLength={contextLength}
         contextEstimated={contextEstimated}
         provider={provider}
         model={model}
         emulationId={emulationId}
+        inputMode={inputMode}
         toast={toast}
         debug={debug}
       />

package/src/agent/agent.ts

@@ -77,7 +77,9 @@ You have access to tools for:
 - Running shell commands
 - Querying the Zerg system
 
-Be concise and helpful. When using tools, explain what you're doing briefly. If a task requires multiple steps, proceed through them systematically.`;
+Be concise and helpful. When using tools, explain what you're doing briefly. If a task requires multiple steps, proceed through them systematically.
+
+When a user intent maps to an available slash command, invoke the command directly (just the command) instead of explaining how to do it. Prefer executing commands over describing them.`;
   }
 
   // Event handling

package/src/agent/commands/config.ts

@@ -1,9 +1,10 @@
 import { Command } from './types.js';
+import { DEFAULT_SPINNER_VERBS, formatSpinnerVerbs, parseSpinnerVerbs } from '../../utils/spinner_verbs.js';
 
 export const configCommand: Command = {
   name: 'config',
   description: 'Manage configuration',
-  usage: '<show|key|provider|endpoint|model> [value]',
+  usage: '<show|key|provider|endpoint|model|spinner> [value]',
   handler: async (args, ctx) => {
     const [subCmd, ...rest] = args;
     const value = rest.join(' ');
@@ -24,6 +25,7 @@ export const configCommand: Command = {
             `  Max Tokens: ${config.maxTokens}`,
             `  Zerg Endpoint: ${config.zergEndpoint || '(not set)'}`,
             `  Emulation: ${ctx.config.getEmulationId() || '(none)'}`,
+            `  Spinner verbs: ${formatSpinnerVerbs(config.spinnerVerbs || DEFAULT_SPINNER_VERBS)}`,
             '',
             `Config storage: ${ctx.config.locationLabel || '~/.ztc/config.json'}`
           ].join('\n')
@@ -120,10 +122,82 @@ export const configCommand: Command = {
         });
         break;
 
+      case 'spinner': {
+        const [action, ...restParts] = rest;
+        const actionValue = restParts.join(' ');
+        const current = ctx.config.get().spinnerVerbs || DEFAULT_SPINNER_VERBS;
+
+        if (!action || action === 'show') {
+          ctx.addMessage({
+            role: 'system',
+            content: `Spinner verbs:\n  ${formatSpinnerVerbs(current)}\n\nUsage:\n  /config spinner show\n  /config spinner set <verb1, verb2, ...>\n  /config spinner add <verb>\n  /config spinner remove <verb>\n  /config spinner reset\n  /config spinner off`
+          });
+          return;
+        }
+
+        if (action === 'reset') {
+          ctx.config.set('spinnerVerbs', DEFAULT_SPINNER_VERBS);
+          ctx.config.save();
+          ctx.addMessage({ role: 'system', content: '✓ Spinner verbs reset to defaults.' });
+          return;
+        }
+
+        if (action === 'off') {
+          ctx.config.set('spinnerVerbs', []);
+          ctx.config.save();
+          ctx.addMessage({ role: 'system', content: '✓ Spinner verbs disabled.' });
+          return;
+        }
+
+        if (action === 'set') {
+          const verbs = parseSpinnerVerbs(actionValue);
+          if (verbs.length === 0) {
+            ctx.addMessage({ role: 'system', content: 'Usage: /config spinner set <verb1, verb2, ...>' });
+            return;
+          }
+          ctx.config.set('spinnerVerbs', verbs);
+          ctx.config.save();
+          ctx.addMessage({ role: 'system', content: `✓ Spinner verbs updated: ${formatSpinnerVerbs(verbs)}` });
+          return;
+        }
+
+        if (action === 'add') {
+          const verbs = parseSpinnerVerbs(actionValue);
+          if (verbs.length === 0) {
+            ctx.addMessage({ role: 'system', content: 'Usage: /config spinner add <verb>' });
+            return;
+          }
+          const next = [...current, ...verbs];
+          ctx.config.set('spinnerVerbs', next);
+          ctx.config.save();
+          ctx.addMessage({ role: 'system', content: `✓ Added spinner verbs: ${formatSpinnerVerbs(verbs)}` });
+          return;
+        }
+
+        if (action === 'remove') {
+          const verbs = parseSpinnerVerbs(actionValue).map(v => v.toLowerCase());
+          if (verbs.length === 0) {
+            ctx.addMessage({ role: 'system', content: 'Usage: /config spinner remove <verb>' });
+            return;
+          }
+          const next = current.filter(v => !verbs.includes(v.toLowerCase()));
+          ctx.config.set('spinnerVerbs', next);
+          ctx.config.save();
+          ctx.addMessage({ role: 'system', content: `✓ Removed spinner verbs: ${formatSpinnerVerbs(verbs)}` });
+          return;
+        }
+
+        ctx.addMessage({
+          role: 'system',
+          content: 'Usage: /config spinner <show|set|add|remove|reset|off> [value]'
+        });
+        break;
+      }
+
       default:
         ctx.addMessage({
           role: 'system',
-          content: 'Usage: /config <show|key|provider|endpoint|model> [value]\n\nExamples:\n  /config show                           Show current config\n  /config key sk-ant-...                  Set API key (current provider)\n  /config key openai sk-...               Set API key for provider\n  /config provider openai                 Set provider\n  /config endpoint https://api.example.com/v1  Set OpenAI-compatible base URL\n  /config model claude-opus-4-20250514    Set model'
+          content: 'Usage: /config <show|key|provider|endpoint|model|spinner> [value]\n\nExamples:\n  /config show                           Show current config\n  /config key sk-ant-...                  Set API key (current provider)\n  /config key openai sk-...               Set API key for provider\n  /config provider openai                 Set provider\n  /config endpoint https://api.example.com/v1  Set OpenAI-compatible base URL\n  /config model claude-opus-4-20250514    Set model\n  /config spinner set Reticulating splines, Organizing thoughts'
         });
     }
   }

package/src/agent/commands/index.ts

@@ -12,6 +12,9 @@ import { modelCommand } from './model.js';
 import { permissionsCommand } from './permissions.js';
 import { skillsCommand } from './skills.js';
 import { retryCommand } from './retry.js';
+import { inputModeCommand } from './input_mode.js';
+import { keybindingsCommand } from './keybindings.js';
+import { updateCommand } from './update.js';
 import { Command } from './types.js';
 
 const commandList: Command[] = [];
@@ -32,6 +35,9 @@ commandList.push(
   modelCommand,
   permissionsCommand,
   skillsCommand,
+  keybindingsCommand,
+  updateCommand,
+  inputModeCommand,
   retryCommand,
   exitCommand
 );

package/src/agent/commands/input_mode.ts

@@ -0,0 +1,22 @@
+import { Command } from './types.js';
+
+export const inputModeCommand: Command = {
+  name: 'inputmode',
+  description: 'Set input mode while an agent is running',
+  usage: '<queue|interrupt>',
+  handler: (args, ctx) => {
+    const mode = (args[0] || '').toLowerCase();
+    if (mode !== 'queue' && mode !== 'interrupt') {
+      ctx.addMessage({
+        role: 'system',
+        content: `Current input mode: ${ctx.getInputMode()}\n\nUsage: /inputmode <queue|interrupt>`
+      });
+      return;
+    }
+    ctx.setInputMode(mode);
+    ctx.addMessage({
+      role: 'system',
+      content: `✓ Input mode set: ${mode}`
+    });
+  }
+};

package/src/agent/commands/keybindings.ts

@@ -0,0 +1,40 @@
+import { Command } from './types.js';
+
+const lines = [
+  'Keybindings (readline-style):',
+  '',
+  'Movement:',
+  '  Ctrl+A  start of line',
+  '  Ctrl+E  end of line',
+  '  Ctrl+B  move left',
+  '  Ctrl+F  move right',
+  '  Alt+B   word left',
+  '  Alt+F   word right',
+  '',
+  'Editing:',
+  '  Ctrl+U  kill to start',
+  '  Ctrl+K  kill to end',
+  '  Ctrl+W  kill previous word',
+  '  Alt+D   kill next word',
+  '  Ctrl+D  delete forward',
+  '  Ctrl+Y  yank',
+  '  Alt+Y   yank-pop',
+  '  Ctrl+T  transpose chars',
+  '  Alt+T   transpose words',
+  '',
+  'History:',
+  '  Ctrl+P  previous',
+  '  Ctrl+N  next',
+  '  Up/Down arrows also work',
+  '',
+  'Input mode:',
+  '  /inputmode queue|interrupt'
+];
+
+export const keybindingsCommand: Command = {
+  name: 'keybindings',
+  description: 'Show keybindings',
+  handler: (_args, ctx) => {
+    ctx.addMessage({ role: 'system', content: lines.join('\n') });
+  }
+};

package/src/agent/commands/types.ts

@@ -68,6 +68,8 @@ export interface CommandContext {
   clipboard: ClipboardController;
   models: ModelsController;
   skills: SkillsController;
+  getInputMode: () => 'queue' | 'interrupt';
+  setInputMode: (mode: 'queue' | 'interrupt') => void;
 }
 
 export interface Command {