casabot 1.0.2 → 1.1.0

package/dist/tui/app.js

@@ -1,53 +1,108 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { render, Box, Text, useInput, useApp } from "ink";
+import { useState, useCallback, useEffect } from "react";
+import { render, Box, Text, useInput, useApp, useStdout } from "ink";
+import TextInput from "ink-text-input";
+import Spinner from "ink-spinner";
+import Gradient from "ink-gradient";
+import { marked } from "marked";
+import markedTerminal from "marked-terminal";
 import { runAgent } from "../agent/base.js";
-function truncateOutput(content, maxLines = 5) {
+marked.use(markedTerminal());
+function renderMarkdown(content) {
+    const result = marked.parse(content);
+    if (typeof result === "string")
+        return result.trimEnd();
+    return content;
+}
+function truncateOutput(content, maxLines = 8) {
     const lines = content.split("\n");
     if (lines.length <= maxLines)
         return content;
-    return lines.slice(0, maxLines).join("\n") + `\n  ... (${lines.length - maxLines} more lines)`;
+    return (lines.slice(0, maxLines).join("\n") +
+        `\n  … ${lines.length - maxLines} more lines`);
+}
+function HRule({ width }) {
+    return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(width - 4, 10)) }) }));
+}
+function Header() {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingTop: 1, children: [_jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "✦  CasAbot" }) }), _jsx(Text, { dimColor: true, children: "Cassiopeia A — Freely creates everything, like a supernova explosion." })] }));
+}
+function UserMessageView({ content }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, children: [_jsx(Text, { color: "green", bold: true, children: "▶ You" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { children: content }) })] }));
+}
+function AssistantMessageView({ content, }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "✦ CasAbot" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { children: renderMarkdown(content) }) })] }));
 }
-function MessageView({ message }) {
+function ToolCallsView({ message, }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "✦ CasAbot" }), message.content ? (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { children: renderMarkdown(message.content) }) })) : null, _jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "⚡ Tool Calls" }), message.toolCalls?.map((tc, i) => {
+                        let display = tc.arguments;
+                        try {
+                            const args = JSON.parse(tc.arguments);
+                            if (typeof args.command === "string")
+                                display = args.command;
+                        }
+                        catch {
+                            /* keep raw */
+                        }
+                        return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: tc.name }), _jsx(Text, { children: " → " }), _jsx(Text, { color: "white", children: display })] }, i));
+                    })] })] }));
+}
+function ToolResultView({ content, }) {
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, marginRight: 2, borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: "📋 Result" }), _jsx(Text, { dimColor: true, children: truncateOutput(content) })] }));
+}
+function MessageView({ message, }) {
     if (message.role === "user") {
-        return (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: "User: " }), _jsx(Text, { children: message.content })] }));
+        return _jsx(UserMessageView, { content: message.content });
     }
     if (message.role === "tool") {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, bold: true, children: "[Tool Result]" }), _jsx(Text, { dimColor: true, children: truncateOutput(message.content) })] }));
+        return _jsx(ToolResultView, { content: message.content });
+    }
+    if (message.role === "assistant" && message.toolCalls?.length) {
+        return _jsx(ToolCallsView, { message: message });
     }
     if (message.role === "assistant") {
-        if (message.toolCalls?.length) {
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "cyan", bold: true, children: "CasAbot: " }), message.content ? _jsx(Text, { color: "cyan", children: message.content }) : null, message.toolCalls.map((tc, i) => {
-                        const args = (() => {
-                            try {
-                                return JSON.parse(tc.arguments);
-                            }
-                            catch {
-                                return {};
-                            }
-                        })();
-                        return (_jsxs(Text, { dimColor: true, children: ["  ⚡ ", tc.name, ": ", args.command ?? tc.arguments] }, i));
-                    })] }));
-        }
-        return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "CasAbot: " }), _jsx(Text, { color: "cyan", children: message.content })] }));
+        return _jsx(AssistantMessageView, { content: message.content });
     }
     return _jsx(Text, { children: message.content });
 }
