openreport 0.1.0

package/src/commands/run.ts

@@ -0,0 +1,168 @@
+import chalk from "chalk";
+import * as fs from "fs";
+import * as path from "path";
+import { loadConfig } from "../config/loader.js";
+import { createProviderRegistry } from "../config/providers.js";
+import { resolveProvider } from "../config/resolve-provider.js";
+import { ProgressTracker } from "../pipeline/progress.js";
+import { runPipeline } from "../pipeline/runner.js";
+import { saveReport } from "../storage/report-store.js";
+import { REPORT_TYPES } from "../config/defaults.js";
+import { formatDuration, formatTokens } from "../utils/format.js";
+import type { AgentStatus, PipelinePhase } from "../types/index.js";
+
+function logPhase(msg: string) {
+  process.stderr.write(`\r${chalk.cyan("\u25cf")} ${msg}   `);
+}
+
+function logDone(msg: string) {
+  process.stderr.write(`\r${chalk.green("\u2714")} ${msg}\n`);
+}
+
+export interface RunOptions {
+  model?: string;
+  provider?: string;
+  output?: string;
+  format?: "markdown" | "json";
+  quiet?: boolean;
+  todo?: boolean;
+}
+
+export async function runHeadless(
+  projectRoot: string,
+  reportType: string,
+  options: RunOptions = {}
+) {
+  // Validate report type
+  const validTypes = Object.keys(REPORT_TYPES);
+  if (!validTypes.includes(reportType)) {
+    console.error(
+      chalk.red(`Unknown report type: ${reportType}`)
+    );
+    console.log(
+      chalk.gray(`Valid types: ${validTypes.join(", ")}`)
+    );
+    process.exit(1);
+  }
+
+  const config = await loadConfig({
+    projectRoot,
+    cliFlags: {
+      ...(options.model ? { defaultModel: options.model } : {}),
+      ...(options.provider ? { defaultProvider: options.provider } : {}),
+    },
+  });
+
+  const registry = createProviderRegistry(config);
+  let model;
+  let modelId;
+  if (options.provider) {
+    model = registry.getModel(config);
+    modelId = config.defaultModel;
+  } else {
+    const resolved = await resolveProvider(config, registry);
+    model = resolved.model;
+    modelId = resolved.effectiveModel;
+    config.defaultProvider = resolved.effectiveProvider;
+    config.defaultModel = resolved.effectiveModel;
+  }
+
+  const progress = new ProgressTracker();
+  logPhase("Starting analysis...");
+
+  progress.on("phaseChange", (phase: PipelinePhase) => {
+    if (!options.quiet) {
+      logPhase(`Phase: ${phase}`);
+    }
+  });
+
+  progress.on("agentStatusChange", (status: AgentStatus) => {
+    if (!options.quiet) {
+      const icon =
+        status.status === "completed"
+          ? chalk.green("\u2713")
+          : status.status === "failed"
+            ? chalk.red("\u2717")
+            : status.status === "running"
+              ? chalk.cyan("\u25c9")
+              : chalk.gray("\u25cb");
+      logPhase(`${icon} ${status.agentName}: ${status.statusMessage || status.status}`);
+    }
+  });
+
+  try {
+    const report = await runPipeline({
+      projectRoot,
+      reportType,
+      model,
+      modelId,
+      config,
+      progress,
+      generateTodoList: options.todo ?? config.features?.todoList ?? false,
+    });
+
+    logDone("Analysis complete");
+
+    // Save report
+    const savedPath = await saveReport(projectRoot, report);
+
+    // Optionally save to custom output path
+    if (options.output) {
+      const outputPath = path.resolve(projectRoot, options.output);
+      await fs.promises.mkdir(path.dirname(outputPath), { recursive: true });
+
+      if (options.format === "json") {
+        await fs.promises.writeFile(
+          outputPath,
+          JSON.stringify(report, null, 2),
+          "utf-8"
+        );
+      } else {
+        await fs.promises.writeFile(outputPath, report.markdownContent, "utf-8");
+      }
+      console.log(chalk.gray(`Output: ${outputPath}`));
+    }
+
+    if (!options.quiet) {
+      const totalTokens =
+        report.metadata.tokens.input + report.metadata.tokens.output;
+
+      console.log();
+      console.log(chalk.green.bold("Report generated successfully!"));
+      console.log(chalk.gray(`ID: ${report.metadata.id}`));
+      console.log(chalk.gray(`Grade: ${report.metadata.grade}`));
+      console.log(
+        chalk.gray(`Duration: ${formatDuration(report.metadata.duration)}`)
+      );
+      console.log(chalk.gray(`Tokens: ${formatTokens(totalTokens)}`));
+      console.log(chalk.gray(`Saved: ${savedPath}`));
+      console.log();
+
+      // Print finding summary
+      const { findingSummary } = report;
+      if (findingSummary.critical > 0) {
+        console.log(
+          chalk.red(`  ${findingSummary.critical} critical findings`)
+        );
+      }
+      if (findingSummary.warning > 0) {
+        console.log(
+          chalk.yellow(`  ${findingSummary.warning} warnings`)
+        );
+      }
+      if (findingSummary.info > 0) {
+        console.log(chalk.blue(`  ${findingSummary.info} info`));
+      }
+      if (findingSummary.suggestion > 0) {
+        console.log(
+          chalk.magenta(`  ${findingSummary.suggestion} suggestions`)
+        );
+      }
+    }
+  } catch (err: unknown) {
+    process.stderr.write(`\r${chalk.red("\u2718")} Report generation failed\n`);
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error(chalk.red(msg));
+    process.exit(1);
+  }
+}

