casabot 1.1.8 → 1.1.9

package/dist/agent/base.d.ts

@@ -1,5 +1,5 @@
 import type { ChatProvider } from "../providers/base.js";
 import type { Message, Skill, ConversationHistory } from "../config/types.js";
 export declare function buildSystemPrompt(skills: Skill[]): string;
-export declare function runAgent(provider: ChatProvider, userMessage: string, conversation: ConversationHistory, skills: Skill[]): AsyncGenerator<Message>;
+export declare function runAgent(provider: ChatProvider, userMessage: string, conversation: ConversationHistory, skills: Skill[], signal: AbortSignal): AsyncGenerator<Message>;
 //# sourceMappingURL=base.d.ts.map

package/dist/agent/base.js

@@ -3,6 +3,16 @@ import { appendMessage } from "../history/store.js";
 import { formatSkillsForPrompt } from "../skills/loader.js";
 import { CASABOT_HOME } from "../config/manager.js";
 const MAX_ITERATIONS = 20;
+function raceAbort(promise, signal) {
+    if (signal.aborted)
+        return Promise.reject(new Error("AbortError"));
+    return Promise.race([
+        promise,
+        new Promise((_, reject) => {
+            signal.addEventListener("abort", () => reject(new Error("AbortError")), { once: true });
+        }),
+    ]);
+}
 export function buildSystemPrompt(skills) {
     const skillList = formatSkillsForPrompt(skills);
     return `You are the base agent of CasAbot. Cassiopeia A — Freely creates everything, like a supernova explosion.
@@ -33,23 +43,35 @@ export function buildSystemPrompt(skills) {
 ## ${skillList}
 `;
 }
