ubume 0.1.0

package/src/ui/panels/ToolApprovalPanel.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { ToolApprovalDecision, ToolApprovalRequest } from "../../core/providers/types.js";
+import { useTheme } from "../theme.js";
+
+const OPTIONS: Array<{ label: string; value: ToolApprovalDecision }> = [
+  { label: "Allow once", value: "allow-once" },
+  { label: "Allow matching action for this run", value: "allow-for-run" },
+  { label: "Deny", value: "deny" },
+];
+
+export function ToolApprovalPanel({ focusId, request, onSelect, onCancelRun }: {
+  focusId: string;
+  request: ToolApprovalRequest;
+  onSelect: (decision: ToolApprovalDecision) => void;
+  onCancelRun?: () => void;
+}) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [selected, setSelected] = useState(0);
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") return onCancelRun?.();
+    if (key.escape) return onSelect("deny");
+    if (key.upArrow || input === "k") return setSelected((value) => Math.max(0, value - 1));
+    if (key.downArrow || key.tab || input === "j") return setSelected((value) => Math.min(OPTIONS.length - 1, value + 1));
+    if (key.return) onSelect(OPTIONS[selected]!.value);
+  }, { isActive: isFocused });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor={theme.warning} paddingX={2} paddingY={1} width="100%">
+      <Text color={theme.warning} bold>LOCAL MODEL PERMISSION</Text>
+      <Text color={theme.text}>The local model wants to run {request.tool}.</Text>
+      {request.command && <Text color={theme.textMuted}>Command: {request.command}</Text>}
+      {request.paths.map((path) => <Text key={path} color={theme.textMuted}>Path: {path}</Text>)}
+      {request.tool === "run_shell" && <Text color={theme.warning}>Shell commands can affect files, processes, and the network.</Text>}
+      <Box flexDirection="column" marginTop={1}>
+        {OPTIONS.map((option, index) => (
+          <Text key={option.value} color={index === selected ? theme.accent : theme.textMuted} bold={index === selected}>
+            {index === selected ? "› " : "  "}{option.label}
+          </Text>
+        ))}
+      </Box>
+      <Text color={theme.textDim}>↑/↓ or j/k to navigate · Enter to select · Esc to deny</Text>
+    </Box>
+  );
+}

