mirai-cli 0.1.0

package/src/components/dialog/provider.tsx

@@ -0,0 +1,96 @@
+import { Box } from "ink";
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  type ReactNode,
+  type MutableRefObject,
+} from "react";
+
+let nextId = 0;
+
+interface DialogItem {
+  id: string;
+  node: ReactNode;
+}
+
+interface DialogCtx {
+  show: (render: () => ReactNode) => void;
+  push: (render: () => ReactNode) => void;
+  close: () => void;
+  isActive: boolean;
+}
+
+export interface DialogBridge {
+  show: (render: () => ReactNode) => void;
+  isActive: boolean;
+}
+
+const DialogContext = createContext<DialogCtx>({
+  show: () => {},
+  push: () => {},
+  close: () => {},
+  isActive: false,
+});
+
+export function DialogProvider({
+  children,
+  dialogRef,
+}: {
+  children: ReactNode;
+  dialogRef?: MutableRefObject<DialogBridge>;
+}) {
+  const [stack, setStack] = useState<DialogItem[]>([]);
+
+  const show = useCallback((render: () => ReactNode) => {
+    const id = `dialog-${++nextId}`;
+    setStack([{ id, node: render() }]);
+  }, []);
+
+  const push = useCallback((render: () => ReactNode) => {
+    const id = `dialog-${++nextId}`;
+    setStack((prev) => [...prev, { id, node: render() }]);
+  }, []);
+
+  const close = useCallback(() => {
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+
+  const ctx: DialogCtx = {
+    show,
+    push,
+    close,
+    isActive: stack.length > 0,
+  };
+
+  // Sync state into external ref (so parent components can read show/isActive)
+  useEffect(() => {
+    if (dialogRef) {
+      dialogRef.current = { show, isActive: stack.length > 0 };
+    }
+  });
+
+  return (
+    <DialogContext.Provider value={ctx}>
+      {children}
+      {stack.map((item, i) => (
+        <Box
+          key={item.id}
+          position="absolute"
+          top={0}
+          left={0}
+          width="100%"
+          height="100%"
+        >
+          {item.node}
+        </Box>
+      ))}
+    </DialogContext.Provider>
+  );
+}
+
+export function useDialog(): DialogCtx {
+  return useContext(DialogContext);
+}

package/src/components/header/index.tsx

@@ -0,0 +1,78 @@
+import { Box, Text } from "ink";
+import { Badge } from "@inkjs/ui";
+import { memo } from "react";
+import { default as Spinner } from "ink-spinner";
+import BigText from "ink-big-text";
+import Gradient from "ink-gradient";
+import { NEON_COLORS } from "@mirai/core/constants";
+import { toolRegistry } from "@mirai/tools";
+import { theme } from "../../theme.js";
+
+const MODEL = process.env.OLLAMA_MODEL || "qwen3.5:4b";
+const DIR = process.cwd();
+const TOOLS = toolRegistry.list();
+
+function Header() {
+  return (
+    <Box flexDirection="column" paddingX={0} paddingY={0}>
+      <Box flexDirection="row" justifyContent="center">
+        <Gradient
+          colors={[
+            { color: "#7aa2f7", pos: 0 }, // xanh dương
+            { color: "#bb9af7", pos: 0.4 }, // tím
+            { color: "#e0af68", pos: 0.7 }, // cam
+            { color: "#9ece6a", pos: 1 },
+          ]}
+        >
+          <BigText text="mirai" letterSpacing={0} />
+        </Gradient>
+      </Box>
+      <Box
+        borderStyle="round"
+        borderColor={theme.bg.surface}
+        backgroundColor={theme.bg.alt}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+        flexDirection="row"
+      >
+        <Box flexDirection="column" marginRight={2}>
+          <Box>
+            <Badge color={theme.info.primary}>
+              <Text backgroundColor={theme.info.primary}>MODEL</Text>
+            </Badge>
+            <Text> </Text>
+            <Text color={theme.role.user}>{MODEL}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Badge color={theme.info.primary}>
+              <Text backgroundColor={theme.info.primary}>DIR</Text>
+            </Badge>
+            <Text> </Text>
+            <Text color={theme.text.dim}>{DIR}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Badge color={theme.warning.primary}>
+              <Text backgroundColor={theme.warning.primary}>TOOLS</Text>
+            </Badge>
+            <Text> </Text>
+            <Text color={theme.text.dim}>▶ {TOOLS.length} available</Text>
+          </Box>
+          <Box flexDirection="column" marginTop={1}>
+            {TOOLS.map((t) => (
+              <Text key={t.name} color={theme.text.primary}>
+                {" "}
+                ○ {t.name}
+              </Text>
+            ))}
+          </Box>
+        </Box>
+        <Box flexGrow={1} />
+        <Box>
+          <Spinner type="dots" />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+export default memo(Header);

package/src/components/input/command-palette.tsx

@@ -0,0 +1,129 @@
+import { Box, Text, useCursor } from "ink";
+import { useRef, useCallback, useEffect } from "react";
+import { useOnMouseClick } from "../../hooks/use-mouse.js";
+import { scrollRegistry } from "../../services/scroll-registry.js";
+import type { CommandDef } from "./commands.js";
+import { ScrollView } from "ink-scroll-view";
+import { theme } from "../../theme.js";
+import { NEON_COLORS } from "@mirai/core/constants";
+
+interface Props {
+  commands: CommandDef[];
+  query: string;
+  selectedIndex: number;
+  onSelect?: (cmd: CommandDef) => void;
+}
+
+function PaletteItem({
+  cmd,
+  isSelected,
+  onSelect,
+}: {
+  cmd: CommandDef;
+  isSelected: boolean;
+  onSelect?: (cmd: CommandDef) => void;
+}) {
+  const ref = useRef<any>(null);
+  const handleClick = useCallback(() => onSelect?.(cmd), [cmd, onSelect]);
+  useOnMouseClick(ref, handleClick);
+
+  return (
+    <Box ref={ref}>
+      <Text bold={isSelected} color={isSelected ? theme.info.primary : undefined}>
+        {isSelected ? "▸ " : "  "}
+        {cmd.label}
+      </Text>
+      <Text dimColor> {cmd.description}</Text>
+    </Box>
+  );
+}
+
+export default function CommandPalette({
+  commands,
+  query,
+  selectedIndex,
+  onSelect,
+}: Props) {
+  const { setCursorPosition } = useCursor();
+  const paletteScrollRef = useRef<any>(null);
+  const containerRef = useRef<any>(null);
+  const filtered = commands.filter((c) =>
+    c.command.toLowerCase().startsWith("/" + query.toLowerCase()),
+  );
+
+  useEffect(() => {
+    setCursorPosition({ x: 2, y: filtered.length - selectedIndex });
+  }, [selectedIndex, filtered.length, setCursorPosition]);
+
+  useEffect(() => {
+    const unreg = scrollRegistry.register({
+      id: "command-palette",
+      zIndex: 1,
+      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 = paletteScrollRef.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;
+  }, []);
+
+  if (filtered.length === 0) return null;
+
+  return (
+    <Box
+      ref={containerRef}
+      position="absolute"
+      bottom="100%"
+      left={0}
+      right={0}
+      paddingTop={1}
+      borderStyle={"bold"}
+      borderColor={theme.role.user}
+      borderTop={false}
+      borderLeft={true}
+      borderRight={true}
+      borderBottom={false}
+      flexDirection="row"
+      backgroundColor={theme.bg.surface}
+      maxHeight={10}
+    >
+      <Box flexGrow={1}>
+        <ScrollView ref={paletteScrollRef}>
+          {filtered.map((cmd, i) => (
+            <PaletteItem
+              key={cmd.command}
+              cmd={cmd}
+              isSelected={i === selectedIndex}
+              onSelect={onSelect}
+            />
+          ))}
+        </ScrollView>
+      </Box>
+    </Box>
+  );
+}

package/src/components/input/commands.ts

@@ -0,0 +1,46 @@
+import { PermissionMode } from "@mirai/permission";
+
+export type Command =
+  | { type: "mode.set"; value: PermissionMode }
+  | { type: "system.clear" }
+  | { type: "help.show" };
+
+export interface CommandDef {
+  command: string;
+  label: string;
+  description: string;
+  execute: () => Command;
+}
+
+export const BUILTIN_COMMANDS: CommandDef[] = [
+  {
+    command: "/mode readonly",
+    label: "/mode readonly",
+    description: "READONLY — deny all writes/exec",
+    execute: () => ({ type: "mode.set", value: PermissionMode.READONLY }),
+  },
+  {
+    command: "/mode workspace_write",
+    label: "/mode workspace_write",
+    description: "WORKSPACE_WRITE — allow writes, ask exec",
+    execute: () => ({ type: "mode.set", value: PermissionMode.WORKSPACE_WRITE }),
+  },
+  {
+    command: "/mode full_access",
+    label: "/mode full_access",
+    description: "FULL_ACCESS — allow everything",
+    execute: () => ({ type: "mode.set", value: PermissionMode.FULL_ACCESS }),
+  },
+  {
+    command: "/clear",
+    label: "/clear",
+    description: "Clear chat history",
+    execute: () => ({ type: "system.clear" }),
+  },
+  {
+    command: "/help",
+    label: "/help",
+    description: "Show available commands",
+    execute: () => ({ type: "help.show" }),
+  },
+];

package/src/components/input/index.tsx

@@ -0,0 +1,284 @@
+import { Box, Text, useInput } from "ink";
+import { useState, useRef, useEffect } from "react";
+import { theme } from "../../theme.js";
+import { NEON_COLORS } from "@mirai/core/constants";
+import Spinner from "ink-spinner";
+import type { Command } from "./commands.js";
+import { BUILTIN_COMMANDS } from "./commands.js";
+import CommandPalette from "./command-palette.js";
+import { useDialog } from "../dialog/index.js";
+
+// ─── Gradient: 3 màu (bỏ xanh lá #00ff87) ────────────────
+const GRAD = NEON_COLORS.slice(0, 3);
+
+function gradAt(t: number): string {
+  const stops = [
+    { color: GRAD[0], pos: 0 },
+    { color: GRAD[1], pos: 0.5 },
+    { color: GRAD[2], pos: 1 },
+  ];
+  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] = [
+        parseInt(a.color.slice(1, 3), 16),
+        parseInt(a.color.slice(3, 5), 16),
+        parseInt(a.color.slice(5, 7), 16),
+      ];
+      const [r2, g2, b2] = [
+        parseInt(b.color.slice(1, 3), 16),
+        parseInt(b.color.slice(3, 5), 16),
+        parseInt(b.color.slice(5, 7), 16),
+      ];
+      const lerp = (a: number, b: number, t: number) =>
+        Math.round(a + (b - a) * t);
+      return `#${lerp(r1, r2, p).toString(16).padStart(2, "0")}${lerp(g1, g2, p).toString(16).padStart(2, "0")}${lerp(b1, b2, p).toString(16).padStart(2, "0")}`;
+    }
+  }
+  return stops[stops.length - 1].color;
+}
+
+// ─── Matrix idle animation ─────────────────────────────────
+const KATA = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝﾞﾟ";
+const KATA_ARR = [...KATA];
+const BLINK = "█▓░▒";
+const BLINK_ARR = [...BLINK];
+
+function randChar(): string {
+  return KATA_ARR[Math.floor(Math.random() * KATA_ARR.length)];
+}
+
+function flicker(s: string): string {
+  return [...s]
+    .map((ch) =>
+      Math.random() < 0.25
+        ? BLINK_ARR[Math.floor(Math.random() * BLINK_ARR.length)]
+        : ch,
+    )
+    .join("");
+}
+
+interface Props {
+  onSubmit: (value: string) => void;
+  onCommand: (cmd: Command) => void;
+  disabled: boolean;
+  onToggleMatrix: () => void;
+}
+
+export default function Input({
+  onSubmit,
+  onCommand,
+  disabled,
+  onToggleMatrix,
+}: Props) {
+  const [isIdle, setIsIdle] = useState(false);
+  const [value, setValue] = useState("");
+  const [displayText, setDisplayText] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [colorIdx, setColorIdx] = useState(0);
+  const lastActive = useRef(Date.now());
+  const dialog = useDialog();
+
+  // Derived palette state
+  const isSlashMode = value.startsWith("/");
+  const paletteQuery = isSlashMode ? value.slice(1) : "";
+  const filtered = isSlashMode
+    ? BUILTIN_COMMANDS.filter((c) =>
+        c.command.toLowerCase().startsWith("/" + paletteQuery.toLowerCase()),
+      )
+    : [];
+  const filteredRef = useRef(filtered);
+  filteredRef.current = filtered;
+  const showPalette = isSlashMode && filtered.length > 0 && !disabled;
+
+  // Reset selection when filter changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [paletteQuery]);
+
+  // Neon border + prompt cycle
+  useEffect(() => {
+    const t = setInterval(
+      () => setColorIdx((i) => (i + 1) % NEON_COLORS.length),
+      500,
+    );
+    return () => clearInterval(t);
+  }, []);
+
+  // Idle detection (3s since last keypress, only when not disabled)
+  useEffect(() => {
+    if (disabled) {
+      setIsIdle(false);
+      return;
+    }
+    const check = () => {
+      if (Date.now() - lastActive.current >= 3000) setIsIdle(true);
+    };
+    const t = setInterval(check, 200);
+    return () => clearInterval(t);
+  }, [disabled]);
+
+  // ── Matrix animation chain (setTimeout-driven) ──
+  useEffect(() => {
+    if (!isIdle) {
+      setDisplayText("");
+      return;
+    }
+
+    let alive = true;
+    let len = 0;
+    let baseStr = "";
+    const maxLen = 10 + Math.floor(Math.random() * 11);
+    const ADD_MS = 120,
+      REMOVE_MS = 120,
+      PAUSE_MS = 500;
+
+    const flickerTimer = setInterval(() => {
+      if (!alive || !baseStr) return;
+      setDisplayText(flicker(baseStr));
+    }, 50);
+
+    function add() {
+      if (!alive) return;
+      len++;
+      baseStr = Array.from({ length: len }, () => randChar()).join("");
+      if (len < maxLen) setTimeout(add, ADD_MS);
+      else setTimeout(remove, PAUSE_MS);
+    }
+
+    function remove() {
+      if (!alive) return;
+      len--;
+      if (len > 0) {
+        baseStr = Array.from({ length: len }, () => randChar()).join("");
+        setTimeout(remove, REMOVE_MS);
+      } else {
+        baseStr = "";
+        setDisplayText("");
+        setTimeout(add, 3000);
+      }
+    }
+
+    setTimeout(add, 300);
+    return () => {
+      alive = false;
+      clearInterval(flickerTimer);
+    };
+  }, [isIdle]);
+
+  // ── Input handler ──
+  useInput((input, key) => {
+    if (dialog.isActive) return;
+    if (input.includes("[<")) return;
+    lastActive.current = Date.now();
+
+    // ── Palette navigation (when visible) ──
+    if (showPalette) {
+      if (key.upArrow) {
+        setSelectedIndex((i) =>
+          i <= 0 ? filteredRef.current.length - 1 : i - 1,
+        );
+        return;
+      }
+      if (key.downArrow) {
+        setSelectedIndex((i) =>
+          i >= filteredRef.current.length - 1 ? 0 : i + 1,
+        );
+        return;
+      }
+      if (key.return) {
+        const cmd = filtered[selectedIndex];
+        if (cmd) {
+          onCommand(cmd.execute());
+          setValue("");
+          setSelectedIndex(0);
+          return;
+        }
+      }
+      if (key.escape) {
+        setValue("");
+        setSelectedIndex(0);
+        return;
+      }
+    }
+
+    // ── Submit ──
+    if (key.return) {
+      onSubmit(value);
+      setValue("");
+      return;
+    }
+
+    // ── Idle wake ──
+    if (isIdle && !disabled) {
+      if (input.length > 0 && input.charCodeAt(0) >= 32) {
+        setValue((v) => v + input);
+      } else if (key.backspace) {
+        setValue((v) => v.slice(0, -1));
+      }
+      setIsIdle(false);
+      return;
+    }
+
+    // ── Toggle matrix ──
+    if (key.meta && input === "m") {
+      onToggleMatrix();
+      return;
+    }
+
+    // ── Regular input ──
+    if (key.backspace) {
+      setValue((v) => v.slice(0, -1));
+      return;
+    }
+    setValue((v) => v + input);
+  });
+
+  return (
+    <Box position="relative" maxHeight={10}>
+      {showPalette && (
+        <CommandPalette
+          commands={BUILTIN_COMMANDS}
+          query={paletteQuery}
+          selectedIndex={selectedIndex}
+          onSelect={(cmd) => {
+            onCommand(cmd.execute());
+            setValue("");
+            setSelectedIndex(0);
+          }}
+        />
+      )}
+      <Box
+        paddingY={1}
+        paddingX={1}
+        backgroundColor={theme.bg.surface}
+        borderStyle={"bold"}
+        borderTop={false}
+        borderBottom={false}
+        borderColor={theme.role.user}
+        width={"100%"}
+      >
+        <Box>
+          <Text bold color={theme.role.user}>
+            {disabled ? <Spinner type="dots" /> : "❯"}
+          </Text>
+          <Box marginLeft={1} flexGrow={1} minWidth={0}>
+            {isIdle && displayText ? (
+              <Box>
+                {[...displayText].map((ch, i) => (
+                  <Text key={i} color={theme.text.primary}>
+                    {ch}
+                  </Text>
+                ))}
+              </Box>
+            ) : (
+              <Text>{value ? value : "type a message..."}</Text>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}