@ridit/milo 0.1.0

package/src/components/StructuredDiff.tsx

@@ -0,0 +1,194 @@
+import { Box, Text } from "ink";
+import * as React from "react";
+import type { StructuredPatchHunk } from "diff";
+import { getTheme } from "../utils/theme";
+import { useMemo } from "react";
+import { wrapText } from "../utils/format";
+
+type Props = {
+  patch: StructuredPatchHunk;
+  dim: boolean;
+  width: number;
+};
+
+type DiffLine = {
+  code: string;
+  type: string;
+  i: number;
+  empty: boolean;
+};
+
+export function StructuredDiff({ patch, dim, width }: Props): React.ReactNode {
+  const diff = useMemo(
+    () => formatDiff(patch.lines, patch.oldStart, width, dim),
+    [patch.lines, patch.oldStart, width, dim],
+  );
+
+  return diff.map((_, i) => <Box key={i}>{_}</Box>);
+}
+
+function formatDiff(
+  lines: string[],
+  startingLineNumber: number,
+  width: number,
+  dim: boolean,
+): React.ReactNode[] {
+  const theme = getTheme();
+
+  const ls = numberDiffLines(
+    lines.map((code) => {
+      const content = code.slice(1);
+      if (code.startsWith("+")) {
+        return {
+          code: "+  " + content,
+          i: 0,
+          type: "add",
+          empty: !content.trim(),
+        };
+      }
+      if (code.startsWith("-")) {
+        return {
+          code: "-  " + content,
+          i: 0,
+          type: "remove",
+          empty: !content.trim(),
+        };
+      }
+      return {
+        code: "   " + code,
+        i: 0,
+        type: "nochange",
+        empty: !code.trim(),
+      };
+    }),
+    startingLineNumber,
+  );
+
+  const maxLineNumber = Math.max(...ls.map(({ i }) => i));
+  const maxWidth = maxLineNumber.toString().length;
+
+  return ls.flatMap(({ type, code, i, empty }) => {
+    const wrappedLines = wrapText(code, width - maxWidth);
+    const renderLines =
+      wrappedLines.length && wrappedLines[0] !== "" ? wrappedLines : [" "];
+
+    return renderLines.map((line, lineIndex) => {
+      const key = `${type}-${i}-${lineIndex}`;
+      switch (type) {
+        case "add":
+          return (
+            <Box key={key} width={width - maxWidth}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Box flexGrow={1}>
+                <Text
+                  color={theme.text}
+                  backgroundColor={
+                    empty
+                      ? undefined
+                      : dim
+                        ? theme.diff.addedDimmed
+                        : theme.diff.added
+                  }
+                  dimColor={dim}
+                >
+                  {empty ? line : line.padEnd(width - maxWidth - 4)}
+                </Text>
+              </Box>
+            </Box>
+          );
+        case "remove":
+          return (
+            <Box key={key} width={width - maxWidth}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Box flexGrow={1}>
+                <Text
+                  color={theme.text}
+                  backgroundColor={
+                    empty
+                      ? undefined
+                      : dim
+                        ? theme.diff.removedDimmed
+                        : theme.diff.removed
+                  }
+                  dimColor={dim}
+                >
+                  {empty ? line : line.padEnd(width - maxWidth - 4)}
+                </Text>
+              </Box>
+            </Box>
+          );
+        case "nochange":
+          return (
+            <Box key={key} width={width - maxWidth}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Text color={theme.text} dimColor={dim}>
+                {line}
+              </Text>
+            </Box>
+          );
+      }
+    });
+  });
+}
+
+function LineNumber({
+  i,
+  width,
+}: {
+  i: number | undefined;
+  width: number;
+}): React.ReactNode {
+  return (
+    <Text color={getTheme().secondaryText}>
+      {i !== undefined ? i.toString().padStart(width) : " ".repeat(width)}{" "}
+    </Text>
+  );
+}
+
+function numberDiffLines(
+  diff: { code: string; type: string; empty: boolean }[],
+  startLine: number,
+): DiffLine[] {
+  let i = startLine;
+  const result: DiffLine[] = [];
+  const queue = [...diff];
+
+  while (queue.length > 0) {
+    const { code, type, empty } = queue.shift()!;
+    const line = { code, type, i, empty };
+
+    switch (type) {
+      case "nochange":
+        i++;
+        result.push(line);
+        break;
+      case "add":
+        i++;
+        result.push(line);
+        break;
+      case "remove": {
+        result.push(line);
+        let numRemoved = 0;
+        while (queue[0]?.type === "remove") {
+          i++;
+          const { code, type, empty } = queue.shift()!;
+          result.push({ code, type, i, empty });
+          numRemoved++;
+        }
+        i -= numRemoved;
+        break;
+      }
+    }
+  }
+
+  return result;
+}