package/src/ui/panels/UpdatePromptPanel.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Text, useFocus, useInput, useStdin } from "ink";
+import { useTheme } from "../theme.js";
+import { getHorizontalArrowDirection, type HorizontalArrowDirection } from "../input/rawArrowKeys.js";
+import { UBUME_NPM_PACKAGE, formatVersionLabel } from "../../core/version/updateCheck.js";
+import {
+  formatPermissionGuidance,
+  getUpdateCommand,
+  isPermissionError,
+  runUpdateCommand,
+  type GlobalPackageManager,
+} from "../../core/version/packageManager.js";
+import type { CommandResult, CommandStreamHandlers } from "../../core/process/CommandRunner.js";
+
+export type UpdateUIState = "available" | "installing" | "success" | "failed";
+
+export type RunUpdateFn = (
+  pm: GlobalPackageManager,
+  handlers?: CommandStreamHandlers,
+) => { result: Promise<CommandResult>; cancel: () => void };
+
+const MENU_ITEMS = [
+  { label: "Update now" },
+  { label: "Later" },
+] as const;
+
+type HorizontalDirection = HorizontalArrowDirection;
+
+export { getHorizontalArrowDirection };
+
+interface UpdatePromptPanelProps {
+  focusId: string;
+  currentVersion: string;
+  latestVersion: string;
+  packageManager: GlobalPackageManager;
+  /** Test seam — defaults to the real cross-platform runner. */
+  runUpdate?: RunUpdateFn;
+  onSkip: () => void;
+  onRestart: () => void;
+}
+
+export function UpdatePromptPanel({
+  focusId,
+  currentVersion,
+  latestVersion,
+  packageManager,
+  runUpdate,
+  onSkip,
+  onRestart,
+}: UpdatePromptPanelProps) {
+  const theme = useTheme();
+  const { stdin } = useStdin();
+  const { isFocused, focus } = useFocus({ id: focusId, autoFocus: true });
+
+  const [updateState, setUpdateState] = useState<UpdateUIState>("available");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [outputLines, setOutputLines] = useState<string[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const rawArrowRef = useRef<HorizontalDirection | null>(null);
+
+  useEffect(() => {
+    const handleRawInput = (chunk: Buffer | string) => {
+      rawArrowRef.current = getHorizontalArrowDirection(
+        typeof chunk === "string" ? chunk : chunk.toString(),
+      );
+    };
+    stdin.on("data", handleRawInput);
+    return () => {
+      stdin.off("data", handleRawInput);
+    };
+  }, [stdin]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (updateState === "installing") {
+        setOutputLines([]);
+        setErrorMessage(null);
+        setUpdateState("available");
+        // Ink clears the active focus id for every bare Escape before
+        // dispatching useInput handlers. Cancellation keeps this panel open,
+        // so explicitly retain its focus for the restored available state.
+        focus(focusId);
+        return;
+      }
+      onSkip();
+      return;
+    }
+    if (updateState === "available") {
+      const rawArrow = rawArrowRef.current;
+      rawArrowRef.current = null;
+      if (key.leftArrow || rawArrow === "left" || input === "h") {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.rightArrow || rawArrow === "right" || input === "l") {
+        setSelectedIndex((i) => Math.min(MENU_ITEMS.length - 1, i + 1));
+        return;
+      }
+      if (key.return) {
+        if (selectedIndex === 0) {
+          setOutputLines([]);
+          setErrorMessage(null);
+          setUpdateState("installing");
+        } else {
+          onSkip();
+        }
+        return;
+      }
+    } else if (updateState === "success") {
+      if (key.return) {
+        onRestart();
+      }
+    } else if (updateState === "failed") {
+      if (key.return) {
+        onSkip();
+      }
+    }
+  }, { isActive: isFocused });
+
+  useEffect(() => {
+    if (updateState !== "installing") return;
+
+    let disposed = false;
+    const appendLines = (text: string) => {
+      if (disposed) return;
+      const lines = text.split(/\r?\n/).filter(Boolean);
+      if (lines.length > 0) {
+        setOutputLines((prev) => [...prev, ...lines]);
+      }
+    };
+
+    const runner = runUpdate ?? runUpdateCommand;
+    const { result, cancel } = runner(packageManager, {
+      onStdout: appendLines,
+      onStderr: appendLines,
+    });
+
+    let settled = false;
+    void result.then((res) => {
+      if (disposed) return;
+      settled = true;
+      if (res.status === "completed" && res.exitCode === 0) {
+        setUpdateState("success");
+        return;
+      }
+      if (isPermissionError(res)) {
+        setErrorMessage(formatPermissionGuidance(packageManager));
+      } else {
+        setErrorMessage(res.userMessage);
+      }
+      setUpdateState("failed");
+    });
+
+    return () => {
+      disposed = true;
+      if (!settled) cancel();
+    };
+  }, [updateState, packageManager, runUpdate]);
+
+  const footerText = updateState === "available"
+    ? "←/→ to choose · Enter to confirm · Esc to close"
+    : updateState === "success"
+      ? "Enter to restart · Esc to stay in Ubume"
+      : updateState === "installing"
+        ? "Esc to cancel"
+        : "Esc to close";
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={updateState === "available" ? theme.borderFocused : theme.border}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+        flexDirection="column"
+      >
+        {updateState === "available" && (
+          <>
+            <Text color={theme.accent} bold>{`Update available: Ubume ${latestVersion}`}</Text>
+            <Box marginTop={1}>
+              <Text color={theme.text}>{`Current version: ${currentVersion}`}</Text>
+            </Box>
+            <Text color={theme.textMuted}>{`Package: ${UBUME_NPM_PACKAGE}`}</Text>
+            <Text color={theme.textMuted}>{`Run: ${getUpdateCommand(packageManager).displayCommand}`}</Text>
+            <Box marginTop={1}>
+              {MENU_ITEMS.map((item, index) => (
+                <Text
+                  key={item.label}
+                  color={index === selectedIndex ? theme.text : theme.textMuted}
+                  bold={index === selectedIndex}
+                >
+                  {`${index === selectedIndex ? "❯ " : "  "}[ ${item.label} ]${index === 0 ? "  " : ""}`}
+                </Text>
+              ))}
+            </Box>
+          </>
+        )}
+
+        {updateState === "installing" && (
+          <>
+            <Text color={theme.text}>{`Installing Ubume ${latestVersion}...`}</Text>
+            {outputLines.map((line, i) => (
+              <Text key={i} color={theme.textMuted}>{line}</Text>
+            ))}
+          </>
+        )}
+
+        {updateState === "success" && (
+          <>
+            <Text color={theme.success}>{`Ubume ${formatVersionLabel(latestVersion)} installed successfully.`}</Text>
+            <Text color={theme.textMuted}>{"Restart Ubume to use the new version."}</Text>
+            <Box marginTop={1}>
+              <Text color={theme.text} bold>{"❯ [ Restart now ]"}</Text>
+            </Box>
+          </>
+        )}
+
+        {updateState === "failed" && (
+          <>
+            <Text color={theme.error}>{"Update failed."}</Text>
+            {errorMessage != null && <Text color={theme.textMuted}>{errorMessage}</Text>}
+            {outputLines.slice(-5).map((line, i) => (
+              <Text key={i} color={theme.textDim}>{line}</Text>
+            ))}
+          </>
+        )}
+
+        <Box marginTop={1}>
+          <Text color={theme.textDim}>{footerText}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/panels/responsivePickerViewport.ts

