casabot 1.1.2 → 1.1.3

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");
@@ -42,6 +43,40 @@ function estimateMessageLines(message, width) {
     }
     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)) }) }));
 }
@@ -171,21 +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) {
-            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) => {
                                 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.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, 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 {
@@ -53,6 +57,47 @@ function estimateMessageLines(message: Message, width: number): number {
   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}>
@@ -331,15 +376,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();
     }
   });
 
@@ -406,7 +461,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>