-export async function* runAgent(provider, userMessage, conversation, skills) {
+export async function* runAgent(provider, userMessage, conversation, skills, signal) {
     const systemPrompt = buildSystemPrompt(skills);
     const userMsg = { role: "user", content: userMessage };
     await appendMessage(conversation, userMsg);
     const tools = [TERMINAL_TOOL];
     for (let i = 0; i < MAX_ITERATIONS; i++) {
+        if (signal.aborted)
+            return;
         const messagesWithSystem = [
             { role: "system", content: systemPrompt },
             ...conversation.messages,
         ];
-        const assistantMsg = await provider.chat(messagesWithSystem, tools);
+        let assistantMsg;
+        try {
+            assistantMsg = await raceAbort(provider.chat(messagesWithSystem, tools), signal);
+        }
+        catch (err) {
+            if (signal.aborted)
+                return;
+            throw err;
+        }
         await appendMessage(conversation, assistantMsg);
         yield assistantMsg;
         if (!assistantMsg.toolCalls?.length) {
             return;
         }
         for (const toolCall of assistantMsg.toolCalls) {
+            if (signal.aborted)
+                return;
             let result;
             if (toolCall.name === "run_command") {
                 try {

package/dist/tui/app.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { render, Box, Text, Static, useInput, useApp, useStdout } from "ink";
 import TextInput from "ink-text-input";
 import Spinner from "ink-spinner";
@@ -7,6 +7,7 @@ import Gradient from "ink-gradient";
 import { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 import { runAgent } from "../agent/base.js";
+import { createConversation, listConversations, saveConversation, appendMessage, } from "../history/store.js";
 function renderMarkdown(content) {
     const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
     const md = new Marked({ gfm: true });
@@ -20,6 +21,18 @@ function truncateOutput(content, maxLines = 8) {
     return (lines.slice(0, maxLines).join("\n") +
         `\n  … ${lines.length - maxLines} more lines`);
 }
+function formatDate(iso) {
+    const d = new Date(iso);
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function getPreview(conv, maxLen = 50) {
+    const firstUser = conv.messages.find((m) => m.role === "user");
+    if (!firstUser)
+        return "(empty session)";
+    const text = firstUser.content.replace(/\n/g, " ").trim();
+    return text.length > maxLen ? text.slice(0, maxLen - 1) + "…" : text;
+}
 function HRule({ columns }) {
     return (_jsx(Box, { paddingX: 1, width: columns, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(columns - 4, 1)) }) }));
 }
@@ -76,50 +89,154 @@ function WelcomeHint({ columns }) {
 function ProcessingIndicator({ columns }) {
     return (_jsxs(Box, { paddingX: 2, marginTop: 1, gap: 1, width: columns, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: "Thinking…" })] }));
 }
-function App({ provider, conversation, skills, }) {
+function HistoryBrowser({ columns, currentId, onSelect, onBack, }) {
+    const [conversations, setConversations] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        listConversations()
+            .then((convs) => {
+            setConversations(convs);
+            setIsLoading(false);
+        })
+            .catch(() => {
+            setIsLoading(false);
+        });
+    }, []);
+    useInput((ch, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.return && conversations.length > 0) {
+            onSelect(conversations[selectedIndex]);
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow && conversations.length > 0) {
+            setSelectedIndex((prev) => Math.min(conversations.length - 1, prev + 1));
+        }
+    });
+    const boxWidth = Math.max(columns - 4, 10);
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, width: columns, children: [_jsx(Box, { paddingX: 2, children: _jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "📋 Session History" }) }) }), _jsx(HRule, { columns: columns }), isLoading ? (_jsxs(Box, { paddingX: 2, marginTop: 1, gap: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: "Loading sessions…" })] })) : conversations.length === 0 ? (_jsx(Box, { paddingX: 2, marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No previous sessions found." }) })) : (_jsx(Box, { flexDirection: "column", marginX: 2, marginTop: 1, borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 1, width: boxWidth, overflow: "hidden", children: conversations.map((conv, i) => {
+                    const isSelected = i === selectedIndex;
+                    const isCurrent = conv.id === currentId;
+                    const dateStr = formatDate(conv.startedAt);
+                    const preview = getPreview(conv, Math.max(boxWidth - dateStr.length - 12, 20));
+                    const msgCount = conv.messages.filter((m) => m.role === "user").length;
+                    return (_jsxs(Box, { width: boxWidth - 4, children: [_jsx(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, dimColor: !isSelected, children: isSelected ? " ▶ " : "   " }), _jsx(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, dimColor: !isSelected, children: dateStr }), _jsx(Text, { dimColor: !isSelected, children: " │ " }), _jsx(Text, { color: isSelected ? "white" : undefined, dimColor: !isSelected, wrap: "truncate", children: preview }), isCurrent ? (_jsx(Text, { color: "green", bold: true, children: " (current)" })) : null, _jsx(Text, { dimColor: true, children: ` [${msgCount}]` })] }, conv.id));
+                }) })), _jsx(HRule, { columns: columns }), _jsxs(Box, { paddingX: 2, width: columns, justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: "↑↓ navigate  Enter select  ESC back" }), _jsx(Text, { dimColor: true, children: `${conversations.length} sessions` })] })] }));
+}
+function App({ provider, conversation: initialConversation, skills, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState("");
     const [isProcessing, setIsProcessing] = useState(false);
+    const [mode, setMode] = useState("chat");
+    const conversationRef = useRef(initialConversation);
+    const abortControllerRef = useRef(null);
     const { exit } = useApp();
     const { stdout } = useStdout();
     const columns = stdout.columns ?? 80;
+    const handleCancel = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+    }, []);
     const handleSubmit = useCallback(async (text) => {
         const trimmed = text.trim();
         if (!trimmed || isProcessing)
             return;
+        if (trimmed === "/new") {
+            setInput("");
+            if (conversationRef.current.messages.length > 0) {
+                await saveConversation(conversationRef.current);
+            }
+            process.stdout.write("\x1Bc");
+            const newConv = createConversation();
+            conversationRef.current = newConv;
+            setMessages([]);
+            return;
+        }
+        if (trimmed === "/history") {
+            setInput("");
+            if (conversationRef.current.messages.length > 0) {
+                await saveConversation(conversationRef.current);
+            }
+            setMode("history");
+            return;
+        }
         setInput("");
         setIsProcessing(true);
         const userMsg = { role: "user", content: trimmed };
         setMessages((prev) => [...prev, userMsg]);
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
         try {
-            const generator = runAgent(provider, trimmed, conversation, skills);
+            const generator = runAgent(provider, trimmed, conversationRef.current, skills, controller.signal);
             for await (const msg of generator) {
+                if (controller.signal.aborted)
+                    break;
                 setMessages((prev) => [...prev, msg]);
             }
         }
         catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err);
-            setMessages((prev) => [
-                ...prev,
-                { role: "assistant", content: `❌ Error: ${errorMsg}` },
-            ]);
+            if (!controller.signal.aborted) {
+                const errorMsg = err instanceof Error ? err.message : String(err);
+                setMessages((prev) => [
+                    ...prev,
+                    { role: "assistant", content: `❌ Error: ${errorMsg}` },
+                ]);
+            }
+        }
+        if (controller.signal.aborted) {
+            const cancelMsg = {
+                role: "assistant",
+                content: "⏹ Cancelled.",
+            };
+            setMessages((prev) => [...prev, cancelMsg]);
+            await appendMessage(conversationRef.current, cancelMsg);
         }