@@ -0,0 +1,64 @@
+export interface ResponsivePickerViewportOptions {
+  itemCount: number;
+  selectedIndex: number;
+  availableRows: number;
+  chromeRows: number;
+  scrollOffset?: number;
+}
+
+export interface ResponsivePickerViewport {
+  start: number;
+  end: number;
+  capacity: number;
+  selectedIndex: number;
+  hasOverflow: boolean;
+  hiddenAbove: number;
+  hiddenBelow: number;
+}
+
+function safeInteger(value: number, fallback = 0): number {
+  return Number.isFinite(value) ? Math.floor(value) : fallback;
+}
+
+/**
+ * Builds a continuous list viewport from the rows left to the picker body.
+ * The previous offset is retained when possible, then moved only far enough to
+ * keep the selection visible. This makes keyboard navigation and resizes feel
+ * like scrolling one list instead of jumping between pages.
+ */
+export function calculateResponsivePickerViewport({
+  itemCount,
+  selectedIndex,
+  availableRows,
+  chromeRows,
+  scrollOffset = 0,
+}: ResponsivePickerViewportOptions): ResponsivePickerViewport {
+  const count = Math.max(0, safeInteger(itemCount));
+  const rows = Math.max(0, safeInteger(availableRows));
+  const chrome = Math.max(0, safeInteger(chromeRows));
+  const capacity = count === 0 ? 0 : Math.max(1, rows - chrome);
+  const clampedSelection = count === 0
+    ? 0
+    : Math.max(0, Math.min(count - 1, safeInteger(selectedIndex)));
+  const maxStart = Math.max(0, count - capacity);
+  let start = Math.max(0, Math.min(maxStart, safeInteger(scrollOffset)));
+
+  if (clampedSelection < start) {
+    start = clampedSelection;
+  } else if (clampedSelection >= start + capacity) {
+    start = clampedSelection - capacity + 1;
+  }
+
+  start = Math.max(0, Math.min(maxStart, start));
+  const end = Math.min(count, start + capacity);
+
+  return {
+    start,
+    end,
+    capacity,
+    selectedIndex: clampedSelection,
+    hasOverflow: count > capacity,
+    hiddenAbove: start,
+    hiddenBelow: count - end,
+  };
+}

