casabot 1.1.8 → 1.1.11

package/Logo.svg

@@ -0,0 +1,24 @@
+<svg width="3701" height="1227" viewBox="0 0 3701 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="3701" height="1227" fill="white"/>
+<path d="M660.525 238.407C676.289 208.559 719.039 208.559 734.803 238.407L775.914 316.25C785.995 335.338 808.903 343.676 828.895 335.534L910.424 302.328C941.686 289.596 974.435 317.076 967.324 350.073L948.781 436.13C944.233 457.232 956.423 478.345 976.971 484.958L1060.77 511.927C1092.9 522.268 1100.33 564.369 1073.67 585.076L1004.15 639.08C987.1 652.322 982.866 676.33 994.357 694.604L1041.22 769.129C1059.18 797.705 1037.81 834.728 1004.08 833.455L916.107 830.137C894.536 829.323 875.861 844.994 872.916 866.378L860.908 953.588C856.304 987.027 816.132 1001.65 791.11 978.992L725.855 919.904C709.853 905.416 685.475 905.416 669.473 919.904L604.218 978.992C579.196 1001.65 539.024 987.027 534.42 953.588L522.412 866.378C519.467 844.994 500.792 829.323 479.221 830.137L391.252 833.455C357.521 834.728 336.145 797.705 354.113 769.129L400.971 694.604C412.461 676.33 408.228 652.322 391.181 639.08L321.659 585.076C295.002 564.369 302.426 522.268 334.557 511.927L418.357 484.958C438.905 478.345 451.094 457.232 446.547 436.13L428.004 350.073C420.893 317.076 453.642 289.596 484.904 302.328L566.433 335.534C586.425 343.676 609.333 335.338 619.414 316.25L660.525 238.407Z" fill="#EA3A23"/>
+<path d="M797.472 250.022C822.885 227.806 862.796 243.126 866.816 276.641L877.3 364.047C879.871 385.479 898.27 401.473 919.851 401.036L1007.87 399.254C1041.61 398.57 1062.34 435.961 1043.88 464.218L995.724 537.914C983.917 555.985 987.73 580.063 1004.54 593.601L1073.11 648.81C1099.4 669.979 1091.25 711.944 1058.94 721.723L974.682 747.225C954.022 753.479 941.466 774.375 945.644 795.553L962.683 881.921C969.216 915.037 935.993 941.941 904.958 928.665L824.021 894.042C804.174 885.552 781.124 893.489 770.711 912.398L728.248 989.511C711.966 1019.08 669.222 1018.33 653.982 988.215L614.235 909.666C604.489 890.406 581.73 881.669 561.599 889.461L479.503 921.239C448.024 933.423 415.759 905.377 423.445 872.508L443.487 786.788C448.402 765.769 436.583 744.447 416.153 737.476L332.837 709.048C300.891 698.148 294.203 655.924 321.218 635.685L391.671 582.903C408.947 569.96 413.599 546.03 402.429 527.558L356.878 452.227C339.413 423.342 361.431 386.697 395.134 388.558L483.032 393.411C504.586 394.601 523.532 379.259 526.849 357.929L540.377 270.943C545.564 237.589 585.986 223.671 610.608 246.761L674.822 306.978C690.568 321.744 714.943 322.17 731.195 307.962L797.472 250.022Z" fill="#2BADEE" fill-opacity="0.5"/>
+<circle cx="487.27" cy="557.093" r="116.956" fill="white"/>
+<circle cx="871.191" cy="531.667" r="116.956" fill="white"/>
+<circle cx="430.063" cy="545.651" r="34.3241" fill="black"/>
+<circle cx="923.313" cy="497.343" r="34.3241" fill="black"/>
+<path d="M822.883 682.312C822.883 698.756 819.645 715.039 813.352 730.232C807.059 745.424 797.835 759.228 786.208 770.856C774.58 782.484 760.776 791.707 745.583 798C730.391 804.293 714.108 807.532 697.664 807.532C681.22 807.532 664.937 804.293 649.744 798C634.552 791.707 620.748 782.484 609.12 770.856C597.493 759.228 588.269 745.424 581.976 730.232C575.683 715.039 572.444 698.756 572.444 682.312L629.702 682.312C629.702 691.237 631.46 700.075 634.875 708.32C638.291 716.566 643.297 724.058 649.607 730.369C655.918 736.68 663.41 741.686 671.656 745.101C679.902 748.516 688.739 750.274 697.664 750.274C706.589 750.274 715.426 748.516 723.672 745.101C731.917 741.686 739.41 736.68 745.72 730.369C752.031 724.058 757.037 716.566 760.453 708.32C763.868 700.075 765.626 691.237 765.626 682.312H822.883Z" fill="black"/>
+<path d="M1685.16 695.25C1696.64 670.106 1732.36 670.106 1743.84 695.25V695.25C1749.56 707.757 1762.57 715.269 1776.25 713.962V713.962C1803.77 711.335 1821.63 742.271 1805.6 764.788V764.788C1797.62 775.988 1797.62 791.012 1805.6 802.212V802.212C1821.63 824.729 1803.77 855.665 1776.25 853.038V853.038C1762.57 851.731 1749.56 859.243 1743.84 871.75V871.75C1732.36 896.894 1696.64 896.894 1685.16 871.75V871.75C1679.44 859.243 1666.43 851.731 1652.75 853.038V853.038C1625.23 855.665 1607.37 824.729 1623.4 802.212V802.212C1631.38 791.012 1631.38 775.988 1623.4 764.788V764.788C1607.37 742.271 1625.23 711.335 1652.75 713.962V713.962C1666.43 715.269 1679.44 707.757 1685.16 695.25V695.25Z" fill="#EA3A23"/>
+<path d="M2697.58 657.708C2710.48 633.24 2745.52 633.24 2758.42 657.708V657.708C2765.46 671.079 2780.42 678.279 2795.26 675.453V675.453C2822.44 670.28 2844.28 697.676 2833.19 723.015V723.015C2827.14 736.862 2830.83 753.042 2842.3 762.888V762.888C2863.28 780.906 2855.48 815.068 2828.76 822.197V822.197C2814.15 826.093 2803.81 839.068 2803.26 854.172V854.172C2802.26 881.813 2770.69 897.017 2748.45 880.567V880.567C2736.3 871.578 2719.7 871.578 2707.55 880.567V880.567C2685.31 897.017 2653.74 881.813 2652.74 854.172V854.172C2652.19 839.068 2641.85 826.093 2627.24 822.197V822.197C2600.52 815.068 2592.72 780.906 2613.7 762.888V762.888C2625.17 753.042 2628.86 736.862 2622.81 723.015V723.015C2611.72 697.676 2633.56 670.28 2660.74 675.453V675.453C2675.58 678.279 2690.54 671.079 2697.58 657.708V657.708Z" fill="black"/>
+<path d="M3078.87 866.916C3058.12 899.232 3010.88 899.232 2990.13 866.916L2976.57 845.808C2969.43 834.689 2958.37 826.657 2945.59 823.3L2921.33 816.929C2884.18 807.174 2869.58 762.253 2893.9 732.527L2909.79 713.11C2918.15 702.882 2922.38 689.885 2921.62 676.692L2920.18 651.646C2917.98 613.302 2956.19 585.539 2991.98 599.482L3015.35 608.59C3027.67 613.388 3041.33 613.388 3053.65 608.59L3077.02 599.482C3112.81 585.539 3151.02 613.302 3148.82 651.646L3147.38 676.692C3146.62 689.885 3150.85 702.882 3159.21 713.11L3175.1 732.527C3199.42 762.253 3184.82 807.174 3147.67 816.929L3123.41 823.3C3110.63 826.657 3099.57 834.689 3092.43 845.808L3078.87 866.916Z" fill="#2BADEE"/>
+<path d="M1545.44 819.589C1515.81 849.148 1478.24 869.518 1437.26 878.238C1396.29 886.957 1353.65 883.654 1314.52 868.728C1275.38 853.801 1241.41 827.888 1216.71 794.12C1192.01 760.351 1177.64 720.17 1175.33 678.43C1173.02 636.69 1182.87 595.176 1203.7 558.901C1224.52 522.625 1255.43 493.141 1292.68 474.008C1329.93 454.874 1371.94 446.911 1413.63 451.079C1455.33 455.247 1494.92 471.367 1527.62 497.495L1481.9 554.471C1460.22 537.151 1433.98 526.465 1406.34 523.702C1378.71 520.94 1350.86 526.219 1326.16 538.902C1301.47 551.584 1280.98 571.129 1267.18 595.175C1253.38 619.221 1246.84 646.74 1248.37 674.408C1249.91 702.077 1259.43 728.712 1275.8 751.096C1292.18 773.48 1314.69 790.657 1340.64 800.552C1366.58 810.446 1394.84 812.636 1422 806.856C1449.17 801.076 1474.07 787.573 1493.71 767.979L1545.44 819.589Z" fill="black"/>
+<path d="M1962.5 777C1937.17 777 1912.88 766.886 1894.97 748.882C1877.06 730.879 1867 706.461 1867 681C1867 655.539 1877.06 631.121 1894.97 613.118C1912.88 595.114 1937.17 585 1962.5 585L1962.5 639.079C1951.44 639.079 1940.83 643.495 1933.01 651.357C1925.19 659.219 1920.8 669.882 1920.8 681C1920.8 692.118 1925.19 702.781 1933.01 710.643C1940.83 718.505 1951.44 722.921 1962.5 722.921L1962.5 777Z" fill="black"/>
+<path d="M1962.5 701C1987.83 701 2012.12 711.062 2030.03 728.971C2047.94 746.881 2058 771.172 2058 796.5C2058 821.828 2047.94 846.119 2030.03 864.029C2012.12 881.938 1987.83 892 1962.5 892L1962.5 838.203C1973.56 838.203 1984.17 833.809 1991.99 825.989C1999.81 818.168 2004.2 807.56 2004.2 796.5C2004.2 785.44 1999.81 774.832 1991.99 767.011C1984.17 759.191 1973.56 754.797 1962.5 754.797L1962.5 701Z" fill="black"/>
+<path d="M1624.31 640.094C1631.91 618.283 1647.15 599.963 1667.22 588.527C1687.28 577.092 1710.81 573.316 1733.45 577.899C1756.09 582.482 1776.3 595.113 1790.33 613.452C1804.37 631.792 1811.29 654.598 1809.8 677.646L1753.63 674.024C1754.24 664.56 1751.4 655.197 1745.64 647.667C1739.87 640.137 1731.57 634.951 1722.28 633.069C1712.99 631.188 1703.32 632.738 1695.09 637.433C1686.85 642.128 1680.59 649.65 1677.47 658.605L1624.31 640.094Z" fill="black"/>
+<rect x="2148.83" y="455.492" width="75" height="420.804" transform="rotate(9 2148.83 455.492)" fill="black"/>
+<rect x="2522" y="450" width="75" height="434" fill="black"/>
+<rect x="3262" y="455" width="75" height="434" fill="black"/>
+<rect x="3417" y="539" width="75" height="234" transform="rotate(90 3417 539)" fill="black"/>
+<rect x="3417" y="817" width="75" height="155" transform="rotate(90 3417 817)" fill="black"/>
+<rect x="2223" y="466.871" width="75" height="420.804" transform="rotate(-13 2223 466.871)" fill="black"/>
+<rect x="2413" y="657" width="75" height="280" transform="rotate(90 2413 657)" fill="black"/>
+</svg>

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="Logo.svg" alt="CasAbot" width="480" />
+</p>
+
 # CasAbot
 
 > **Cassiopeia A** — Create anything freely, like a supernova explosion.

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,18 @@ import { appendMessage } from "../history/store.js";
 import { formatSkillsForPrompt } from "../skills/loader.js";
 import { CASABOT_HOME } from "../config/manager.js";
 const MAX_ITERATIONS = 20;
