@elench/testkit 0.1.86 → 0.1.87

package/lib/cli/tui/inspect-app.mjs

@@ -0,0 +1,306 @@
+import React, { createElement, useEffect, useMemo, useState } from "react";
+import { Box, Text, useAnimation, useApp, useInput } from "ink";
+import figures from "figures";
+import { formatDuration } from "../../runner/formatting.mjs";
+import {
+  bold,
+  colorService,
+  colorTypeBadge,
+  dim,
+  green,
+  red,
+  yellow,
+} from "../presentation/colors.mjs";
+import { renderSummaryBox } from "../presentation/summary-box.mjs";
+import { getTerminalWidth } from "../presentation/terminal-layout.mjs";
+import { defaultInvestigationMessage } from "../agents/prompt-builder.mjs";
+import { applyHighlight } from "./fuzzy-match.mjs";
+import { buildInspectPaneContent } from "./detail-pane.mjs";
+import { FilterBar } from "./filter-bar.mjs";
+
+const SPINNER_FRAMES = ["|", "/", "-", "\\"];
+
+export function InspectApp({
+  inspectState,
+  stdout,
+  productDir,
+  onInvestigate,
+  onRequestClose,
+  onCancelInvestigation,
+} = {}) {
+  const { exit } = useApp();
+  const [snapshot, setSnapshot] = useState(() => inspectState.getSnapshot());
+  const { frame } = useAnimation({ interval: 80, isActive: !snapshot.finished });
+  const spinnerFrame = SPINNER_FRAMES[frame % SPINNER_FRAMES.length];
+
+  useEffect(() => {
+    const unsubscribe = inspectState.subscribe(() => {
+      setSnapshot(inspectState.getSnapshot());
+    });
+    return unsubscribe;
+  }, [inspectState]);
+
+  useInput((input, key) => {
+    if (snapshot.mode === "investigating") {
+      if (input === "q") {
+        (onRequestClose || exit)();
+        return;
+      }
+      if (input === "t") {
+        inspectState.toggleInvestigationViewMode();
+        return;
+      }
+      if (input === "x") {
+        onCancelInvestigation?.();
+        return;
+      }
+      if (input === "b" && snapshot.agentSession?.status !== "running" && snapshot.agentSession?.status !== "starting") {
+        inspectState.returnToSummary();
+      }
+      return;
+    }
+
+    if (!snapshot.finished) {
+      if (input === "q") {
+        inspectState.setNotice("Run is still in progress. Wait for completion before closing.");
+      }
+      return;
+    }
+
+    if (snapshot.filter.active) {
+      if (key.escape) {
+        inspectState.deactivateFilter();
+        return;
+      }
+      if (key.return) return;
+      if (key.downArrow || input === "j") {
+        inspectState.moveCursorDown();
+        return;
+      }
+      if (key.upArrow || input === "k") {
+        inspectState.moveCursorUp();
+        return;
+      }
+      if (key.backspace || key.delete) {
+        inspectState.updateFilterQuery(snapshot.filter.query.slice(0, -1));
+        return;
+      }
+      if (isPrintableInput(input, key)) {
+        inspectState.updateFilterQuery(`${snapshot.filter.query}${input}`);
+      }
+      return;
+    }
+
+    if (input === "q") {
+      (onRequestClose || exit)();
+      return;
+    }
+    if (input === "/") {
+      inspectState.activateFilter();
+      return;
+    }
+    if (key.downArrow || input === "j") {
+      inspectState.moveCursorDown();
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      inspectState.moveCursorUp();
+      return;
+    }
+    if (key.return) {
+      inspectState.toggleExpand();
+      return;
+    }
+    if (key.tab) {
+      inspectState.cyclePaneMode();
+      return;
+    }
+    if ((input === "y" || input === "i") && snapshot.selectedFailure) {
+      onInvestigate?.({
+        provider: "auto",
+        userMessage: defaultInvestigationMessage(),
+      });
+      return;
+    }
+    if (input === "c" && snapshot.selectedFailure) {
+      onInvestigate?.({ provider: "claude", userMessage: defaultInvestigationMessage() });
+      return;
+    }
+    if (input === "o" && snapshot.selectedFailure) {
+      onInvestigate?.({ provider: "codex", userMessage: defaultInvestigationMessage() });
+    }
+  });
+
+  const terminalWidth = getTerminalWidth(stdout, 100);
+  const leftWidth = Math.max(42, Math.floor(terminalWidth * 0.52));
+  const rightWidth = Math.max(28, terminalWidth - leftWidth - 1);
+  const visibleTreeEntries = useMemo(
+    () => buildTreeViewport(snapshot.visibleEntries, snapshot.selectedEntryId, 17),
+    [snapshot.visibleEntries, snapshot.selectedEntryId]
+  );
+  const paneContent = useMemo(
+    () =>
+      snapshot.mode === "investigating"
+        ? { title: "Investigation", lines: buildInvestigationLines(snapshot) }
+        : buildInspectPaneContent({
+            productDir,
+            snapshot,
+            paneMode: snapshot.paneMode,
+          }),
+    [productDir, snapshot]
+  );
+  const summaryLines = snapshot.finished && snapshot.summaryData
+    ? renderSummaryBox(snapshot.summaryData.rows, { stdout })
+    : [];
+
+  return createElement(
+    Box,
+    { flexDirection: "column" },
+    createElement(Text, { key: "header" }, dim(buildHeaderText(snapshot))),
+    snapshot.notice ? createElement(Text, { key: "notice" }, yellow(snapshot.notice)) : null,
+    createElement(
+      Box,
+      { key: "main", marginTop: 1, flexDirection: "row" },
+      createElement(Box, { width: leftWidth, flexDirection: "column", paddingRight: 1 }, ...visibleTreeEntries.map(renderTreeLine.bind(null, snapshot, spinnerFrame))),
+      createElement(
+        Box,
+        { width: rightWidth, flexDirection: "column", paddingLeft: 1 },
+        createElement(Text, { key: "pane-title" }, bold(paneContent.title)),
+        createElement(Text, { key: "pane-gap" }, ""),
+        ...paneContent.lines.slice(0, 34).map((line, index) => createElement(Text, { key: `pane-${index}` }, line))
+      )
+    ),
+    snapshot.filter.active ? createElement(Text, { key: "filter-gap" }, "") : null,
+    snapshot.filter.active ? createElement(FilterBar, { key: "filter-bar", filter: snapshot.filter }) : null,
+    summaryLines.length > 0 ? createElement(Text, { key: "summary-gap" }, "") : null,
+    ...summaryLines.map((line, index) => createElement(Text, { key: `summary-${index}` }, line)),
+    createElement(Text, { key: "footer-gap" }, ""),
+    createElement(Text, { key: "footer" }, dim(buildFooterText(snapshot)))
+  );
+}
+
+export function buildHeaderText(snapshot) {
+  const progressText = snapshot.totalCount > 0 ? `[${snapshot.completedCount}/${snapshot.totalCount}]` : "[0/0]";
+  const phaseText = snapshot.phase || (snapshot.finished ? "run complete" : "preparing");
+  const sourceText = snapshot.dataSource === "artifact" ? "artifact inspect" : snapshot.finished ? "live summary" : "live run";
+  const filterText = snapshot.filter.active ? `filter ${snapshot.filter.count}` : null;
+  return [progressText, phaseText, sourceText, filterText].filter(Boolean).join(" · ");
+}
+
+export function buildFooterText(snapshot) {
+  if (snapshot.mode === "investigating") {
+    if (snapshot.agentSession?.status === "running" || snapshot.agentSession?.status === "starting") {
+      return "t transcript · x cancel investigation · q quit";
+    }
+    return "t transcript · b back · q quit";
+  }
+  if (!snapshot.finished) return "Run in progress";
+  if (snapshot.filter.active) {
+    return "type to filter · ↑/↓ move · Esc clear filter · q quit";
+  }
+  const inspectKeys = "↑/↓ move · Enter collapse/expand · Tab cycle pane · / filter";
+  if (!snapshot.selectedFailure) return `${inspectKeys} · q quit`;
+  return `${inspectKeys} · y investigate · c Claude · o Codex · q quit`;
+}
+
+export function formatAgentEntry(entry) {
+  if (!entry) return "";
+  if (entry.kind === "status") return `[status] ${entry.text}`;
+  if (entry.kind === "tool") return `[tool] ${entry.text}`;
+  if (entry.kind === "error") return `[error] ${entry.text}`;
+  return entry.text;
+}
+
+export function formatTimelineEntry(entry) {
+  if (!entry) return "";
+  if (entry.kind === "result") return entry.summary || "";
+  if (entry.kind === "notice") return `${entry.severity || "info"}: ${entry.message}`;
+  return entry.message || entry.summary || "";
+}
+
+function buildInvestigationLines(snapshot) {
+  const transcriptEntries = snapshot.agentSession?.transcriptEntries || [];
+  const timeline = snapshot.agentSession?.timeline || [];
+  const viewMode = snapshot.agentSession?.viewMode || "summary";
+  const status = snapshot.agentSession?.status || "idle";
+  const lines = [
+    `Status: ${status}`,
+    `Phase: ${snapshot.agentSession?.activePhase || "planning"}`,
+    "",
+  ];
+  if (viewMode === "transcript") {
+    for (const entry of transcriptEntries.slice(-28)) lines.push(formatAgentEntry(entry));
+    return lines;
+  }
+  for (const entry of timeline.slice(-16)) lines.push(formatTimelineEntry(entry));
+  if (timeline.length === 0 && snapshot.agentSession?.finalText) {
+    lines.push(snapshot.agentSession.finalText);
+  }
+  return lines;
+}
+
+function buildTreeViewport(entries, selectedEntryId, radius) {
+  if (entries.length <= radius * 2 + 1) return entries;
+  const selectedIndex = Math.max(0, entries.findIndex((entry) => entry.id === selectedEntryId));
+  const start = Math.max(0, selectedIndex - radius);
+  const end = Math.min(entries.length, selectedIndex + radius + 1);
+  return entries.slice(start, end);
+}
+
+function renderTreeLine(snapshot, spinnerFrame, entry) {
+  const selected = entry.id === snapshot.selectedEntryId;
+  const pointer = selected ? `${bold(">")} ` : "  ";
+  const indent = "  ".repeat(entry.depth);
+  const rawLabel = entry.label;
+  const match = entry.match;
+  const highlightedLabel = match?.field === "label"
+    ? applyHighlight(rawLabel, match.positions, bold)
+    : rawLabel;
+  const renderedLabel = decorateEntryLabel(entry, highlightedLabel, match);
+  const icon = entryIcon(entry, spinnerFrame);
+  const line = `${pointer}${indent}${icon ? `${icon} ` : ""}${renderedLabel}${entrySuffix(entry)}`;
+  return createElement(Text, { key: entry.id }, line);
+}
+
+function entryIcon(entry, spinnerFrame) {
+  if (entry.kind === "service" || entry.kind === "type") return "";
+  if (entry.kind === "suite") return entry.collapsed ? yellow("+") : yellow("-");
+  if (entry.status === "failed") return red(figures.cross);
+  if (entry.status === "passed") return green(figures.tick);
+  if (entry.status === "skipped") return yellow(figures.arrowDown);
+  if (entry.status === "running") return green(spinnerFrame);
+  if (entry.status === "not_run") return yellow("!");
+  return dim("·");
+}
+
+function decorateEntryLabel(entry, label, match) {
+  let rendered = label;
+  if (entry.kind === "service") rendered = colorService(label);
+  else if (entry.kind === "type") rendered = colorTypeBadge(label.toUpperCase());
+  else if (entry.kind === "suite") rendered = bold(label);
+
+  if (match?.field === "path" && entry.filePath) {
+    rendered += ` ${dim(`(${applyHighlight(entry.filePath, match.positions, bold)})`)}`;
+  }
+  return rendered;
+}
+
+function entrySuffix(entry) {
+  if (entry.kind === "file") {
+    const duration = entry.durationMs != null ? ` ${dim(formatDuration(entry.durationMs))}` : "";
+    return duration;
+  }
+  if (entry.summary?.total > 0) {
+    return dim(` (${entry.summary.total} files)`);
+  }
+  if (entry.skipReason) {
+    return ` ${dim(entry.skipReason)}`;
+  }
+  return "";
+}
+
+function isPrintableInput(input, key) {
+  if (!input) return false;
+  if (key.ctrl || key.meta || key.escape || key.return || key.tab) return false;
+  return input >= " ";
+}

package/lib/cli/tui/inspect-artifact-adapter.mjs

@@ -0,0 +1,3 @@
+export function hydrateInspectStateFromArtifact(inspectState, artifact) {
+  inspectState.hydrateFromArtifact(artifact);
+}

package/lib/cli/tui/inspect-live-adapter.mjs

@@ -0,0 +1,15 @@
+export function applyReporterPlans(inspectState, plans) {
+  inspectState.initFromPlans(plans);
+}
+
+export function applyReporterTaskStarted(inspectState, task, suiteKey) {
+  inspectState.markFileRunning(task.serviceName, suiteKey, task.file);
+}
+
+export function applyReporterTaskFinished(inspectState, task, outcome) {
+  inspectState.markFileFinished(task, outcome);
+}
+
+export function applyReporterRunSummary(inspectState, results, durationMs, regressionReport) {
+  inspectState.finish(results, durationMs, regressionReport);
+}