@elench/testkit 0.1.82 → 0.1.84

package/lib/cli/tui/run-session-app.mjs

@@ -0,0 +1,370 @@
+import React, { createElement, useEffect, useState } from "react";
+import { Box, Text, useAnimation, 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 { renderFailureBlock } from "../presentation/failure-presentation.mjs";
+import { getTerminalWidth } from "../presentation/terminal-layout.mjs";
+import { defaultInvestigationMessage } from "../agents/prompt-builder.mjs";
+import { loadInvestigationContext } from "../agents/investigation-context.mjs";
+
+const TREE_BRANCH = "\u251C\u2500\u2500 ";
+const TREE_LAST = "\u2514\u2500\u2500 ";
+const TREE_PIPE = "\u2502   ";
+const TREE_SPACE = "    ";
+const SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+
+export function RunSessionApp({
+  sessionState,
+  stdout,
+  productDir,
+  onInvestigate,
+  onRequestClose,
+  onCancelInvestigation,
+} = {}) {
+  const [snapshot, setSnapshot] = useState(() => sessionState.getSnapshot());
+  const [detailLines, setDetailLines] = useState([]);
+  const { frame } = useAnimation({ interval: 80, isActive: !snapshot.finished });
+  const spinnerFrame = SPINNER_FRAMES[frame % SPINNER_FRAMES.length];
+
+  useEffect(() => {
+    const unsubscribe = sessionState.subscribe(() => {
+      setSnapshot(sessionState.getSnapshot());
+    });
+    return unsubscribe;
+  }, [sessionState]);
+
+  useEffect(() => {
+    if (!snapshot.selectedFailure) {
+      setDetailLines([]);
+      return;
+    }
+    try {
+      const context = loadInvestigationContext({
+        productDir,
+        serviceName: snapshot.selectedFailure.serviceName,
+        filePath: snapshot.selectedFailure.filePath,
+      });
+      setDetailLines(context.detailLines);
+    } catch (error) {
+      setDetailLines([error instanceof Error ? error.message : String(error)]);
+    }
+  }, [productDir, snapshot.selectedFailure?.key]);
+
+  useInput((input, key) => {
+    if (!snapshot.finished) {
+      if (input === "q") sessionState.setNotice("Run is still in progress. Wait for completion before closing.");
+      return;
+    }
+
+    if (input === "q") {
+      onRequestClose?.();
+      return;
+    }
+
+    if (snapshot.mode === "complete") {
+      if (key.downArrow || input === "j") {
+        sessionState.selectNextFailure();
+        return;
+      }
+      if (key.upArrow || input === "k") {
+        sessionState.selectPreviousFailure();
+        return;
+      }
+      if (input === "y" || input === "i") {
+        if (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() });
+      }
+      return;
+    }
+
+    if (snapshot.mode === "investigating") {
+      if (input === "x") {
+        onCancelInvestigation?.();
+        return;
+      }
+      if (input === "b" && snapshot.agentSession?.status !== "running") {
+        sessionState.returnToSummary();
+      }
+    }
+  });
+
+  const treeElements = buildTreeElements({ snapshot, spinnerFrame, stdout });
+  const detailElements =
+    snapshot.mode === "investigating"
+      ? buildAgentPane(snapshot)
+      : buildFailureDetailPane(snapshot, detailLines);
+
+  const footerText = buildFooterText(snapshot);
+  const headerText = buildHeaderText(snapshot);
+  const summaryLines =
+    snapshot.finished && snapshot.summaryData
+      ? renderSummaryBox(snapshot.summaryData.rows, { stdout })
+      : [];
+  const terminalWidth = getTerminalWidth(stdout, 100);
+  const leftWidth = Math.max(42, Math.floor(terminalWidth * 0.58));
+  const rightWidth = Math.max(28, terminalWidth - leftWidth - 1);
+
+  return createElement(
+    Box,
+    { flexDirection: "column" },
+    createElement(Text, { key: "header" }, dim(headerText)),
+    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 }, ...treeElements),
+      createElement(Box, { width: rightWidth, flexDirection: "column", paddingLeft: 1 }, ...detailElements)
+    ),
+    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(footerText))
+  );
+}
+
+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 modeText = snapshot.mode === "investigating"
+    ? `investigating with ${snapshot.agentSession?.provider || "agent"}`
+    : snapshot.finished
+      ? "interactive summary"
+      : "live run tree";
+  return [progressText, phaseText, modeText].filter(Boolean).join(" · ");
+}
+
+export function buildFooterText(snapshot) {
+  if (!snapshot.finished) return "Run in progress";
+  if (snapshot.mode === "investigating") {
+    if (snapshot.agentSession?.status === "running" || snapshot.agentSession?.status === "starting") {
+      return "x cancel investigation · q quit";
+    }
+    return "b back to summary · q quit";
+  }
+  if (!snapshot.selectedFailure) return "q quit";
+  return "↑/↓ select failure · y investigate · c Claude · o Codex · q quit";
+}
+
+function buildTreeElements({ snapshot, spinnerFrame, stdout }) {
+  const elements = [];
+  for (let serviceIndex = 0; serviceIndex < snapshot.services.length; serviceIndex += 1) {
+    const service = snapshot.services[serviceIndex];
+    const isLastService = serviceIndex === snapshot.services.length - 1;
+    const serviceConnector = isLastService ? TREE_LAST : TREE_BRANCH;
+
+    if (service.skipped) {
+      elements.push(
+        createElement(
+          Text,
+          { key: `svc-${service.name}` },
+          `${serviceConnector}${colorService(service.name)} ${dim(service.skipReason || "skipped")}`
+        )
+      );
+      continue;
+    }
+
+    elements.push(
+      createElement(Text, { key: `svc-${service.name}` }, `${serviceConnector}${colorService(service.name)}`)
+    );
+
+    const serviceIndent = isLastService ? TREE_SPACE : TREE_PIPE;
+    for (let typeIndex = 0; typeIndex < service.types.length; typeIndex += 1) {
+      const typeNode = service.types[typeIndex];
+      const isLastType = typeIndex === service.types.length - 1;
+      const typeConnector = isLastType ? TREE_LAST : TREE_BRANCH;
+
+      if (typeNode.collapsed) {
+        const totalFiles = typeNode.suites.reduce((sum, suite) => sum + suite.fileCount, 0);
+        const totalDuration = typeNode.suites.reduce((sum, suite) => sum + suite.totalDurationMs, 0);
+        const allSkipped = typeNode.suites.every((suite) => suite.collapseStatus === "all_skipped");
+        const icon = allSkipped ? yellow(figures.arrowDown) : green(figures.tick);
+        const suffix = allSkipped
+          ? dim(`(${totalFiles} files skipped)`)
+          : dim(`(${totalFiles} files) ${formatDuration(totalDuration)}`);
+        elements.push(
+          createElement(
+            Text,
+            { key: `type-${service.name}-${typeNode.type}` },
+            `${serviceIndent}${typeConnector}${colorTypeBadge(typeNode.type.toUpperCase())} ${icon} ${suffix}`
+          )
+        );
+        continue;
+      }
+
+      elements.push(
+        createElement(
+          Text,
+          { key: `type-${service.name}-${typeNode.type}` },
+          `${serviceIndent}${typeConnector}${colorTypeBadge(typeNode.type.toUpperCase())}`
+        )
+      );
+
+      const typeIndent = serviceIndent + (isLastType ? TREE_SPACE : TREE_PIPE);
+      for (let suiteIndex = 0; suiteIndex < typeNode.suites.length; suiteIndex += 1) {
+        const suite = typeNode.suites[suiteIndex];
+        const isLastSuite = suiteIndex === typeNode.suites.length - 1;
+        const suiteConnector = isLastSuite ? TREE_LAST : TREE_BRANCH;
+
+        if (suite.collapsed) {
+          const icon = suite.collapseStatus === "all_skipped" ? yellow(figures.arrowDown) : green(figures.tick);
+          const suffix = suite.collapseStatus === "all_skipped"
+            ? dim(`(${suite.fileCount} files skipped)`)
+            : dim(`(${suite.fileCount} files) ${formatDuration(suite.totalDurationMs)}`);
+          elements.push(
+            createElement(
+              Text,
+              { key: `suite-${service.name}-${suite.key}` },
+              `${typeIndent}${suiteConnector}${icon} ${bold(suite.groupLabel)} ${suffix}`
+            )
+          );
+          continue;
+        }
+
+        const mixedLabel =
+          suite.passedCount > 0 && suite.passedCount < suite.fileCount
+            ? dim(` (${suite.fileCount} files · ${suite.passedCount} passed)`)
+            : "";
+        elements.push(
+          createElement(
+            Text,
+            { key: `suite-${service.name}-${suite.key}` },
+            `${typeIndent}${suiteConnector}${bold(suite.groupLabel)}${mixedLabel}`
+          )
+        );
+
+        const suiteIndent = typeIndent + (isLastSuite ? TREE_SPACE : TREE_PIPE);
+        for (let fileIndex = 0; fileIndex < suite.visibleFiles.length; fileIndex += 1) {
+          const file = suite.visibleFiles[fileIndex];
+          const isLastFile = fileIndex === suite.visibleFiles.length - 1;
+          const fileConnector = isLastFile ? TREE_LAST : TREE_BRANCH;
+          const failureKey = `${service.name}::${file.path}`;
+          const selected = failureKey === snapshot.selectedFailureKey;
+          const pointer = selected ? `${bold(">")} ` : "";
+          const icon = statusIcon(file.status, spinnerFrame);
+          const duration = file.durationMs != null ? ` ${dim(formatDuration(file.durationMs))}` : "";
+          elements.push(
+            createElement(
+              Text,
+              { key: `file-${service.name}-${file.path}` },
+              `${suiteIndent}${fileConnector}${pointer}${icon} ${file.displayName}${duration}`
+            )
+          );
+
+          if (file.status !== "failed" || (!file.error && !file.failureDetails)) continue;
+          const failureLines = renderFailureBlock(
+            {
+              serviceName: service.name,
+              type: suite.key.split(":")[0],
+              file: file.path,
+              framework: suite.framework,
+            },
+            {
+              error: file.error,
+              failureDetails: file.failureDetails || [],
+              failed: true,
+            },
+            {
+              width: Math.max(40, Math.floor(getTerminalWidth(stdout, 100) * 0.55)),
+              regressionCatalog: snapshot.regressionCatalog,
+            }
+          );
+          const failureIndent = suiteIndent + (isLastFile ? TREE_SPACE : TREE_PIPE);
+          for (let failureIndex = 0; failureIndex < failureLines.length; failureIndex += 1) {
+            elements.push(
+              createElement(
+                Text,
+                { key: `failure-${service.name}-${file.path}-${failureIndex}` },
+                `${failureIndent}${failureLines[failureIndex]}`
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+  return elements;
+}
+
+function buildFailureDetailPane(snapshot, detailLines) {
+  if (!snapshot.selectedFailure) {
+    return [
+      createElement(Text, { key: "detail-title" }, bold("Selected Failure")),
+      createElement(Text, { key: "detail-empty" }, dim("No failed file selected.")),
+    ];
+  }
+
+  const lines = detailLines.length > 0 ? detailLines : ["Loading failure details..."];
+  return [
+    createElement(Text, { key: "detail-title" }, bold("Selected Failure")),
+    createElement(
+      Text,
+      { key: "detail-path" },
+      `${snapshot.selectedFailure.serviceName} · ${snapshot.selectedFailure.filePath}`
+    ),
+    createElement(Text, { key: "detail-gap" }, ""),
+    ...lines.slice(0, 30).map((line, index) => createElement(Text, { key: `detail-${index}` }, line)),
+  ];
+}
+
+function buildAgentPane(snapshot) {
+  const entries = snapshot.agentSession?.entries || [];
+  const status = snapshot.agentSession?.status || "idle";
+  const statusText =
+    status === "running" || status === "starting"
+      ? yellow(`Status: ${status}`)
+      : status === "error"
+        ? red(`Status: ${status}`)
+        : green(`Status: ${status}`);
+
+  const renderedEntries = entries.length === 0
+    ? [createElement(Text, { key: "agent-empty" }, dim("Waiting for agent output..."))]
+    : entries.slice(-32).map((entry, index) =>
+        createElement(Text, { key: `agent-${index}` }, formatAgentEntry(entry))
+      );
+
+  return [
+    createElement(Text, { key: "agent-title" }, bold("Investigation")),
+    createElement(Text, { key: "agent-status" }, statusText),
+    createElement(Text, { key: "agent-gap" }, ""),
+    ...renderedEntries,
+  ];
+}
+
+export function formatAgentEntry(entry) {
+  if (entry.kind === "tool") return yellow(`[tool] ${entry.text}`);
+  if (entry.kind === "status") return dim(`[status] ${entry.text}`);
+  if (entry.kind === "error") return red(`[error] ${entry.text}`);
+  return entry.text;
+}
+
+function statusIcon(status, spinnerFrame) {
+  if (status === "pending") return dim(figures.bullet);
+  if (status === "running") return spinnerFrame;
+  if (status === "passed") return green(figures.tick);
+  if (status === "failed") return red(figures.cross);
+  if (status === "skipped") return yellow(figures.arrowDown);
+  if (status === "not_run") return dim(figures.bullet);
+  return dim(figures.bullet);
+}