mini-coder 0.5.14 → 0.6.1

package/src/tui-conversation.ts

@@ -0,0 +1,271 @@
+import { SyntaxHighlight } from "@cel-tui/components";
+import { HStack, type Node, Text, VStack } from "@cel-tui/core";
+import type {
+  AssistantMessage,
+  Message,
+  ToolResultMessage,
+  UserMessage,
+} from "@mariozechner/pi-ai";
+import { estimateTokens, relativeTime } from "./shared";
+import { TextPill, theme } from "./tui-components";
+import type { TUIState } from "./types";
+
+function agentMessageNode(msg: AssistantMessage): Node {
+  let thinking = "";
+  let text = "";
+  const toolCalls: Node[] = [];
+
+  for (const block of msg.content) {
+    if (block.type === "thinking" && block.thinking.length > 0) {
+      thinking += block.thinking;
+    }
+
+    if (block.type === "text" && block.text.length > 0) {
+      text += block.text;
+    }
+
+    if (block.type === "toolCall" && block.arguments && block.name) {
+      let text = "";
+      let node: Node | undefined;
+      if ("path" in block.arguments) {
+        text = block.arguments.path;
+        node = Text(text);
+      } else if ("command" in block.arguments) {
+        text = block.arguments.command;
+        node = SyntaxHighlight(text, "bash");
+      } else {
+        text = JSON.stringify(block.arguments);
+        node = Text(text);
+      }
+
+      toolCalls.push(
+        VStack({ padding: { x: 4 }, gap: 1 }, [
+          TextPill(block.name, theme.white, theme.bblack),
+          node,
+        ]),
+      );
+    }
+  }
+  const textBlocks: Node[] = [];
+  if (thinking.length > 0) {
+    const tokens = estimateTokens(thinking);
+
+    textBlocks.push(
+      Text(`Thinking... (~${tokens} tokens)`, {
+        fgColor: theme.bblack,
+        italic: true,
+      }),
+    );
+  }
+  if (text.length > 0) {
+    textBlocks.push(SyntaxHighlight(text, "markdown"));
+  }
+  if (toolCalls.length > 0) {
+    textBlocks.push(...toolCalls);
+  }
+  const error =
+    ((msg.stopReason === "error" || msg.stopReason === "aborted") &&
+      msg.errorMessage) ??
+    "Unknown error.";
+  if (error) {
+    textBlocks.push(
+      VStack({ padding: { x: 4 }, gap: 1 }, [
+        TextPill(msg.stopReason, theme.white, theme.bblack),
+        Text(error),
+      ]),
+    );
+  }
+
+  if (textBlocks.length === 0) {
+    textBlocks.push(
+      Text("Loading...", {
+        fgColor: theme.bblack,
+        italic: true,
+      }),
+    );
+  }
+
+  return VStack({ gap: 1 }, textBlocks);
+}
+
+function userMessageNode(msg: UserMessage): Node {
+  let text = "";
+  if (typeof msg.content === "string") {
+    text = msg.content;
+  } else {
+    text = msg.content
+      .filter((b) => b.type === "text")
+      .map((b) => b.text)
+      .join("");
+  }
+
+  // Remove any reminders we might have attached before render
+  // Keep this fast, it runs on the render cycle.
+  text = text
+    .replaceAll(/<system-reminder>[\s\S]*?<\/system-reminder>/g, "")
+    .trimStart();
+
+  return VStack(
+    {
+      padding: { x: 1, y: 1 },
+      bgColor: theme.bblack,
+      fgColor: theme.white,
+    },
+    [SyntaxHighlight(text, "markdown")],
+  );
+}
+
+function toolMessageNode(msg: ToolResultMessage): Node {
+  // TODO: read tool image output
+  // Output only shows last 10 lines of scroll.
+  const text = msg.content
+    .filter((c) => c.type === "text")
+    .map((c) => c.text)
+    .join("")
+    .trim();
+
+  return VStack({ padding: { x: 4 }, gap: 1 }, [
+    Text(`~${estimateTokens(text)} tokens, ${text.split("\n").length} lines.`, {
+      fgColor: theme.bblack,
+    }),
+    VStack(
+      {
+        flex: 1,
+        maxHeight: msg.toolName === "edit" ? 20 : 10,
+        overflow: "scroll",
+        scrollOffset: Infinity,
+        onScroll: () => false,
+      },
+      [
+        msg.toolName === "edit"
+          ? SyntaxHighlight(text, "diff")
+          : Text(text, { wrap: "word", fgColor: theme.white }),
+      ],
+    ),
+  ]);
+}
+
+const messageBodyCache = new WeakMap<Message, { key: number; node: Node }>();
+
+function messageCacheKey(msg: Message): number {
+  if (msg.role === "assistant") {
+    let key = 0;
+    for (const block of msg.content) {
+      if (block.type === "thinking") key += block.thinking.length;
+      if (block.type === "text") key += block.text.length;
+      if (block.type === "toolCall" && block.arguments)
+        key += JSON.stringify(block.arguments).length;
+    }
+    if (msg.stopReason) key += msg.stopReason.length;
+    if (msg.errorMessage) key += msg.errorMessage.length;
+    return key;
+  }
+  if (msg.role === "user") {
+    if (typeof msg.content === "string") return msg.content.length;
+    return msg.content.reduce(
+      (sum, b) => (b.type === "text" ? sum + b.text.length : sum),
+      0,
+    );
+  }
+  if (msg.role === "toolResult") {
+    return msg.content.reduce(
+      (sum, b) => (b.type === "text" ? sum + b.text.length : sum),
+      0,
+    );
+  }
+  return 0;
+}
+
+function cachedMessageBody(msg: Message): Node {
+  const key = messageCacheKey(msg);
+  const cached = messageBodyCache.get(msg);
+  if (cached && cached.key === key) {
+    return cached.node;
+  }
+  const node =
+    msg.role === "assistant"
+      ? agentMessageNode(msg)
+      : msg.role === "user"
+        ? userMessageNode(msg)
+        : msg.role === "toolResult"
+          ? toolMessageNode(msg)
+          : Text("Unknown message?", {
+              wrap: "word",
+              fgColor: theme.bwhite,
+            });
+  messageBodyCache.set(msg, { key, node });
+  return node;
+}
+
+function conversationMessageNode(msg: Message): Node {
+  const label = msg.role === "toolResult" ? `${msg.toolName} result` : msg.role;
+  return VStack({ gap: 1 }, [
+    cachedMessageBody(msg),
+    HStack({ gap: 1, justifyContent: "end" }, [
+      Text(`${relativeTime(msg.timestamp)} ago.`, {
+        fgColor: theme.bblack,
+        italic: true,
+      }),
+      TextPill(label, theme.bwhite, theme.bblack),
+    ]),
+  ]);
+}
+
+const colors = [
+  theme.bgreen,
+  theme.byellow,
+  theme.bblue,
+  theme.bcyan,
+  theme.bmagenta,
+  theme.bred,
+];
+const randColor = colors[Math.floor(Math.random() * colors.length)];
+
+export function emptyState(): Node {
+  return HStack({ flex: 1, alignItems: "center" }, [
+    VStack({ flex: 1, alignItems: "center", gap: 1 }, [
+      HStack({ gap: 1 }, [
+        Text("mini"),
+        TextPill("coder", theme.black, randColor),
+      ]),
+      VStack({ gap: 1 }, [
+        HStack({ gap: 1 }, [
+          TextPill("/new", randColor, theme.bblack, 13),
+          Text("Start a new session from the input box.", {
+            fgColor: theme.bblack,
+          }),
+        ]),
+        HStack({ gap: 1 }, [
+          TextPill("ctrl+p", randColor, theme.bblack, 13),
+          Text("Menu for session history, and settings.", {
+            fgColor: theme.bblack,
+          }),
+        ]),
+        HStack({ gap: 1 }, [
+          TextPill("ESC", randColor, theme.bblack, 13),
+          Text("Abort agent response.", { fgColor: theme.bblack }),
+        ]),
+        HStack({ gap: 1 }, [
+          TextPill("ctrl+c|d|q", randColor, theme.bblack, 13),
+          Text("Quit.", { fgColor: theme.bblack }),
+        ]),
+      ]),
+    ]),
+  ]);
+}
+
+export function Conversation(state: TUIState) {
+  return VStack(
+    {
+      flex: 1,
+      gap: 3,
+      overflow: "scroll",
+      scrollOffset: state.stickToBottom ? Infinity : state.scrollOffset,
+      onScroll(offset, maxOffset) {
+        state.scrollOffset = offset;
+        state.stickToBottom = offset >= maxOffset;
+      },
+    },
+    state.messages.map(conversationMessageNode),
+  );
+}

