@ridit/milo 0.1.0

package/src/components/permissions/PermissionCard.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { getTheme } from "../../utils/theme";
+import { useTerminalSize } from "../../hooks/useTerminalSize";
+import { StructuredDiff } from "../StructuredDiff";
+import { parsePatch } from "diff";
+import type { PermissionDecision } from "../../permissions";
+import type { PermissionRequest } from "../../types";
+import {
+  arrowRight,
+  cornerBottomLeft,
+  cornerTopLeft,
+  line,
+  upDownArrow,
+} from "../../icons";
+
+type Props = {
+  permission: PermissionRequest;
+  onDecide: (decision: PermissionDecision) => void;
+};
+
+const OPTIONS: { label: string; value: PermissionDecision }[] = [
+  { label: "Yes", value: "allow" },
+  {
+    label: "Yes, and don't ask again in this session.",
+    value: "allow_session",
+  },
+  { label: "No (esc)", value: "deny" },
+];
+
+function getBashPreview(input: unknown): string {
+  if (!input || typeof input !== "object") return "";
+  return String((input as any).command ?? "");
+}
+
+function getFilePreview(toolName: string, input: unknown) {
+  if (!input || typeof input !== "object") return null;
+  const a = input as Record<string, unknown>;
+
+  if (toolName === "FileWriteTool") {
+    const content = String(a.content ?? "");
+    if (!content) return null;
+    const lines = content.split("\n").map((l) => "+" + l);
+    return {
+      oldStart: 1,
+      oldLines: 0,
+      newStart: 1,
+      newLines: lines.length,
+      lines,
+    };
+  }
+
+  if (toolName === "FileEditTool") {
+    const patch = String(a.patch ?? "");
+    if (!patch) return null;
+    const parsed = parsePatch(patch);
+    return parsed[0]?.hunks[0] ?? null;
+  }
+
+  return null;
+}
+
+export function PermissionCard({
+  permission,
+  onDecide,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize();
+  const theme = getTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { toolName, input } = permission;
+  const isBash = toolName === "BashTool";
+  const isFile = toolName === "FileWriteTool" || toolName === "FileEditTool";
+  const hunk = isFile ? getFilePreview(toolName, input) : null;
+  const command = isBash ? getBashPreview(input) : null;
+  const path = isFile ? String((input as any).path ?? "") : null;
+
+  useInput((_, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    }
+    if (key.downArrow) {
+      setSelectedIndex((i) => Math.min(OPTIONS.length - 1, i + 1));
+    }
+    if (key.return) {
+      onDecide(OPTIONS[selectedIndex]!.value);
+    }
+    if (key.escape) {
+      onDecide("deny");
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1} paddingX={1} width={columns}>
+      <Box marginBottom={1}>
+        <Text color={theme.primary} bold>
+          {isBash ? "Run command" : "Edit file"}
+        </Text>
+        {path && <Text color={theme.secondaryText}> · {path}</Text>}
+      </Box>
+
+      {isBash && command && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Box flexDirection="row">
+            <Text color={theme.secondaryText} dimColor>
+              {cornerBottomLeft}
+              {line}{" "}
+            </Text>
+            <Text color={theme.secondary}>$ {command}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {hunk && (
+        <Box marginBottom={1} flexDirection="column">
+          <StructuredDiff patch={hunk} dim={false} width={columns - 8} />
+        </Box>
+      )}
+
+      <Box flexDirection="column" marginTop={1}>
+        {OPTIONS.map((opt, i) => {
+          const selected = i === selectedIndex;
+          const color =
+            opt.value === "deny"
+              ? theme.error
+              : opt.value === "allow_session"
+                ? theme.warning
+                : theme.success;
+          return (
+            <Box key={opt.value} flexDirection="row" gap={1}>
+              <Text color={selected ? color : theme.secondaryText}>
+                {selected ? arrowRight : " "}
+              </Text>
+              <Text>{i + 1}.</Text>
+              <Text
+                color={selected ? color : theme.secondaryText}
+                bold={selected}
+              >
+                {opt.label}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={theme.secondaryText} dimColor>
+          {upDownArrow} to select · enter to confirm · esc to deny
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/history.ts

@@ -0,0 +1,27 @@
+import { readFile, writeFile, mkdir } from "fs/promises";
+import { dirname } from "path";
+import { join } from "path";
+import { homedir } from "os";
+
+const HISTORY_FILE = join(homedir(), ".milo", "history.json");
+const MAX_HISTORY = 100;
+
+export async function getHistory(): Promise<string[]> {
+  try {
+    const raw = await readFile(HISTORY_FILE, "utf-8");
+    return JSON.parse(raw);
+  } catch {
+    return [];
+  }
+}
+
+export async function addToHistory(input: string): Promise<void> {
+  const history = await getHistory();
+  if (history[0] === input) return;
+  history.unshift(input);
+  await mkdir(dirname(HISTORY_FILE), { recursive: true });
+  await writeFile(
+    HISTORY_FILE,
+    JSON.stringify(history.slice(0, MAX_HISTORY), null, 2),
+  );
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,271 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { chatWithModel } from "../utils/chat";
+import { createAgent } from "../utils/agent";
+import { planWithModel } from "../utils/plan";
+import { findCommand } from "../commands";
+import { onPermissionRequest, resolvePermission } from "../permissions";
+import { awardXP, getLevelFlavor, LEVEL_UP_MESSAGES } from "../pet";
+import type {
+  Mode,
+  ChatMessage,
+  OrchestratorEvent,
+  PermissionRequest,
+} from "../types";
+import type { Session } from "../utils/session";
+import type { PermissionDecision } from "../permissions";
+import { info, radioOn, star } from "../icons";
+
+export type WizardMode = "add" | "edit" | "remove" | "list";
+
+export function useChat(initialMode: Mode = "agent") {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [session, setSession] = useState<Session | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [mode, _setMode] = useState<Mode>(initialMode);
+  const [pendingPermission, setPendingPermission] =
+    useState<PermissionRequest | null>(null);
+  const [pendingWizard, setPendingWizard] = useState<WizardMode | null>(null);
+  const modeRef = useRef<Mode>(initialMode);
+  const abortControllerRef = useRef<AbortController>(new AbortController());
+
+  const setMode = useCallback((m: Mode) => {
+    modeRef.current = m;
+    _setMode(m);
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setSession(undefined);
+  }, []);
+
+  const pushMessage = useCallback((text: string) => {
+    setMessages((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), type: "assistant", text },
+    ]);
+  }, []);
+
+  useEffect(() => {
+    const unsub = onPermissionRequest((p) => {
+      setPendingPermission({ toolName: p.toolName, input: p.input });
+    });
+    return unsub;
+  }, []);
+
+  const decide = useCallback((decision: PermissionDecision) => {
+    resolvePermission(decision);
+    setPendingPermission(null);
+  }, []);
+
+  const closeWizard = useCallback(
+    (message?: string) => {
+      setPendingWizard(null);
+      if (message) pushMessage(message);
+    },
+    [pushMessage],
+  );
+
+  const handleOrchestratorEvent = useCallback(
+    (event: OrchestratorEvent) => {
+      switch (event.type) {
+        case "plan_created":
+          pushMessage(
+            `${info} Plan created — ${event.tasks.length} subtasks:\n${event.tasks
+              .map((t) => `  [${t.id}] ${t.subtask}`)
+              .join("\n")}`,
+          );
+          break;
+        case "agent_start":
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: `agent-${event.taskId}`,
+              type: "tool_call",
+              toolName: "AgentTool",
+              input: { task: event.subtask },
+            },
+          ]);
+          break;
+        case "agent_done":
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === `agent-${event.taskId}`
+                ? {
+                    id: msg.id,
+                    type: "tool_result" as const,
+                    toolName: "AgentTool",
+                    input: msg.type === "tool_call" ? msg.input : undefined,
+                    output: { output: event.result },
+                    success: true,
+                  }
+                : msg,
+            ),
+          );
+          break;
+        case "connecting":
+          pushMessage(`${radioOn} Connecting all agents...`);
+          break;
+        case "done":
+          pushMessage(`${star} Orchestration complete.`);
+          break;
+      }
+    },
+    [pushMessage],
+  );
+
+  const submit = useCallback(
+    async (input: string) => {
+      if (!input.trim() || loading || pendingPermission || pendingWizard)
+        return;
+
+      setMessages((prev) => [
+        ...prev,
+        { id: crypto.randomUUID(), type: "user", text: input },
+      ]);
+      setLoading(true);
+
+      abortControllerRef.current = new AbortController();
+
+      const found = findCommand(input);
+      if (found) {
+        const { command, args } = found;
+        if (command.type === "local") {
+          const result = await command.call(args, {
+            clearMessages,
+            session,
+            setSession,
+            mode: modeRef.current,
+            setMode,
+            pushMessage,
+            abortController: abortControllerRef.current,
+            openWizard: setPendingWizard,
+          });
+          if (result) pushMessage(result);
+          setLoading(false);
+          return;
+        }
+        if (command.type === "prompt") {
+          input = await command.getPromptForCommand(args);
+        }
+      }
+
+      try {
+        const onToolCall = (toolCall: {
+          id: string;
+          toolName: string;
+          input: unknown;
+        }) => {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: toolCall.id,
+              type: "tool_call",
+              toolName: toolCall.toolName,
+              input: toolCall.input,
+            },
+          ]);
+        };
+
+        const onToolResult = (toolResult: {
+          id: string;
+          toolName: string;
+          output: unknown;
+        }) => {
+          awardXP(toolResult.toolName)
+            .then(({ pet, leveledUp }) => {
+              if (leveledUp) {
+                const flavor = getLevelFlavor(pet.level);
+                const unlock = LEVEL_UP_MESSAGES[pet.level];
+                const lines = [
+                  `⚡ level up! milo is now level ${pet.level} 🐱`,
+                  flavor,
+                ];
+                if (unlock) lines.push(unlock);
+                pushMessage(lines.join("\n"));
+              }
+            })
+            .catch(() => {});
+
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === toolResult.id
+                ? {
+                    id: toolResult.id,
+                    type: "tool_result" as const,
+                    toolName: toolResult.toolName,
+                    input: msg.type === "tool_call" ? msg.input : undefined,
+                    output: toolResult.output,
+                    success: true,
+                  }
+                : msg,
+            ),
+          );
+        };
+
+        const actualPrompt = input;
+        let text: string;
+        let newSession: Session;
+
+        const currentMode = modeRef.current;
+        const result =
+          currentMode === "plan"
+            ? await planWithModel(
+                actualPrompt,
+                session,
+                onToolCall,
+                onToolResult,
+                handleOrchestratorEvent,
+              )
+            : await (currentMode === "chat" ? chatWithModel : createAgent)(
+                actualPrompt,
+                session,
+                onToolCall,
+                onToolResult,
+              );
+        text = result.text;
+        newSession = result.session;
+
+        setMessages((prev) => [
+          ...prev,
+          { id: crypto.randomUUID(), type: "assistant", text },
+        ]);
+        setSession(newSession);
+      } catch (err) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: crypto.randomUUID(),
+            type: "assistant",
+            text: `Error: ${(err as Error).message}`,
+          },
+        ]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      loading,
+      pendingPermission,
+      pendingWizard,
+      session,
+      clearMessages,
+      setMode,
+      pushMessage,
+      handleOrchestratorEvent,
+    ],
+  );
+
+  return {
+    messages,
+    loading,
+    mode,
+    setMode,
+    submit,
+    clearMessages,
+    pendingPermission,
+    decide,
+    pushMessage,
+    pendingWizard,
+    closeWizard,
+  };
+}

