casabot 1.1.1 → 1.1.3

package/dist/tui/app.js

@@ -1,5 +1,5 @@
-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, useRef } from "react";
 import { render, Box, Text, useInput, useApp, useStdout } from "ink";
 import TextInput from "ink-text-input";
 import Spinner from "ink-spinner";
@@ -7,12 +7,13 @@ import Gradient from "ink-gradient";
 import { marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 import { runAgent } from "../agent/base.js";
-marked.use(markedTerminal());
+marked.use(markedTerminal({
+    showSectionPrefix: false,
+    tab: 2,
+}));
+marked.use({ gfm: true });
 function renderMarkdown(content) {
-    const result = marked.parse(content);
-    if (typeof result === "string")
-        return result.trimEnd();
-    return content;
+    return marked.parse(content, { async: false }).trimEnd();
 }
 function truncateOutput(content, maxLines = 8) {
     const lines = content.split("\n");
@@ -21,6 +22,61 @@ 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 useMouseWheel(onScrollUp, onScrollDown) {
+    const { stdout } = useStdout();
+    const scrollUpRef = useRef(onScrollUp);
+    const scrollDownRef = useRef(onScrollDown);
+    useEffect(() => {
+        scrollUpRef.current = onScrollUp;
+        scrollDownRef.current = onScrollDown;
+    });
+    useEffect(() => {
+        if (!process.stdin.isTTY)
+            return;
+        const ENABLE_MOUSE = "\x1b[?1000h\x1b[?1006h";
+        const DISABLE_MOUSE = "\x1b[?1000l\x1b[?1006l";
+        stdout.write(ENABLE_MOUSE);
+        const sgrRegex = /\x1b\[<(\d+);\d+;\d+M/g;
+        const handleData = (data) => {
+            const str = data.toString("utf8");
+            let match;
+            while ((match = sgrRegex.exec(str)) !== null) {
+                const button = parseInt(match[1], 10);
+                if (button === 64)
+                    scrollUpRef.current();
+                if (button === 65)
+                    scrollDownRef.current();
+            }
+            sgrRegex.lastIndex = 0;
+        };
+        process.stdin.on("data", handleData);
+        return () => {
+            process.stdin.off("data", handleData);
+            stdout.write(DISABLE_MOUSE);
+        };
+    }, [stdout]);
+}
 function HRule({ width }) {
     return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(width - 4, 10)) }) }));
 }
@@ -71,10 +127,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 +156,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)
@@ -116,15 +206,28 @@ function App({ provider, conversation, skills, }) {
         }
         setIsProcessing(false);
     }, [isProcessing, provider, conversation, skills]);
+    const scrollUp = useCallback(() => {
+        setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+    }, [maxScrollOffset]);
+    const scrollDown = useCallback(() => {
+        setScrollOffset((prev) => Math.max(prev - 1, 0));
+    }, []);
+    useMouseWheel(scrollUp, scrollDown);
     useInput((ch, key) => {
         if (key.ctrl && ch === "c") {
             exit();
         }
+        if (key.upArrow) {
+            scrollUp();
+        }
+        if (key.downArrow) {
+            scrollDown();
+        }
     });
     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  ↑↓/wheel 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.1",
+  "version": "1.1.3",
   "description": "CasAbot — Skill-driven multi-agent orchestrator system",
   "type": "module",
   "main": "dist/index.js",

package/src/tui/app.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { render, Box, Text, useInput, useApp, useStdout } from "ink";
 import TextInput from "ink-text-input";
 import Spinner from "ink-spinner";
@@ -9,12 +9,16 @@ import type { ChatProvider } from "../providers/base.js";
 import type { ConversationHistory, Message, Skill } from "../config/types.js";
 import { runAgent } from "../agent/base.js";
 
-marked.use(markedTerminal());
+marked.use(
+  markedTerminal({
+    showSectionPrefix: false,
+    tab: 2,
+  }),
+);
+marked.use({ gfm: true });
 
 function renderMarkdown(content: string): string {
-  const result = marked.parse(content);
-  if (typeof result === "string") return result.trimEnd();
-  return content;
+  return (marked.parse(content, { async: false }) as string).trimEnd();
 }
 
 function truncateOutput(content: string, maxLines = 8): string {
@@ -26,6 +30,74 @@ 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 useMouseWheel(
+  onScrollUp: () => void,
+  onScrollDown: () => void,
+): void {
+  const { stdout } = useStdout();
+  const scrollUpRef = useRef(onScrollUp);
+  const scrollDownRef = useRef(onScrollDown);
+
+  useEffect(() => {
+    scrollUpRef.current = onScrollUp;
+    scrollDownRef.current = onScrollDown;
+  });
+
+  useEffect(() => {
+    if (!process.stdin.isTTY) return;
+
+    const ENABLE_MOUSE = "\x1b[?1000h\x1b[?1006h";
+    const DISABLE_MOUSE = "\x1b[?1000l\x1b[?1006l";
+    stdout.write(ENABLE_MOUSE);
+
+    const sgrRegex = /\x1b\[<(\d+);\d+;\d+M/g;
+
+    const handleData = (data: Buffer): void => {
+      const str = data.toString("utf8");
+      let match;
+      while ((match = sgrRegex.exec(str)) !== null) {
+        const button = parseInt(match[1], 10);
+        if (button === 64) scrollUpRef.current();
+        if (button === 65) scrollDownRef.current();
+      }
+      sgrRegex.lastIndex = 0;
+    };
+
+    process.stdin.on("data", handleData);
+    return () => {
+      process.stdin.off("data", handleData);
+      stdout.write(DISABLE_MOUSE);
+    };
+  }, [stdout]);
+}
+
 function HRule({ width }: { width: number }): React.ReactElement {
   return (
     <Box paddingX={1}>
@@ -186,12 +258,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 +292,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 +314,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();
@@ -250,10 +376,26 @@ function App({
     [isProcessing, provider, conversation, skills],
   );
 
+  const scrollUp = useCallback(() => {
+    setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+  }, [maxScrollOffset]);
+
+  const scrollDown = useCallback(() => {
+    setScrollOffset((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  useMouseWheel(scrollUp, scrollDown);
+
   useInput((ch, key) => {
     if (key.ctrl && ch === "c") {
       exit();
     }
+    if (key.upArrow) {
+      scrollUp();
+    }
+    if (key.downArrow) {
+      scrollDown();
+    }
   });
 
   const userCount = messages.filter((m) => m.role === "user").length;
@@ -271,19 +413,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 +461,7 @@ function App({
       </Box>
 
       <Box paddingX={2} justifyContent="space-between">
-        <Text dimColor>{"Ctrl+C exit"}</Text>
+        <Text dimColor>{"Ctrl+C exit  ↑↓/wheel scroll"}</Text>
         <Text dimColor>
           {userCount} {userCount === 1 ? "message" : "messages"}
         </Text>