muonroi-cli 1.2.0

package/src/ui/components/SuggestionOverlay.tsx

@@ -0,0 +1,38 @@
+import type { Theme } from "../theme.js";
+
+const MAX_VISIBLE = 8;
+
+export function SuggestionOverlay({
+  t,
+  suggestions,
+  selectedIndex,
+}: {
+  t: Theme;
+  suggestions: string[];
+  selectedIndex: number;
+}) {
+  if (suggestions.length === 0) return null;
+
+  const visible = suggestions.slice(0, MAX_VISIBLE);
+
+  return (
+    <box paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1} flexShrink={0}>
+      {visible.map((filePath, i) => {
+        const isSelected = i === selectedIndex;
+        return (
+          <box
+            key={filePath}
+            height={1}
+            backgroundColor={isSelected ? t.selectedBg : undefined}
+            flexDirection="row"
+            gap={1}
+          >
+            <text fg={isSelected ? t.accent : t.textDim}>{isSelected ? "›" : " "}</text>
+            <text fg={isSelected ? t.selected : t.text}>{filePath}</text>
+          </box>
+        );
+      })}
+      {suggestions.length > MAX_VISIBLE && <text fg={t.textDim}>{`  +${suggestions.length - MAX_VISIBLE} more`}</text>}
+    </box>
+  );
+}

package/src/ui/components/btw-overlay.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { Markdown } from "../markdown.js";
+import type { Theme } from "../theme.js";
+
+export interface BtwState {
+  status: "loading" | "done" | "error";
+  question: string;
+  answer?: string;
+  error?: string;
+}
+
+const LOADING_SPINNER_FRAMES = ["⬒", "⬔", "⬓", "⬕"];
+
+function LoadingSpinner() {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setFrame((n) => (n + 1) % LOADING_SPINNER_FRAMES.length), 120);
+    return () => clearInterval(id);
+  }, []);
+  return <>{LOADING_SPINNER_FRAMES[frame]}</>;
+}
+
+export function BtwOverlay({ state, theme: t }: { state: BtwState; theme: Theme }) {
+  return (
+    <box
+      flexDirection="column"
+      paddingLeft={2}
+      paddingRight={2}
+      paddingTop={1}
+      paddingBottom={1}
+      flexShrink={0}
+      backgroundColor={t.backgroundPanel}
+    >
+      <text>
+        <span style={{ fg: t.accent }}>/btw</span>
+        <span style={{ fg: t.textMuted }}>{" — "}</span>
+        <span style={{ fg: t.text }}>{state.question}</span>
+      </text>
+
+      <box height={1} />
+
+      {state.status === "loading" && (
+        <text>
+          <span style={{ fg: t.textMuted }}>
+            <LoadingSpinner />
+          </span>
+          <span style={{ fg: t.textMuted }}> Answering…</span>
+        </text>
+      )}
+
+      {state.status === "done" && state.answer && <Markdown content={state.answer} t={t} />}
+
+      {state.status === "error" && <text fg={t.diffRemovedFg}>{state.error || "Something went wrong."}</text>}
+
+      {state.status !== "loading" && (
+        <>
+          <box height={1} />
+          <text>
+            <span style={{ fg: t.accent }}>esc</span>
+            <span style={{ fg: t.textMuted }}> dismiss</span>
+          </text>
+        </>
+      )}
+    </box>
+  );
+}

package/src/ui/hooks/useTypeahead.ts

