mirai-cli 1.0.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "mirai-cli",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "mirai": "./dist/mirai.mjs"
+  },
+  "scripts": {
+    "build": "esbuild bin/mirai.ts --bundle --platform=node --format=esm --outfile=dist/mirai.mjs --external:react-devtools-core --external:yoga-layout --external:ink --external:react --external:ink-big-text --external:ink-gradient --external:ink-spinner --external:@inkjs/ui --banner:js=\"import{createRequire}from'node:module';globalThis.require=createRequire(import.meta.url)\" --tsconfig=tsconfig.json",
+    "start": "tsx src/index.ts",
+    "dev": "tsc --watch"
+  },
+  "dependencies": {
+    "ink": "^7.0.0",
+    "react": "^19.0.0",
+    "@inkjs/ui": "^2.0.0",
+    "ink-scroll-view": "^0.3.0",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^4.0.0",
+    "ink-spinner": "^5.0.0",
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/js-yaml": "^4.0.0"
+  }
+}

package/src/app/index.tsx

@@ -0,0 +1,274 @@
+import { Box, useApp, useInput } from "ink";
+import {
+  useState,
+  useRef,
+  useLayoutEffect,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { ScrollView } from "ink-scroll-view";
+import Header from "../components/header/index.js";
+import ChatArea from "../components/chat.js";
+import StatusBar from "../components/status-bar/index.js";
+import Input from "../components/input/index.js";
+import ScrollBar from "../components/scroll-bar/index.js";
+import MatrixRain from "../components/matrix-rain/index.js";
+import PermissionModal from "../components/permission-modal.js";
+import { useWindowSize, useScroll } from "../hooks/use-scroll.js";
+import { MouseStateProvider } from "../hooks/use-mouse.js";
+import { mouseInput } from "../services/mouse-input.js";
+import { scrollRegistry } from "../services/scroll-registry.js";
+import { useRuntimeChat } from "../hooks/use-runtime.js";
+import { usePermission } from "../hooks/use-permission.js";
+import { CONTEXT_WINDOW } from "@mirai/core/constants";
+import { registerBuiltinRenderers } from "../renderers/register-builtins.js";
+import {
+  DialogProvider,
+  HelpDialog,
+  type DialogBridge,
+} from "../components/dialog/index.js";
+import { PermissionMode, PermissionResponse } from "@mirai/permission";
+import type { ExecutionContext } from "@mirai/runtime";
+import type { Command } from "../components/input/commands.js";
+import { BUILTIN_COMMANDS } from "../components/input/commands.js";
+
+interface AppProps {
+  model?: string;
+}
+
+export default function App({ model }: AppProps) {
+  const { exit } = useApp();
+  const scrollRef = useRef<any>(null);
+  const chatContainerRef = useRef<any>(null);
+  const { rows: terminalRows } = useWindowSize();
+  const { scrollPos, scrollHeight, isNearBottom, handleScroll, updatePos } =
+    useScroll(scrollRef, terminalRows);
+
+  // Register parent scroll region
+  useEffect(() => {
+    const unreg = scrollRegistry.register({
+      id: "chat",
+      zIndex: 0,
+      getRect: () => {
+        if (!chatContainerRef.current) return null;
+        const node = (chatContainerRef.current as any).yogaNode;
+        if (!node) return null;
+        return {
+          left: node.getComputedLeft?.() ?? 0,
+          top: node.getComputedTop?.() ?? 0,
+          width: node.getComputedWidth?.() ?? 0,
+          height: node.getComputedHeight?.() ?? 0,
+        };
+      },
+      onScroll: (delta) => {
+        const ref = scrollRef.current;
+        if (!ref) return false;
+        const offset = ref.getScrollOffset();
+        const content = ref.getContentHeight();
+        const viewport = ref.getViewportHeight();
+        if (!content || content <= viewport) return false;
+        const steps = -delta * 3;
+        const clamped =
+          steps > 0
+            ? Math.min(steps, content - viewport - offset)
+            : Math.max(steps, -offset);
+        if (clamped !== 0) {
+          ref.scrollBy(clamped);
+          return false; // consumed
+        }
+        return true; // at edge → bubble
+      },
+    });
+    return unreg;
+  }, [scrollRef]);
+
+  // Global wheel handler: dispatch via ScrollRegistry
+  useEffect(() => {
+    const unsub = mouseInput.on((state) => {
+      if (state.wheelDelta === 0) return;
+      scrollRegistry.dispatch(state.x, state.y, state.wheelDelta);
+    });
+    return unsub;
+  }, []);
+
+  const permission = usePermission(PermissionMode.WORKSPACE_WRITE);
+  const {
+    messages,
+    isStreaming,
+    error,
+    toolFeed,
+    tokensUsed,
+    cost,
+    startTime,
+    submit,
+    clearMessages,
+  } = useRuntimeChat({
+    permissionProvider: permission.provider,
+    ruleStore: permission.ruleStore,
+  });
+
+  const modeRef = useRef(permission.mode);
+  modeRef.current = permission.mode;
+
+  const [showMatrix, setShowMatrix] = useState(true);
+  const dialogBridgeRef = useRef<DialogBridge>({
+    show: () => {},
+    isActive: false,
+  });
+
+  useEffect(() => {
+    void registerBuiltinRenderers();
+  }, []);
+
+  const handlePermissionResolve = useCallback(
+    (response: PermissionResponse) => {
+      permission.provider.resolve(response);
+    },
+    [permission.provider],
+  );
+
+  const handleSubmit = useCallback(
+    (prompt: string) => {
+      const ctx: ExecutionContext = {
+        mode: modeRef.current,
+        requestId: crypto.randomUUID(),
+        timestamp: Date.now(),
+      };
+      submit(prompt, ctx);
+    },
+    [submit],
+  );
+
+  const handleCommand = useCallback(
+    (cmd: Command) => {
+      switch (cmd.type) {
+        case "mode.set":
+          permission.setMode(cmd.value);
+          break;
+        case "system.clear":
+          clearMessages();
+          break;
+        case "help.show":
+          dialogBridgeRef.current.show(() => <HelpDialog />);
+          break;
+      }
+    },
+    [permission.setMode, clearMessages, submit],
+  );
+
+  // Scroll acceleration
+  const scrollAccel = useRef({ dir: 0, step: 1, time: 0 });
+
+  useInput((input, key) => {
+    if (dialogBridgeRef.current.isActive) return;
+    if (key.ctrl && input === "d") exit();
+    const ref = scrollRef.current;
+    if (!ref) return;
+    const offset = ref.getScrollOffset();
+    const content = ref.getContentHeight();
+    const viewport = ref.getViewportHeight();
+    const now = Date.now();
+    const a = scrollAccel.current;
+
+    if (key.upArrow && offset > 0) {
+      const step =
+        a.dir === -1 && now - a.time < 300 ? Math.min(a.step + 1, 15) : 1;
+      a.dir = -1;
+      a.step = step;
+      a.time = now;
+      ref.scrollBy(-Math.min(step, offset));
+      return;
+    }
+    if (key.downArrow && offset + viewport < content) {
+      const step =
+        a.dir === 1 && now - a.time < 300 ? Math.min(a.step + 1, 15) : 1;
+      a.dir = 1;
+      a.step = step;
+      a.time = now;
+      ref.scrollBy(Math.min(step, content - viewport - offset));
+      return;
+    }
+    if (key.upArrow || key.downArrow) return;
+
+    if (key.pageUp && offset > 0) ref.scrollBy(-Math.min(10, offset));
+    if (key.pageDown && offset + viewport < content)
+      ref.scrollBy(Math.min(10, content - viewport - offset));
+    if (!key.upArrow && !key.downArrow) {
+      a.dir = 0;
+      a.step = 1;
+    }
+  });
+
+  // Auto-scroll logic:
+  useLayoutEffect(() => {
+    if (!scrollRef.current) return;
+    if (isNearBottom) {
+      scrollRef.current.scrollToBottom();
+    }
+  }, [messages, isNearBottom]);
+
+  return (
+    <MouseStateProvider>
+      <Box height="100%">
+        <DialogProvider dialogRef={dialogBridgeRef}>
+          {showMatrix && (
+            <Box
+              position="absolute"
+              top={0}
+              left={0}
+              width="100%"
+              height="100%"
+            >
+              <MatrixRain />
+            </Box>
+          )}
+          <Box
+            flexDirection="column"
+            marginLeft={2}
+            marginRight={2}
+            height="100%"
+          >
+            <Box flexDirection="row">
+              <Box ref={chatContainerRef} height={scrollHeight}>
+                <ScrollView
+                  ref={scrollRef}
+                  onScroll={handleScroll}
+                  onContentHeightChange={updatePos}
+                >
+                  <Header />
+                  <ChatArea
+                    messages={messages}
+                    isStreaming={isStreaming}
+                    error={error}
+                    toolFeed={toolFeed}
+                  />
+                </ScrollView>
+              </Box>
+              <ScrollBar scrollPos={scrollPos} scrollRef={scrollRef} />
+            </Box>
+            {permission.pendingRequest && (
+              <PermissionModal
+                request={permission.pendingRequest}
+                onResolve={handlePermissionResolve}
+              />
+            )}
+            <StatusBar
+              model={model ?? "qwen3.5:4b"}
+              tokensUsed={tokensUsed}
+              totalTokens={CONTEXT_WINDOW}
+              cost={cost}
+              startTime={startTime}
+            />
+            <Input
+              onSubmit={handleSubmit}
+              onCommand={handleCommand}
+              disabled={isStreaming}
+              onToggleMatrix={() => setShowMatrix((v) => !v)}
+            />
+          </Box>
+        </DialogProvider>
+      </Box>
+    </MouseStateProvider>
+  );
+}

package/src/components/chat.tsx

@@ -0,0 +1,254 @@
+import { Box, Text, useInput } from "ink";
+import { Alert } from "@inkjs/ui";
+import { useState, useEffect } from "react";
+import type { ContentBlock, Message, ToolEntry, ToolResultBlock } from "@mirai/core/types";
+import { theme } from "../theme.js";
+import { ToolResultView } from "./tool-result.js";
+import { STATUS_CONFIG } from "../renderers/status.js";
+
+/* ─── Props ─── */
+
+interface Props {
+  messages: Message[];
+  isStreaming: boolean;
+  error: string | null;
+  toolFeed: ToolEntry[];
+}
+
+/* ─── Block renderers ─── */
+
+function TextBlock({ text }: { text: string }) {
+  return <Text color={theme.text.primary}>{text}</Text>;
+}
+
+function ThinkingBlock({
+  thinking,
+  expanded,
+  durationMs,
+}: {
+  thinking: string;
+  expanded: boolean;
+  durationMs?: number;
+}) {
+  const duration = durationMs != null ? `  ${durationMs}ms` : "";
+  return (
+    <Box
+      flexDirection="column"
+      minWidth="100%"
+      maxWidth="100%"
+      marginTop={1}
+      marginBottom={1}
+    >
+      <Box backgroundColor={theme.bg.alt} paddingX={1}>
+        <Text color={theme.role.thinking} dimColor>
+          {`Thinking (${thinking.length} ký tự)${duration}`}
+        </Text>
+      </Box>
+      {expanded && (
+        <Box backgroundColor={theme.bg.surface} flexDirection="column">
+          <Box marginX={2} marginY={1} borderLeft>
+            <Text dimColor color={theme.text.dim}>
+              {thinking}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function ToolBlock({ block }: { block: ContentBlock }) {
+  if (block.type === "tool_use") {
+    return (
+      <Box flexDirection="column" minWidth="100%" maxWidth="100%" marginTop={1} marginBottom={1}>
+        <Box backgroundColor={theme.bg.alt} paddingX={1}>
+          <Text dimColor color={theme.role.thinking}>
+            🔧 {block.name}
+          </Text>
+        </Box>
+        <Box backgroundColor={theme.bg.surface} flexDirection="column">
+          <Box marginX={2} marginY={1} borderLeft>
+            <Text dimColor color={theme.text.dim}>
+              {JSON.stringify(block.input, null, 2)}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+  if (block.type === "tool_result") {
+    const st = STATUS_CONFIG[block.status] ?? STATUS_CONFIG.success;
+    return (
+      <Box flexDirection="column" minWidth="100%" maxWidth="100%" marginTop={1} marginBottom={1}>
+        <Box backgroundColor={theme.bg.alt} paddingX={1}>
+          <Text dimColor color={st.color}>
+            {st.icon} {block.toolName} ({block.metadata.durationMs}ms)
+          </Text>
+        </Box>
+        <Box backgroundColor={theme.bg.surface} flexDirection="column">
+          <Box marginX={2} marginY={1} borderLeft>
+            <ToolResultView block={block as ToolResultBlock} />
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+  return null;
+}
+
+/* ─── Message item ─── */
+
+function MessageItem({
+  msg,
+  msgIdx,
+  isBlockExpanded: isExpandedFn,
+}: {
+  msg: Message;
+  msgIdx: number;
+  isBlockExpanded: (blockIdx: number) => boolean;
+}) {
+  const icon = msg.role === "user" ? "❯" : "✦";
+  const iconColor =
+    msg.role === "user" ? theme.role.user : theme.role.assistant;
+
+  return (
+    <Box marginTop={1} flexDirection="column">
+      {msg.content.length > 0 ? (
+        <Box>
+          <Box flexShrink={0} marginRight={1}>
+            <Text bold color={iconColor}>
+              {icon}
+            </Text>
+          </Box>
+          <Box flexDirection="column">
+            {msg.content.map((block, i) => {
+              switch (block.type) {
+                case "text":
+                  return <TextBlock key={i} text={block.text} />;
+                case "thinking":
+                  return (
+                    <ThinkingBlock
+                      key={i}
+                      thinking={block.thinking}
+                      expanded={isExpandedFn(i)}
+                      durationMs={block.durationMs}
+                    />
+                  );
+                case "tool_use":
+                case "tool_result":
+                  return <ToolBlock key={i} block={block} />;
+                default:
+                  return null;
+              }
+            })}
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/* ─── Faces animation ─── */
+
+const FACES = [
+  "(´･ω･`)",
+  "(｀・ω・´)",
+  "(￣▽￣*)ゞ",
+  "(·_·)",
+  "(｡◕‿‿｡)",
+  "(/ω＼)",
+  "(っ˘ω˘ς)",
+  "(─‿─)",
+];
+
+function LiveIndicator({
+  isStreaming,
+  hasOutput,
+}: {
+  isStreaming: boolean;
+  hasOutput: boolean;
+}) {
+  const [faceIdx, setFaceIdx] = useState(0);
+  useEffect(() => {
+    if (!isStreaming || hasOutput) return;
+    const t = setInterval(() => setFaceIdx((i) => (i + 1) % FACES.length), 600);
+    return () => clearInterval(t);
+  }, [isStreaming, hasOutput]);
+
+  if (!isStreaming) return null;
+  if (hasOutput) return null;
+
+  return (
+    <Box marginTop={1}>
+      <Box flexShrink={0} marginRight={1}>
+        <Text bold color={theme.role.assistant}>
+          ✦
+        </Text>
+      </Box>
+      <Box>
+        <Text color={theme.role.assistant}>{FACES[faceIdx]}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/* ─── Main component ─── */
+
+export default function ChatArea({
+  messages,
+  isStreaming,
+  error,
+  toolFeed,
+}: Props) {
+  const [allExpanded, setAllExpanded] = useState(false);
+
+  const isDefaultExpanded = (msgIdx: number) =>
+    !allExpanded && msgIdx === messages.length - 1;
+
+  const isBlockExpanded = (msgIdx: number, blockIdx: number) =>
+    allExpanded || isDefaultExpanded(msgIdx);
+
+  useInput((input, key) => {
+    // Alt+t = toggle all thinking blocks
+    if (input === "t" && key.meta) {
+      setAllExpanded((v) => !v);
+    }
+  });
+
+  const lastAssistant =
+    messages.length > 0 && messages[messages.length - 1].role === "assistant"
+      ? messages[messages.length - 1]
+      : null;
+  const hasStreamOutput = (lastAssistant?.content.length ?? 0) > 0;
+
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      {messages.map((msg, i) => (
+        <MessageItem
+          key={i}
+          msg={msg}
+          msgIdx={i}
+          isBlockExpanded={(b) => isBlockExpanded(i, b)}
+        />
+      ))}
+
+      <LiveIndicator isStreaming={isStreaming} hasOutput={hasStreamOutput} />
+
+      {toolFeed.length > 0 && (
+        <Box marginTop={1} flexDirection="column">
+          {toolFeed.slice(-3).map((t, i) => (
+            <Text key={i} color={theme.text.muted}>
+              {t.icon} {t.name} ({t.duration}ms)
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      {error && (
+        <Box marginTop={1}>
+          <Alert variant="error">{error}</Alert>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/dialog/help-dialog.tsx

@@ -0,0 +1,101 @@
+import { Box, Text, Newline, useInput } from "ink";
+import { useRef, useEffect } from "react";
+import { ScrollView } from "ink-scroll-view";
+import { scrollRegistry } from "../../services/scroll-registry.js";
+import { theme } from "../../theme.js";
+import { useDialog } from "./provider.js";
+import { BUILTIN_COMMANDS } from "../input/commands.js";
+
+export default function HelpDialog() {
+  const dialog = useDialog();
+  const scrollRef = useRef<any>(null);
+  const containerRef = useRef<any>(null);
+
+  useInput((input, key) => {
+    if (key.escape || key.return || input === "q") {
+      dialog.close();
+    }
+  });
+
+  useEffect(() => {
+    const unreg = scrollRegistry.register({
+      id: "help-dialog",
+      zIndex: 100,
+      getRect: () => {
+        if (!containerRef.current) return null;
+        const node = (containerRef.current as any).yogaNode;
+        if (!node) return null;
+        return {
+          left: node.getComputedLeft?.() ?? 0,
+          top: node.getComputedTop?.() ?? 0,
+          width: node.getComputedWidth?.() ?? 0,
+          height: node.getComputedHeight?.() ?? 0,
+        };
+      },
+      onScroll: (delta) => {
+        const ref = scrollRef.current;
+        if (!ref) return false;
+        const offset = ref.getScrollOffset();
+        const content = ref.getContentHeight();
+        const viewport = ref.getViewportHeight();
+        if (!content || content <= viewport) return false;
+        const steps = -delta * 3;
+        const clamped =
+          steps > 0
+            ? Math.min(steps, content - viewport - offset)
+            : Math.max(steps, -offset);
+        if (clamped !== 0) {
+          ref.scrollBy(clamped);
+          return false;
+        }
+        return true;
+      },
+    });
+    return unreg;
+  }, []);
+
+  return (
+    <Box
+      ref={containerRef}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Box
+        backgroundColor={theme.bg.surface}
+        borderStyle="round"
+        borderColor={theme.role.user}
+        paddingX={1}
+        paddingY={1}
+        maxHeight="50%"
+        width="60%"
+      >
+        <ScrollView ref={scrollRef}>
+          <Text bold color={theme.role.user}>
+            Available Commands
+          </Text>
+          <Text>
+            <Newline />
+          </Text>
+          {BUILTIN_COMMANDS.map((c) => (
+            <Box key={c.command}>
+              <Text>
+                {"  "}
+                <Text bold color={theme.role.user}>
+                  {c.command}
+                </Text>
+                {"  "}
+                <Text dimColor>{c.description}</Text>
+              </Text>
+            </Box>
+          ))}
+          <Text>
+            <Newline />
+          </Text>
+          <Text dimColor>Press Esc / q / Enter to close</Text>
+        </ScrollView>
+      </Box>
+    </Box>
+  );
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,3 @@
+export { DialogProvider, useDialog } from "./provider.js";
+export type { DialogBridge } from "./provider.js";
+export { default as HelpDialog } from "./help-dialog.js";