-function App({ provider, conversation, skills }) {
+function WelcomeHint() {
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, 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() {
+    return (_jsxs(Box, { paddingX: 2, marginTop: 1, gap: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: "Thinking…" })] }));
+}
+function App({ provider, conversation, skills, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState("");
     const [isProcessing, setIsProcessing] = useState(false);
     const { exit } = useApp();
-    const handleSubmit = useCallback(async () => {
-        const text = input.trim();
-        if (!text || isProcessing)
+    const { stdout } = useStdout();
+    const [termSize, setTermSize] = useState({
+        columns: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24,
+    });
+    useEffect(() => {
+        const onResize = () => {
+            setTermSize({
+                columns: stdout.columns ?? 80,
+                rows: stdout.rows ?? 24,
+            });
+        };
+        stdout.on("resize", onResize);
+        return () => {
+            stdout.off("resize", onResize);
+        };
+    }, [stdout]);
+    const handleSubmit = useCallback(async (text) => {
+        const trimmed = text.trim();
+        if (!trimmed || isProcessing)
             return;
         setInput("");
         setIsProcessing(true);
-        const userMsg = { role: "user", content: text };
+        const userMsg = { role: "user", content: trimmed };
         setMessages((prev) => [...prev, userMsg]);
         try {
-            const generator = runAgent(provider, text, conversation, skills);
+            const generator = runAgent(provider, trimmed, conversation, skills);
             for await (const msg of generator) {
                 setMessages((prev) => [...prev, msg]);
             }
@@ -56,31 +111,20 @@ function App({ provider, conversation, skills }) {
             const errorMsg = err instanceof Error ? err.message : String(err);
             setMessages((prev) => [
                 ...prev,
-                { role: "assistant", content: `❌ Error occurred: ${errorMsg}` },
+                { role: "assistant", content: `❌ Error: ${errorMsg}` },
             ]);
         }
         setIsProcessing(false);
-    }, [input, isProcessing, provider, conversation, skills]);
+    }, [isProcessing, provider, conversation, skills]);
     useInput((ch, key) => {
         if (key.ctrl && ch === "c") {
             exit();
-            return;
-        }
-        if (isProcessing)
-            return;
-        if (key.return) {
-            handleSubmit().catch(() => { });
-            return;
-        }
-        if (key.backspace || key.delete) {
-            setInput((prev) => prev.slice(0, -1));
-            return;
-        }
-        if (ch && !key.ctrl && !key.meta) {
-            setInput((prev) => prev + ch);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "🌟 CasAbot > " }), _jsx(Text, { dimColor: true, children: "Cassiopeia A \u2014 Freely creates everything, like a supernova explosion." })] }), messages.map((msg, i) => (_jsx(MessageView, { message: msg }, i))), isProcessing && (_jsx(Text, { color: "yellow", children: "⏳ Processing..." })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "green", bold: true, children: "❯ " }), _jsx(Text, { children: input }), !isProcessing && _jsx(Text, { dimColor: true, children: "█" })] })] }));
+    const userCount = messages.filter((m) => m.role === "user").length;
+    return (_jsxs(Box, { flexDirection: "column", width: termSize.columns, height: termSize.rows, borderStyle: "round", borderColor: "gray", children: [_jsx(Header, {}), _jsx(HRule, { width: termSize.columns }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", justifyContent: messages.length === 0 && !isProcessing ? "center" : "flex-end", paddingBottom: 1, children: [messages.length === 0 && !isProcessing ? (_jsx(WelcomeHint, {})) : (messages.map((msg, i) => (_jsx(MessageView, { message: msg }, i)))), isProcessing && _jsx(ProcessingIndicator, {})] }), _jsx(HRule, { width: termSize.columns }), _jsx(Box, { paddingX: 1, children: _jsxs(Box, { borderStyle: "round", borderColor: isProcessing ? "gray" : "cyan", paddingX: 1, width: "100%", 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, justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: "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.0.2",
+  "version": "1.1.0",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",
@@ -32,6 +32,9 @@
     "commander": "^13.1.0",
     "gray-matter": "^4.0.3",
     "ink": "^6.6.0",
+    "ink-gradient": "^4.0.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
     "marked": "^15.0.12",
     "marked-terminal": "^7.3.0",
     "openai": "^5.1.0",

package/src/tui/app.tsx

@@ -1,147 +1,321 @@
-import React, { useState, useCallback } from "react";
-import { render, Box, Text, useInput, useApp } from "ink";
+import React, { useState, useCallback, useEffect } from "react";
+import { render, Box, Text, useInput, useApp, useStdout } from "ink";
+import TextInput from "ink-text-input";
+import Spinner from "ink-spinner";
+import Gradient from "ink-gradient";
+import { marked } from "marked";
+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";
 
-function truncateOutput(content: string, maxLines = 5): string {
+marked.use(markedTerminal());
+
+function renderMarkdown(content: string): string {
+  const result = marked.parse(content);
+  if (typeof result === "string") return result.trimEnd();
+  return content;
+}
+
+function truncateOutput(content: string, maxLines = 8): string {
   const lines = content.split("\n");
   if (lines.length <= maxLines) return content;
-  return lines.slice(0, maxLines).join("\n") + `\n  ... (${lines.length - maxLines} more lines)`;
+  return (
+    lines.slice(0, maxLines).join("\n") +
+    `\n  … ${lines.length - maxLines} more lines`
+  );
 }
 
-function MessageView({ message }: { message: Message }): React.ReactElement {
-  if (message.role === "user") {
-    return (
-      <Box>
-        <Text color="green" bold>{"User: "}</Text>
-        <Text>{message.content}</Text>
+function HRule({ width }: { width: number }): React.ReactElement {
+  return (
+    <Box paddingX={1}>
+      <Text dimColor>{"─".repeat(Math.max(width - 4, 10))}</Text>
+    </Box>
+  );
+}
+
+function Header(): React.ReactElement {
+  return (
+    <Box flexDirection="column" paddingX={2} paddingTop={1}>
+      <Gradient name="vice">
+        <Text bold>{"✦  CasAbot"}</Text>
+      </Gradient>
+      <Text dimColor>
+        {"Cassiopeia A — Freely creates everything, like a supernova explosion."}
+      </Text>
+    </Box>
+  );
+}
+
+function UserMessageView({ content }: { content: string }): React.ReactElement {
+  return (
+    <Box flexDirection="column" paddingX={2} marginTop={1}>
+      <Text color="green" bold>
+        {"▶ You"}
+      </Text>
+      <Box marginLeft={2}>
+        <Text>{content}</Text>
       </Box>
-    );
-  }
+    </Box>
+  );
+}
 
-  if (message.role === "tool") {
-    return (
-      <Box flexDirection="column">
-        <Text dimColor bold>{"[Tool Result]"}</Text>
-        <Text dimColor>{truncateOutput(message.content)}</Text>
+function AssistantMessageView({
+  content,
+}: {
+  content: string;
+}): React.ReactElement {
+  return (
+    <Box flexDirection="column" paddingX={2} marginTop={1}>
+      <Text color="cyan" bold>
+        {"✦ CasAbot"}
+      </Text>
+      <Box marginLeft={2}>
+        <Text>{renderMarkdown(content)}</Text>
       </Box>
-    );
-  }
+    </Box>
+  );
+}
 
-  if (message.role === "assistant") {
-    if (message.toolCalls?.length) {
-      return (
-        <Box flexDirection="column">
-          <Text color="cyan" bold>{"CasAbot: "}</Text>
-          {message.content ? <Text color="cyan">{message.content}</Text> : null}
-          {message.toolCalls.map((tc, i) => {
-            const args = (() => {
-              try { return JSON.parse(tc.arguments) as { command?: string }; } catch { return {}; }
-            })();
-            return (
-              <Text key={i} dimColor>
-                {"  ⚡ "}{tc.name}: {args.command ?? tc.arguments}
-              </Text>
-            );
-          })}
+function ToolCallsView({
+  message,
+}: {
+  message: Message;
+}): React.ReactElement {
+  return (
+    <Box flexDirection="column" paddingX={2} marginTop={1}>
+      <Text color="cyan" bold>
+        {"✦ CasAbot"}
+      </Text>
+      {message.content ? (
+        <Box marginLeft={2}>
+          <Text>{renderMarkdown(message.content)}</Text>
         </Box>
-      );
-    }
-
-    return (
-      <Box>
-        <Text color="cyan" bold>{"CasAbot: "}</Text>
-        <Text color="cyan">{message.content}</Text>
+      ) : null}
+      <Box
+        flexDirection="column"
+        marginLeft={2}
+        marginTop={1}
+        borderStyle="round"
+        borderColor="yellow"
+        paddingX={1}
+      >
+        <Text color="yellow" bold>
+          {"⚡ Tool Calls"}
+        </Text>
+        {message.toolCalls?.map((tc, i) => {
+          let display = tc.arguments;
+          try {
+            const args = JSON.parse(tc.arguments) as Record<string, unknown>;
+            if (typeof args.command === "string") display = args.command;
+          } catch {
+            /* keep raw */
+          }
+          return (
+            <Box key={i}>
+              <Text dimColor>{tc.name}</Text>
+              <Text>{" → "}</Text>
+              <Text color="white">{display}</Text>
+            </Box>
+          );
+        })}
       </Box>
-    );
-  }
+    </Box>
+  );
+}
+
+function ToolResultView({
+  content,
+}: {
+  content: string;
+}): React.ReactElement {
+  return (
+    <Box
+      flexDirection="column"
+      marginLeft={4}
+      marginRight={2}
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+    >
+      <Text dimColor bold>
+        {"📋 Result"}
+      </Text>
+      <Text dimColor>{truncateOutput(content)}</Text>
+    </Box>
+  );
+}
 
+function MessageView({
+  message,
+}: {
+  message: Message;
+}): React.ReactElement {
+  if (message.role === "user") {
+    return <UserMessageView content={message.content} />;
+  }
+  if (message.role === "tool") {
+    return <ToolResultView content={message.content} />;
+  }
+  if (message.role === "assistant" && message.toolCalls?.length) {
+    return <ToolCallsView message={message} />;
+  }
+  if (message.role === "assistant") {
+    return <AssistantMessageView content={message.content} />;
+  }
   return <Text>{message.content}</Text>;
 }
 
+function WelcomeHint(): React.ReactElement {
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center" flexGrow={1}>
+      <Text dimColor>{"Type a message below to get started."}</Text>
+      <Text dimColor>{"CasAbot will orchestrate agents to help you."}</Text>
+    </Box>
+  );
+}
+
+function ProcessingIndicator(): React.ReactElement {
+  return (
+    <Box paddingX={2} marginTop={1} gap={1}>
+      <Text color="yellow">
+        <Spinner type="dots" />
+      </Text>
+      <Text color="yellow">{"Thinking…"}</Text>
+    </Box>
+  );
+}
+
 interface AppProps {
   provider: ChatProvider;
   conversation: ConversationHistory;
   skills: Skill[];
 }
 
-function App({ provider, conversation, skills }: AppProps): React.ReactElement {
+function App({
+  provider,
+  conversation,
+  skills,
+}: AppProps): React.ReactElement {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const { exit } = useApp();
+  const { stdout } = useStdout();
+
+  const [termSize, setTermSize] = useState({
+    columns: stdout.columns ?? 80,
+    rows: stdout.rows ?? 24,
+  });
 
-  const handleSubmit = useCallback(async () => {
-    const text = input.trim();
-    if (!text || isProcessing) return;
+  useEffect(() => {
+    const onResize = () => {
+      setTermSize({
+        columns: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24,
+      });
+    };
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
 
-    setInput("");
-    setIsProcessing(true);
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || isProcessing) return;
 
-    const userMsg: Message = { role: "user", content: text };
-    setMessages((prev) => [...prev, userMsg]);
+      setInput("");
+      setIsProcessing(true);
 
-    try {
-      const generator = runAgent(provider, text, conversation, skills);
-      for await (const msg of generator) {
-        setMessages((prev) => [...prev, msg]);
+      const userMsg: Message = { role: "user", content: trimmed };
+      setMessages((prev) => [...prev, userMsg]);
+
+      try {
+        const generator = runAgent(provider, trimmed, conversation, skills);
+        for await (const msg of generator) {
+          setMessages((prev) => [...prev, msg]);
+        }
+      } catch (err: unknown) {
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        setMessages((prev) => [
+          ...prev,
+          { role: "assistant", content: `❌ Error: ${errorMsg}` },
+        ]);
       }
-    } catch (err: unknown) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      setMessages((prev) => [
-        ...prev,
-        { role: "assistant", content: `❌ Error occurred: ${errorMsg}` },
-      ]);
-    }
 
-    setIsProcessing(false);
-  }, [input, isProcessing, provider, conversation, skills]);
+      setIsProcessing(false);
+    },
+    [isProcessing, provider, conversation, skills],
+  );
 
   useInput((ch, key) => {
     if (key.ctrl && ch === "c") {
       exit();
-      return;
-    }
-
-    if (isProcessing) return;
-
-    if (key.return) {
-      handleSubmit().catch(() => {});
-      return;
-    }
-
-    if (key.backspace || key.delete) {
-      setInput((prev) => prev.slice(0, -1));
-      return;
-    }
-
-    if (ch && !key.ctrl && !key.meta) {
-      setInput((prev) => prev + ch);
     }
   });
 
+  const userCount = messages.filter((m) => m.role === "user").length;
+
   return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text bold color="cyan">
-          {"🌟 CasAbot > "}
-        </Text>
-        <Text dimColor>Cassiopeia A — Freely creates everything, like a supernova explosion.</Text>
+    <Box
+      flexDirection="column"
+      width={termSize.columns}
+      height={termSize.rows}
+      borderStyle="round"
+      borderColor="gray"
+    >
+      <Header />
+      <HRule width={termSize.columns} />
+
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        overflowY="hidden"
+        justifyContent={messages.length === 0 && !isProcessing ? "center" : "flex-end"}
+        paddingBottom={1}
+      >
+        {messages.length === 0 && !isProcessing ? (
+          <WelcomeHint />
+        ) : (
+          messages.map((msg, i) => (
+            <MessageView key={i} message={msg} />
+          ))
+        )}
+        {isProcessing && <ProcessingIndicator />}
       </Box>
 
-      {messages.map((msg, i) => (
-        <MessageView key={i} message={msg} />
-      ))}
+      <HRule width={termSize.columns} />
 
-      {isProcessing && (
-        <Text color="yellow">{"⏳ Processing..."}</Text>
-      )}
+      <Box paddingX={1}>
+        <Box
+          borderStyle="round"
+          borderColor={isProcessing ? "gray" : "cyan"}
+          paddingX={1}
+          width="100%"
+        >
+          <Text color="cyan" bold>
+            {"❯ "}
+          </Text>
+          <TextInput
+            value={input}
+            onChange={setInput}
+            onSubmit={(val: string) => {
+              handleSubmit(val).catch(() => {});
+            }}
+            placeholder="Type your message…"
+            focus={!isProcessing}
+            showCursor
+          />
+        </Box>
+      </Box>
 
-      <Box marginTop={1}>
-        <Text color="green" bold>{"❯ "}</Text>
-        <Text>{input}</Text>
-        {!isProcessing && <Text dimColor>{"█"}</Text>}
+      <Box paddingX={2} justifyContent="space-between">
+        <Text dimColor>{"Ctrl+C exit"}</Text>
+        <Text dimColor>
+          {userCount} {userCount === 1 ? "message" : "messages"}
+        </Text>
       </Box>
     </Box>
   );

package/src/tui/marked-terminal.d.ts

@@ -0,0 +1,5 @@
+declare module "marked-terminal" {
+  import type { MarkedExtension } from "marked";
+  function markedTerminal(options?: Record<string, unknown>): MarkedExtension;
+  export default markedTerminal;
+}