package/src/components/TextInput.tsx

@@ -0,0 +1,144 @@
+import React, { type JSX } from "react";
+import { Text, useInput } from "ink";
+import chalk from "chalk";
+import { useTextInput } from "../hooks/useTextInput";
+import { getTheme } from "../utils/theme";
+import { type Key } from "ink";
+
+export type Props = {
+  readonly onHistoryUp?: () => void;
+  readonly onHistoryDown?: () => void;
+  readonly placeholder?: string;
+  readonly multiline?: boolean;
+  readonly focus?: boolean;
+  readonly mask?: string;
+  readonly showCursor?: boolean;
+  readonly highlightPastedText?: boolean;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSubmit?: (value: string) => void;
+  readonly onExit?: () => void;
+  readonly onExitMessage?: (show: boolean, key?: string) => void;
+  readonly onMessage?: (show: boolean, message?: string) => void;
+  readonly onHistoryReset?: () => void;
+  readonly columns: number;
+  readonly onImagePaste?: (base64Image: string) => void;
+  readonly onPaste?: (text: string) => void;
+  readonly isDimmed?: boolean;
+  readonly disableCursorMovementForUpDownKeys?: boolean;
+  readonly cursorOffset: number;
+  readonly onChangeCursorOffset: (offset: number) => void;
+};
+
+export default function TextInput({
+  value: originalValue,
+  placeholder = "",
+  focus = true,
+  mask,
+  multiline = false,
+  highlightPastedText = false,
+  showCursor = true,
+  onChange,
+  onSubmit,
+  onExit,
+  onHistoryUp,
+  onHistoryDown,
+  onExitMessage,
+  onMessage,
+  onHistoryReset,
+  columns,
+  onImagePaste,
+  onPaste,
+  isDimmed = false,
+  disableCursorMovementForUpDownKeys = false,
+  cursorOffset,
+  onChangeCursorOffset,
+}: Props): JSX.Element {
+  const { onInput, renderedValue } = useTextInput({
+    value: originalValue,
+    onChange,
+    onSubmit,
+    onExit,
+    onExitMessage,
+    onMessage,
+    onHistoryReset,
+    onHistoryUp,
+    onHistoryDown,
+    mask,
+    multiline,
+    cursorChar: showCursor ? " " : "",
+    invert: chalk.inverse,
+    columns,
+    onImagePaste,
+    disableCursorMovementForUpDownKeys,
+    externalOffset: cursorOffset,
+    onOffsetChange: onChangeCursorOffset,
+  });
+
+  const [pasteState, setPasteState] = React.useState<{
+    chunks: string[];
+    timeoutId: ReturnType<typeof setTimeout> | null;
+  }>({ chunks: [], timeoutId: null });
+
+  const resetPasteTimeout = (
+    currentTimeoutId: ReturnType<typeof setTimeout> | null,
+  ) => {
+    if (currentTimeoutId) clearTimeout(currentTimeoutId);
+    return setTimeout(() => {
+      setPasteState(({ chunks }) => {
+        const pastedText = chunks.join("");
+        Promise.resolve().then(() => onPaste!(pastedText));
+        return { chunks: [], timeoutId: null };
+      });
+    }, 100);
+  };
+
+  const wrappedOnInput = (input: string, key: Key): void => {
+    const isSpecialKey =
+      key.backspace ||
+      key.delete ||
+      key.leftArrow ||
+      key.rightArrow ||
+      key.upArrow ||
+      key.downArrow ||
+      key.return ||
+      key.escape ||
+      key.ctrl ||
+      key.meta;
+
+    if (
+      onPaste &&
+      !isSpecialKey &&
+      (input.length > 800 || pasteState.timeoutId)
+    ) {
+      setPasteState(({ chunks, timeoutId }) => ({
+        chunks: [...chunks, input],
+        timeoutId: resetPasteTimeout(timeoutId),
+      }));
+      return;
+    }
+    onInput(input, key);
+  };
+
+  useInput(wrappedOnInput, { isActive: focus });
+
+  let renderedPlaceholder = placeholder
+    ? chalk.hex(getTheme().secondaryText)(placeholder)
+    : undefined;
+
+  if (showCursor && focus) {
+    renderedPlaceholder =
+      placeholder.length > 0
+        ? chalk.inverse(placeholder[0]) +
+          chalk.hex(getTheme().secondaryText)(placeholder.slice(1))
+        : chalk.inverse(" ");
+  }
+
+  const showPlaceholder = originalValue.length === 0 && placeholder;
+
+  return (
+    <Text wrap="truncate-end" dimColor={isDimmed}>
+      {showPlaceholder ? renderedPlaceholder : renderedValue}
+    </Text>
+  );
+}

