casabot 1.1.2 → 1.1.4

package/dist/tui/app.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useMemo } from "react";
+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,26 +22,39 @@ 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)) }) }));
@@ -92,10 +106,6 @@ 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, }) {
@@ -125,26 +135,7 @@ function App({ provider, conversation, skills, }) {
         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 visibleMessages = useMemo(() => messages.slice(0, messages.length - scrollOffset), [messages, scrollOffset]);
     const maxScrollOffset = useMemo(() => {
         return Math.max(0, messages.length - 1);
     }, [messages.length]);
@@ -171,21 +162,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) {
-            setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+            scrollUp();
         }
         if (key.downArrow) {
-            setScrollOffset((prev) => Math.max(prev - 1, 0));
+            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 }), _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) => {
+    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: [visibleMessages.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  ↑↓ scroll" }), _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.2",
+  "version": "1.1.4",
   "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, useMemo } 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,31 +30,45 @@ 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,
-    );
+function useMouseWheel(
+  onScrollUp: () => void,
+  onScrollDown: () => void,
+): void {
+  const { stdout } = useStdout();
+  const scrollUpRef = useRef(onScrollUp);
+  const scrollDownRef = useRef(onScrollDown);
 
-  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;
+  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 {
@@ -213,23 +231,6 @@ 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;
@@ -275,28 +276,10 @@ function App({
 
   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 visibleMessages = useMemo(
+    () => messages.slice(0, messages.length - scrollOffset),
+    [messages, scrollOffset],
+  );
 
   const maxScrollOffset = useMemo(() => {
     return Math.max(0, messages.length - 1);
@@ -331,15 +314,25 @@ 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) {
-      setScrollOffset((prev) => Math.min(prev + 1, maxScrollOffset));
+      scrollUp();
     }
     if (key.downArrow) {
-      setScrollOffset((prev) => Math.max(prev - 1, 0));
+      scrollDown();
     }
   });
 
@@ -366,16 +359,10 @@ function App({
           <WelcomeHint />
         ) : (
           <>
-            {hiddenAbove > 0 && (
-              <ScrollIndicator direction="above" count={hiddenAbove} />
-            )}
             {visibleMessages.map((msg, i) => (
-              <MessageView key={hiddenAbove + i} message={msg} />
+              <MessageView key={i} message={msg} />
             ))}
             {isProcessing && <ProcessingIndicator />}
-            {hiddenBelow > 0 && (
-              <ScrollIndicator direction="below" count={hiddenBelow} />
-            )}
           </>
         )}
       </Box>
@@ -406,7 +393,7 @@ function App({
       </Box>
 
       <Box paddingX={2} justifyContent="space-between">
-        <Text dimColor>{"Ctrl+C exit  ↑↓ scroll"}</Text>
+        <Text dimColor>{"Ctrl+C exit  ↑↓/wheel scroll"}</Text>
         <Text dimColor>
           {userCount} {userCount === 1 ? "message" : "messages"}
         </Text>