casabot 1.1.6 → 1.1.8

package/dist/tui/app.js

@@ -4,14 +4,14 @@ import { render, Box, Text, Static, 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 { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 import { runAgent } from "../agent/base.js";
-marked.use({ gfm: true });
 function renderMarkdown(content) {
     const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
-    marked.use(markedTerminal({ showSectionPrefix: false, tab: 2, width }));
-    return marked.parse(content, { async: false }).trimEnd();
+    const md = new Marked({ gfm: true });
+    md.use(markedTerminal({ showSectionPrefix: false, tab: 2, width, reflowText: true }));
+    return md.parse(content, { async: false }).trimEnd();
 }
 function truncateOutput(content, maxLines = 8) {
     const lines = content.split("\n");
@@ -20,22 +20,21 @@ function truncateOutput(content, maxLines = 8) {
     return (lines.slice(0, maxLines).join("\n") +
         `\n  … ${lines.length - maxLines} more lines`);
 }
-function HRule() {
-    const { stdout } = useStdout();
-    const width = stdout.columns ?? 80;
-    return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(width - 4, 10)) }) }));
+function HRule({ columns }) {
+    return (_jsx(Box, { paddingX: 1, width: columns, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(columns - 4, 1)) }) }));
 }
-function HeaderBlock() {
-    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Box, { paddingX: 2, children: _jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "✦  CasAbot" }) }) }), _jsx(Box, { paddingX: 2, children: _jsx(Text, { dimColor: true, children: "Cassiopeia A — Freely creates everything, like a supernova explosion." }) }), _jsx(HRule, {})] }));
+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 })] }));
 }
-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, { wrap: "wrap", children: content }) })] }));
+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 }) })] }));
 }
-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, { wrap: "wrap", children: renderMarkdown(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) }) })] }));
 }
-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, { wrap: "wrap", 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) => {
+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) => {
                         let display = tc.arguments;
                         try {
                             const args = JSON.parse(tc.arguments);
@@ -45,38 +44,45 @@ function ToolCallsView({ message, }) {
                         catch {
                             /* keep raw */
                         }
+                        const maxArgLen = Math.max(boxWidth - tc.name.length - 8, 20);
+                        if (display.length > maxArgLen) {
+                            display = display.slice(0, maxArgLen - 1) + "…";
+                        }
                         return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: tc.name }), _jsx(Text, { children: " → " }), _jsx(Text, { color: "white", wrap: "wrap", 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, wrap: "wrap", children: truncateOutput(content) })] }));
+function ToolResultView({ content, columns, }) {
+    const boxWidth = Math.max(columns - 6, 10);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, marginRight: 2, borderStyle: "round", borderColor: "gray", paddingX: 1, width: boxWidth, overflow: "hidden", children: [_jsx(Text, { dimColor: true, bold: true, children: "📋 Result" }), _jsx(Text, { dimColor: true, wrap: "wrap", children: truncateOutput(content) })] }));
 }