@@ -0,0 +1,146 @@
+import type { TextareaRenderable } from "@opentui/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { FileIndex } from "../../utils/file-index.js";
+
+const AT_TOKEN_RE = /(^|\s)@([\w\-./\\~][\w\-./\\~:]*|"[^"]*"?)$/u;
+const BARE_PATH_RE = /(^|\s)(\.{0,2}\/[\w\-./\\~]*|[\w-]+\/[\w\-./\\~]*)$/u;
+
+export interface TypeaheadState {
+  suggestions: string[];
+  selectedIndex: number;
+  visible: boolean;
+  accept: () => void;
+  dismiss: () => void;
+  navigateUp: () => void;
+  navigateDown: () => void;
+}
+
+export interface TokenInfo {
+  token: string;
+  startPos: number;
+  endPos: number;
+  hasAtPrefix: boolean;
+}
+
+function extractToken(text: string, cursorPos: number): TokenInfo | null {
+  const before = text.slice(0, cursorPos);
+
+  const atMatch = before.match(AT_TOKEN_RE);
+  if (atMatch) {
+    const fullMatch = atMatch[0];
+    const leading = atMatch[1] ?? "";
+    const token = atMatch[2] ?? "";
+    const startPos = before.length - fullMatch.length + leading.length;
+    return { token, startPos, endPos: cursorPos, hasAtPrefix: true };
+  }
+
+  const bareMatch = before.match(BARE_PATH_RE);
+  if (bareMatch) {
+    const fullMatch = bareMatch[0];
+    const leading = bareMatch[1] ?? "";
+    const token = bareMatch[2] ?? "";
+    if (!token.includes("/")) return null;
+    const startPos = before.length - fullMatch.length + leading.length;
+    return { token, startPos, endPos: cursorPos, hasAtPrefix: false };
+  }
+
+  return null;
+}
+
+export function useTypeahead(
+  inputRef: React.RefObject<TextareaRenderable | null>,
+  fileIndex: FileIndex | null,
+  onAccept?: (filePath: string, tokenInfo: TokenInfo) => void,
+): TypeaheadState {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const tokenRef = useRef<TokenInfo | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const lastTextRef = useRef("");
+  const lastCursorRef = useRef<number | null>(null);
+  const onAcceptRef = useRef(onAccept);
+  onAcceptRef.current = onAccept;
+
+  const dismiss = useCallback(() => {
+    setSuggestions([]);
+    setSelectedIndex(0);
+    tokenRef.current = null;
+  }, []);
+
+  const accept = useCallback(() => {
+    const ta = inputRef.current;
+    const token = tokenRef.current;
+    if (!ta || !token || suggestions.length === 0) return;
+
+    const selected = suggestions[selectedIndex] ?? suggestions[0];
+    if (!selected) return;
+
+    if (onAcceptRef.current) {
+      onAcceptRef.current(selected, token);
+    } else {
+      const text = ta.plainText;
+      const before = text.slice(0, token.startPos);
+      const after = text.slice(token.endPos);
+      const needsQuotes = selected.includes(" ");
+      const replacement = needsQuotes ? `@"${selected}" ` : `@${selected} `;
+      const newText = before + replacement + after;
+      ta.setText(newText);
+      ta.cursorOffset = before.length + replacement.length;
+    }
+
+    dismiss();
+  }, [inputRef, suggestions, selectedIndex, dismiss]);
+
+  const navigateUp = useCallback(() => {
+    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : suggestions.length - 1));
+  }, [suggestions.length]);
+
+  const navigateDown = useCallback(() => {
+    setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : 0));
+  }, [suggestions.length]);
+
+  useEffect(() => {
+    if (!fileIndex) return;
+
+    const poll = () => {
+      const ta = inputRef.current;
+      if (!ta) return;
+
+      const text = ta.plainText;
+      const cursor = ta.cursorOffset;
+
+      if (text === lastTextRef.current && cursor === lastCursorRef.current && tokenRef.current) return;
+      lastTextRef.current = text;
+      lastCursorRef.current = cursor;
+
+      const token = extractToken(text, cursor);
+      if (!token || token.token.length === 0) {
+        if (suggestions.length > 0) dismiss();
+        return;
+      }
+
+      tokenRef.current = token;
+      const searchQuery = token.token.replace(/^@/, "").replace(/^"/, "").replace(/"$/, "");
+
+      fileIndex.match(searchQuery, 8).then((results) => {
+        setSuggestions(results);
+        setSelectedIndex(0);
+      });
+    };
+
+    pollRef.current = setInterval(poll, 100);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [fileIndex, inputRef, dismiss, suggestions.length]);
+
+  return {
+    suggestions,
+    selectedIndex,
+    visible: suggestions.length > 0,
+    accept,
+    dismiss,
+    navigateUp,
+    navigateDown,
+  };
+}