package/src/ui/render/Markdown.tsx

@@ -0,0 +1,331 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+import { Panel } from "../panels/Panel.js";
+import { maybeRenderDiff, type DiffRenderLineType } from "./diffRenderer.js";
+import { formatLocalPathForTerminal, formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
+
+// ─── Markdown parser ─────────────────────────────────────────────────────────
+
+type InlinePart =
+  | { kind: "text"; text: string }
+  | { kind: "code"; text: string }
+  | { kind: "bold"; text: string };
+
+function parseInline(text: string): InlinePart[] {
+  const formattedText = formatTerminalAnswerInline(text);
+  const parts: InlinePart[] = [];
+  const pat = /`([^`\n]+)`|\*\*([^*\n]+)\*\*/g;
+  let last = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pat.exec(formattedText)) !== null) {
+    if (match.index > last) parts.push({ kind: "text", text: formattedText.slice(last, match.index) });
+    if (match[1] !== undefined) parts.push({ kind: "code", text: formatLocalPathForTerminal(match[1]) });
+    if (match[2] !== undefined) parts.push({ kind: "bold", text: match[2] });
+    last = pat.lastIndex;
+  }
+
+  if (last < formattedText.length) parts.push({ kind: "text", text: formattedText.slice(last) });
+  return parts.length > 0 ? parts : [{ kind: "text", text: formattedText }];
+}
+
+export type CodeSegment = { type: "code"; lang: string; lines: string[] };
+export type HeaderSegment = { type: "header"; level: 1 | 2 | 3; parts: InlinePart[] };
+export type ListItem = { num: number; parts: InlinePart[] };
+export type ListSegment = { type: "list"; ordered: boolean; items: ListItem[] };
+export type ParaSegment = { type: "para"; lines: InlinePart[][] };
+export type Segment = CodeSegment | HeaderSegment | ListSegment | ParaSegment;
+
+const SHELL_CODE_LANGUAGES = new Set([
+  "bash", "sh", "shell", "zsh", "fish", "powershell", "pwsh", "cmd", "bat", "batch",
+]);
+
+export function isShellCodeLanguage(language: string): boolean {
+  return SHELL_CODE_LANGUAGES.has(language.trim().toLowerCase());
+}
+
+const FENCE_RE = /^```(.*)$/;
+const HEADER_RE = /^(#{1,3})\s+(.+)/;
+const BULLET_RE = /^\s*[-*]\s+(.+)/;
+const ORDERED_RE = /^\s*(\d+)\.\s+(.+)/;
+
+function isBlockStart(line: string): boolean {
+  return FENCE_RE.test(line) || HEADER_RE.test(line) || BULLET_RE.test(line) || ORDERED_RE.test(line);
+}
+
+export function parseMarkdown(content: string): Segment[] {
+  const lines = content.split("\n");
+  const out: Segment[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index]!;
+
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+
+    const fenceMatch = FENCE_RE.exec(line);
+    if (fenceMatch) {
+      const codeLines: string[] = [];
+      const lang = (fenceMatch[1] ?? "").trim();
+      index += 1;
+      while (index < lines.length && !FENCE_RE.test(lines[index]!)) {
+        codeLines.push(lines[index]!);
+        index += 1;
+      }
+      index += 1;
+      out.push({ type: "code", lang, lines: codeLines });
+      continue;
+    }
+
+    const headerMatch = HEADER_RE.exec(line);
+    if (headerMatch) {
+      out.push({
+        type: "header",
+        level: Math.min(3, headerMatch[1]!.length) as 1 | 2 | 3,
+        parts: parseInline(headerMatch[2]!),
+      });
+      index += 1;
+      continue;
+    }
+
+    if (BULLET_RE.test(line)) {
+      const items: ListItem[] = [];
+      let counter = 1;
+      while (index < lines.length) {
+        const match = BULLET_RE.exec(lines[index]!);
+        if (!match) break;
+        items.push({ num: counter, parts: parseInline(match[1]!) });
+        counter += 1;
+        index += 1;
+      }
+      out.push({ type: "list", ordered: false, items });
+      continue;
+    }
+
+    if (ORDERED_RE.test(line)) {
+      const items: ListItem[] = [];
+      while (index < lines.length) {
+        const match = ORDERED_RE.exec(lines[index]!);
+        if (!match) break;
+        items.push({ num: Number.parseInt(match[1]!, 10), parts: parseInline(match[2]!) });
+        index += 1;
+      }
+      out.push({ type: "list", ordered: true, items });
+      continue;
+    }
+
+    const paraLines: InlinePart[][] = [];
+    while (index < lines.length && !isBlockStart(lines[index]!) && lines[index]!.trim() !== '') {
+      paraLines.push(parseInline(lines[index]!));
+      index += 1;
+    }
+    if (paraLines.length > 0) {
+      out.push({ type: "para", lines: paraLines });
+    }
+  }
+
+  return out;
+}
+
+// ─── Rendering helpers ────────────────────────────────────────────────────────
+
+function InlineText({ parts, color }: { parts: InlinePart[]; color: string }) {
+  const theme = useTheme();
+
+  return (
+    <Text color={color} wrap="wrap">
+      {parts.map((part, index) => {
+        if (part.kind === "code") return <Text key={index} color={theme.info}>{part.text}</Text>;
+        if (part.kind === "bold") return <Text key={index} bold>{part.text}</Text>;
+        return <Text key={index}>{part.text}</Text>;
+      })}
+    </Text>
+  );
+}
+
+function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
+  const trimmed = label.trimEnd();
+  const slash = trimmed.endsWith("/") ? "/" : "";
+  const base = slash ? trimmed.slice(0, -1) : trimmed;
+  const lastDot = base.lastIndexOf(".");
+  const isDirectory = slash === "/" || (lastDot <= 0 && base.length > 0);
+
+  if (isDirectory) {
+    return (
+      <Text color={theme.text} bold>
+        {base}
+        {slash}
+      </Text>
+    );
+  }
+
+  return (
+    <Text color={theme.text}>
+      {base.slice(0, lastDot)}
+      <Text color={theme.textDim}>{base.slice(lastDot)}</Text>
+    </Text>
+  );
+}
+
+function TreeLine({ line }: { line: string }) {
+  const theme = useTheme();
+  const match = /^([│├└─\s]*)(.*)$/.exec(line);
+  const prefix = match?.[1] ?? "";
+  const label = match?.[2] ?? line;
+
+  return (
+    <Box width="100%">
+      <Text color={theme.textDim}>{prefix}</Text>
+      {renderTreeLabel(label, theme)}
+    </Box>
+  );
+}
+
+function isTreeLine(line: string): boolean {
+  return /^[│├└─\s]+/.test(line);
+}
+
+function getDiffColor(kind: DiffRenderLineType, theme: ReturnType<typeof useTheme>): string {
+  switch (kind) {
+    case "add":
+      return theme.success;
+    case "remove":
+      return theme.error;
+    case "hunk":
+      return theme.accent;
+    case "file":
+    case "meta":
+      return theme.info;
+    case "context":
+    default:
+      return theme.textMuted;
+  }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function RenderMessage({ segments, width, brightHeadings = false }: { segments: Segment[]; width: number; brightHeadings?: boolean }) {
+  const theme = useTheme();
+
+  return (
+    <Box flexDirection="column" width="100%">
+      {segments.map((segment, index) => {
+        const marginTop = index > 0 ? 1 : 0;
+
+        if (segment.type === "code") {
+          const lang = (segment.lang || "").toLowerCase();
+          const looksLikeTree = segment.lines.some((line) => isTreeLine(line));
+
+          let title = segment.lang || "code";
+          let codeLines = segment.lines;
+          const firstLine = codeLines[0]?.trim() || "";
+          if (/^[a-zA-Z0-9_\-\.\/]+\.[a-zA-Z0-9]+$/.test(firstLine)) {
+            title = firstLine;
+            codeLines = codeLines.slice(1);
+          }
+
+          const panelWidth = Math.max(10, width);
+          const diffLines = maybeRenderDiff(codeLines.join("\n"), { force: lang === "diff" });
+
+          if (isShellCodeLanguage(lang)) {
+            const marker = lang === "cmd" || lang === "bat" || lang === "batch"
+              ? `REM ${lang}`
+              : `# ${lang}`;
+            return (
+              <Box key={index} marginTop={marginTop} flexDirection="column" paddingLeft={2} width="100%">
+                <Text color={theme.textDim}>{marker}</Text>
+                {codeLines.map((line, lineIndex) => (
+                  <Text key={lineIndex} color={theme.textMuted} wrap="wrap">{line || " "}</Text>
+                ))}
+              </Box>
+            );
+          }
+
+          return (
+            <Box
+              key={index}
+              marginTop={marginTop}
+              flexDirection="column"
+              paddingLeft={2}
+              width="100%"
+            >
+              <Panel cols={panelWidth} title={title}>
+                {diffLines
+                  ? diffLines.map((line, lineIndex) => (
+                    <Text key={lineIndex} color={getDiffColor(line.type, theme)} wrap="wrap">
+                      {line.text || " "}
+                    </Text>
+                  ))
+                  : codeLines.map((line, lineIndex) => (
+                    looksLikeTree ? (
+                      <TreeLine key={lineIndex} line={line || " "} />
+                    ) : (
+                      <Box key={lineIndex}>
+                        <Box width={3} flexShrink={0} marginRight={1} justifyContent="flex-end">
+                          <Text color={theme.textDim}>{lineIndex + 1}</Text>
+                        </Box>
+                        <Text color={theme.textMuted} wrap="wrap">{line || " "}</Text>
+                      </Box>
+                    )
+                  ))}
+              </Panel>
+            </Box>
+          );
+        }
+
+        if (segment.type === "header") {
+          const color = segment.level === 1 ? theme.accent : segment.level === 2 ? theme.text : (brightHeadings ? theme.text : theme.textMuted);
+          return (
+            <Box key={index} flexDirection="column" marginTop={marginTop}>
+              {segment.level <= 2 && <Text color={theme.border}>{"───"}</Text>}
+              <Box>
+                <Text color={color}>{segment.level <= 2 ? "✧ " : "• "}</Text>
+                <InlineText parts={segment.parts} color={color} />
+              </Box>
+            </Box>
+          );
+        }
+
+        if (segment.type === "list") {
+          return (
+            <Box key={index} flexDirection="column" marginTop={marginTop}>
+              {segment.items.map((item, itemIndex) => (
+                <Box key={itemIndex}>
+                  <Text color={theme.accent}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
+                  <Box flexGrow={1} flexShrink={1}>
+                    <InlineText parts={item.parts} color={theme.text} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          );
+        }
+
+        const hasContent = segment.lines.some(
+          (parts) => !(parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()),
+        );
+        if (!hasContent) return null;
+
+        return (
+          <Box key={index} flexDirection="column" marginTop={marginTop}>
+            {segment.lines.map((parts, lineIndex) => {
+              if (parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()) {
+                return null;
+              }
+              return <InlineText key={lineIndex} parts={parts} color={theme.text} />;
+            })}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export const MemoizedRenderMessage = React.memo(RenderMessage, (prev, next) => (
+  prev.segments === next.segments && prev.width === next.width && prev.brightHeadings === next.brightHeadings
+));
+