+        abortControllerRef.current = null;
         setIsProcessing(false);
-    }, [isProcessing, provider, conversation, skills]);
+    }, [isProcessing, provider, skills]);
+    const handleHistorySelect = useCallback(async (conv) => {
+        if (conversationRef.current.messages.length > 0) {
+            await saveConversation(conversationRef.current);
+        }
+        process.stdout.write("\x1Bc");
+        conversationRef.current = conv;
+        setMessages([...conv.messages]);
+        setMode("chat");
+    }, []);
     useInput((ch, key) => {
-        if (key.ctrl && ch === "c") {
-            exit();
+        if (mode !== "chat")
+            return;
+        if (isProcessing) {
+            if (key.escape || (key.ctrl && ch === "c")) {
+                handleCancel();
+            }
+        }
+        else {
+            if (key.ctrl && ch === "c") {
+                exit();
+            }
         }
     });
     const userCount = messages.filter((m) => m.role === "user").length;
+    const convId = conversationRef.current.id;
     const items = useMemo(() => [
-        { key: "header", type: "header" },
+        { key: `header-${convId}`, type: "header" },
         ...messages.map((msg, i) => ({
-            key: `msg-${i}`,
+            key: `${convId}-msg-${i}`,
             type: "message",
             message: msg,
         })),
-    ], [messages]);
+    ], [messages, convId]);
+    if (mode === "history") {
+        return (_jsx(HistoryBrowser, { columns: columns, currentId: conversationRef.current.id, onSelect: handleHistorySelect, onBack: () => setMode("chat") }));
+    }
     return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(Static, { items: items, children: (item) => {
                     if (item.type === "header") {
                         return (_jsx(Box, { flexDirection: "column", width: columns, children: _jsx(HeaderBlock, { columns: columns }) }, item.key));
@@ -127,7 +244,9 @@ function App({ provider, conversation, skills, }) {
                     return (_jsx(Box, { flexDirection: "column", width: columns, children: _jsx(MessageView, { message: item.message, columns: columns }) }, item.key));
                 } }), messages.length === 0 && !isProcessing && _jsx(WelcomeHint, { columns: columns }), isProcessing && _jsx(ProcessingIndicator, { columns: columns }), _jsx(HRule, { columns: columns }), _jsx(Box, { paddingX: 1, width: columns, children: _jsxs(Box, { borderStyle: "round", borderColor: isProcessing ? "gray" : "cyan", paddingX: 1, width: Math.max(columns - 2, 10), overflow: "hidden", children: [_jsx(Text, { color: "cyan", bold: true, children: "❯ " }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: (val) => {
                                 handleSubmit(val).catch(() => { });
-                            }, placeholder: "Type your message\u2026", focus: !isProcessing, showCursor: true })] }) }), _jsxs(Box, { paddingX: 2, width: columns, justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: "Ctrl+C exit" }), _jsxs(Text, { dimColor: true, children: [userCount, " ", userCount === 1 ? "message" : "messages"] })] })] }));
+                            }, placeholder: "Type your message\u2026", focus: !isProcessing, showCursor: true })] }) }), _jsxs(Box, { paddingX: 2, width: columns, justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: isProcessing
+                            ? "ESC / Ctrl+C cancel"
+                            : "/new  /history  Ctrl+C exit" }), _jsxs(Text, { dimColor: true, children: [userCount, " ", userCount === 1 ? "message" : "messages"] })] })] }));
 }
 export function startTUI(provider, conversation, skills) {
     render(_jsx(App, { provider: provider, conversation: conversation, skills: skills }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "casabot",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",

package/src/agent/base.ts

@@ -7,6 +7,20 @@ import { CASABOT_HOME } from "../config/manager.js";
 
 const MAX_ITERATIONS = 20;
 
+function raceAbort<T>(promise: Promise<T>, signal: AbortSignal): Promise<T> {
+  if (signal.aborted) return Promise.reject(new Error("AbortError"));
+  return Promise.race([
+    promise,
+    new Promise<never>((_, reject) => {
+      signal.addEventListener(
+        "abort",
+        () => reject(new Error("AbortError")),
+        { once: true },
+      );
+    }),
+  ]);
+}
+
 export function buildSystemPrompt(skills: Skill[]): string {
   const skillList = formatSkillsForPrompt(skills);
 
@@ -44,6 +58,7 @@ export async function* runAgent(
   userMessage: string,
   conversation: ConversationHistory,
   skills: Skill[],
+  signal: AbortSignal,
 ): AsyncGenerator<Message> {
   const systemPrompt = buildSystemPrompt(skills);
 
@@ -53,11 +68,21 @@ export async function* runAgent(
   const tools = [TERMINAL_TOOL];
 
   for (let i = 0; i < MAX_ITERATIONS; i++) {
+    if (signal.aborted) return;
+
     const messagesWithSystem: Message[] = [
       { role: "system", content: systemPrompt },
       ...conversation.messages,
     ];
-    const assistantMsg = await provider.chat(messagesWithSystem, tools);
+
+    let assistantMsg: Message;
+    try {
+      assistantMsg = await raceAbort(provider.chat(messagesWithSystem, tools), signal);
+    } catch (err: unknown) {
+      if (signal.aborted) return;
+      throw err;
+    }
+
     await appendMessage(conversation, assistantMsg);
     yield assistantMsg;
 
@@ -66,6 +91,8 @@ export async function* runAgent(
     }
 
     for (const toolCall of assistantMsg.toolCalls) {
+      if (signal.aborted) return;
+
       let result: string;
 
       if (toolCall.name === "run_command") {

package/src/tui/app.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { render, Box, Text, Static, useInput, useApp, useStdout } from "ink";
 import TextInput from "ink-text-input";
 import Spinner from "ink-spinner";
@@ -8,6 +8,12 @@ import { markedTerminal } from "marked-terminal";
 import type { ChatProvider } from "../providers/base.js";
 import type { ConversationHistory, Message, Skill } from "../config/types.js";
 import { runAgent } from "../agent/base.js";
+import {
+  createConversation,
+  listConversations,
+  saveConversation,
+  appendMessage,
+} from "../history/store.js";
 
 function renderMarkdown(content: string): string {
   const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
@@ -25,6 +31,19 @@ function truncateOutput(content: string, maxLines = 8): string {
   );
 }
 
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function getPreview(conv: ConversationHistory, maxLen = 50): string {
+  const firstUser = conv.messages.find((m) => m.role === "user");
+  if (!firstUser) return "(empty session)";
+  const text = firstUser.content.replace(/\n/g, " ").trim();
+  return text.length > maxLen ? text.slice(0, maxLen - 1) + "…" : text;
+}
+
 function HRule({ columns }: { columns: number }): React.ReactElement {
   return (
     <Box paddingX={1} width={columns}>
@@ -208,10 +227,145 @@ function ProcessingIndicator({ columns }: { columns: number }): React.ReactEleme
   );
 }
 
+interface HistoryBrowserProps {
+  columns: number;
+  currentId: string;
+  onSelect: (conversation: ConversationHistory) => void;
+  onBack: () => void;
+}
+
+function HistoryBrowser({
+  columns,
+  currentId,
+  onSelect,
+  onBack,
+}: HistoryBrowserProps): React.ReactElement {
+  const [conversations, setConversations] = useState<ConversationHistory[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    listConversations()
+      .then((convs) => {
+        setConversations(convs);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  useInput((ch, key) => {
+    if (key.escape) {
+      onBack();
+      return;
+    }
+    if (key.return && conversations.length > 0) {
+      onSelect(conversations[selectedIndex]);
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }
+    if (key.downArrow && conversations.length > 0) {
+      setSelectedIndex((prev) => Math.min(conversations.length - 1, prev + 1));
+    }
+  });
+
+  const boxWidth = Math.max(columns - 4, 10);
+
+  return (
+    <Box flexDirection="column" paddingTop={1} width={columns}>
+      <Box paddingX={2}>
+        <Gradient name="vice">
+          <Text bold>{"📋 Session History"}</Text>
+        </Gradient>
+      </Box>
+
+      <HRule columns={columns} />
+
+      {isLoading ? (
+        <Box paddingX={2} marginTop={1} gap={1}>
+          <Text color="yellow">
+            <Spinner type="dots" />
+          </Text>
+          <Text color="yellow">{"Loading sessions…"}</Text>
+        </Box>
+      ) : conversations.length === 0 ? (
+        <Box paddingX={2} marginTop={1}>
+          <Text dimColor>{"No previous sessions found."}</Text>
+        </Box>
+      ) : (
+        <Box
+          flexDirection="column"
+          marginX={2}
+          marginTop={1}
+          borderStyle="round"
+          borderColor="gray"
+          paddingX={1}
+          paddingY={1}
+          width={boxWidth}
+          overflow="hidden"
+        >
+          {conversations.map((conv, i) => {
+            const isSelected = i === selectedIndex;
+            const isCurrent = conv.id === currentId;
+            const dateStr = formatDate(conv.startedAt);
+            const preview = getPreview(conv, Math.max(boxWidth - dateStr.length - 12, 20));
+            const msgCount = conv.messages.filter((m) => m.role === "user").length;
+
+            return (
+              <Box key={conv.id} width={boxWidth - 4}>
+                <Text
+                  color={isSelected ? "cyan" : undefined}
+                  bold={isSelected}
+                  dimColor={!isSelected}
+                >
+                  {isSelected ? " ▶ " : "   "}
+                </Text>
+                <Text
+                  color={isSelected ? "cyan" : undefined}
+                  bold={isSelected}
+                  dimColor={!isSelected}
+                >
+                  {dateStr}
+                </Text>
+                <Text dimColor={!isSelected}>{" │ "}</Text>
+                <Text
+                  color={isSelected ? "white" : undefined}
+                  dimColor={!isSelected}
+                  wrap="truncate"
+                >
+                  {preview}
+                </Text>
+                {isCurrent ? (
+                  <Text color="green" bold>{" (current)"}</Text>
+                ) : null}
+                <Text dimColor>
+                  {` [${msgCount}]`}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      <HRule columns={columns} />
+
+      <Box paddingX={2} width={columns} justifyContent="space-between">
+        <Text dimColor>{"↑↓ navigate  Enter select  ESC back"}</Text>
+        <Text dimColor>{`${conversations.length} sessions`}</Text>
+      </Box>
+    </Box>
+  );
+}
+
 type DisplayItem =
   | { key: string; type: "header" }
   | { key: string; type: "message"; message: Message };
 
+type AppMode = "chat" | "history";
+
 interface AppProps {
   provider: ChatProvider;
   conversation: ConversationHistory;
@@ -220,61 +374,149 @@ interface AppProps {
 
 function App({
   provider,
-  conversation,
+  conversation: initialConversation,
   skills,
 }: AppProps): React.ReactElement {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
+  const [mode, setMode] = useState<AppMode>("chat");
+  const conversationRef = useRef<ConversationHistory>(initialConversation);
+  const abortControllerRef = useRef<AbortController | null>(null);
   const { exit } = useApp();
   const { stdout } = useStdout();
   const columns = stdout.columns ?? 80;
 
+  const handleCancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+
   const handleSubmit = useCallback(
     async (text: string) => {
       const trimmed = text.trim();
       if (!trimmed || isProcessing) return;
 
+      if (trimmed === "/new") {
+        setInput("");
+        if (conversationRef.current.messages.length > 0) {
+          await saveConversation(conversationRef.current);
+        }
+        process.stdout.write("\x1Bc");
+        const newConv = createConversation();
+        conversationRef.current = newConv;
+        setMessages([]);
+        return;
+      }
+
+      if (trimmed === "/history") {
+        setInput("");
+        if (conversationRef.current.messages.length > 0) {
+          await saveConversation(conversationRef.current);
+        }
+        setMode("history");
+        return;
+      }
+
       setInput("");
       setIsProcessing(true);
 
       const userMsg: Message = { role: "user", content: trimmed };
       setMessages((prev) => [...prev, userMsg]);
 
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
       try {
-        const generator = runAgent(provider, trimmed, conversation, skills);
+        const generator = runAgent(
+          provider,
+          trimmed,
+          conversationRef.current,
+          skills,
+          controller.signal,
+        );
         for await (const msg of generator) {
+          if (controller.signal.aborted) break;
           setMessages((prev) => [...prev, msg]);
         }
       } catch (err: unknown) {
-        const errorMsg = err instanceof Error ? err.message : String(err);
-        setMessages((prev) => [
-          ...prev,
-          { role: "assistant", content: `❌ Error: ${errorMsg}` },
-        ]);
+        if (!controller.signal.aborted) {
+          const errorMsg = err instanceof Error ? err.message : String(err);
+          setMessages((prev) => [
+            ...prev,
+            { role: "assistant", content: `❌ Error: ${errorMsg}` },
+          ]);
+        }
       }
 
+      if (controller.signal.aborted) {
+        const cancelMsg: Message = {
+          role: "assistant",
+          content: "⏹ Cancelled.",
+        };
+        setMessages((prev) => [...prev, cancelMsg]);
+        await appendMessage(conversationRef.current, cancelMsg);
+      }
+
+      abortControllerRef.current = null;
       setIsProcessing(false);
     },
-    [isProcessing, provider, conversation, skills],
+    [isProcessing, provider, skills],
   );
 
+  const handleHistorySelect = useCallback(async (conv: ConversationHistory) => {
+    if (conversationRef.current.messages.length > 0) {
+      await saveConversation(conversationRef.current);
+    }
+    process.stdout.write("\x1Bc");
+    conversationRef.current = conv;
+    setMessages([...conv.messages]);
+    setMode("chat");
+  }, []);
+
   useInput((ch, key) => {
-    if (key.ctrl && ch === "c") {
-      exit();
+    if (mode !== "chat") return;
+
+    if (isProcessing) {
+      if (key.escape || (key.ctrl && ch === "c")) {
+        handleCancel();
+      }
+    } else {
+      if (key.ctrl && ch === "c") {
+        exit();
+      }
     }
   });
 
   const userCount = messages.filter((m) => m.role === "user").length;
 
-  const items = useMemo((): DisplayItem[] => [
-    { key: "header", type: "header" },
-    ...messages.map((msg, i): DisplayItem => ({
-      key: `msg-${i}`,
-      type: "message",
-      message: msg,
-    })),
-  ], [messages]);
+  const convId = conversationRef.current.id;
+
+  const items = useMemo(
+    (): DisplayItem[] => [
+      { key: `header-${convId}`, type: "header" },
+      ...messages.map(
+        (msg, i): DisplayItem => ({
+          key: `${convId}-msg-${i}`,
+          type: "message",
+          message: msg,
+        }),
+      ),
+    ],
+    [messages, convId],
+  );
+
+  if (mode === "history") {
+    return (
+      <HistoryBrowser
+        columns={columns}
+        currentId={conversationRef.current.id}
+        onSelect={handleHistorySelect}
+        onBack={() => setMode("chat")}
+      />
+    );
+  }
 
   return (
     <Box flexDirection="column" width={columns}>
@@ -325,7 +567,11 @@ function App({
       </Box>
 
       <Box paddingX={2} width={columns} justifyContent="space-between">
-        <Text dimColor>{"Ctrl+C exit"}</Text>
+        <Text dimColor>
+          {isProcessing
+            ? "ESC / Ctrl+C cancel"
+            : "/new  /history  Ctrl+C exit"}
+        </Text>
         <Text dimColor>
           {userCount} {userCount === 1 ? "message" : "messages"}
         </Text>