package/src/commands/view.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "ink";
+import { loadReport, listReports } from "../storage/report-store.js";
+import { ViewerScreen } from "../screens/ViewerScreen.js";
+import type { Screen } from "../types/index.js";
+
+export interface ViewOptions {
+  raw?: boolean;
+}
+
+export async function runView(
+  projectRoot: string,
+  reportId: string,
+  options: ViewOptions = {}
+) {
+  // If no exact ID, try to find a match
+  const reports = await listReports(projectRoot);
+  const match = reports.find(
+    (r) => r.id === reportId || r.id.startsWith(reportId)
+  );
+
+  if (!match) {
+    const available = reports.length > 0
+      ? `\nAvailable reports:\n${reports.slice(0, 5).map((r) => `  ${r.id} - ${r.type}`).join("\n")}`
+      : "";
+    throw new Error(`Report not found: ${reportId}${available}`);
+  }
+
+  const content = await loadReport(projectRoot, match.id);
+  if (!content) {
+    throw new Error(`Could not load report: ${match.id}`);
+  }
+
+  if (options.raw) {
+    console.log(content);
+    return;
+  }
+
+  // Render TUI viewer
+  const app = render(
+    <ViewerScreen
+      projectRoot={projectRoot}
+      reportId={match.id}
+      onNavigate={(_screen: Screen) => {
+        // In standalone view mode, just exit
+        app.unmount();
+      }}
+    />
+  );
+
+  await app.waitUntilExit();
+}

