openreport 0.1.0

package/src/components/layout/Footer.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+
+interface FooterAction {
+  key: string;
+  label: string;
+}
+
+interface FooterProps {
+  actions: FooterAction[];
+  statusText?: string;
+}
+
+export const Footer = React.memo(function Footer({ actions, statusText }: FooterProps) {
+  const { columns } = useTerminalSize();
+  const separator = useMemo(() => "─".repeat(columns), [columns]);
+
+  return (
+    <Box flexDirection="column" width={columns}>
+      <Box width={columns}>
+        <Text color="gray" dimColor>
+          {separator}
+        </Text>
+      </Box>
+      <Box
+        flexDirection="row"
+        justifyContent="space-between"
+        paddingX={1}
+        width={columns}
+      >
+        <Box flexDirection="row" gap={2}>
+          {actions.map((action) => (
+            <Box key={action.key} gap={1}>
+              <Text color="yellow" bold>
+                [{action.key}]
+              </Text>
+              <Text color="gray">{action.label}</Text>
+            </Box>
+          ))}
+        </Box>
+        {statusText && (
+          <Box>
+            <Text color="gray" dimColor>
+              {statusText}
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});

package/src/components/layout/Header.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+
+interface HeaderProps {
+  modelName?: string;
+  phase?: string;
+}
+
+export const Header = React.memo(function Header({ modelName, phase }: HeaderProps) {
+  const { columns } = useTerminalSize();
+  const separator = useMemo(() => "─".repeat(columns), [columns]);
+
+  return (
+    <Box flexDirection="column" width={columns}>
+      <Box
+        flexDirection="row"
+        justifyContent="space-between"
+        paddingX={1}
+        width={columns}
+      >
+        <Box gap={1}>
+          <Text bold color="magenta">
+            OPENREPORT
+          </Text>
+          {phase && (
+            <>
+              <Text color="gray" dimColor>
+                /
+              </Text>
+              <Text color="white">{phase}</Text>
+            </>
+          )}
+        </Box>
+        <Box gap={2}>
+          {modelName && (
+            <Text color="cyan" dimColor>
+              {modelName}
+            </Text>
+          )}
+        </Box>
+      </Box>
+      <Box width={columns}>
+        <Text color="gray" dimColor>
+          {separator}
+        </Text>
+      </Box>
+    </Box>
+  );
+});

package/src/components/report/MarkdownRenderer.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Text } from "ink";
+import { marked } from "marked";
+import TerminalRenderer from "marked-terminal";
+
+const terminalRenderer = new TerminalRenderer({
+  reflowText: true,
+  showSectionPrefix: false,
+  tab: 2,
+  tableOptions: {
+    chars: {
+      top: "─",
+      "top-mid": "┬",
+      "top-left": "┌",
+      "top-right": "┐",
+      bottom: "─",
+      "bottom-mid": "┴",
+      "bottom-left": "└",
+      "bottom-right": "┘",
+      left: "│",
+      "left-mid": "├",
+      mid: "─",
+      "mid-mid": "┼",
+      right: "│",
+      "right-mid": "┤",
+      middle: "│",
+    },
+    style: {
+      head: ["cyan", "bold"],
+      border: ["gray"],
+    },
+  },
+});
+
+// marked-terminal returns a renderer compatible with marked at runtime
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+marked.setOptions({ renderer: terminalRenderer as any });
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  const rendered = renderMarkdown(content);
+  return <Text>{rendered}</Text>;
+}
+
+export function renderMarkdown(content: string): string {
+  return marked.parse(content) as string;
+}

package/src/components/report/ReportCard.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { ReportMetadata } from "../../types/index.js";
+import { formatRelativeDate, formatDuration } from "../../utils/format.js";
+import { getGradeTerminalColor } from "../../utils/grade-colors.js";
+
+interface ReportCardProps {
+  metadata: ReportMetadata;
+  selected?: boolean;
+}
+
+export function ReportCard({ metadata, selected }: ReportCardProps) {
+  const gradeColor = getGradeTerminalColor(metadata.grade || "");
+
+  return (
+    <Box flexDirection="row" gap={2}>
+      <Text color={selected ? "yellow" : undefined}>
+        {selected ? ">" : " "}
+      </Text>
+      <Text bold={selected} color={selected ? "white" : "gray"}>
+        {metadata.type}
+      </Text>
+      <Text color={gradeColor as string}>[{metadata.grade || "?"}]</Text>
+      <Text color="gray">{formatRelativeDate(metadata.createdAt)}</Text>
+      <Text color="gray">{formatDuration(metadata.duration)}</Text>
+      <Text color="gray" dimColor>
+        {metadata.model}
+      </Text>
+    </Box>
+  );
+}

package/src/components/report/ScrollableView.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+
+const stripAnsi = (s: string) => s.replace(/[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d\/#&.:=?%@~_]*)*)?\u0007)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g, '');
+
+interface ScrollableViewProps {
+  content: string;
+  height?: number;
+  onExit?: () => void;
+}
+
+export function ScrollableView({
+  content,
+  height = 20,
+  onExit,
+}: ScrollableViewProps) {
+  const lines = useMemo(() => content.split("\n"), [content]);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Search state
+  const [searchMode, setSearchMode] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchMatchSet, setSearchMatchSet] = useState<Set<number>>(new Set());
+  const [searchMatchList, setSearchMatchList] = useState<number[]>([]);
+  const [currentMatch, setCurrentMatch] = useState(0);
+
+  // Reserve 1 line for status bar, 1 for search bar when active
+  const viewHeight = searchMode ? height - 2 : height - 1;
+  const maxScroll = Math.max(0, lines.length - viewHeight);
+
+  function performSearch(query: string) {
+    if (!query) {
+      setSearchMatchSet(new Set());
+      setSearchMatchList([]);
+      setCurrentMatch(0);
+      return;
+    }
+    const q = query.toLowerCase();
+    const matches: number[] = [];
+    for (let i = 0; i < lines.length; i++) {
+      if (stripAnsi(lines[i]).toLowerCase().includes(q)) {
+        matches.push(i);
+      }
+    }
+    setSearchMatchSet(new Set(matches));
+    setSearchMatchList(matches);
+    setCurrentMatch(0);
+    if (matches.length > 0) {
+      setScrollOffset(Math.min(matches[0], maxScroll));
+    }
+  }
+
+  useInput((input, key) => {
+    // Search mode: capture all input for the query
+    if (searchMode) {
+      if (key.return) {
+        setSearchMode(false);
+        performSearch(searchQuery);
+      } else if (key.escape) {
+        setSearchMode(false);
+        setSearchQuery("");
+      } else if (key.delete || key.backspace) {
+        setSearchQuery((prev) => prev.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setSearchQuery((prev) => prev + input);
+      }
+      return;
+    }
+
+    // Normal mode
+    if (key.upArrow) {
+      setScrollOffset((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setScrollOffset((prev) => Math.min(maxScroll, prev + 1));
+    } else if (key.pageUp) {
+      setScrollOffset((prev) => Math.max(0, prev - viewHeight));
+    } else if (key.pageDown) {
+      setScrollOffset((prev) => Math.min(maxScroll, prev + viewHeight));
+    } else if (input === "g") {
+      setScrollOffset(0);
+    } else if (input === "G") {
+      setScrollOffset(maxScroll);
+    } else if (input === "/") {
+      setSearchMode(true);
+      setSearchQuery("");
+    } else if (input === "n" && searchMatchList.length > 0) {
+      const next = (currentMatch + 1) % searchMatchList.length;
+      setCurrentMatch(next);
+      setScrollOffset(Math.min(searchMatchList[next], maxScroll));
+    } else if (input === "N" && searchMatchList.length > 0) {
+      const prev =
+        (currentMatch - 1 + searchMatchList.length) % searchMatchList.length;
+      setCurrentMatch(prev);
+      setScrollOffset(Math.min(searchMatchList[prev], maxScroll));
+    } else if (key.escape) {
+      if (searchMatchList.length > 0) {
+        setSearchMatchSet(new Set());
+        setSearchMatchList([]);
+        setSearchQuery("");
+        setCurrentMatch(0);
+      } else {
+        onExit?.();
+      }
+    } else if (input === "q") {
+      onExit?.();
+    }
+  });
+
+  const visibleLines = lines.slice(scrollOffset, scrollOffset + viewHeight);
+  const scrollPercentage =
+    maxScroll > 0 ? Math.round((scrollOffset / maxScroll) * 100) : 100;
+
+  // Status bar text
+  let statusLeft: string;
+  if (searchMatchList.length > 0) {
+    statusLeft = `Match ${currentMatch + 1}/${searchMatchList.length} [n/N next/prev] [esc clear]`;
+  } else if (searchQuery && !searchMode) {
+    statusLeft = "No matches";
+  } else {
+    statusLeft = `Lines ${scrollOffset + 1}-${Math.min(scrollOffset + viewHeight, lines.length)} of ${lines.length}`;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="column" height={viewHeight}>
+        {visibleLines.map((line, i) => {
+          const lineIdx = scrollOffset + i;
+          const isCurrentMatch = searchMatchList[currentMatch] === lineIdx;
+          const isMatch = searchMatchSet.has(lineIdx);
+
+          return (
+            <Box key={lineIdx} flexDirection="row">
+              {searchMatchList.length > 0 && (
+                <Text
+                  color={
+                    isCurrentMatch ? "yellow" : isMatch ? "cyan" : undefined
+                  }
+                >
+                  {isCurrentMatch ? ">" : isMatch ? "│" : " "}
+                </Text>
+              )}
+              <Text>{line}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Search input bar */}
+      {searchMode && (
+        <Box>
+          <Text color="yellow">/</Text>
+          <Text>{searchQuery}</Text>
+          <Text color="gray">█</Text>
+        </Box>
+      )}
+
+      {/* Status bar */}
+      <Box justifyContent="space-between" paddingX={1}>
+        <Text color="gray">{statusLeft}</Text>
+        <Text color="gray">{scrollPercentage}%</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/config/cli-detection.ts

@@ -0,0 +1,130 @@
+import { execFile } from "child_process";
+import { promisify } from "util";
+import { debugLog } from "../utils/debug.js";
+
+const execFileAsync = promisify(execFile);
+
+// ── CLI tool definitions ────────────────────────────────────────────────
+
+export interface CliToolDef {
+  id: string;
+  name: string;
+  detectCommand: string;
+  buildArgs: (model: string | null) => string[];
+  buildStreamArgs: (model: string | null) => string[];
+  supportsStreaming: boolean;
+  defaultModel: string;
+}
+
+export const CLI_TOOLS: CliToolDef[] = [
+  {
+    id: "claude-code",
+    name: "Claude Code",
+    detectCommand: "claude --version",
+    buildArgs: (model) => {
+      const args = ["-p", "--output-format", "text"];
+      if (model && model !== "sonnet") args.push("--model", model);
+      return args;
+    },
+    buildStreamArgs: (model) => {
+      const args = [
+        "-p",
+        "--output-format", "stream-json",
+        "--verbose",
+        "--include-partial-messages",
+      ];
+      if (model && model !== "sonnet") args.push("--model", model);
+      return args;
+    },
+    supportsStreaming: true,
+    defaultModel: "sonnet",
+  },
+  {
+    id: "gemini-cli",
+    name: "Gemini CLI",
+    detectCommand: "gemini --version",
+    buildArgs: (_model) => [],
+    buildStreamArgs: (_model) => [],
+    supportsStreaming: false,
+    defaultModel: "gemini-cli",
+  },
+  {
+    id: "codex-cli",
+    name: "Codex CLI",
+    detectCommand: "codex --version",
+    // Use --auto-edit instead of --full-auto: auto-edits files but still
+    // prompts before running shell commands, reducing the attack surface if
+    // a malicious repo manipulates the AI context.
+    buildArgs: (_model) => ["--quiet", "--auto-edit"],
+    buildStreamArgs: (_model) => ["--quiet", "--auto-edit"],
+    supportsStreaming: false,
+    defaultModel: "codex-cli",
+  },
+];
+
+// ── Detection ───────────────────────────────────────────────────────────
+
+export interface DetectedCli {
+  id: string;
+  name: string;
+  version: string;
+  defaultModel: string;
+}
+
+let _cachedDetectedClis: DetectedCli[] | null = null;
+
+export function clearCliCache(): void {
+  _cachedDetectedClis = null;
+}
+
+export async function detectInstalledClis(): Promise<DetectedCli[]> {
+  if (_cachedDetectedClis) return _cachedDetectedClis;
+
+  const results = await Promise.allSettled(
+    CLI_TOOLS.map(async (tool) => {
+      const [command, ...args] = tool.detectCommand.split(" ");
+      const { stdout } = await execFileAsync(command, args, {
+        encoding: "utf-8",
+        timeout: 2_000,
+      });
+      return {
+        id: tool.id,
+        name: tool.name,
+        version: stdout.trim().split("\n")[0].slice(0, 50),
+        defaultModel: tool.defaultModel,
+      };
+    })
+  );
+
+  const detected: DetectedCli[] = results
+    .filter((r): r is PromiseFulfilledResult<DetectedCli> => r.status === "fulfilled")
+    .map((r) => r.value);
+
+  _cachedDetectedClis = detected;
+  return detected;
+}
+
+// ── CLI command safety ───────────────────────────────────────────────────
+
+const SAFE_CLI_NAME = /^[a-zA-Z0-9_-]+$/;
+
+export function validateCliCommand(command: string): void {
+  if (!SAFE_CLI_NAME.test(command)) {
+    throw new Error(`Unsafe CLI command name: ${command}`);
+  }
+}
+
+// ── CLI command resolver ────────────────────────────────────────────────
+
+export function getCliCommand(toolId: string): string {
+  switch (toolId) {
+    case "claude-code":
+      return "claude";
+    case "gemini-cli":
+      return "gemini";
+    case "codex-cli":
+      return "codex";
+    default:
+      return toolId;
+  }
+}