+const MAX_RETRIES = 3;
+const RETRY_BASE_DELAY_MS = 2000;
+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 +45,47 @@ 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;
+        for (let attempt = 0;; attempt++) {
+            try {
+                assistantMsg = await raceAbort(provider.chat(messagesWithSystem, tools), signal);
+                break;
+            }
+            catch (err) {
+                if (signal.aborted)
+                    return;
+                if (attempt >= MAX_RETRIES)
+                    throw err;
+                const delay = RETRY_BASE_DELAY_MS * 2 ** attempt;
+                const errorMsg = err instanceof Error ? err.message : String(err);
+                const retryMsg = {
+                    role: "assistant",
+                    content: `⏳ API request failed: ${errorMsg}. Retrying in ${delay}ms... (${attempt + 1}/${MAX_RETRIES})`,
+                };
+                yield retryMsg;
+                await raceAbort(new Promise((resolve) => setTimeout(resolve, delay)), signal);
+            }
+        }
         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/cli/index.js

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 import { Command } from "commander";
 import { loadConfig, saveConfig, getDefaultConfig, ensureDirectories } from "../config/manager.js";
 import { createProvider } from "../providers/index.js";
@@ -6,6 +9,24 @@ import { loadSkills } from "../skills/loader.js";
 import { createConversation } from "../history/store.js";
 import { startTUI } from "../tui/app.js";
 import { setupWizard } from "./setup.js";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+async function displayLogo() {
+    try {
+        const require = createRequire(import.meta.url);
+        const asciify = require("asciify-image");
+        const logoPath = join(__dirname, "..", "..", "Logo2.png");
+        const ascii = await asciify(logoPath, {
+            fit: "box",
+            width: "50%",
+            color: true,
+        });
+        console.log(ascii);
+        console.log("");
+    }
+    catch {
+        // Logo display is non-critical; silently skip on failure
+    }
+}
 const program = new Command();
 program
     .name("casabot")
