mirai-cli 0.1.0

package/src/hooks/use-runtime.ts

@@ -0,0 +1,99 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { detectProvider } from "@mirai/llm";
+import { ConversationRuntime } from "@mirai/runtime";
+import { toolRegistry } from "@mirai/tools";
+import { DEFAULT_MODEL } from "@mirai/core/constants";
+import type { Message, ToolEntry } from "@mirai/core/types";
+import { buildToolContext } from "@mirai/workspace";
+import type { TuiPermissionProvider } from "../services/tui-permission-provider.js";
+import type { RuleStore } from "@mirai/permission";
+import type { ExecutionContext } from "@mirai/runtime";
+
+export interface RuntimeChatState {
+  messages: Message[];
+  isStreaming: boolean;
+  error: string | null;
+  toolFeed: ToolEntry[];
+  tokensUsed: number;
+  cost: number;
+  startTime: number;
+  submit(prompt: string, ctx?: ExecutionContext): Promise<void>;
+  clearMessages(): void;
+}
+
+interface RuntimeChatDeps {
+  permissionProvider: TuiPermissionProvider;
+  ruleStore: RuleStore;
+}
+
+export function useRuntimeChat(deps: RuntimeChatDeps): RuntimeChatState {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [toolFeed, setToolFeed] = useState<ToolEntry[]>([]);
+  const [tokensUsed, setTokensUsed] = useState(0);
+  const [cost, setCost] = useState(0);
+  const startTimeRef = useRef(Date.now());
+  const runtimeRef = useRef<ConversationRuntime | null>(null);
+
+  useEffect(() => {
+    const provider = detectProvider(DEFAULT_MODEL);
+    runtimeRef.current = new ConversationRuntime(
+      provider,
+      toolRegistry,
+      deps.ruleStore,
+      deps.permissionProvider,
+      buildToolContext(),
+      {
+        systemPrompt:
+          "You are a helpful coding assistant. Use tools when needed.",
+        maxIterations: 10,
+        model: DEFAULT_MODEL,
+      },
+      (messages) => setMessages([...messages]),
+    );
+  }, []);
+
+  const submit = useCallback(async (prompt: string, ctx?: ExecutionContext) => {
+    const runtime = runtimeRef.current;
+    if (!runtime) return;
+
+    setError(null);
+    setIsStreaming(true);
+
+    try {
+      const result = await runtime.runTurn(prompt, ctx);
+
+      if (result.usage) {
+        setTokensUsed((prev) => prev + result.usage!.totalTokens);
+        setCost(
+          (prev) =>
+            prev +
+            result.usage!.inputTokens * 0.000002 +
+            result.usage!.outputTokens * 0.00001,
+        );
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    startTimeRef.current = Date.now();
+  }, []);
+
+  return {
+    messages,
+    isStreaming,
+    error,
+    toolFeed,
+    tokensUsed,
+    cost,
+    startTime: startTimeRef.current,
+    submit,
+    clearMessages,
+  };
+}

package/src/hooks/use-scroll-bar-drag.ts

@@ -0,0 +1,115 @@
+import { useRef, useEffect } from "react";
+import { mouseInput } from "../services/mouse-input.js";
+
+export interface DragHandle {
+  isDragging: boolean;
+}
+
+interface DragState {
+  isDragging: boolean;
+  dragStartY: number;
+  dragStartOffset: number;
+}
+
+interface ScrollBarDimensions {
+  thumbPos: number;
+  thumbHeight: number;
+  barHeight: number;
+  barTop: number;
+}
+
+export function useScrollBarDrag(
+  barRef: React.RefObject<any>,
+  scrollRef: React.RefObject<any>,
+  dims: ScrollBarDimensions,
+): DragHandle {
+  const dragRef = useRef<DragState>({
+    isDragging: false,
+    dragStartY: 0,
+    dragStartOffset: 0,
+  });
+  const wasPressedRef = useRef(false);
+  const dimsRef = useRef(dims);
+
+  useEffect(() => {
+    dimsRef.current = dims;
+  }, [dims]);
+
+  useEffect(() => {
+    const unsub = mouseInput.on((state) => {
+      const isPressed = state.isPressed;
+      const drag = dragRef.current;
+
+      // 1. PRESS Transition: !wasPressed -> isPressed
+      if (!wasPressedRef.current && isPressed) {
+        const currentDims = dimsRef.current;
+        const relY = state.y - currentDims.barTop;
+        
+        // Check if press occurred on the thumb
+        if (relY >= currentDims.thumbPos && relY < currentDims.thumbPos + currentDims.thumbHeight) {
+          const currentOffset = scrollRef.current?.getScrollOffset() ?? 0;
+          drag.isDragging = true;
+          drag.dragStartY = state.y;
+          drag.dragStartOffset = currentOffset;
+        } else {
+          // Click on track -> Jump to position
+          const ref = scrollRef.current;
+          if (ref) {
+            const content = ref.getContentHeight();
+            const viewport = ref.getViewportHeight();
+            if (content && content > viewport) {
+              const fraction = Math.max(0, Math.min(1, relY / currentDims.barHeight));
+              const targetOffset = Math.round(fraction * (content - viewport));
+              ref.scrollBy(targetOffset - ref.getScrollOffset());
+            }
+          }
+        }
+      }
+
+      // 2. DRAG Logic
+      if (drag.isDragging) {
+        const ref = scrollRef.current;
+        if (!ref) {
+          drag.isDragging = false;
+          return;
+        }
+
+        const content = ref.getContentHeight();
+        const viewport = ref.getViewportHeight();
+        if (!content || content <= viewport) {
+          drag.isDragging = false;
+          return;
+        }
+
+        // Relative drag calculation
+        const currentDims = dimsRef.current;
+        const deltaY = state.y - drag.dragStartY;
+        const fraction = deltaY / currentDims.barHeight;
+        const targetOffset = drag.dragStartOffset + fraction * (content - viewport);
+        
+        // Clamp and apply
+        const maxOffset = content - viewport;
+        const clampedOffset = Math.max(0, Math.min(maxOffset, targetOffset));
+        
+        if (Math.round(clampedOffset) !== ref.getScrollOffset()) {
+          ref.scrollBy(Math.round(clampedOffset) - ref.getScrollOffset());
+        }
+
+        // Handle release while dragging
+        if (!isPressed) {
+          drag.isDragging = false;
+        }
+      }
+
+      // 3. RELEASE Transition: wasPressed -> !isPressed
+      if (wasPressedRef.current && !isPressed) {
+        drag.isDragging = false;
+      }
+
+      wasPressedRef.current = isPressed;
+    });
+    return unsub;
+  }, [barRef, scrollRef]);
+
+  return { isDragging: dragRef.current.isDragging };
+}

package/src/hooks/use-scroll.ts

@@ -0,0 +1,70 @@
+import { useState, useCallback, useRef, useLayoutEffect } from "react";
+import { useStdout } from "ink";
+
+export interface ScrollState {
+  offset: number;
+  content: number;
+  viewport: number;
+}
+
+export function useWindowSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState({
+    rows: stdout?.rows ?? 24,
+    columns: stdout?.columns ?? 80,
+  });
+  useLayoutEffect(() => {
+    const onResize = () =>
+      setSize({ rows: stdout?.rows ?? 24, columns: stdout?.columns ?? 80 });
+    stdout?.on("resize", onResize);
+    return () => { stdout?.off("resize", onResize); };
+  }, [stdout]);
+  return size;
+}
+
+export function useScroll(scrollRef: React.RefObject<any>, terminalRows: number) {
+  const [scrollPos, setScrollPos] = useState<ScrollState>({ offset: 0, content: 0, viewport: 0 });
+  const [isNearBottom, setIsNearBottom] = useState(true);
+  const prevOffsetRef = useRef(0);
+  const scrollHeight = Math.max(10, terminalRows - 5);
+
+  const updatePos = useCallback(() => {
+    const ref = scrollRef.current;
+    if (!ref) return;
+    const offset = ref.getScrollOffset();
+    const viewport = ref.getViewportHeight();
+    const content = ref.getContentHeight();
+    setScrollPos({ offset, content, viewport });
+    if (offset + viewport >= content - 3)
+      setIsNearBottom(true);
+  }, [scrollRef]);
+
+  const handleScroll = useCallback((offset: number) => {
+    const ref = scrollRef.current;
+    if (!ref) return;
+    const viewport = ref.getViewportHeight();
+    const content = ref.getContentHeight();
+    if (offset < prevOffsetRef.current && offset + viewport < content - 3)
+      setIsNearBottom(false);
+    if (offset + viewport >= content - 3)
+      setIsNearBottom(true);
+    prevOffsetRef.current = offset;
+    setScrollPos({ offset, content, viewport });
+  }, [scrollRef]);
+
+  const scrollToLatest = useCallback(() => {
+    queueMicrotask(() => {
+      scrollRef.current?.scrollToBottom();
+      updatePos();
+    });
+  }, [scrollRef, updatePos]);
+
+  return {
+    scrollPos,
+    scrollHeight,
+    isNearBottom,
+    handleScroll,
+    scrollToLatest,
+    updatePos, // expose for manual trigger
+  };
+}

package/src/index.ts

@@ -0,0 +1,39 @@
+import { render } from "ink";
+import { createElement } from "react";
+import App from "./app/index.js";
+import { mouseInput } from "./services/mouse-input.js";
+
+export interface BootOptions {
+  model?: string;
+}
+
+export async function bootTui(options?: BootOptions): Promise<void> {
+  mouseInput.onExit(() => process.exit(0));
+  mouseInput.enable();
+  const stdin = Object.assign(mouseInput.stdin, {
+    isTTY: true as const,
+    setRawMode: (mode: boolean) => process.stdin.setRawMode?.(mode),
+    ref: () => process.stdin.ref?.(),
+    unref: () => process.stdin.unref?.(),
+  }) as unknown as NodeJS.ReadStream;
+
+  const { waitUntilExit } = render(
+    createElement(App, { model: options?.model }),
+    {
+      stdin,
+      interactive: true,
+      alternateScreen: true,
+      maxFps: 140,
+    },
+  );
+  await waitUntilExit();
+  mouseInput.disable();
+}
+
+// Direct entry point when run via tsx src/index.ts (legacy)
+const isDirectRun = process.argv[1]
+  ?.replace(/\\/g, "/")
+  .endsWith("src/index.ts");
+if (isDirectRun) {
+  bootTui();
+}

package/src/renderers/builtins/BashResult.tsx

@@ -0,0 +1,65 @@
+import { Box, Text } from "ink";
+import { truncateOutputSimple } from "../utils.js";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const BashResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData ?? {};
+
+  const command = (data.command as string | undefined) ?? "";
+  const stdout = (data.stdout as string | undefined) ?? "";
+  const stderr = (data.stderr as string | undefined) ?? "";
+  const exitCode = (data.exitCode as number | undefined) ?? 0;
+  const backgroundTaskId = (data.backgroundTaskId as string | undefined) ?? "";
+  const returnCodeInterpretation =
+    (data.returnCodeInterpretation as string | undefined) ?? "";
+
+  const stdoutPreview = truncateOutputSimple(stdout, 60, 4000);
+  const stderrPreview = truncateOutputSimple(stderr, 60, 4000);
+
+  return (
+    <Box flexDirection="column">
+      {command && (
+        <Box marginLeft={2} marginTop={1} marginBottom={1}>
+          <Text color={theme.text.dim} backgroundColor={theme.bg.code}>
+            {" "}
+            $ {command}{" "}
+          </Text>
+        </Box>
+      )}
+      {backgroundTaskId && (
+        <Box marginLeft={2}>
+          <Text color={theme.warning.primary}>
+            backgrounded ({backgroundTaskId})
+          </Text>
+        </Box>
+      )}
+      {returnCodeInterpretation && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text color={theme.warning.primary}>{returnCodeInterpretation}</Text>
+        </Box>
+      )}
+      {stdoutPreview.content && (
+        <Box marginLeft={2}>
+          <Text color={theme.text.dim}>{stdoutPreview.content}</Text>
+        </Box>
+      )}
+      {stderrPreview.content && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text color={theme.error.primary}>{stderrPreview.content}</Text>
+        </Box>
+      )}
+      {(stdoutPreview.truncated || stderrPreview.truncated) && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text dimColor>
+            … output truncated for display; full result preserved in session.
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/EditFileResult.tsx

@@ -0,0 +1,69 @@
+import { Box, Text } from "ink";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+import type { EditFileContract } from "@mirai/adapter";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const EditFileResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData as unknown as EditFileContract;
+
+  const path = data.path ?? "unknown";
+  const replaceAll = data.replaceAll ?? false;
+  const diff = data.diff ?? "";
+  const oldText = data.oldText ?? "";
+  const newText = data.newText ?? "";
+
+  const suffix = replaceAll ? " (replace all)" : "";
+  const hasDiff = !!diff;
+  const hasOldNew = !!oldText || !!newText;
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor color={theme.text.dim}>
+        📝 Edited {path}
+        {suffix}
+      </Text>
+      {(hasDiff || hasOldNew) && (
+        <Box marginLeft={2} marginTop={1}>
+          {hasDiff && (
+            <Box>
+              <Text color={theme.text.dim}>Diff:</Text>
+              {diff.split("\n").map((line, i) => (
+                <Box key={i} marginLeft={2}>
+                  <Text
+                    color={
+                      line.startsWith("+")
+                        ? theme.success.primary
+                        : line.startsWith("-")
+                          ? theme.error.primary
+                          : theme.text.dim
+                    }
+                  >
+                    {line}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+          {hasOldNew && !hasDiff && (
+            <Box>
+              {oldText && (
+                <Box marginLeft={2}>
+                  <Text color={theme.error.primary}>- {oldText}</Text>
+                </Box>
+              )}
+              {newText && (
+                <Box marginLeft={2}>
+                  <Text color={theme.success.primary}>+ {newText}</Text>
+                </Box>
+              )}
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/GenericToolResult.tsx

@@ -0,0 +1,39 @@
+import { Box, Text } from "ink";
+import { DISPLAY_LIMITS, DISPLAY_TRUNCATION_NOTICE } from "../constants.js";
+import { truncateOutputSimple } from "../utils.js";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const GenericToolResult = ({ block }: Props) => {
+  const preview = truncateOutputSimple(
+    block.output,
+    DISPLAY_LIMITS.default.maxLines,
+    DISPLAY_LIMITS.default.maxChars,
+  );
+
+  return (
+    <Box flexDirection="column">
+      {preview.truncated && (
+        <Box>
+          <Text dimColor>{DISPLAY_TRUNCATION_NOTICE}</Text>
+        </Box>
+      )}
+      {block.metadata.truncated && (
+        <Box>
+          <Text dimColor>
+            Tool output was truncated. Use read_file for full content.
+          </Text>
+        </Box>
+      )}
+      {preview.content && (
+        <Box>
+          <Text color={theme.text.dim}>{preview.content}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/GlobSearchResult.tsx

@@ -0,0 +1,40 @@
+import { Box, Text } from "ink";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+import type { GlobSearchContract } from "@mirai/adapter";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const GlobSearchResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData as unknown as GlobSearchContract;
+
+  const files = data.files ?? [];
+  const numFiles = data.numFiles ?? files.length;
+  const displayFiles = files.slice(0, 8);
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor color={theme.text.dim}>
+        Matched {numFiles} files
+      </Text>
+      {displayFiles.length > 0 && (
+        <Box marginLeft={2} marginTop={1}>
+          {displayFiles.map((file, i) => (
+            <Box key={i} marginLeft={2}>
+              <Text color={theme.text.dim}>{file}</Text>
+            </Box>
+          ))}
+          {files.length > 8 && (
+            <Box marginLeft={2} marginTop={1}>
+              <Text color={theme.text.dim}>
+                ... and {files.length - 8} more
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/GrepSearchResult.tsx

@@ -0,0 +1,49 @@
+import { Box, Text } from "ink";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+import type { GrepSearchContract } from "@mirai/adapter";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const GrepSearchResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData as unknown as GrepSearchContract;
+
+  const matchCount = data.matchCount ?? 0;
+  const fileCount = data.fileCount ?? 0;
+  const matches = data.matches ?? [];
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor color={theme.text.dim}>
+        {matchCount} matches across {fileCount} files
+      </Text>
+      {matches.length > 0 && (
+        <Box marginLeft={2} marginTop={1}>
+          {matches.slice(0, 20).map((match, i) => (
+            <Box key={i} marginLeft={2}>
+              <Text color={theme.text.dim}>
+                {match.path}:{match.line}: {match.text}
+              </Text>
+            </Box>
+          ))}
+          {matches.length > 20 && (
+            <Box marginLeft={2} marginTop={1}>
+              <Text color={theme.text.dim}>
+                … and {matches.length - 20} more matches
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+      {block.metadata.truncated && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text dimColor>
+            … output truncated for display; full result preserved in session.
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/ReadFileResult.tsx

@@ -0,0 +1,54 @@
+import { Box, Text } from "ink";
+import { DISPLAY_LIMITS } from "../constants.js";
+import { truncateOutputSimple } from "../utils.js";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+import type { ReadFileContract } from "@mirai/adapter";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const ReadFileResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData as unknown as ReadFileContract;
+
+  const path = data.path ?? "unknown";
+  const startLine = data.startLine ?? 1;
+  const endLine = data.endLine ?? 0;
+  const content = data.content ?? block.output;
+
+  const range = endLine > 0 ? ` (lines ${startLine}-${endLine})` : "";
+  const preview = truncateOutputSimple(
+    content,
+    DISPLAY_LIMITS.readFile.maxLines,
+    DISPLAY_LIMITS.readFile.maxChars,
+  );
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor color={theme.text.dim}>
+        Read {path}
+        {range}
+      </Text>
+      {preview.content && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text color={theme.text.dim}>{preview.content}</Text>
+        </Box>
+      )}
+      {preview.truncated && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text dimColor>
+            … output truncated for display; full result preserved in session.
+          </Text>
+        </Box>
+      )}
+      {block.metadata.truncated && (
+        <Box marginLeft={2} marginTop={1}>
+          <Text dimColor>
+            Tool output was truncated. Use read_file for full content.
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/renderers/builtins/WriteFileResult.tsx

@@ -0,0 +1,24 @@
+import { Box, Text } from "ink";
+import { theme } from "../../theme.js";
+import type { ToolResultBlock } from "@mirai/core/types";
+import type { WriteFileContract } from "@mirai/adapter";
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export const WriteFileResult = ({ block }: Props) => {
+  const data = block.metadata.structuredData as unknown as WriteFileContract;
+
+  const path = data.path ?? "unknown";
+  const bytesWritten = data.bytesWritten ?? 0;
+  const action = block.status === "success" ? "Wrote" : "Failed";
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor color={theme.text.dim}>
+        ✏️ {action} {path} ({bytesWritten} bytes)
+      </Text>
+    </Box>
+  );
+};

package/src/renderers/constants.ts

@@ -0,0 +1,7 @@
+export const DISPLAY_LIMITS = {
+  default: { maxLines: 60, maxChars: 4000 },
+  readFile: { maxLines: 80, maxChars: 6000 },
+};
+
+export const DISPLAY_TRUNCATION_NOTICE =
+  '\u2026 output truncated for display; full result preserved in session.';