casabot 1.1.0 → 1.1.2

package/dist/tui/app.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } 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 { markedTerminal } from "marked-terminal";
 import { runAgent } from "../agent/base.js";
 marked.use(markedTerminal());
 function renderMarkdown(content) {
@@ -21,6 +21,27 @@ function truncateOutput(content, maxLines = 8) {
     return (lines.slice(0, maxLines).join("\n") +
         `\n  … ${lines.length - maxLines} more lines`);
 }
+function estimateMessageLines(message, width) {
+    const contentWidth = Math.max(width - 10, 20);
+    const countLines = (text) => text.split("\n").reduce((sum, line) => sum + Math.max(1, Math.ceil((line.length || 1) / contentWidth)), 0);
+    if (message.role === "user") {
+        return 2 + countLines(message.content);
+    }
+    if (message.role === "tool") {
+        return 3 + countLines(truncateOutput(message.content));
+    }
+    if (message.role === "assistant" && message.toolCalls?.length) {
+        let lines = 2;
+        if (message.content)
+            lines += countLines(message.content);
+        lines += 4 + (message.toolCalls?.length ?? 0);
+        return lines;
+    }
+    if (message.role === "assistant") {
+        return 2 + countLines(message.content);
+    }
+    return 2;
+}
 function HRule({ width }) {
     return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(width - 4, 10)) }) }));
 }