@@ -58,6 +79,7 @@ program
         const provider = createProvider(providerConfig);
         const skills = await loadSkills();
         const conversation = createConversation();
+        await displayLogo();
         startTUI(provider, conversation, skills);
     }
     catch (err) {

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,9 @@ 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";
+const BRAND_BLUE = "#2BADEE";
+const BRAND_RED = "#EA3A23";
 function renderMarkdown(content) {
     const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
     const md = new Marked({ gfm: true });
@@ -20,21 +23,33 @@ 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)) }) }));
 }
 function HeaderBlock({ columns }) {
-    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: "✦  CasAbot" }) }) }), _jsx(Box, { paddingX: 2, children: _jsx(Text, { wrap: "wrap", dimColor: true, children: "Cassiopeia A — Freely creates everything, like a supernova explosion." }) }), _jsx(HRule, { columns: columns })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, width: columns, children: [_jsx(Box, { paddingX: 2, children: _jsx(Gradient, { colors: [BRAND_RED, BRAND_BLUE], children: _jsx(Text, { bold: true, children: "✦  CasAbot" }) }) }), _jsx(Box, { paddingX: 2, children: _jsx(Text, { wrap: "wrap", dimColor: true, children: "Cassiopeia A — Freely creates everything, like a supernova explosion." }) }), _jsx(HRule, { columns: columns })] }));
 }
 function UserMessageView({ content, columns }) {
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: "green", bold: true, children: "▶ You" }), _jsx(Box, { marginLeft: 2, width: Math.max(columns - 6, 10), children: _jsx(Text, { wrap: "wrap", children: content }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: BRAND_RED, bold: true, children: "▶ You" }), _jsx(Box, { marginLeft: 2, width: Math.max(columns - 6, 10), children: _jsx(Text, { wrap: "wrap", children: content }) })] }));
 }
 function AssistantMessageView({ content, columns, }) {
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: "cyan", bold: true, children: "✦ CasAbot" }), _jsx(Box, { marginLeft: 2, width: Math.max(columns - 6, 10), children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(content) }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: BRAND_BLUE, bold: true, children: "✦ CasAbot" }), _jsx(Box, { marginLeft: 2, width: Math.max(columns - 6, 10), children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(content) }) })] }));
 }
 function ToolCallsView({ message, columns, }) {
     const boxWidth = Math.max(columns - 6, 10);
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: "cyan", bold: true, children: "✦ CasAbot" }), message.content ? (_jsx(Box, { marginLeft: 2, width: boxWidth, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(message.content) }) })) : null, _jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, width: boxWidth, overflow: "hidden", children: [_jsx(Text, { color: "yellow", bold: true, children: "⚡ Tool Calls" }), message.toolCalls?.map((tc, i) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, width: columns, children: [_jsx(Text, { color: BRAND_BLUE, bold: true, children: "✦ CasAbot" }), message.content ? (_jsx(Box, { marginLeft: 2, width: boxWidth, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(message.content) }) })) : null, _jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, borderStyle: "round", borderColor: BRAND_RED, paddingX: 1, width: boxWidth, overflow: "hidden", children: [_jsx(Text, { color: BRAND_RED, bold: true, children: "⚡ Tool Calls" }), message.toolCalls?.map((tc, i) => {
                         let display = tc.arguments;
                         try {
                             const args = JSON.parse(tc.arguments);
@@ -74,60 +89,166 @@ function WelcomeHint({ columns }) {
     return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, marginBottom: 1, width: columns, children: [_jsx(Text, { dimColor: true, children: "Type a message below to get started." }), _jsx(Text, { dimColor: true, children: "CasAbot will orchestrate agents to help you." })] }));
 }
 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…" })] }));
+    return (_jsxs(Box, { paddingX: 2, marginTop: 1, gap: 1, width: columns, children: [_jsx(Text, { color: BRAND_BLUE, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: BRAND_BLUE, 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, { colors: [BRAND_RED, BRAND_BLUE], 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: BRAND_BLUE, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: BRAND_BLUE, 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 ? BRAND_BLUE : undefined, bold: isSelected, dimColor: !isSelected, children: isSelected ? " ▶ " : "   " }), _jsx(Text, { color: isSelected ? BRAND_BLUE : 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: BRAND_RED, 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));
                     }
                     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) => {
+                } }), 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" : BRAND_BLUE, paddingX: 1, width: Math.max(columns - 2, 10), overflow: "hidden", children: [_jsx(Text, { color: BRAND_BLUE, 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.11",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",
@@ -28,6 +28,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@anthropic-ai/sdk": "^0.52.0",
+    "asciify-image": "^0.1.10",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "gray-matter": "^4.0.3",

package/skills/agent/SKILL.md

@@ -17,15 +17,62 @@ This manual explains how the base agent creates and manages podman-based sub-age
 
 podman must be installed before creating sub-agents.
 
+### Step 1: Check if podman is already installed
+
 ```bash
-# Check installation
-which podman
+which podman && podman --version
+```
+
+If podman is found, skip to Section 2.
+
+### Step 2: Gather requirements from the user
+
+> **Important:** Before installing podman, you **must** ask the user the following questions. Do not assume or proceed without their answers.
+
+1. **Detect or ask the distro:**
+   ```bash
+   cat /etc/os-release
+   ```
+   If the distro cannot be determined, ask the user: *"Which Linux distribution are you using? (e.g. Ubuntu, Fedora, Arch, Debian, RHEL, etc.)"*
 
-# If not installed (Debian/Ubuntu)
+2. **Ask about sudo privileges:**
+   *"Do you have sudo (root) privileges on this system?"*
+   — If the user does not have sudo, guide them to request it from an administrator, or suggest rootless podman setup if possible.
+
+3. **Ask about rootless mode:**
+   *"Would you like to run podman in rootless mode (recommended for security)?"*
+
+4. **Ask about special requirements:**
+   *"Do you have any specific requirements? (e.g. a particular podman version, a custom storage location, proxy settings, etc.)"*
+
+### Step 3: Install podman based on user's answers
+
+```bash
+# Debian / Ubuntu
 sudo apt update && sudo apt install -y podman
 
-# If not installed (Fedora/RHEL)
+# Fedora / RHEL / CentOS
 sudo dnf install -y podman
+
+# Arch Linux
+sudo pacman -S podman
+
+# openSUSE
+sudo zypper install -y podman
+```
+
+If the user requested rootless mode, also configure subuid/subgid:
+
+```bash
+sudo usermod --add-subuids 100000-165535 --add-subgids 100000-165535 $(whoami)
+podman system migrate
+```
+
+### Step 4: Verify installation
+
+```bash
+podman --version
+podman info
 ```
 
 ## 2. Configure podman storage

package/src/agent/base.ts

@@ -6,6 +6,22 @@ import { formatSkillsForPrompt } from "../skills/loader.js";
 import { CASABOT_HOME } from "../config/manager.js";
 
 const MAX_ITERATIONS = 20;
+const MAX_RETRIES = 3;
+const RETRY_BASE_DELAY_MS = 2000;
+
+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 +60,7 @@ export async function* runAgent(
   userMessage: string,
   conversation: ConversationHistory,
   skills: Skill[],
+  signal: AbortSignal,
 ): AsyncGenerator<Message> {
   const systemPrompt = buildSystemPrompt(skills);
 
@@ -53,11 +70,34 @@ 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;
+    for (let attempt = 0; ; attempt++) {
+      try {
+        assistantMsg = await raceAbort(provider.chat(messagesWithSystem, tools), signal);
+        break;
+      } catch (err: unknown) {
+        if (signal.aborted) return;
+        if (attempt >= MAX_RETRIES) throw err;
+
+        const delay = RETRY_BASE_DELAY_MS * 2 ** attempt;
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        const retryMsg: Message = {
+          role: "assistant",
+          content: `⏳ API request failed: ${errorMsg}. Retrying in ${delay}ms... (${attempt + 1}/${MAX_RETRIES})`,
+        };
+        yield retryMsg;
+
+        await raceAbort(new Promise((resolve) => setTimeout(resolve, delay)), signal);
+      }
+    }
+
     await appendMessage(conversation, assistantMsg);
     yield assistantMsg;
 
@@ -66,6 +106,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/cli/index.ts

@@ -1,5 +1,8 @@
 #!/usr/bin/env node
 
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 import { Command } from "commander";
 import { loadConfig, saveConfig, getDefaultConfig, ensureDirectories } from "../config/manager.js";
 import { createProvider } from "../providers/index.js";
@@ -8,6 +11,28 @@ import { createConversation } from "../history/store.js";
 import { startTUI } from "../tui/app.js";
 import { setupWizard } from "./setup.js";
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function displayLogo(): Promise<void> {
+  try {
+    const require = createRequire(import.meta.url);
+    const asciify = require("asciify-image") as (
+      path: string,
+      opts: Record<string, unknown>,
+    ) => Promise<string>;
+    const logoPath = join(__dirname, "..", "..", "Logo2.png");
+    const ascii = await asciify(logoPath, {
+      fit: "box",
+      width: "50%",
+      color: true,
+    });
+    console.log(ascii);
+    console.log("");
+  } catch {
+    // Logo display is non-critical; silently skip on failure
+  }
+}
+
 const program = new Command();
 
 program
@@ -70,6 +95,7 @@ program
       const skills = await loadSkills();
       const conversation = createConversation();
 
+      await displayLogo();
       startTUI(provider, conversation, skills);
     } catch (err: unknown) {
       const msg = err instanceof Error ? err.message : String(err);

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";
@@ -9,6 +9,16 @@ 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";
+
+const BRAND_BLUE = "#2BADEE";
+const BRAND_RED = "#EA3A23";
+
 function renderMarkdown(content: string): string {
   const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
   const md = new Marked({ gfm: true });
@@ -25,6 +35,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}>
@@ -37,7 +60,7 @@ function HeaderBlock({ columns }: { columns: number }): React.ReactElement {
   return (
     <Box flexDirection="column" paddingTop={1} width={columns}>
       <Box paddingX={2}>
-        <Gradient name="vice">
+        <Gradient colors={[BRAND_RED, BRAND_BLUE]}>
           <Text bold>{"✦  CasAbot"}</Text>
         </Gradient>
       </Box>
@@ -54,7 +77,7 @@ function HeaderBlock({ columns }: { columns: number }): React.ReactElement {
 function UserMessageView({ content, columns }: { content: string; columns: number }): React.ReactElement {
   return (
     <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
-      <Text color="green" bold>
+      <Text color={BRAND_RED} bold>
         {"▶ You"}
       </Text>
       <Box marginLeft={2} width={Math.max(columns - 6, 10)}>
@@ -73,7 +96,7 @@ function AssistantMessageView({
 }): React.ReactElement {
   return (
     <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
-      <Text color="cyan" bold>
+      <Text color={BRAND_BLUE} bold>
         {"✦ CasAbot"}
       </Text>
       <Box marginLeft={2} width={Math.max(columns - 6, 10)}>
@@ -93,7 +116,7 @@ function ToolCallsView({
   const boxWidth = Math.max(columns - 6, 10);
   return (
     <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
-      <Text color="cyan" bold>
+      <Text color={BRAND_BLUE} bold>
         {"✦ CasAbot"}
       </Text>
       {message.content ? (
@@ -106,12 +129,12 @@ function ToolCallsView({
         marginLeft={2}
         marginTop={1}
         borderStyle="round"
-        borderColor="yellow"
+        borderColor={BRAND_RED}
         paddingX={1}
         width={boxWidth}
         overflow="hidden"
       >
-        <Text color="yellow" bold>
+        <Text color={BRAND_RED} bold>
           {"⚡ Tool Calls"}
         </Text>
         {message.toolCalls?.map((tc, i) => {
@@ -200,10 +223,143 @@ function WelcomeHint({ columns }: { columns: number }): React.ReactElement {
 function ProcessingIndicator({ columns }: { columns: number }): React.ReactElement {
   return (
     <Box paddingX={2} marginTop={1} gap={1} width={columns}>
-      <Text color="yellow">
+      <Text color={BRAND_BLUE}>
         <Spinner type="dots" />
       </Text>
-      <Text color="yellow">{"Thinking…"}</Text>
+      <Text color={BRAND_BLUE}>{"Thinking…"}</Text>
+    </Box>
+  );
+}
+
+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 colors={[BRAND_RED, BRAND_BLUE]}>
+          <Text bold>{"📋 Session History"}</Text>
+        </Gradient>
+      </Box>
+
+      <HRule columns={columns} />
+
+      {isLoading ? (
+        <Box paddingX={2} marginTop={1} gap={1}>
+          <Text color={BRAND_BLUE}>
+            <Spinner type="dots" />
+          </Text>
+          <Text color={BRAND_BLUE}>{"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 ? BRAND_BLUE : undefined}
+                  bold={isSelected}
+                  dimColor={!isSelected}
+                >
+                  {isSelected ? " ▶ " : "   "}
+                </Text>
+                <Text
+                  color={isSelected ? BRAND_BLUE : 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={BRAND_RED} 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>
   );
 }
@@ -212,6 +368,8 @@ type DisplayItem =
   | { key: string; type: "header" }
   | { key: string; type: "message"; message: Message };
 
+type AppMode = "chat" | "history";
+
 interface AppProps {
   provider: ChatProvider;
   conversation: ConversationHistory;
@@ -220,61 +378,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}>
@@ -303,12 +549,12 @@ function App({
       <Box paddingX={1} width={columns}>
         <Box
           borderStyle="round"
-          borderColor={isProcessing ? "gray" : "cyan"}
+          borderColor={isProcessing ? "gray" : BRAND_BLUE}
           paddingX={1}
           width={Math.max(columns - 2, 10)}
           overflow="hidden"
         >
-          <Text color="cyan" bold>
+          <Text color={BRAND_BLUE} bold>
             {"❯ "}
           </Text>
           <TextInput
@@ -325,7 +571,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>