@ridit/milo 0.1.0

package/src/components/Header.tsx

@@ -0,0 +1,68 @@
+import { Box, Text } from "ink";
+import React, { useState, useEffect } from "react";
+import { getTheme } from "../utils/theme";
+import { useTerminalSize } from "../hooks/useTerminalSize";
+import { getModel } from "../utils/model";
+import { AsciiLogo } from "./AsciiLogo";
+import { bullet, dot, lineVertical } from "../icons";
+import { cwd } from "process";
+
+const TIPS = [
+  "run /init to generate MILO.md",
+  "use /mode chat for read-only",
+  "use /mode plan for big tasks",
+  "esc to interrupt at any time",
+  "/help to see all commands",
+  "ctrl+t to switch mode",
+];
+
+export function Header(props: Record<string, unknown> = {}): React.ReactNode {
+  const { columns } = useTerminalSize();
+  const tip = TIPS[Math.floor(Math.random() * TIPS.length)];
+  const [modelLabel, setModelLabel] = useState("no model");
+
+  useEffect(() => {
+    getModel()
+      .then(({ modelId }) => setModelLabel(modelId))
+      .catch(() => {});
+  }, [JSON.stringify(props)]);
+
+  return (
+    <Box
+      width={columns}
+      flexDirection="row"
+      marginTop={1}
+      marginBottom={1}
+      justifyContent="space-between"
+      gap={2}
+    >
+      <Box
+        borderStyle="round"
+        borderColor={getTheme().border}
+        paddingX={1}
+        gap={1}
+      >
+        <Box flexDirection="column">
+          <Text color={getTheme().secondaryText}>{modelLabel}</Text>
+        </Box>
+        <Box flexDirection="column" alignItems="center" paddingX={1}>
+          <Text color={getTheme().border} dimColor>
+            {Array(4).fill(lineVertical).join("\n")}
+          </Text>
+        </Box>
+        <Box flexDirection="column">
+          <Text color={getTheme().primary} bold>
+            getting started
+          </Text>
+          <Text color={getTheme().secondaryText} dimColor wrap="wrap">
+            {tip}
+          </Text>
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" justifyContent="center">
+        <AsciiLogo />
+      </Box>
+    </Box>
+  );
+}

package/src/components/HighlightedCode.tsx

@@ -0,0 +1,23 @@
+import { highlight, supportsLanguage } from "cli-highlight";
+import { Text } from "ink";
+import React, { useMemo } from "react";
+
+type Props = {
+  code: string;
+  language: string;
+};
+
+export function HighlightedCode({ code, language }: Props): React.ReactElement {
+  const highlightedCode = useMemo(() => {
+    try {
+      if (supportsLanguage(language)) {
+        return highlight(code, { language });
+      }
+      return highlight(code, { language: "markdown" });
+    } catch {
+      return highlight(code, { language: "markdown" });
+    }
+  }, [code, language]);
+
+  return <Text>{highlightedCode}</Text>;
+}

package/src/components/Message.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { ChatMessage } from "../types";
+import { UserMessage } from "./messages/UserMessage";
+import { AssistantMessage } from "./messages/AssistantMessage";
+import { ToolCallMessage } from "./messages/ToolCallMessage";
+import { ToolResultMessage } from "./messages/ToolResultMessage";
+
+type Props = {
+  msg: ChatMessage;
+  addMargin?: boolean;
+  isFirst?: boolean;
+};
+
+export const Message = React.memo(function Message({
+  msg,
+  addMargin = false,
+  isFirst = false,
+}: Props): React.ReactNode {
+  switch (msg.type) {
+    case "user":
+      return <UserMessage text={msg.text} addMargin={true} isFirst={isFirst} />;
+    case "assistant":
+      return <AssistantMessage text={msg.text} addMargin={addMargin} />;
+    case "tool_call":
+      return (
+        <ToolCallMessage
+          toolName={msg.toolName}
+          input={msg.input}
+          addMargin={addMargin}
+        />
+      );
+    case "tool_result":
+      return (
+        <ToolResultMessage
+          toolName={msg.toolName}
+          input={msg.input}
+          output={msg.output}
+          success={msg.success}
+          addMargin={addMargin}
+        />
+      );
+  }
+});

package/src/components/ProviderWizard.tsx