package/src/hooks/useDoublePress.ts

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+
+export const DOUBLE_PRESS_TIMEOUT_MS = 2000;
+
+export function useDoublePress(
+  setPending: (pending: boolean) => void,
+  onDoublePress: () => void,
+  onFirstPress?: () => void,
+): () => void {
+  const lastPressRef = useRef<number>(0);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  return () => {
+    const now = Date.now();
+    const timeSinceLastPress = now - lastPressRef.current;
+
+    if (timeSinceLastPress <= DOUBLE_PRESS_TIMEOUT_MS && timeoutRef.current) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+      onDoublePress();
+      setPending(false);
+    } else {
+      onFirstPress?.();
+      setPending(true);
+      timeoutRef.current = setTimeout(
+        () => setPending(false),
+        DOUBLE_PRESS_TIMEOUT_MS,
+      );
+    }
+
+    lastPressRef.current = now;
+  };
+}

package/src/hooks/useTerminalSize.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useTerminalSize() {
+  const [size, setSize] = useState({
+    columns: process.stdout.columns || 80,
+    rows: process.stdout.rows || 24,
+  });
+
+  useEffect(() => {
+    function updateSize() {
+      setSize({
+        columns: process.stdout.columns || 80,
+        rows: process.stdout.rows || 24,
+      });
+    }
+
+    process.stdout.on("resize", updateSize);
+    return () => {
+      process.stdout.off("resize", updateSize);
+    };
+  }, []);
+
+  return size;
+}