package/src/ui/markdown.tsx

@@ -0,0 +1,49 @@
+import { RGBA, SyntaxStyle } from "@opentui/core";
+import { useMemo } from "react";
+import type { Theme } from "./theme";
+
+function buildSyntaxStyle(t: Theme): SyntaxStyle {
+  return SyntaxStyle.fromStyles({
+    default: { fg: RGBA.fromHex(t.text) },
+    "markup.heading": { fg: RGBA.fromHex(t.mdHeading), bold: true },
+    "markup.heading.1": { fg: RGBA.fromHex(t.mdHeading), bold: true },
+    "markup.heading.2": { fg: RGBA.fromHex(t.mdHeading), bold: true },
+    "markup.heading.3": { fg: RGBA.fromHex(t.mdHeading), bold: true },
+    "markup.bold": { fg: RGBA.fromHex(t.mdBold), bold: true },
+    "markup.italic": { fg: RGBA.fromHex(t.mdItalic), italic: true },
+    "markup.raw": { fg: RGBA.fromHex(t.mdCode) },
+    "markup.link": { fg: RGBA.fromHex(t.mdLink), underline: true },
+    "markup.link.label": { fg: RGBA.fromHex(t.mdLinkText) },
+    "markup.list": { fg: RGBA.fromHex(t.mdListBullet) },
+    "markup.quote": { fg: RGBA.fromHex(t.mdItalic), italic: true },
+    "markup.separator": { fg: RGBA.fromHex(t.mdHr) },
+    code: { fg: RGBA.fromHex(t.mdCodeBlockFg), bg: RGBA.fromHex(t.mdCodeBlockBg) },
+  });
+}
+
+const TABLE_OPTIONS = {
+  widthMode: "full" as const,
+  columnFitter: "balanced" as const,
+  wrapMode: "word" as const,
+  cellPadding: 1,
+  borders: true,
+  outerBorder: true,
+  borderStyle: "rounded" as const,
+  borderColor: "#333333",
+};
+
+export function Markdown({ content, t }: { content: string; t: Theme }) {
+  const syntaxStyle = useMemo(() => buildSyntaxStyle(t), [t]);
+
+  return (
+    <markdown
+      content={content}
+      syntaxStyle={syntaxStyle}
+      conceal={true}
+      // @ts-expect-error MarkdownProps omits inherited Renderable.selectable; needed for TUI text selection
+      selectable={true}
+      tableOptions={TABLE_OPTIONS}
+      flexShrink={0}
+    />
+  );
+}

package/src/ui/mcp-modal-types.ts

@@ -0,0 +1,33 @@
+import type { McpCatalogEntry } from "../mcp/catalog";
+import type { McpRemoteTransport, McpServerConfig } from "../utils/settings";
+
+export type McpBrowserRow =
+  | { kind: "server"; server: McpServerConfig; description?: string }
+  | { kind: "catalog"; entry: McpCatalogEntry }
+  | { kind: "add" };
+
+export type McpEditorField = "transport" | "label" | "url" | "headers" | "command" | "args" | "cwd" | "env";
+
+export interface McpEditorDraft {
+  label: string;
+  transport: McpRemoteTransport | "stdio";
+  url: string;
+  headersText: string;
+  command: string;
+  argsText: string;
+  cwd: string;
+  envText: string;
+}
+
+export function createEmptyMcpEditorDraft(): McpEditorDraft {
+  return {
+    label: "",
+    transport: "stdio",
+    url: "",
+    headersText: "",
+    command: "",
+    argsText: "",
+    cwd: "",
+    envText: "",
+  };
+}