@@ -71,10 +92,17 @@ function WelcomeHint() {
 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 ScrollIndicator({ direction, count, }) {
+    const arrow = direction === "above" ? "▲" : "▼";
+    return (_jsx(Box, { justifyContent: "center", paddingX: 2, children: _jsx(Text, { dimColor: true, children: `${arrow} ${count} more ${count === 1 ? "message" : "messages"} ${direction}` }) }));
+}
+// border(2) + header(3) + hrules(2) + input(3) + status(1) = 11
+const CHROME_HEIGHT = 11;
 function App({ provider, conversation, skills, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState("");
     const [isProcessing, setIsProcessing] = useState(false);
+    const [scrollOffset, setScrollOffset] = useState(0);
     const { exit } = useApp();
     const { stdout } = useStdout();
     const [termSize, setTermSize] = useState({
@@ -93,6 +121,33 @@ function App({ provider, conversation, skills, }) {
             stdout.off("resize", onResize);
         };
     }, [stdout]);
+    useEffect(() => {
+        setScrollOffset((prev) => (prev === 0 ? 0 : prev + 1));
+    }, [messages.length]);
+    const messagesHeight = Math.max(termSize.rows - CHROME_HEIGHT, 4);
+    const { visibleMessages, hiddenAbove, hiddenBelow } = useMemo(() => {
+        if (messages.length === 0) {
+            return { visibleMessages: [], hiddenAbove: 0, hiddenBelow: 0 };
+        }
+        const endIndex = messages.length - scrollOffset;
+        let usedLines = isProcessing ? 2 : 0;
+        let startIndex = endIndex;
+        for (let i = endIndex - 1; i >= 0; i--) {
+            const lines = estimateMessageLines(messages[i], termSize.columns);
+            if (usedLines + lines > messagesHeight && startIndex < endIndex)
+                break;
+            usedLines += lines;
+            startIndex = i;
+        }
+        return {
+            visibleMessages: messages.slice(startIndex, endIndex),
+            hiddenAbove: startIndex,
+            hiddenBelow: scrollOffset,
+        };
+    }, [messages, scrollOffset, messagesHeight, termSize.columns, isProcessing]);
+    const maxScrollOffset = useMemo(() => {
+        return Math.max(0, messages.length - 1);
+    }, [messages.length]);
     const handleSubmit = useCallback(async (text) => {
         const trimmed = text.trim();
         if (!trimmed || isProcessing)
@@ -120,11 +175,17 @@ function App({ provider, conversation, skills, }) {
         if (key.ctrl && ch === "c") {
             exit();
         }
+        if (key.upArrow) {
+            setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+        }
+        if (key.downArrow) {
+            setScrollOffset((prev) => Math.max(prev - 1, 0));
+        }
     });
     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) => {
+    return (_jsxs(Box, { flexDirection: "column", width: termSize.columns, height: termSize.rows, borderStyle: "round", borderColor: "gray", children: [_jsx(Header, {}), _jsx(HRule, { width: termSize.columns }), _jsx(Box, { flexDirection: "column", height: messagesHeight, overflowY: "hidden", justifyContent: "flex-end", children: messages.length === 0 && !isProcessing ? (_jsx(WelcomeHint, {})) : (_jsxs(_Fragment, { children: [hiddenAbove > 0 && (_jsx(ScrollIndicator, { direction: "above", count: hiddenAbove })), visibleMessages.map((msg, i) => (_jsx(MessageView, { message: msg }, hiddenAbove + i))), isProcessing && _jsx(ProcessingIndicator, {}), hiddenBelow > 0 && (_jsx(ScrollIndicator, { direction: "below", count: hiddenBelow }))] })) }), _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"] })] })] }));
+                            }, 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  ↑↓ scroll" }), _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.0",
+  "version": "1.1.2",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",

package/src/tui/app.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useMemo } 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 { 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";
@@ -26,6 +26,33 @@ function truncateOutput(content: string, maxLines = 8): string {
   );
 }
 
+function estimateMessageLines(message: Message, width: number): number {
+  const contentWidth = Math.max(width - 10, 20);
+  const countLines = (text: string): number =>
+    text.split("\n").reduce(
+      (sum, line) =>
+        sum + Math.max(1, Math.ceil((line.length || 1) / contentWidth)),
+      0,
+    );
+
+  if (message.role === "user") {
+    return 2 + countLines(message.content);
+  }
+  if (message.role === "tool") {
+    return 3 + countLines(truncateOutput(message.content));
+  }
+  if (message.role === "assistant" && message.toolCalls?.length) {
+    let lines = 2;
+    if (message.content) lines += countLines(message.content);
+    lines += 4 + (message.toolCalls?.length ?? 0);
+    return lines;
+  }
+  if (message.role === "assistant") {
+    return 2 + countLines(message.content);
+  }
+  return 2;
+}
+
 function HRule({ width }: { width: number }): React.ReactElement {
   return (
     <Box paddingX={1}>
@@ -186,12 +213,32 @@ function ProcessingIndicator(): React.ReactElement {
   );
 }
 
+function ScrollIndicator({
+  direction,
+  count,
+}: {
+  direction: "above" | "below";
+  count: number;
+}): React.ReactElement {
+  const arrow = direction === "above" ? "▲" : "▼";
+  return (
+    <Box justifyContent="center" paddingX={2}>
+      <Text dimColor>
+        {`${arrow} ${count} more ${count === 1 ? "message" : "messages"} ${direction}`}
+      </Text>
+    </Box>
+  );
+}
+
 interface AppProps {
   provider: ChatProvider;
   conversation: ConversationHistory;
   skills: Skill[];
 }
 
+// border(2) + header(3) + hrules(2) + input(3) + status(1) = 11
+const CHROME_HEIGHT = 11;
+
 function App({
   provider,
   conversation,
@@ -200,6 +247,7 @@ function App({
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
+  const [scrollOffset, setScrollOffset] = useState(0);
   const { exit } = useApp();
   const { stdout } = useStdout();
 
@@ -221,6 +269,39 @@ function App({
     };
   }, [stdout]);
 
+  useEffect(() => {
+    setScrollOffset((prev) => (prev === 0 ? 0 : prev + 1));
+  }, [messages.length]);
+
+  const messagesHeight = Math.max(termSize.rows - CHROME_HEIGHT, 4);
+
+  const { visibleMessages, hiddenAbove, hiddenBelow } = useMemo(() => {
+    if (messages.length === 0) {
+      return { visibleMessages: [] as Message[], hiddenAbove: 0, hiddenBelow: 0 };
+    }
+
+    const endIndex = messages.length - scrollOffset;
+    let usedLines = isProcessing ? 2 : 0;
+    let startIndex = endIndex;
+
+    for (let i = endIndex - 1; i >= 0; i--) {
+      const lines = estimateMessageLines(messages[i], termSize.columns);
+      if (usedLines + lines > messagesHeight && startIndex < endIndex) break;
+      usedLines += lines;
+      startIndex = i;
+    }
+
+    return {
+      visibleMessages: messages.slice(startIndex, endIndex),
+      hiddenAbove: startIndex,
+      hiddenBelow: scrollOffset,
+    };
+  }, [messages, scrollOffset, messagesHeight, termSize.columns, isProcessing]);
+
+  const maxScrollOffset = useMemo(() => {
+    return Math.max(0, messages.length - 1);
+  }, [messages.length]);
+
   const handleSubmit = useCallback(
     async (text: string) => {
       const trimmed = text.trim();
@@ -254,6 +335,12 @@ function App({
     if (key.ctrl && ch === "c") {
       exit();
     }
+    if (key.upArrow) {
+      setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+    }
+    if (key.downArrow) {
+      setScrollOffset((prev) => Math.max(prev - 1, 0));
+    }
   });
 
   const userCount = messages.filter((m) => m.role === "user").length;
@@ -271,19 +358,26 @@ function App({
 
       <Box
         flexDirection="column"
-        flexGrow={1}
+        height={messagesHeight}
         overflowY="hidden"
-        justifyContent={messages.length === 0 && !isProcessing ? "center" : "flex-end"}
-        paddingBottom={1}
+        justifyContent="flex-end"
       >
         {messages.length === 0 && !isProcessing ? (
           <WelcomeHint />
         ) : (
-          messages.map((msg, i) => (
-            <MessageView key={i} message={msg} />
-          ))
+          <>
+            {hiddenAbove > 0 && (
+              <ScrollIndicator direction="above" count={hiddenAbove} />
+            )}
+            {visibleMessages.map((msg, i) => (
+              <MessageView key={hiddenAbove + i} message={msg} />
+            ))}
+            {isProcessing && <ProcessingIndicator />}
+            {hiddenBelow > 0 && (
+              <ScrollIndicator direction="below" count={hiddenBelow} />
+            )}
+          </>
         )}
-        {isProcessing && <ProcessingIndicator />}
       </Box>
 
       <HRule width={termSize.columns} />
@@ -312,7 +406,7 @@ function App({
       </Box>
 
       <Box paddingX={2} justifyContent="space-between">
-        <Text dimColor>{"Ctrl+C exit"}</Text>
+        <Text dimColor>{"Ctrl+C exit  ↑↓ scroll"}</Text>
         <Text dimColor>
           {userCount} {userCount === 1 ? "message" : "messages"}
         </Text>

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

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