package/src/components/generation/AgentStatusItem.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import type { AgentStatus } from "../../types/index.js";
+import { truncate, formatDuration } from "../../utils/format.js";
+
+interface AgentStatusItemProps {
+  agent: AgentStatus;
+  /** Available width for the row, used to compute responsive column widths */
+  terminalWidth?: number;
+}
+
+export const AgentStatusItem = React.memo(function AgentStatusItem({
+  agent,
+  terminalWidth = 80,
+}: AgentStatusItemProps) {
+  const icon = getStatusIcon(agent.status);
+  const color = getStatusColor(agent.status);
+
+  // Calculate agent duration
+  const duration = agent.startedAt
+    ? (agent.completedAt || new Date()).getTime() - agent.startedAt.getTime()
+    : 0;
+
+  // Token display
+  const tokenStr = agent.tokensUsed
+    ? `${((agent.tokensUsed.input + agent.tokensUsed.output) / 1000).toFixed(1)}K`
+    : "";
+
+  // Responsive column widths
+  const isCompact = terminalWidth < 60;
+  const isNarrow = terminalWidth < 100;
+  const nameWidth = isCompact ? 16 : isNarrow ? 20 : 26;
+  const timeWidth = isCompact ? 6 : 8;
+  const tokenWidth = isCompact ? 0 : 8; // Hide tokens in compact mode
+  const statusMaxLen = isCompact
+    ? 20
+    : isNarrow
+      ? 35
+      : Math.max(20, terminalWidth - nameWidth - timeWidth - tokenWidth - 10);
+
+  return (
+    <Box flexDirection="row" gap={1}>
+      {/* Status icon */}
+      <Box width={2}>
+        {agent.status === "running" ? (
+          <Text color="cyan">
+            <Spinner type="dots" />
+          </Text>
+        ) : (
+          <Text color={color}>{icon}</Text>
+        )}
+      </Box>
+
+      {/* Agent name */}
+      <Box width={nameWidth}>
+        <Text color={color} bold={agent.status === "running"}>
+          {truncate(agent.agentName, nameWidth)}
+        </Text>
+      </Box>
+
+      {/* Status message */}
+      <Box flexGrow={1}>
+        <Text
+          color={agent.status === "running" ? "white" : "gray"}
+          dimColor={agent.status !== "running"}
+        >
+          {agent.error
+            ? truncate(agent.error, statusMaxLen)
+            : agent.statusMessage
+              ? truncate(agent.statusMessage, statusMaxLen)
+              : ""}
+        </Text>
+      </Box>
+
+      {/* Duration */}
+      {duration > 0 && (
+        <Box width={timeWidth} justifyContent="flex-end">
+          <Text color="gray" dimColor>
+            {formatDuration(duration)}
+          </Text>
+        </Box>
+      )}
+
+      {/* Tokens (hidden in compact mode) */}
+      {tokenStr && !isCompact && (
+        <Box width={tokenWidth} justifyContent="flex-end">
+          <Text color="gray" dimColor>
+            {tokenStr}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+function getStatusIcon(status: AgentStatus["status"]): string {
+  switch (status) {
+    case "pending":
+      return "○";
+    case "running":
+      return "●";
+    case "completed":
+      return "✓";
+    case "failed":
+      return "✗";
+    case "skipped":
+      return "−";
+  }
+}
+
+function getStatusColor(status: AgentStatus["status"]): string {
+  switch (status) {
+    case "pending":
+      return "gray";
+    case "running":
+      return "cyan";
+    case "completed":
+      return "green";
+    case "failed":
+      return "red";
+    case "skipped":
+      return "gray";
+  }
+}

package/src/components/generation/AgentStatusList.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { AgentStatusItem } from "./AgentStatusItem.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import type { AgentStatus } from "../../types/index.js";
+
+interface AgentStatusListProps {
+  agents: AgentStatus[];
+}
+
+export const AgentStatusList = React.memo(function AgentStatusList({ agents }: AgentStatusListProps) {
+  const { columns } = useTerminalSize();
+
+  if (agents.length === 0) return null;
+
+  const isCompact = columns < 60;
+  const isNarrow = columns < 100;
+  const nameWidth = isCompact ? 16 : isNarrow ? 20 : 26;
+  const timeWidth = isCompact ? 6 : 8;
+  const tokenWidth = isCompact ? 0 : 8;
+
+  return (
+    <Box flexDirection="column" gap={0}>
+      {/* Column headers */}
+      <Box flexDirection="row" gap={1} marginBottom={0}>
+        <Box width={2} />
+        <Box width={nameWidth}>
+          <Text color="gray" dimColor bold>
+            AGENT
+          </Text>
+        </Box>
+        <Box flexGrow={1}>
+          <Text color="gray" dimColor bold>
+            STATUS
+          </Text>
+        </Box>
+        <Box width={timeWidth} justifyContent="flex-end">
+          <Text color="gray" dimColor bold>
+            TIME
+          </Text>
+        </Box>
+        {!isCompact && (
+          <Box width={tokenWidth} justifyContent="flex-end">
+            <Text color="gray" dimColor bold>
+              TOKENS
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* Agent rows */}
+      {agents.map((agent) => (
+        <AgentStatusItem
+          key={agent.agentId}
+          agent={agent}
+          terminalWidth={columns}
+        />
+      ))}
+    </Box>
+  );
+}, (prev, next) => {
+  if (prev.agents.length !== next.agents.length) return false;
+  return prev.agents.every((a, i) => {
+    const b = next.agents[i];
+    return a.agentId === b.agentId
+      && a.status === b.status
+      && a.statusMessage === b.statusMessage
+      && a.tokensUsed === b.tokensUsed;
+  });
+});

package/src/components/generation/ProgressSummary.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatTokens, formatDuration } from "../../utils/format.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+
+interface ProgressSummaryProps {
+  completed: number;
+  total: number;
+  tokens: { input: number; output: number };
+  elapsed: number;
+  estimatedTimeRemaining?: number;
+  phase: string;
+  phaseDetail?: string;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  scanning: "Scanning project files...",
+  classifying: "Detecting project type...",
+  "pre-reading": "Reading project files...",
+  analyzing: "Orchestrator analyzing project...",
+  "running-agents": "Running analysis agents",
+  combining: "Generating executive summary...",
+  saving: "Saving report...",
+  done: "Complete!",
+};
+
+export function ProgressSummary({
+  completed,
+  total,
+  tokens,
+  elapsed,
+  estimatedTimeRemaining,
+  phase,
+  phaseDetail,
+}: ProgressSummaryProps) {
+  const { columns } = useTerminalSize();
+
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  // Responsive bar width: use ~40% of terminal width, clamped between 15 and 60
+  const barWidth = Math.max(15, Math.min(60, Math.floor((columns - 4) * 0.4)));
+  const filled = Math.round((percentage / 100) * barWidth);
+  const empty = barWidth - filled;
+
+  const bar = "━".repeat(filled) + "╌".repeat(empty);
+  const barColor = percentage === 100 ? "green" : "cyan";
+
+  const phaseLabel = PHASE_LABELS[phase] || phase;
+  const totalTokens = tokens.input + tokens.output;
+
+  const isCompact = columns < 60;
+
+  return (
+    <Box flexDirection="column" gap={0}>
+      {/* Phase indicator */}
+      <Box flexDirection="row" gap={1}>
+        <Text color={phase === "done" ? "green" : "cyan"} bold>
+          {phase === "done" ? "✓" : "●"}
+        </Text>
+        <Text color={phase === "done" ? "green" : "white"}>{phaseLabel}</Text>
+        {phaseDetail && (
+          <Text color="gray" dimColor> {phaseDetail}</Text>
+        )}
+      </Box>
+
+      {/* Progress bar */}
+      <Box flexDirection="row" gap={1} marginTop={0}>
+        <Text color={barColor}>{bar}</Text>
+        <Text bold color={barColor}>
+          {percentage}%
+        </Text>
+        <Text color="gray" dimColor>
+          ({completed}/{total} agents)
+        </Text>
+      </Box>
+
+      {/* Stats row */}
+      <Box flexDirection="row" gap={isCompact ? 1 : 3} marginTop={0}>
+        <Box gap={1}>
+          <Text color="gray" dimColor>
+            Tokens
+          </Text>
+          <Text color={totalTokens > 0 ? "yellow" : "gray"}>
+            {formatTokens(totalTokens)}
+          </Text>
+        </Box>
+        <Box gap={1}>
+          <Text color="gray" dimColor>
+            Elapsed
+          </Text>
+          <Text color="white">{formatDuration(elapsed)}</Text>
+        </Box>
+        {estimatedTimeRemaining !== undefined &&
+          estimatedTimeRemaining > 0 && (
+            <Box gap={1}>
+              <Text color="gray" dimColor>
+                ETA
+              </Text>
+              <Text color="white">
+                ~{formatDuration(estimatedTimeRemaining * 1000)}
+              </Text>
+            </Box>
+          )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/generation/StreamingOutput.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+
+interface AgentStreamInfo {
+  agentId: string;
+  agentName: string;
+  text: string;
+}
+
+interface StreamingOutputProps {
+  /** Per-agent stream data: Record<agentId, streamText> */
+  agentStreams: Record<string, string>;
+  /** Map of agentId to display name */
+  agentNames: Record<string, string>;
+  /** Maximum lines to show per agent panel */
+  maxLinesPerAgent?: number;
+  /** Available height for the streaming output area */
+  availableHeight?: number;
+}
+
+/**
+ * Displays live streaming output from multiple agents in separate panels.
+ * When terminal is wide enough (>= 80 cols), panels are side-by-side.
+ * When narrow, panels stack vertically.
+ * Only shows panels for agents that have active stream text.
+ */
+export const StreamingOutput = React.memo(function StreamingOutput({
+  agentStreams,
+  agentNames,
+  maxLinesPerAgent = 5,
+  availableHeight,
+}: StreamingOutputProps) {
+  const { columns } = useTerminalSize();
+
+  // Build the list of active agent streams
+  const activeStreams: AgentStreamInfo[] = Object.entries(agentStreams)
+    .filter(([_, text]) => text && text.trim().length > 0)
+    .map(([agentId, text]) => ({
+      agentId,
+      agentName: agentNames[agentId] || agentId,
+      text,
+    }));
+
+  if (activeStreams.length === 0) return null;
+
+  // Determine layout: side-by-side if wide enough, otherwise stacked
+  const MIN_PANEL_WIDTH = 38;
+  const usableWidth = columns - 2; // Account for container padding
+  const canFitSideBySide =
+    activeStreams.length > 1 && usableWidth >= MIN_PANEL_WIDTH * 2 + 1;
+
+  // If side-by-side, limit to max 3 panels across
+  const maxPanelsAcross = canFitSideBySide
+    ? Math.min(activeStreams.length, Math.floor(usableWidth / MIN_PANEL_WIDTH), 3)
+    : 1;
+
+  const panelWidth = canFitSideBySide
+    ? Math.floor(usableWidth / maxPanelsAcross)
+    : usableWidth;
+
+  // Determine lines per panel based on available height
+  const effectiveMaxLines = availableHeight
+    ? Math.max(2, Math.min(maxLinesPerAgent, availableHeight - 3))
+    : maxLinesPerAgent;
+
+  // Group streams into rows for side-by-side rendering
+  const rows: AgentStreamInfo[][] = [];
+  for (let i = 0; i < activeStreams.length; i += maxPanelsAcross) {
+    rows.push(activeStreams.slice(i, i + maxPanelsAcross));
+  }
+
+  return (
+    <Box flexDirection="column" gap={0}>
+      {rows.map((row, rowIndex) => (
+        <Box key={rowIndex} flexDirection="row" gap={0}>
+          {row.map((stream) => (
+            <AgentPanel
+              key={stream.agentId}
+              agentName={stream.agentName}
+              text={stream.text}
+              width={panelWidth}
+              maxLines={effectiveMaxLines}
+            />
+          ))}
+        </Box>
+      ))}
+    </Box>
+  );
+});
+
+interface AgentPanelProps {
+  agentName: string;
+  text: string;
+  width: number;
+  maxLines: number;
+}
+
+function AgentPanel({ agentName, text, width, maxLines }: AgentPanelProps) {
+  // Extract the last N meaningful lines efficiently:
+  // Instead of splitting the entire text, take only the tail portion
+  // to avoid creating a huge array from the full accumulated stream.
+  // We grab extra characters to account for potentially long or empty lines.
+  const tailChars = maxLines * 200;
+  const tail = text.length > tailChars ? text.slice(-tailChars) : text;
+  const allLines = tail.split("\n").filter((l) => l.trim().length > 0);
+  const lines = allLines.slice(-maxLines);
+
+  // Content width accounts for border (2 chars) and padding (2 chars)
+  const contentWidth = Math.max(10, width - 4);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      width={width}
+      paddingX={1}
+      paddingY={0}
+    >
+      {/* Panel header with agent name and spinner */}
+      <Box flexDirection="row" gap={1}>
+        <Text color="cyan">
+          <Spinner type="dots" />
+        </Text>
+        <Text color="cyan" bold>
+          {agentName.length > contentWidth - 4
+            ? agentName.slice(0, contentWidth - 7) + "..."
+            : agentName}
+        </Text>
+      </Box>
+
+      {/* Stream content */}
+      {lines.map((line, i) => {
+        const isLatest = i === lines.length - 1;
+        const displayLine =
+          line.length > contentWidth
+            ? line.slice(0, contentWidth - 3) + "..."
+            : line;
+        return (
+          <Text
+            key={i}
+            color={isLatest ? "white" : "gray"}
+            dimColor={!isLatest}
+            wrap="truncate"
+          >
+            {displayLine}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/layout/Container.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box } from "ink";
+import type { ReactNode } from "react";
+interface ContainerProps {
+  children: ReactNode;
+  padding?: number;
+}
+
+/**
+ * Content container that fills the middle area between Header and Footer.
+ * Uses flexGrow to take all remaining vertical space.
+ */
+export function Container({ children, padding = 1 }: ContainerProps) {
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={padding}
+      paddingY={0}
+      flexGrow={1}
+    >
+      {children}
+    </Box>
+  );
+}