-function MessageView({ message, }) {
+function MessageView({ message, columns, }) {
     if (message.role === "user") {
-        return _jsx(UserMessageView, { content: message.content });
+        return _jsx(UserMessageView, { content: message.content, columns: columns });
     }
     if (message.role === "tool") {
-        return _jsx(ToolResultView, { content: message.content });
+        return _jsx(ToolResultView, { content: message.content, columns: columns });
     }
     if (message.role === "assistant" && message.toolCalls?.length) {
-        return _jsx(ToolCallsView, { message: message });
+        return _jsx(ToolCallsView, { message: message, columns: columns });
     }
     if (message.role === "assistant") {
-        return _jsx(AssistantMessageView, { content: message.content });
+        return _jsx(AssistantMessageView, { content: message.content, columns: columns });
     }
-    return _jsx(Text, { children: message.content });
+    return _jsx(Text, { wrap: "wrap", children: message.content });
 }
-function WelcomeHint() {
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, marginBottom: 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 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() {
-    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 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, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState("");
     const [isProcessing, setIsProcessing] = useState(false);
     const { exit } = useApp();
+    const { stdout } = useStdout();
+    const columns = stdout.columns ?? 80;
     const handleSubmit = useCallback(async (text) => {
         const trimmed = text.trim();
         if (!trimmed || isProcessing)
@@ -114,14 +120,14 @@ function App({ provider, conversation, skills, }) {
             message: msg,
         })),
     ], [messages]);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item) => {
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(Static, { items: items, children: (item) => {
                     if (item.type === "header") {
-                        return (_jsx(Box, { flexDirection: "column", children: _jsx(HeaderBlock, {}) }, item.key));
+                        return (_jsx(Box, { flexDirection: "column", width: columns, children: _jsx(HeaderBlock, { columns: columns }) }, item.key));
                     }
-                    return (_jsx(Box, { flexDirection: "column", children: _jsx(MessageView, { message: item.message }) }, item.key));
-                } }), messages.length === 0 && !isProcessing && _jsx(WelcomeHint, {}), isProcessing && _jsx(ProcessingIndicator, {}), _jsx(HRule, {}), _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) => {
+                    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, 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: "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.6",
+  "version": "1.1.8",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",

package/src/tui/app.tsx

@@ -3,18 +3,17 @@ import { render, Box, Text, Static, 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 { 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";
 
-marked.use({ gfm: true });
-
 function renderMarkdown(content: string): string {
   const width = Math.max((process.stdout.columns ?? 80) - 8, 40);
-  marked.use(markedTerminal({ showSectionPrefix: false, tab: 2, width }));
-  return (marked.parse(content, { async: false }) as string).trimEnd();
+  const md = new Marked({ gfm: true });
+  md.use(markedTerminal({ showSectionPrefix: false, tab: 2, width, reflowText: true }));
+  return (md.parse(content, { async: false }) as string).trimEnd();
 }
 
 function truncateOutput(content: string, maxLines = 8): string {
@@ -26,41 +25,39 @@ function truncateOutput(content: string, maxLines = 8): string {
   );
 }
 
-function HRule(): React.ReactElement {
-  const { stdout } = useStdout();
-  const width = stdout.columns ?? 80;
+function HRule({ columns }: { columns: number }): React.ReactElement {
   return (
-    <Box paddingX={1}>
-      <Text dimColor>{"─".repeat(Math.max(width - 4, 10))}</Text>
+    <Box paddingX={1} width={columns}>
+      <Text dimColor>{"─".repeat(Math.max(columns - 4, 1))}</Text>
     </Box>
   );
 }
 
-function HeaderBlock(): React.ReactElement {
+function HeaderBlock({ columns }: { columns: number }): React.ReactElement {
   return (
-    <Box flexDirection="column" paddingTop={1}>
+    <Box flexDirection="column" paddingTop={1} width={columns}>
       <Box paddingX={2}>
         <Gradient name="vice">
           <Text bold>{"✦  CasAbot"}</Text>
         </Gradient>
       </Box>
       <Box paddingX={2}>
-        <Text dimColor>
+        <Text wrap="wrap" dimColor>
           {"Cassiopeia A — Freely creates everything, like a supernova explosion."}
         </Text>
       </Box>
-      <HRule />
+      <HRule columns={columns} />
     </Box>
   );
 }
 
-function UserMessageView({ content }: { content: string }): React.ReactElement {
+function UserMessageView({ content, columns }: { content: string; columns: number }): React.ReactElement {
   return (
-    <Box flexDirection="column" paddingX={2} marginTop={1}>
+    <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
       <Text color="green" bold>
         {"▶ You"}
       </Text>
-      <Box marginLeft={2}>
+      <Box marginLeft={2} width={Math.max(columns - 6, 10)}>
         <Text wrap="wrap">{content}</Text>
       </Box>
     </Box>
@@ -69,15 +66,17 @@ function UserMessageView({ content }: { content: string }): React.ReactElement {
 
 function AssistantMessageView({
   content,
+  columns,
 }: {
   content: string;
+  columns: number;
 }): React.ReactElement {
   return (
-    <Box flexDirection="column" paddingX={2} marginTop={1}>
+    <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
       <Text color="cyan" bold>
         {"✦ CasAbot"}
       </Text>
-      <Box marginLeft={2}>
+      <Box marginLeft={2} width={Math.max(columns - 6, 10)}>
         <Text wrap="wrap">{renderMarkdown(content)}</Text>
       </Box>
     </Box>
@@ -86,16 +85,19 @@ function AssistantMessageView({
 
 function ToolCallsView({
   message,
+  columns,
 }: {
   message: Message;
+  columns: number;
 }): React.ReactElement {
+  const boxWidth = Math.max(columns - 6, 10);
   return (
-    <Box flexDirection="column" paddingX={2} marginTop={1}>
+    <Box flexDirection="column" paddingX={2} marginTop={1} width={columns}>
       <Text color="cyan" bold>
         {"✦ CasAbot"}
       </Text>
       {message.content ? (
-        <Box marginLeft={2}>
+        <Box marginLeft={2} width={boxWidth}>
           <Text wrap="wrap">{renderMarkdown(message.content)}</Text>
         </Box>
       ) : null}
@@ -106,6 +108,8 @@ function ToolCallsView({
         borderStyle="round"
         borderColor="yellow"
         paddingX={1}
+        width={boxWidth}
+        overflow="hidden"
       >
         <Text color="yellow" bold>
           {"⚡ Tool Calls"}
@@ -118,6 +122,10 @@ function ToolCallsView({
           } catch {
             /* keep raw */
           }
+          const maxArgLen = Math.max(boxWidth - tc.name.length - 8, 20);
+          if (display.length > maxArgLen) {
+            display = display.slice(0, maxArgLen - 1) + "…";
+          }
           return (
             <Box key={i}>
               <Text dimColor>{tc.name}</Text>
@@ -133,9 +141,12 @@ function ToolCallsView({
 
 function ToolResultView({
   content,
+  columns,
 }: {
   content: string;
+  columns: number;
 }): React.ReactElement {
+  const boxWidth = Math.max(columns - 6, 10);
   return (
     <Box
       flexDirection="column"
@@ -144,6 +155,8 @@ function ToolResultView({
       borderStyle="round"
       borderColor="gray"
       paddingX={1}
+      width={boxWidth}
+      overflow="hidden"
     >
       <Text dimColor bold>
         {"📋 Result"}
@@ -155,36 +168,38 @@ function ToolResultView({
 
 function MessageView({
   message,
+  columns,
 }: {
   message: Message;
+  columns: number;
 }): React.ReactElement {
   if (message.role === "user") {
-    return <UserMessageView content={message.content} />;
+    return <UserMessageView content={message.content} columns={columns} />;
   }
   if (message.role === "tool") {
-    return <ToolResultView content={message.content} />;
+    return <ToolResultView content={message.content} columns={columns} />;
   }
   if (message.role === "assistant" && message.toolCalls?.length) {
-    return <ToolCallsView message={message} />;
+    return <ToolCallsView message={message} columns={columns} />;
   }
   if (message.role === "assistant") {
-    return <AssistantMessageView content={message.content} />;
+    return <AssistantMessageView content={message.content} columns={columns} />;
   }
-  return <Text>{message.content}</Text>;
+  return <Text wrap="wrap">{message.content}</Text>;
 }
 
-function WelcomeHint(): React.ReactElement {
+function WelcomeHint({ columns }: { columns: number }): React.ReactElement {
   return (
-    <Box flexDirection="column" paddingX={2} marginTop={1} marginBottom={1}>
+    <Box flexDirection="column" paddingX={2} marginTop={1} marginBottom={1} width={columns}>
       <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 {
+function ProcessingIndicator({ columns }: { columns: number }): React.ReactElement {
   return (
-    <Box paddingX={2} marginTop={1} gap={1}>
+    <Box paddingX={2} marginTop={1} gap={1} width={columns}>
       <Text color="yellow">
         <Spinner type="dots" />
       </Text>
@@ -212,6 +227,8 @@ function App({
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const { exit } = useApp();
+  const { stdout } = useStdout();
+  const columns = stdout.columns ?? 80;
 
   const handleSubmit = useCallback(
     async (text: string) => {
@@ -260,35 +277,36 @@ function App({
   ], [messages]);
 
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" width={columns}>
       <Static items={items}>
         {(item) => {
           if (item.type === "header") {
             return (
-              <Box key={item.key} flexDirection="column">
-                <HeaderBlock />
+              <Box key={item.key} flexDirection="column" width={columns}>
+                <HeaderBlock columns={columns} />
               </Box>
             );
           }
           return (
-            <Box key={item.key} flexDirection="column">
-              <MessageView message={item.message} />
+            <Box key={item.key} flexDirection="column" width={columns}>
+              <MessageView message={item.message} columns={columns} />
             </Box>
           );
         }}
       </Static>
 
-      {messages.length === 0 && !isProcessing && <WelcomeHint />}
-      {isProcessing && <ProcessingIndicator />}
+      {messages.length === 0 && !isProcessing && <WelcomeHint columns={columns} />}
+      {isProcessing && <ProcessingIndicator columns={columns} />}
 
-      <HRule />
+      <HRule columns={columns} />
 
-      <Box paddingX={1}>
+      <Box paddingX={1} width={columns}>
         <Box
           borderStyle="round"
           borderColor={isProcessing ? "gray" : "cyan"}
           paddingX={1}
-          width="100%"
+          width={Math.max(columns - 2, 10)}
+          overflow="hidden"
         >
           <Text color="cyan" bold>
             {"❯ "}
@@ -306,7 +324,7 @@ function App({
         </Box>
       </Box>
 
-      <Box paddingX={2} justifyContent="space-between">
+      <Box paddingX={2} width={columns} justifyContent="space-between">
         <Text dimColor>{"Ctrl+C exit"}</Text>
         <Text dimColor>
           {userCount} {userCount === 1 ? "message" : "messages"}