package/src/components/messages/AssistantMessage.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { getTheme } from "../../utils/theme";
+import { useTerminalSize } from "../../hooks/useTerminalSize";
+import { applyMarkdown } from "../../utils/markdown";
+import { HighlightedCode } from "../HighlightedCode";
+import { bullet } from "../../icons";
+
+type Props = {
+  text: string;
+  addMargin?: boolean;
+};
+
+type Segment =
+  | { type: "text"; content: string }
+  | { type: "code"; lang: string; code: string };
+
+function parseSegments(text: string): Segment[] {
+  const segments: Segment[] = [];
+  const regex = /```(\w*)\n([\s\S]*?)```/g;
+  let last = 0;
+  let match;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > last) {
+      segments.push({ type: "text", content: text.slice(last, match.index) });
+    }
+    segments.push({
+      type: "code",
+      lang: match[1] || "markdown",
+      code: match[2] ?? "",
+    });
+    last = match.index + match[0].length;
+  }
+
+  if (last < text.length) {
+    segments.push({ type: "text", content: text.slice(last) });
+  }
+
+  return segments;
+}
+
+export function AssistantMessage({
+  text,
+  addMargin = false,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize();
+  if (!text) return null;
+
+  const segments = parseSegments(text);
+
+  return (
+    <Box flexDirection="row" marginTop={addMargin ? 1 : 0} width="100%">
+      <Box minWidth={2} width={2}>
+        <Text color={getTheme().primary}>{bullet}</Text>
+      </Box>
+      <Box flexDirection="column" width={columns - 4}>
+        {segments.map((seg, i) =>
+          seg.type === "code" ? (
+            <HighlightedCode key={i} code={seg.code} language={seg.lang} />
+          ) : (
+            <Text key={i}>{applyMarkdown(seg.content)}</Text>
+          ),
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/messages/ToolCallMessage.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { getTheme } from "../../utils/theme";
+import { SimpleSpinner } from "../Spinner";
+import { cornerBottomLeft, line } from "../../icons";
+
+type Props = {
+  toolName: string;
+  input?: unknown;
+  addMargin?: boolean;
+};
+
+function getCommand(toolName: string, input: unknown): string {
+  if (!input || typeof input !== "object") return toolName;
+  const a = input as Record<string, unknown>;
+  switch (toolName) {
+    case "FileReadTool":
+      return `cat ${a.path ?? ""}`;
+    case "FileWriteTool":
+      return `write ${a.path ?? ""}`;
+    case "FileEditTool":
+      return `edit ${a.path ?? ""}`;
+    case "BashTool":
+      return String(a.command ?? "");
+    case "GrepTool":
+      return `grep ${a.pattern ?? ""}`;
+    case "GlobTool":
+      return `glob ${a.pattern ?? ""}`;
+    case "RecallTool":
+      return `recall ${a.query ?? ""}`;
+    case "WebSearchTool":
+      return `search ${String((a as any).query ?? "")}`;
+    case "WebFetchTool":
+      return `fetch ${String((a as any).url ?? "")}`;
+    case "MemoryReadTool":
+      return `memory read`;
+    case "MemoryWriteTool":
+      return `memory write`;
+    case "MemoryEditTool":
+      return `memory edit`;
+    case "ThinkTool":
+      return `think`;
+    case "AgentTool":
+      return `agent · ${String((a as any).task ?? (a as any).subtask ?? "").slice(0, 50)}`;
+    case "OrchestratorTool":
+      return `orchestrate · ${String((a as any).goal ?? "").slice(0, 50)}`;
+    default:
+      return toolName;
+  }
+}
+
+export function ToolCallMessage({
+  toolName,
+  input,
+  addMargin = false,
+}: Props): React.ReactNode {
+  const command = getCommand(toolName, input);
+  const preview = command.length > 60 ? command.slice(0, 60) + "…" : command;
+
+  return (
+    <Box flexDirection="column" marginTop={addMargin ? 1 : 0}>
+      <Box flexDirection="row">
+        <Box minWidth={2} width={2}>
+          <SimpleSpinner />
+        </Box>
+        <Text color={getTheme().secondaryText}>Running 1 tool…</Text>
+      </Box>
+      <Box flexDirection="row" marginLeft={2}>
+        <Text color={getTheme().secondaryText} dimColor>
+          {cornerBottomLeft}
+          {line}{" "}
+        </Text>
+        <Text color={getTheme().secondary}>$ {preview}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/messages/ToolResultMessage.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { parsePatch } from "diff";
+import type { StructuredPatchHunk } from "diff";
+import { getTheme } from "../../utils/theme";
+import { useTerminalSize } from "../../hooks/useTerminalSize";
+import { StructuredDiff } from "../StructuredDiff";
+import { star, cornerBottomLeft, line, dot } from "../../icons";
+
+type Props = {
+  toolName: string;
+  input?: unknown;
+  output: unknown;
+  success: boolean;
+  addMargin?: boolean;
+};
+
+function getAction(toolName: string, input: unknown): string {
+  if (!input || typeof input !== "object") return toolName;
+  const a = input as Record<string, unknown>;
+  switch (toolName) {
+    case "FileReadTool":
+      return `cat ${a.path ?? ""}`;
+    case "FileWriteTool":
+      return `write ${a.path ?? ""}`;
+    case "FileEditTool":
+      return `edit ${a.path ?? ""}`;
+    case "BashTool":
+      return String(a.command ?? "");
+    case "GrepTool":
+      return `grep ${a.pattern ?? ""}`;
+    case "GlobTool":
+      return `glob ${a.pattern ?? ""}`;
+    case "RecallTool":
+      return `recall ${a.query ?? ""}`;
+    case "WebSearchTool":
+      return `search ${String((a as any).query ?? "")}`;
+    case "WebFetchTool":
+      return `fetch ${String((a as any).url ?? "")}`;
+    case "MemoryReadTool":
+      return `memory read`;
+    case "MemoryWriteTool":
+      return `memory write`;
+    case "MemoryEditTool":
+      return `memory edit`;
+    case "ThinkTool":
+      return `think`;
+    case "AgentTool":
+      return `agent · ${String((a as any).task ?? (a as any).subtask ?? "").slice(0, 50)}`;
+    case "OrchestratorTool":
+      return `orchestrate · ${String((a as any).goal ?? "").slice(0, 50)}`;
+    default:
+      return toolName;
+  }
+}
+
+function getOutputPreview(toolName: string, output: unknown): string | null {
+  if (!output || typeof output !== "object") return null;
+  const o = output as Record<string, unknown>;
+  switch (toolName) {
+    case "BashTool": {
+      const out = String(o.output ?? "").trim();
+      const first = out.split("\n")[0] ?? "";
+      return first.length > 60 ? first.slice(0, 60) + "…" : first || null;
+    }
+    case "FileReadTool": {
+      const lines = String(o.content ?? "")
+        .trim()
+        .split("\n").length;
+      return `${lines} lines`;
+    }
+    case "GrepTool": {
+      const matches = Array.isArray(o.matches) ? o.matches.length : 0;
+      return matches > 0
+        ? `${matches} match${matches === 1 ? "" : "es"}`
+        : "no matches";
+    }
+    case "RecallTool": {
+      const matches = String(o.output ?? "")
+        .trim()
+        .split("\n")
+        .filter(Boolean).length;
+      return matches > 0
+        ? `${matches} match${matches === 1 ? "" : "es"}`
+        : "no matches";
+    }
+    case "WebSearchTool": {
+      const results = (o.results as any[])?.length ?? 0;
+      return `${results} result${results === 1 ? "" : "s"}`;
+    }
+    case "WebFetchTool": {
+      const content = String(o.content ?? "").trim();
+      return content.length > 0 ? `${content.length} chars` : null;
+    }
+    case "FileWriteTool":
+    case "FileEditTool":
+      return o.success ? "saved" : "failed";
+    case "ThinkTool":
+      return null;
+    default:
+      return null;
+  }
+}
+
+function getDiff(
+  toolName: string,
+  output: unknown,
+): StructuredPatchHunk | null {
+  if (!output || typeof output !== "object") return null;
+  const o = output as Record<string, unknown>;
+  if (!o.success) return null;
+
+  if (toolName === "FileWriteTool") {
+    const content = String(o.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(o.patch ?? "");
+    if (!patch) return null;
+    const parsed = parsePatch(patch);
+    return parsed[0]?.hunks[0] ?? null;
+  }
+
+  return null;
+}
+
+export function ToolResultMessage({
+  toolName,
+  input,
+  output,
+  success,
+  addMargin = false,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize();
+  const action = getAction(toolName, input);
+  const preview = action.length > 60 ? action.slice(0, 60) + "…" : action;
+  const outputPreview = getOutputPreview(toolName, output);
+  const hunk = getDiff(toolName, output);
+
+  return (
+    <Box flexDirection="row" marginTop={addMargin ? 1 : 0}>
+      <Box minWidth={2} width={2}>
+        <Text color={success ? getTheme().success : getTheme().error}>
+          {star}
+        </Text>
+      </Box>
+      <Box flexDirection="column" width={columns - 4}>
+        <Text>{toolName}</Text>
+        <Box gap={1} alignItems="center">
+          <Text color={getTheme().secondaryText} dimColor>
+            {cornerBottomLeft}
+            {line} {preview}
+          </Text>
+          <Text dimColor color={getTheme().secondaryText}>
+            {dot}
+          </Text>
+          {outputPreview && (
+            <Text color={getTheme().secondaryText} dimColor>
+              {outputPreview}
+            </Text>
+          )}
+        </Box>
+
+        {hunk && (
+          <Box marginTop={1} marginLeft={2} flexDirection="column">
+            <StructuredDiff patch={hunk} dim={false} width={columns - 8} />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/messages/UserMessage.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { getTheme } from "../../utils/theme";
+import { useTerminalSize } from "../../hooks/useTerminalSize";
+
+type Props = {
+  text: string;
+  addMargin?: boolean;
+  isFirst?: boolean;
+};
+
+export function UserMessage({
+  text,
+  addMargin = false,
+  isFirst = false,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize();
+  if (!text) return null;
+
+  return (
+    <Box flexDirection="row" marginTop={isFirst ? 0 : 1} width="100%">
+      <Box minWidth={2} width={2}>
+        <Text color={getTheme().secondaryText}>{">"}</Text>
+      </Box>
+      <Box flexDirection="column" width={columns - 4}>
+        <Text color={getTheme().secondaryText} wrap="wrap">
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+}