package/src/tui-editor.ts

@@ -0,0 +1,29 @@
+import { cel, Text, TextInput } from "@cel-tui/core";
+import type { TUIState } from "./types";
+
+export function Editor(
+  state: TUIState,
+  onChange: (value: string) => void,
+  onKeyPress: (key: string) => void,
+) {
+  let isEditorFocused = !state.overlay;
+  return TextInput({
+    value: state.prompt,
+    minHeight: 3,
+    maxHeight: 10,
+    padding: { x: 1 },
+    placeholder: Text("Message...", { italic: true }),
+    onChange,
+    onKeyPress,
+    // TODO: Update `cel-tui` with an autofocus prop to fix this pattern
+    focused: isEditorFocused,
+    onFocus: () => {
+      isEditorFocused = true;
+      cel.render();
+    },
+    onBlur: () => {
+      isEditorFocused = false;
+      cel.render();
+    },
+  });
+}

package/src/tui-overlay.ts

@@ -0,0 +1,403 @@
+import { HStack, Text, TextInput, VStack } from "@cel-tui/core";
+import { getModels, type ThinkingLevel } from "@mariozechner/pi-ai";
+import { getOAuthProviders } from "@mariozechner/pi-ai/oauth";
+import { saveSettings } from "./args";
+import { getAvailableProviders } from "./oauth";
+import { listSessionsForCwd } from "./session";
+import { estimateTokens } from "./shared";
+import { TextPill, theme } from "./tui-components";
+import type { SelectOptions, SelectState, Session, TUIState } from "./types";
+
+export function SelectOverlay(
+  value: string,
+  selected: string,
+  list: { label: string; value: string }[],
+  label: string,
+  onOverlayKeyPress: (key: string) => boolean | undefined,
+  onChange: (newValue: string) => void,
+  onKeyPress: (key: string) => boolean | undefined,
+) {
+  let isEditorFocused = true;
+  return VStack(
+    {
+      height: "100%",
+      justifyContent: "end",
+      onKeyPress: onOverlayKeyPress,
+    },
+    [
+      VStack(
+        {
+          bgColor: theme.white,
+          fgColor: theme.bblack,
+          gap: 1,
+          padding: { x: 1, y: 1 },
+        },
+        [
+          VStack(
+            { flex: 1, minHeight: 5, maxHeight: 20, padding: { x: 1 } },
+            list.map((i) =>
+              i.value === selected
+                ? Text(i.label, { fgColor: theme.black })
+                : Text(i.label, { fgColor: theme.bblack }),
+            ),
+          ),
+
+          HStack({ width: "100%" }, [
+            TextPill(label, theme.bwhite, theme.bblack),
+          ]),
+
+          TextInput({
+            value,
+            minHeight: 3,
+            maxHeight: 10,
+            padding: { x: 1 },
+            placeholder: Text("Search...", {
+              fgColor: theme.bblack,
+              italic: true,
+            }),
+            fgColor: theme.bblack,
+            bgColor: theme.white,
+            onChange,
+            onKeyPress,
+            focused: isEditorFocused,
+            onFocus: () => {
+              isEditorFocused = true;
+            },
+            onBlur: () => {
+              isEditorFocused = false;
+            },
+          }),
+        ],
+      ),
+    ],
+  );
+}
+
+export function useSelectOverlay(initialOptions: SelectOptions) {
+  // Inner state
+  const s: SelectState = {
+    value: "",
+    selected: "",
+    label: "SELECT",
+    list: [],
+  };
+  let baseList: SelectOptions["list"] = [];
+
+  const applyOptions = (
+    options: Pick<SelectOptions, "filter" | "label" | "list">,
+  ) => {
+    baseList = options.list;
+    s.value = options.filter ?? "";
+    s.label = options.label ? options.label.toUpperCase() : "SELECT";
+    s.list = s.value
+      ? baseList.filter((i) => i.label.includes(s.value))
+      : baseList;
+    s.selected = s.list.length ? s.list[0].value : "";
+  };
+
+  applyOptions(initialOptions);
+
+  const onChange = (newValue: string) => {
+    s.value = newValue;
+    s.list = s.value
+      ? baseList.filter((i) => i.label.includes(s.value))
+      : baseList;
+    s.selected = s.list.length ? s.list[0].value : "";
+  };
+
+  const moveSelected = (direction: -1 | 1) => {
+    if (!s.list.length) return;
+
+    const currentIndex = s.list.findIndex((i) => i.value === s.selected);
+    const nextIndex =
+      currentIndex === -1
+        ? direction === 1
+          ? 0
+          : s.list.length - 1
+        : (currentIndex + direction + s.list.length) % s.list.length;
+
+    s.selected = s.list[nextIndex].value;
+  };
+
+  const onMoveKeyPress = (key: string) => {
+    if (key !== "up" && key !== "down") return;
+
+    moveSelected(key === "up" ? -1 : 1);
+    return false;
+  };
+
+  const onEditorKeyPress = (key: string) => {
+    const didMove = onMoveKeyPress(key);
+    if (didMove === false) return false;
+
+    if (key === "enter") {
+      const previousList = s.list;
+      const previousBaseList = baseList;
+      const applySelectionResult = () => {
+        if (s.list !== previousList) {
+          baseList = s.list;
+        } else {
+          s.list = previousBaseList;
+          s.selected = s.list.length ? s.list[0].value : "";
+        }
+      };
+
+      s.value = "";
+      const result = initialOptions.onSelect(s);
+      if (result instanceof Promise) {
+        result.then(applySelectionResult).catch(() => {
+          s.list = previousBaseList;
+          s.selected = s.list.length ? s.list[0].value : "";
+        });
+      } else {
+        applySelectionResult();
+      }
+      return false;
+    }
+  };
+
+  const onOverlayKeyPress = (key: string) => {
+    const didMove = onMoveKeyPress(key);
+    if (didMove === false) return false;
+
+    if (key === "escape" || key === "ctrl+p") {
+      applyOptions(initialOptions);
+      initialOptions.onCancel();
+    }
+    return false;
+  };
+
+  return () =>
+    SelectOverlay(
+      s.value,
+      s.selected,
+      s.list,
+      s.label,
+      onOverlayKeyPress,
+      onChange,
+      onEditorKeyPress,
+    );
+}
+
+function sessionLabel(session: Session): string {
+  const firstUserMessage = session.messages.find(
+    (message) => message.role === "user",
+  );
+  if (!firstUserMessage) return session.id;
+
+  const text =
+    typeof firstUserMessage.content === "string"
+      ? firstUserMessage.content
+      : firstUserMessage.content
+          .map((block) => (block.type === "text" ? block.text : ""))
+          .join(" ");
+  const snippet = text
+    .replaceAll(/<system-reminder>[\s\S]*?<\/system-reminder>/g, "")
+    .trim()
+    .replace(/\s+/g, " ")
+    .slice(0, 80);
+
+  return snippet || session.id;
+}
+
+export function mainMenu(state: TUIState) {
+  type MenuPane = Omit<SelectOptions, "onCancel" | "onSelect">;
+
+  const oauthProviders = getOAuthProviders();
+  const getProviderLabel = (provider: string) =>
+    oauthProviders.find((oauthProvider) => oauthProvider.id === provider)
+      ?.name ?? provider;
+  const reasoningEfforts: ThinkingLevel[] = [
+    "minimal",
+    "low",
+    "medium",
+    "high",
+    "xhigh",
+  ];
+  const efforts = reasoningEfforts.map((v) => ({ label: v, value: v }));
+  const getProviderModels = (provider: string) => {
+    const builtIn = getModels(provider as any).map((v) => ({
+      label: v.name,
+      value: v.id,
+    }));
+    const custom =
+      state.options.customProviders
+        ?.filter((m) => m.provider === provider)
+        .map((v) => ({
+          label: v.name,
+          value: v.id,
+        })) ?? [];
+    return [...builtIn, ...custom];
+  };
+
+  let currentProviders: string[] = [];
+  let currentSessions: Session[] = [];
+
+  const providersPane = async (): Promise<MenuPane> => {
+    const builtIn = await getAvailableProviders();
+    const custom =
+      state.options.customProviders?.map((cp) => cp.provider) ?? [];
+    currentProviders = [...new Set([...builtIn, ...custom])];
+    return {
+      label: "providers",
+      filter: "",
+      list: currentProviders.map((provider) => ({
+        label: getProviderLabel(provider),
+        value: provider,
+      })),
+    };
+  };
+
+  const sessionsPane = async (): Promise<MenuPane> => {
+    currentSessions = await listSessionsForCwd();
+    return {
+      label: "sessions",
+      filter: "",
+      list: currentSessions.map((session) => ({
+        label: sessionLabel(session),
+        value: session.id,
+      })),
+    };
+  };
+
+  const mainPane: MenuPane = {
+    label: "main",
+    filter: state.prompt.length ? state.prompt : "",
+    list: [
+      { label: "models and providers", value: "providers" },
+      { label: "reasoning effort", value: "effort" },
+      { label: "sessions", value: "sessions" },
+    ],
+  };
+  const effortPane: MenuPane = {
+    label: "effort",
+    filter: "",
+    list: efforts,
+  };
+  const panes: MenuPane[] = [effortPane];
+  let currentPane = mainPane;
+  let selectedProvider: string | undefined;
+
+  const openPane = (s: SelectState, pane: MenuPane) => {
+    currentPane = pane;
+    s.value = pane.filter;
+    s.label = pane.label ? pane.label.toUpperCase() : "SELECT";
+    s.list = pane.list;
+    s.selected = s.list.length ? s.list[0].value : "";
+  };
+
+  const resetMenu = (s: SelectState) => {
+    currentPane = mainPane;
+    selectedProvider = undefined;
+    currentProviders = [];
+    currentSessions = [];
+    s.value = "";
+    s.label = mainPane.label ? mainPane.label.toUpperCase() : "SELECT";
+    s.list = mainPane.list;
+    s.selected = s.list.length ? s.list[0].value : "";
+  };
+
+  const closeMenu = (s: SelectState) => {
+    resetMenu(s);
+    state.overlay = false;
+  };
+
+  const select = useSelectOverlay({
+    ...mainPane,
+    onSelect: (s) => {
+      if (!s.selected) return;
+
+      if (currentPane.label === "main") {
+        if (s.selected === "providers") {
+          return providersPane().then((pane) => {
+            openPane(s, pane);
+          });
+        }
+
+        if (s.selected === "sessions") {
+          return sessionsPane().then((pane) => {
+            openPane(s, pane);
+          });
+        }
+
+        const nextPane = panes.find((pane) => pane.label === s.selected);
+        if (nextPane) openPane(s, nextPane);
+        return;
+      }
+
+      if (currentPane.label === "sessions") {
+        const session = currentSessions.find((v) => v.id === s.selected);
+        if (!session) return;
+
+        state.sessionId = session.id;
+        state.messages = session.messages;
+        state.prompt = "";
+        state.contextSize = estimateTokens(JSON.stringify(state.messages));
+        state.scrollOffset = 0;
+        state.stickToBottom = true;
+        closeMenu(s);
+        return;
+      }
+
+      if (currentPane.label === "providers") {
+        const provider = currentProviders.find((v) => v === s.selected);
+        if (!provider) return;
+
+        selectedProvider = provider;
+        openPane(s, {
+          label: "models",
+          filter: "",
+          list: getProviderModels(selectedProvider),
+        });
+        return;
+      }
+
+      if (currentPane.label === "models") {
+        if (!selectedProvider) return;
+
+        const builtIn = getModels(selectedProvider as any).find(
+          (v) => v.id === s.selected,
+        );
+        const custom = state.options.customProviders?.find(
+          (v) => v.provider === selectedProvider && v.id === s.selected,
+        );
+        const model = builtIn ?? custom;
+        if (!model) return;
+
+        state.options.provider = selectedProvider;
+        state.options.model = model;
+        saveSettings({
+          provider: selectedProvider,
+          model: model.id,
+          effort: state.options.effort,
+          customProviders: state.options.customProviders,
+        });
+        closeMenu(s);
+        return;
+      }
+
+      if (currentPane.label === "effort") {
+        const effort = reasoningEfforts.find((v) => v === s.selected);
+        if (!effort) return;
+
+        state.options.effort = effort;
+        saveSettings({
+          provider: state.options.provider,
+          model: state.options.model.id,
+          effort: effort,
+          customProviders: state.options.customProviders,
+        });
+        closeMenu(s);
+      }
+    },
+    onCancel: () => {
+      currentPane = mainPane;
+      selectedProvider = undefined;
+      currentProviders = [];
+      currentSessions = [];
+      state.overlay = false;
+    },
+  });
+
+  return select;
+}