mirai-cli 1.0.0

package/src/components/matrix-rain/index.tsx

@@ -0,0 +1,122 @@
+import { Box, Text, useStdout } from "ink";
+import { useEffect, useState, useRef, memo } from "react";
+import { NEON_COLORS } from "@mirai/core/constants";
+import { theme } from "src/theme";
+
+const HEADS = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝ01#%&+=:;│┃━─█▓";
+const TAILS =
+  "｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝ.:;░▒";
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+function hexRgb(h: string) {
+  return [
+    parseInt(h.slice(1, 3), 16),
+    parseInt(h.slice(3, 5), 16),
+    parseInt(h.slice(5, 7), 16),
+  ];
+}
+function rgbHex(r: number, g: number, b: number) {
+  return `#${Math.round(r).toString(16).padStart(2, "0")}${Math.round(g).toString(16).padStart(2, "0")}${Math.round(b).toString(16).padStart(2, "0")}`;
+}
+const STOPS = [
+  { c: NEON_COLORS[0], pos: 0 },
+  { c: NEON_COLORS[1], pos: 0.5 },
+  { c: NEON_COLORS[2], pos: 1 },
+];
+function grad(t: number): string {
+  if (t <= 0) return STOPS[0].c;
+  if (t >= 1) return STOPS[STOPS.length - 1].c;
+  for (let i = 0; i < STOPS.length - 1; i++) {
+    const a = STOPS[i],
+      b = STOPS[i + 1];
+    if (t >= a.pos && t <= b.pos) {
+      const p = (t - a.pos) / (b.pos - a.pos);
+      const [r1, g1, b1] = hexRgb(a.c);
+      const [r2, g2, b2] = hexRgb(b.c);
+      return rgbHex(lerp(r1, r2, p), lerp(g1, g2, p), lerp(b1, b2, p));
+    }
+  }
+  return STOPS[STOPS.length - 1].c;
+}
+
+export default memo(function MatrixRain() {
+  const { stdout } = useStdout();
+  const cols = stdout?.columns ?? 80;
+  const rows = stdout?.rows ?? 24;
+  const dropsRef = useRef<{ x: number; y: number; chars: string[] }[]>([]);
+  const [grid, setGrid] = useState<string[]>(() =>
+    Array.from({ length: rows }, () => " ".repeat(cols)),
+  );
+  const [rowColors] = useState<string[]>(() => {
+    const c: string[] = [];
+    for (let y = 0; y < rows; y++) c.push(grad(y / (rows - 1 || 1)));
+    return c;
+  });
+
+  useEffect(() => {
+    const d: typeof dropsRef.current = [];
+    for (let x = 0; x < cols; x++) {
+      if (Math.random() > 0.4) continue;
+      d.push({
+        x: Math.floor(Math.random() * cols),
+        y: -Math.random() * rows * 2,
+        chars: [],
+      });
+    }
+    dropsRef.current = d;
+  }, [cols, rows]);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    let running = true;
+    function tick() {
+      if (!running) return;
+      const lines: string[] = Array.from({ length: rows }, () =>
+        " ".repeat(cols),
+      );
+      for (const drop of dropsRef.current) {
+        drop.y += 0.8;
+        if (Math.floor(drop.y) > rows + 6) {
+          drop.y = -Math.random() * rows;
+          drop.x = Math.floor(Math.random() * cols);
+          drop.chars = [];
+        }
+        if (
+          drop.chars.length === 0 ||
+          Math.floor(drop.y) !== Math.floor(drop.y - 0.8)
+        ) {
+          drop.chars.unshift(HEADS[Math.floor(Math.random() * HEADS.length)]);
+          if (drop.chars.length > 6) drop.chars.pop();
+          for (let j = 1; j < drop.chars.length; j++)
+            drop.chars[j] = TAILS[Math.floor(Math.random() * TAILS.length)];
+        }
+        for (let i = 0; i < drop.chars.length; i++) {
+          const yy = Math.floor(drop.y) - i;
+          if (yy < 0 || yy >= rows) continue;
+          const l = lines[yy].split("");
+          l[drop.x] = drop.chars[i];
+          lines[yy] = l.join("");
+        }
+      }
+      setGrid(lines);
+      timer = setTimeout(tick, 33);
+    }
+    timer = setTimeout(tick, 0);
+    return () => {
+      running = false;
+      clearTimeout(timer);
+    };
+  }, [cols, rows]);
+
+  return (
+    <Box width={cols} height={rows} flexDirection="column" overflow="hidden">
+      {grid.map((line, y) => (
+        <Box key={y} height={1} width={cols}>
+          <Text color={theme.text.primary}>{line}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+});

package/src/components/permission-modal.tsx

@@ -0,0 +1,66 @@
+import { Box, Text, useInput } from "ink";
+import type { PermissionRequest } from "@mirai/permission";
+import { ToolCapability, PermissionResponse } from "@mirai/permission";
+import { theme } from "../theme.js";
+
+interface Props {
+  request: PermissionRequest;
+  onResolve: (response: PermissionResponse) => void;
+}
+
+const capabilityLabels: Record<number, { label: string; color: string }> = {
+  [ToolCapability.READ]: { label: "Read", color: theme.info.primary },
+  [ToolCapability.WRITE]: { label: "Write", color: theme.warning.primary },
+  [ToolCapability.EXECUTE]: { label: "Execute", color: theme.warning.primary },
+  [ToolCapability.DANGEROUS]: { label: "Dangerous", color: theme.error.primary },
+};
+
+export default function PermissionModal({ request, onResolve }: Props) {
+  const cap = capabilityLabels[request.capability] ?? {
+    label: "Unknown",
+    color: theme.text.dim,
+  };
+
+  useInput((_input, key) => {
+    if (key.return) {
+      onResolve(PermissionResponse.ONCE);
+    } else if (key.escape) {
+      onResolve(PermissionResponse.REJECT);
+    }
+  });
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={cap.color as any}
+      flexDirection="column"
+      paddingX={1}
+      paddingY={1}
+      marginTop={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text bold color={cap.color as any}>
+          ⚠ {cap.label} Action
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text bold>Tool: </Text>
+        <Text>{request.action}</Text>
+      </Box>
+      <Box>
+        <Text bold>{request.action === "bash" ? "Command" : "Resource"}: </Text>
+        <Text dimColor>{request.description}</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text dimColor>{request.title}</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={theme.success.primary}>[Enter]</Text>
+        <Text> Allow Once  </Text>
+        <Text color={theme.error.primary}>[Esc]</Text>
+        <Text> Reject</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/scroll-bar/index.tsx

@@ -0,0 +1,56 @@
+import { Box, Text } from "ink";
+import { useRef, useLayoutEffect } from "react";
+import { theme } from "../../theme.js";
+import type { ScrollState } from "../../hooks/use-scroll.js";
+import { useScrollBarDrag } from "../../hooks/use-scroll-bar-drag.js";
+
+interface Props {
+  scrollPos: ScrollState;
+  scrollRef: React.RefObject<any>;
+}
+
+export default function ScrollBar({ scrollPos, scrollRef }: Props) {
+  const { offset, content, viewport } = scrollPos;
+  if (!content || !viewport || content <= viewport) return null;
+
+  const barRef = useRef<any>(null);
+  const layoutRef = useRef({ barTop: 0 });
+
+  useLayoutEffect(() => {
+    if (barRef.current) {
+      const node = (barRef.current as any).yogaNode;
+      layoutRef.current.barTop = node?.getComputedTop?.() ?? 0;
+    }
+  }, []);
+
+  const thumb = Math.max(1, Math.floor((viewport / content) * viewport));
+  const max = viewport - thumb;
+  const pos = Math.round((offset / (content - viewport)) * max);
+
+  const { isDragging } = useScrollBarDrag(barRef, scrollRef, {
+    thumbPos: pos,
+    thumbHeight: thumb,
+    barHeight: viewport - 1,
+    barTop: layoutRef.current.barTop,
+  });
+
+  const rows = Array.from({ length: viewport - 1 }).map((_, i) => {
+    const isThumb = i >= pos && i < pos + thumb;
+    return (
+      <Text
+        key={i}
+        color={
+          isThumb ? (isDragging ? theme.info.primary : theme.text.muted) : theme.text.muted
+        }
+      >
+        {isThumb ? "▓" : "│"}
+      </Text>
+    );
+  });
+
+  return (
+    <Box ref={barRef} flexDirection="column" width={1}>
+      {rows}
+    </Box>
+  );
+}

package/src/components/status-bar/index.tsx

@@ -0,0 +1,43 @@
+import { NEON_COLORS } from "@mirai/core/constants";
+import { Box, Text } from "ink";
+import { theme } from "../../theme.js";
+
+interface Props {
+  model: string;
+  tokensUsed: number;
+  totalTokens: number;
+  cost: number;
+  startTime: number;
+}
+
+export default function StatusBar({
+  model,
+  tokensUsed,
+  totalTokens,
+  cost,
+  startTime,
+}: Props) {
+  const elapsed = Date.now() - startTime;
+  const s = Math.floor(elapsed / 1000);
+  const m = Math.floor(s / 60);
+  const time = m > 0 ? `${m}m${s % 60}s` : `${s}s`;
+  return (
+    <Box
+      backgroundColor={theme.bg.surface}
+      flexDirection="row"
+      borderLeft={true}
+      borderTop={false}
+      borderRight={true}
+      borderBottom={false}
+      borderStyle={"bold"}
+      borderColor={theme.role.user}
+      justifyContent="space-between"
+      paddingX={1}
+    >
+      <Text color={theme.text.dim}>{model}</Text>
+      <Text color={theme.text.dim}>
+        {tokensUsed}/{totalTokens} tok | ~${cost.toFixed(6)} | {time}
+      </Text>
+    </Box>
+  );
+}

package/src/components/tool-result.tsx

@@ -0,0 +1,11 @@
+import { resolveRenderer } from '../renderers/registry.js';
+import type { ToolResultBlock } from '@mirai/core/types';
+
+interface Props {
+  block: ToolResultBlock;
+}
+
+export function ToolResultView({ block }: Props) {
+  const Renderer = resolveRenderer(block.toolName);
+  return <Renderer block={block} />;
+}

package/src/hooks/use-chat.ts

@@ -0,0 +1,208 @@
+import { useState, useCallback, useRef } from "react";
+import { detectProvider } from "@mirai/llm";
+import { DEFAULT_MODEL } from "@mirai/core/constants";
+import type { Message, ContentBlock, ToolEntry } from "@mirai/core/types";
+
+export interface ChatState {
+  messages: Message[];
+  isStreaming: boolean;
+  error: string | null;
+  toolFeed: ToolEntry[];
+  tokensUsed: number;
+  cost: number;
+  startTime: number;
+  submit(prompt: string): Promise<void>;
+  submitVersion: number;
+}
+
+export function useChat(): ChatState {
+  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 messagesRef = useRef<Message[]>([]);
+  const [submitVersion, setSubmitVersion] = useState(0);
+  messagesRef.current = messages;
+
+  const submit = useCallback(async (prompt: string) => {
+    setError(null);
+    setIsStreaming(true);
+    setSubmitVersion((v) => v + 1);
+
+    // Snapshot current messages via ref (avoid stale closure)
+    const prevMsgs = messagesRef.current;
+
+    const userMsg: Message = {
+      role: "user",
+      content: [{ type: "text", text: prompt }],
+    };
+
+    // Add user message + empty assistant placeholder
+    setMessages([...prevMsgs, userMsg, { role: "assistant", content: [] }]);
+
+    const apiMessages: Message[] = [
+      {
+        role: "system",
+        content: [{ type: "text", text: "You are a helpful coding assistant." }],
+      },
+      ...prevMsgs,
+      userMsg,
+    ];
+
+    // Local parsing state (survives across setMessages batches)
+    let full = "";
+    let thinkingBuffer = "";
+    let inThinking = false;
+    let thinkingStartedAt = 0;
+    let thinkingDuration = 0;
+
+    try {
+      const provider = detectProvider(DEFAULT_MODEL);
+      const req = { model: DEFAULT_MODEL, messages: apiMessages, stream: true };
+
+      for await (const event of provider.stream(req)) {
+        if (event.type === "thinking_delta") {
+          // Provider emits reasoning natively (OpenAI/xAI)
+          if (!thinkingStartedAt) thinkingStartedAt = Date.now();
+          thinkingBuffer += event.delta;
+          setMessages((prev) => {
+            const next = [...prev];
+            const last = { ...next[next.length - 1] };
+            const blocks: ContentBlock[] = [];
+            if (thinkingBuffer) {
+              blocks.push({
+                type: "thinking",
+                thinking: thinkingBuffer,
+                durationMs: thinkingDuration || undefined,
+              });
+            }
+            if (full) blocks.push({ type: "text", text: full });
+            next[next.length - 1] = { ...last, content: blocks };
+            return next;
+          });
+          continue;
+        }
+
+        if (event.type === "text_delta") {
+          const chunk = event.delta;
+
+          // Handle <think> tags (Ollama-style reasoning in text)
+          if (!inThinking && chunk.includes("<think>")) {
+            if (!thinkingStartedAt) thinkingStartedAt = Date.now();
+            inThinking = true;
+            const [_before, ...rest] = chunk.split("<think>");
+            const after = rest.join("<think>"); // chunk after the opening tag
+            if (_before) full += _before;
+            if (after) {
+              const [thinkContent, ...tail] = after.split("</think>");
+              thinkingBuffer += thinkContent;
+              if (tail.length > 1) {
+                // closing tag found in same chunk
+                inThinking = false;
+                if (!thinkingDuration) thinkingDuration = Date.now() - thinkingStartedAt;
+                full += tail.join("</think>");
+              } else if (tail.length === 1 && tail[0]) {
+                // after </think> there's more text
+                inThinking = false;
+                if (!thinkingDuration) thinkingDuration = Date.now() - thinkingStartedAt;
+                full += tail[0];
+              }
+            }
+          } else if (inThinking && chunk.includes("</think>")) {
+            const [thinkContent, ...rest] = chunk.split("</think>");
+            thinkingBuffer += thinkContent;
+            inThinking = false;
+            if (!thinkingDuration) thinkingDuration = Date.now() - thinkingStartedAt;
+            if (rest.length) full += rest.join("</think>");
+          } else if (inThinking) {
+            thinkingBuffer += chunk;
+          } else {
+            // Native thinking_delta just ended: first text_delta → calc duration
+            if (thinkingStartedAt && !thinkingDuration) {
+              thinkingDuration = Date.now() - thinkingStartedAt;
+            }
+            // Also check for </think> without opening tag (edge case)
+            if (chunk.includes("</think>")) {
+              const [thinkContent, ...rest] = chunk.split("</think>");
+              thinkingBuffer += thinkContent;
+              inThinking = false;
+              if (!thinkingDuration) thinkingDuration = Date.now() - thinkingStartedAt;
+              if (rest.length) full += rest.join("</think>");
+            } else {
+              full += chunk;
+            }
+          }
+
+          // Update last message blocks
+          setMessages((prev) => {
+            const next = [...prev];
+            const last = { ...next[next.length - 1] };
+            const blocks: ContentBlock[] = [];
+            if (thinkingBuffer) {
+              blocks.push({
+                type: "thinking",
+                thinking: thinkingBuffer,
+                durationMs: thinkingDuration || undefined,
+              });
+            }
+            if (full) blocks.push({ type: "text", text: full });
+            next[next.length - 1] = { ...last, content: blocks };
+            return next;
+          });
+        }
+
+        if (event.type === "tool_call") {
+          setMessages((prev) => {
+            const next = [...prev];
+            const last = { ...next[next.length - 1] };
+            const blocks: ContentBlock[] = [...last.content];
+            blocks.push({
+              type: "tool_use",
+              id: event.id,
+              name: event.name,
+              input: event.input as Record<string, unknown>,
+            });
+            next[next.length - 1] = { ...last, content: blocks };
+            return next;
+          });
+        }
+
+        if (event.type === "done") {
+          // Finalize thinking duration if still running
+          if (thinkingStartedAt && !thinkingDuration) {
+            thinkingDuration = Date.now() - thinkingStartedAt;
+          }
+          if (event.usage) {
+            const p = "prompt_tokens" in event.usage
+              ? (event.usage as any).prompt_tokens ?? 0
+              : event.usage.inputTokens;
+            const c = "completion_tokens" in event.usage
+              ? (event.usage as any).completion_tokens ?? 0
+              : event.usage.outputTokens;
+            setTokensUsed((prev) => prev + p + c);
+            setCost((prev) => prev + p * 0.000002 + c * 0.00001);
+          }
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsStreaming(false);
+    }
+  }, []); // stable — reads messages via ref
+
+  return {
+    messages,
+    isStreaming,
+    error,
+    toolFeed,
+    tokensUsed,
+    cost,
+    startTime: startTimeRef.current,
+    submit,
+    submitVersion,
+  };
+}

package/src/hooks/use-mouse.tsx

@@ -0,0 +1,121 @@
+import { createContext, useContext, useEffect, useState, useRef, useCallback } from "react";
+import { DOMElement } from "ink";
+import { mouseInput, type MouseState } from "../services/mouse-input.js";
+
+// ─── Context ────────────────────────────────────────────────
+
+interface MouseCtx {
+  state: MouseState;
+  isSupported: boolean;
+}
+
+const MouseContext = createContext<MouseCtx>({
+  state: { x: 0, y: 0, button: "none", isPressed: false, wheelDelta: 0 },
+  isSupported: false,
+});
+
+export function MouseStateProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<MouseState>(mouseInput.state);
+
+  useEffect(() => {
+    const unsub = mouseInput.on((s) => setState({ ...s }));
+    return unsub;
+  }, []);
+
+  return (
+    <MouseContext.Provider value={{ state, isSupported: mouseInput.isTTY }}>
+      {children}
+    </MouseContext.Provider>
+  );
+}
+
+export function useMouseState(): MouseState {
+  return useContext(MouseContext).state;
+}
+
+// ─── useOnMouseClick ────────────────────────────────────────
+// Calls handler when left-click is detected within element bounds.
+// Falls back to coordinate check if DOMElement bounds unavailable.
+
+export function useOnMouseClick(
+  ref: React.RefObject<DOMElement | null>,
+  handler: () => void,
+) {
+  const wasPressedRef = useRef(false);
+
+  useEffect(() => {
+    const unsub = mouseInput.on((state) => {
+      if (!ref.current) return;
+
+      const node = (ref.current as any).yogaNode;
+      if (!node) return;
+
+      const left = node.getComputedLeft?.() ?? 0;
+      const top = node.getComputedTop?.() ?? 0;
+      const width = node.getComputedWidth?.() ?? 0;
+      const height = node.getComputedHeight?.() ?? 0;
+
+      const inside =
+        state.x >= left &&
+        state.x < left + width &&
+        state.y >= top &&
+        state.y < top + height;
+
+      if (inside && state.isPressed && !wasPressedRef.current) {
+        wasPressedRef.current = true;
+      }
+
+      if (inside && !state.isPressed && wasPressedRef.current) {
+        wasPressedRef.current = false;
+        handler();
+      }
+
+      if (!state.isPressed) {
+        wasPressedRef.current = false;
+      }
+    });
+
+    return unsub;
+  }, [ref, handler]);
+}
+
+// ─── useOnMouseHover ────────────────────────────────────────
+
+export function useOnMouseHover(
+  ref: React.RefObject<DOMElement | null>,
+  onEnter: () => void,
+  onLeave: () => void,
+) {
+  const wasInsideRef = useRef(false);
+
+  useEffect(() => {
+    const unsub = mouseInput.on((state) => {
+      if (!ref.current) return;
+
+      const node = (ref.current as any).yogaNode;
+      if (!node) return;
+
+      const left = node.getComputedLeft?.() ?? 0;
+      const top = node.getComputedTop?.() ?? 0;
+      const width = node.getComputedWidth?.() ?? 0;
+      const height = node.getComputedHeight?.() ?? 0;
+
+      const inside =
+        state.x >= left &&
+        state.x < left + width &&
+        state.y >= top &&
+        state.y < top + height;
+
+      if (inside && !wasInsideRef.current) {
+        wasInsideRef.current = true;
+        onEnter();
+      }
+      if (!inside && wasInsideRef.current) {
+        wasInsideRef.current = false;
+        onLeave();
+      }
+    });
+
+    return unsub;
+  }, [ref, onEnter, onLeave]);
+}

package/src/hooks/use-permission.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { TuiPermissionProvider } from "../services/tui-permission-provider.js";
+import type { PermissionRequest, PermissionResponse } from "@mirai/permission";
+import { InMemoryRuleStore } from "@mirai/permission";
+import { PermissionMode } from "@mirai/permission";
+import type { RuleStore } from "@mirai/permission";
+
+export interface PermissionState {
+  provider: TuiPermissionProvider;
+  ruleStore: RuleStore;
+  mode: PermissionMode;
+  setMode: (mode: PermissionMode) => void;
+  pendingRequest: PermissionRequest | null;
+}
+
+export function usePermission(initialMode: PermissionMode = PermissionMode.WORKSPACE_WRITE): PermissionState {
+  const [mode, setMode] = useState<PermissionMode>(initialMode);
+  const [pendingRequest, setPendingRequest] = useState<PermissionRequest | null>(null);
+  const providerRef = useRef<TuiPermissionProvider>(new TuiPermissionProvider());
+  const ruleStoreRef = useRef<RuleStore>(new InMemoryRuleStore());
+
+  useEffect(() => {
+    providerRef.current.onRequest((req) => {
+      setPendingRequest(req);
+    });
+  }, []);
+
+  return {
+    provider: providerRef.current,
+    ruleStore: ruleStoreRef.current,
+    mode,
+    setMode,
+    pendingRequest,
+  };
+}