@@ -0,0 +1,278 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { getTheme } from "../utils/theme";
+import {
+  addProvider,
+  setActiveProvider,
+  removeProvider,
+  readProviders,
+  type ProviderType,
+  type ProviderConfig,
+} from "../utils/providers";
+import { useTerminalSize } from "../hooks/useTerminalSize";
+import { arrowLeft, arrowRight, tick, upDownArrow } from "../icons";
+
+type WizardMode = "add" | "edit" | "remove" | "list";
+
+type Props = {
+  mode: WizardMode;
+  onDone: (message?: string) => void;
+};
+
+type ProvidersData = Awaited<ReturnType<typeof readProviders>>;
+
+const PROVIDERS: ProviderType[] = ["groq", "openai", "anthropic", "ollama"];
+
+const FIELDS = ["name", "provider", "model", "apiKey", "baseURL"] as const;
+type Field = (typeof FIELDS)[number];
+
+const LABELS: Record<Field, string> = {
+  name: "provider name",
+  provider: "provider type",
+  model: "model id",
+  apiKey: "api key",
+  baseURL: "base url (optional)",
+};
+
+export function ProviderWizard({ mode, onDone }: Props): React.ReactNode {
+  const theme = getTheme();
+  const [step, setStep] = useState(0);
+  const [providerIndex, setProviderIndex] = useState(0);
+  const [values, setValues] = useState<Record<Field, string>>({
+    name: "",
+    provider: "groq",
+    model: "",
+    apiKey: "",
+    baseURL: "",
+  });
+  const [inputBuffer, setInputBuffer] = useState("");
+  const [providers, setProviders] = useState<ProvidersData | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [error, setError] = useState("");
+
+  React.useEffect(() => {
+    readProviders()
+      .then((p) => {
+        setProviders(p);
+        const activeIdx = p.providers.findIndex((x) => x.name === p.active);
+        if (activeIdx >= 0) setSelectedIndex(activeIdx);
+      })
+      .catch(() => {});
+  }, []);
+
+  useInput((input, key) => {
+    setError("");
+
+    if (key.escape) {
+      onDone();
+      return;
+    }
+
+    if (mode === "remove" || mode === "list") {
+      if (!providers) return;
+      if (key.upArrow) {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelectedIndex((i) =>
+          Math.min(providers.providers.length - 1, i + 1),
+        );
+        return;
+      }
+      if (key.return) {
+        const target = providers.providers[selectedIndex];
+        if (!target) return;
+        if (mode === "remove") {
+          removeProvider(target.name)
+            .then(() => onDone(`removed "${target.name}" 🫡`))
+            .catch((e) => setError(String(e)));
+        } else {
+          setActiveProvider(target.name)
+            .then(() => onDone(`switched to "${target.name}" 🫡`))
+            .catch((e) => setError(String(e)));
+        }
+        return;
+      }
+      return;
+    }
+
+    if (mode === "add") {
+      const currentField = FIELDS[step];
+
+      if (currentField === "provider") {
+        if (key.leftArrow) {
+          const next = Math.max(0, providerIndex - 1);
+          setProviderIndex(next);
+          setValues((v) => ({ ...v, provider: PROVIDERS[next]! }));
+          return;
+        }
+        if (key.rightArrow) {
+          const next = Math.min(PROVIDERS.length - 1, providerIndex + 1);
+          setProviderIndex(next);
+          setValues((v) => ({ ...v, provider: PROVIDERS[next]! }));
+          return;
+        }
+        if (key.return) {
+          setValues((v) => ({ ...v, provider: PROVIDERS[providerIndex]! }));
+          setStep((s) => s + 1);
+          setInputBuffer("");
+          return;
+        }
+        return;
+      }
+
+      if (key.return) {
+        const isOptional =
+          currentField === "baseURL" || currentField === "apiKey";
+        if (!isOptional && inputBuffer.trim() === "") {
+          setError("this field is required");
+          return;
+        }
+        const newValues = { ...values, [currentField!]: inputBuffer.trim() };
+        setValues(newValues);
+
+        if (step === FIELDS.length - 1) {
+          addProvider({
+            name: newValues.name,
+            provider: newValues.provider as ProviderType,
+            model: newValues.model,
+            apiKey: newValues.apiKey || undefined,
+            baseURL: newValues.baseURL || undefined,
+          })
+            .then(() => onDone(`added "${newValues.name}" 🫡`))
+            .catch((e) => setError(String(e)));
+        } else {
+          setStep((s) => s + 1);
+          setInputBuffer("");
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setInputBuffer((b) => b.slice(0, -1));
+        return;
+      }
+
+      if (!key.ctrl && !key.meta && input) {
+        setInputBuffer((b) => b + input);
+      }
+    }
+  });
+
+  if (mode === "list" || mode === "remove") {
+    return (
+      <Box flexDirection="column" paddingX={1} paddingY={1}>
+        <Box flexDirection="row" marginBottom={1} gap={2}>
+          <Text color={theme.primary}>
+            {mode === "remove" ? "remove provider" : "switch provider"}
+          </Text>
+          <Text color={theme.secondaryText} dimColor>
+            {upDownArrow} select · enter confirm · esc cancel
+          </Text>
+        </Box>
+
+        <Box flexDirection="column">
+          {providers?.providers.map((p: ProviderConfig, i: number) => {
+            const isSelected = i === selectedIndex;
+            const isActive = p.name === providers.active;
+            return (
+              <Box key={p.name} flexDirection="row" gap={2} paddingX={1}>
+                <Text
+                  color={isSelected ? theme.secondary : theme.secondaryText}
+                >
+                  {isSelected ? arrowRight : " "}
+                </Text>
+                <Box flexDirection="row" gap={1}>
+                  <Text
+                    color={isSelected ? theme.secondary : theme.secondaryText}
+                  >
+                    {p.name}
+                  </Text>
+                  <Text color={theme.secondaryText} dimColor>
+                    {p.provider} · {p.model}
+                  </Text>
+                  {isActive && <Text color={theme.success}>active</Text>}
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {error && (
+          <Box marginTop={1}>
+            <Text color={theme.error}>{error}</Text>
+          </Box>
+        )}
+
+        <Box marginTop={1}>
+          <Text color={theme.secondaryText} dimColor>
+            {upDownArrow} to select · enter to confirm · esc to cancel
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const currentField = FIELDS[step];
+
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      <Box flexDirection="row" marginBottom={1} gap={2}>
+        <Text color={theme.primary}>add provider</Text>
+        <Text color={theme.secondaryText} dimColor>
+          esc to cancel
+        </Text>
+      </Box>
+
+      {FIELDS.slice(0, step).map((f) => (
+        <Box key={f} flexDirection="row" gap={2} paddingX={1}>
+          <Text color={theme.success}>{tick}</Text>
+          <Text color={theme.secondaryText}>{LABELS[f]}</Text>
+          <Text color={theme.text}>
+            {f === "apiKey" ? "•".repeat(8) : values[f] || "—"}
+          </Text>
+        </Box>
+      ))}
+
+      <Box flexDirection="row" gap={2} paddingX={1} marginTop={1}>
+        <Text color={theme.primary}>{arrowRight}</Text>
+        <Text color={theme.secondary}>{LABELS[currentField!]}</Text>
+        {currentField === "provider" ? (
+          <Box flexDirection="row" gap={1}>
+            {PROVIDERS.map((p, i) => (
+              <Text
+                key={p}
+                color={i === providerIndex ? theme.error : theme.secondaryText}
+              >
+                {p}
+              </Text>
+            ))}
+          </Box>
+        ) : (
+          <Text color={theme.text}>
+            {currentField === "apiKey"
+              ? "•".repeat(inputBuffer.length) + "█"
+              : inputBuffer + "█"}
+          </Text>
+        )}
+      </Box>
+
+      <Box marginTop={1} marginLeft={4}>
+        <Text color={theme.secondaryText} dimColor>
+          {currentField === "provider"
+            ? `${arrowLeft} ${arrowRight} to select · enter to confirm`
+            : currentField === "baseURL" || currentField === "apiKey"
+              ? "enter to confirm · or skip"
+              : "enter to confirm"}
+        </Text>
+      </Box>
+
+      {error && (
+        <Box marginTop={1}>
+          <Text color={theme.error}>{error}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,76 @@
+import { Box, Text } from "ink";
+import InkSpinner from "ink-spinner";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { getTheme } from "../utils/theme";
+import { sample } from "lodash-es";
+import { cornerBottomLeft, line } from "../icons";
+import { readPet, getSpinnerPool } from "../pet";
+
+const TIPS = [
+  "use agent mode for file tasks",
+  "use plan mode for large multi-step tasks",
+  "esc to interrupt at any time",
+  "milo remembers your preferences",
+  "use RecallTool to search past sessions",
+  "milo reads MILO.md for project context",
+  "chain tasks in one prompt for best results",
+  "milo can run bash commands on your behalf",
+  "use memory to persist facts across sessions",
+  "the more context you give, the better the output",
+];
+
+export function Spinner(): React.ReactNode {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const message = useRef<string>("Sniffing… 🐱");
+  const tip = useRef(sample(TIPS));
+  const startTime = useRef(Date.now());
+
+  useEffect(() => {
+    readPet()
+      .then((pet) => {
+        const pool = getSpinnerPool(pet.level);
+        message.current = sample(pool) ?? "Sniffing… 🐱";
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1000));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Box flexDirection="column" height={2}>
+      <Box flexDirection="row">
+        <Box flexWrap="nowrap" height={1} width={2}>
+          <Text color={getTheme().primary}>
+            <InkSpinner type="star" />
+          </Text>
+        </Box>
+        <Text color={getTheme().primary}> {message.current} </Text>
+        <Text color={getTheme().secondaryText}>
+          ({elapsedTime}s · <Text bold>esc</Text> to interrupt)
+        </Text>
+      </Box>
+      <Box flexDirection="row" marginLeft={1}>
+        <Text color={getTheme().secondaryText} dimColor>
+          {cornerBottomLeft}
+          {line} tip: {tip.current}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function SimpleSpinner(): React.ReactNode {
+  return (
+    <Box flexWrap="nowrap" height={1} width={2}>
+      <Text color={getTheme().primary}>
+        <InkSpinner type="star" />
+      </Text>
+    </Box>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import { getTheme } from "../utils/theme";
+import { useTerminalSize } from "../hooks/useTerminalSize";
+import type { Mode } from "../types";
+import { bullet, diamond, star } from "../icons";
+import { readPet } from "../pet";
+import type { Pet } from "../types";
+import Spinner from "ink-spinner";
+
+type Props = {
+  model: string;
+  mode: Mode;
+  thinking: boolean;
+};
+
+function getModeColor(mode: Mode): string {
+  switch (mode) {
+    case "agent":
+      return getTheme().secondary;
+    case "plan":
+      return getTheme().warning;
+    case "chat":
+      return getTheme().success;
+  }
+}
+
+export function StatusBar({
+  model,
+  mode,
+  thinking = false,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize();
+  const [pet, setPet] = useState<Pet | null>(null);
+
+  useEffect(() => {
+    readPet()
+      .then(setPet)
+      .catch(() => {});
+
+    const interval = setInterval(() => {
+      readPet()
+        .then(setPet)
+        .catch(() => {});
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const icon = mode === "agent" ? diamond : mode === "plan" ? star : bullet;
+  const modeBg = getModeColor(mode);
+
+  const modelPart = ` ${model} `;
+  const modePart = ` ${icon} ${mode} mode `;
+
+  const levelPart = pet ? ` lv.${pet.level} ` : "";
+  const xpPart = pet ? ` ${pet.xp}/${pet.xpToNext}xp ` : "";
+
+  return (
+    <Box width={columns} justifyContent="space-between">
+      <Box gap={2}>
+        {thinking ? (
+          <Box>
+            <Spinner type="bluePulse" />
+            <Text>Thinking</Text>
+          </Box>
+        ) : (
+          <>
+            <Box>
+              <Text color={getTheme().error}>{star}</Text>
+              <Text color={getTheme().secondary}>{levelPart}</Text>
+            </Box>
+            <Box>
+              <Text color={getTheme().warning}>{diamond}</Text>
+              <Text color={getTheme().success}>{xpPart}</Text>
+            </Box>
+          </>
+        )}
+      </Box>
+      <Text color={getTheme().secondaryText}>{modelPart}</Text>
+      <Text backgroundColor={modeBg} color="#000000">
+        {modePart}
+      </Text>
+    </Box>
+  );
+}