openreport 0.1.0

package/src/screens/GenerationScreen.tsx

@@ -0,0 +1,278 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../components/layout/Header.js";
+import { Footer } from "../components/layout/Footer.js";
+import { AgentStatusList } from "../components/generation/AgentStatusList.js";
+import { StreamingOutput } from "../components/generation/StreamingOutput.js";
+import { ProgressSummary } from "../components/generation/ProgressSummary.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import { useReportGeneration } from "../hooks/useReportGeneration.js";
+import { getReportFilePath } from "../storage/report-store.js";
+import { openInBrowser } from "../report/open-browser.js";
+import { REPORT_TYPES } from "../config/defaults.js";
+import { formatDuration, formatTokens } from "../utils/format.js";
+import { getGradeTerminalColor } from "../utils/grade-colors.js";
+import type { LanguageModelV1 } from "ai";
+import type { Screen } from "../types/index.js";
+import type { OpenReportConfig } from "../config/schema.js";
+
+interface GenerationScreenProps {
+  projectRoot: string;
+  reportType: string;
+  model: LanguageModelV1;
+  modelId: string;
+  config: OpenReportConfig;
+  onNavigate: (screen: Screen, params?: Record<string, string>) => void;
+  generateTodoList?: boolean;
+}
+
+// Height consumed by header (2 lines: text + separator) and footer (2 lines: separator + text)
+const CHROME_HEIGHT = 4;
+// Height for progress summary area (3 lines: phase + bar + stats)
+const PROGRESS_HEIGHT = 3;
+// Height for title bar
+const TITLE_HEIGHT = 1;
+
+export function GenerationScreen({
+  projectRoot,
+  reportType,
+  model,
+  modelId,
+  config,
+  onNavigate,
+  generateTodoList,
+}: GenerationScreenProps) {
+  const { columns, rows } = useTerminalSize();
+
+  const {
+    phase,
+    phaseDetail,
+    agents,
+    agentStreams,
+    tokens,
+    elapsed,
+    report,
+    error,
+    abort,
+  } = useReportGeneration({ projectRoot, reportType, model, modelId, config, generateTodoList });
+
+  const reportTypeName =
+    REPORT_TYPES[reportType as keyof typeof REPORT_TYPES]?.name || reportType;
+
+  useInput((input, key) => {
+    if (key.escape) {
+      abort();
+      onNavigate("home");
+    } else if (input === "v" && report) {
+      onNavigate("viewer", { reportId: report.metadata.id });
+    } else if (input === "o" && report) {
+      getReportFilePath(projectRoot, report.metadata.id, ".html").then((htmlPath) => {
+        if (htmlPath) openInBrowser(htmlPath);
+      });
+    }
+  });
+
+  const completedCount = agents.filter(
+    (a) =>
+      a.status === "completed" ||
+      a.status === "failed" ||
+      a.status === "skipped"
+  ).length;
+
+  const totalTokens = tokens.input + tokens.output;
+
+  // Build agent name lookup for streaming panels
+  const agentNames = React.useMemo(() => {
+    const names: Record<string, string> = {};
+    for (const agent of agents) {
+      names[agent.agentId] = agent.agentName;
+    }
+    return names;
+  }, [agents]);
+
+  // Calculate available content height:
+  // total rows - chrome (header/footer) - title - progress - padding
+  const agentListHeight = agents.length + 1; // +1 for the header row
+  const contentHeight = rows - CHROME_HEIGHT - TITLE_HEIGHT - 2; // 2 for padding
+  const streamingAvailableHeight = Math.max(
+    3,
+    contentHeight - agentListHeight - PROGRESS_HEIGHT - 2
+  );
+
+  const actions = React.useMemo(
+    () =>
+      report
+        ? [
+            { key: "v", label: "View Report" },
+            { key: "o", label: "Open in Browser" },
+            { key: "esc", label: "Back" },
+          ]
+        : [{ key: "esc", label: "Cancel" }],
+    [report],
+  );
+
+  const statusText = React.useMemo(
+    () =>
+      !report && !error
+        ? `${formatDuration(elapsed)} | ${formatTokens(totalTokens)} tokens`
+        : undefined,
+    [report, error, elapsed, totalTokens],
+  );
+
+  // Phase label for header
+  const phaseLabel =
+    phase === "done"
+      ? "Complete"
+      : phase === "running-agents"
+        ? reportTypeName
+        : phase === "generating-todo"
+          ? "Generating Todo List"
+          : phase === "error"
+            ? "Error"
+            : reportTypeName;
+
+  return (
+    <Box flexDirection="column" width={columns} height={rows}>
+      {/* Header pinned at top */}
+      <Header modelName={modelId} phase={phaseLabel} />
+
+      {/* Main content area fills the middle */}
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        paddingX={1}
+        paddingY={0}
+      >
+        {error ? (
+          /* Error state */
+          <Box flexDirection="column" paddingY={1} gap={1}>
+            <Box gap={1}>
+              <Text color="red" bold>
+                ✗ Error
+              </Text>
+            </Box>
+            <Box
+              borderStyle="round"
+              borderColor="red"
+              paddingX={1}
+              paddingY={0}
+            >
+              <Text color="red" wrap="wrap">
+                {error}
+              </Text>
+            </Box>
+            <Text color="gray">
+              Check your provider configuration and try again.
+            </Text>
+          </Box>
+        ) : report ? (
+          /* Complete state */
+          <Box flexDirection="column" paddingY={1} gap={1}>
+            <Box gap={1}>
+              <Text color="green" bold>
+                ✓ Report generated successfully
+              </Text>
+            </Box>
+
+            <Box flexDirection="column" gap={0}>
+              <Box gap={1}>
+                <Text color="gray" dimColor>
+                  ID:
+                </Text>
+                <Text>{report.metadata.id}</Text>
+              </Box>
+              <Box gap={1}>
+                <Text color="gray" dimColor>
+                  Grade:
+                </Text>
+                <Text
+                  bold
+                  color={getGradeTerminalColor(report.metadata.grade || "B")}
+                >
+                  {report.metadata.grade || "—"}
+                </Text>
+              </Box>
+              <Box gap={1}>
+                <Text color="gray" dimColor>
+                  Duration:
+                </Text>
+                <Text>{formatDuration(elapsed)}</Text>
+              </Box>
+              <Box gap={1}>
+                <Text color="gray" dimColor>
+                  Tokens:
+                </Text>
+                <Text>{formatTokens(totalTokens)}</Text>
+              </Box>
+              {report.findingSummary && (
+                <Box gap={2} marginTop={1}>
+                  {report.findingSummary.critical > 0 && (
+                    <Text color="red" bold>
+                      {report.findingSummary.critical} critical
+                    </Text>
+                  )}
+                  {report.findingSummary.warning > 0 && (
+                    <Text color="yellow">
+                      {report.findingSummary.warning} warnings
+                    </Text>
+                  )}
+                  {report.findingSummary.info > 0 && (
+                    <Text color="cyan">
+                      {report.findingSummary.info} info
+                    </Text>
+                  )}
+                  {report.findingSummary.suggestion > 0 && (
+                    <Text color="green">
+                      {report.findingSummary.suggestion} suggestions
+                    </Text>
+                  )}
+                </Box>
+              )}
+            </Box>
+
+            {agents.length > 0 && <AgentStatusList agents={agents} />}
+          </Box>
+        ) : (
+          /* In-progress state */
+          <Box flexDirection="column" paddingY={0} gap={0}>
+            {/* Agent status list */}
+            {agents.length > 0 && <AgentStatusList agents={agents} />}
+
+            {/* Per-agent streaming output panels */}
+            {Object.keys(agentStreams).length > 0 && (
+              <Box marginTop={1}>
+                <StreamingOutput
+                  agentStreams={agentStreams}
+                  agentNames={agentNames}
+                  maxLinesPerAgent={Math.max(
+                    2,
+                    Math.min(6, streamingAvailableHeight - 2)
+                  )}
+                  availableHeight={streamingAvailableHeight}
+                />
+              </Box>
+            )}
+
+            {/* Progress summary pinned above footer */}
+            <Box marginTop={1}>
+              <ProgressSummary
+                completed={completedCount}
+                total={agents.length || 1}
+                tokens={tokens}
+                elapsed={elapsed}
+                phase={phase}
+                phaseDetail={phaseDetail}
+              />
+            </Box>
+          </Box>
+        )}
+      </Box>
+
+      {/* Footer pinned at bottom */}
+      <Footer
+        actions={actions}
+        statusText={statusText}
+      />
+    </Box>
+  );
+}

package/src/screens/HistoryScreen.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../components/layout/Header.js";
+import { Footer } from "../components/layout/Footer.js";
+import { Container } from "../components/layout/Container.js";
+import { ReportCard } from "../components/report/ReportCard.js";
+import { listReports, deleteReport } from "../storage/report-store.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import type { ReportMetadata, Screen } from "../types/index.js";
+
+interface HistoryScreenProps {
+  projectRoot: string;
+  onNavigate: (screen: Screen, params?: Record<string, string>) => void;
+}
+
+export function HistoryScreen({
+  projectRoot,
+  onNavigate,
+}: HistoryScreenProps) {
+  const [reports, setReports] = useState<ReportMetadata[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  useEffect(() => {
+    listReports(projectRoot, 50).then(setReports);
+  }, [projectRoot]);
+
+  useInput((input, key) => {
+    if (confirmDelete) {
+      if (input === "y" || input === "Y") {
+        const report = reports[selectedIndex];
+        if (report) {
+          deleteReport(projectRoot, report.id).then(() =>
+            listReports(projectRoot, 50).then((updated) => {
+              setReports(updated);
+              setSelectedIndex(Math.min(selectedIndex, updated.length - 1));
+            })
+          );
+        }
+        setConfirmDelete(false);
+      } else {
+        setConfirmDelete(false);
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => Math.min(reports.length - 1, prev + 1));
+    } else if (key.return) {
+      const report = reports[selectedIndex];
+      if (report) {
+        onNavigate("viewer", { reportId: report.id });
+      }
+    } else if (input === "d") {
+      if (reports.length > 0) {
+        setConfirmDelete(true);
+      }
+    } else if (key.escape || input === "q") {
+      onNavigate("home");
+    }
+  });
+
+  const { columns, rows } = useTerminalSize();
+
+  return (
+    <Box flexDirection="column" width={columns} height={rows}>
+      <Header />
+
+      <Container>
+        <Text bold>Past Reports</Text>
+
+        {reports.length === 0 ? (
+          <Box paddingY={1}>
+            <Text color="gray">No reports found. Generate your first report from the home screen.</Text>
+          </Box>
+        ) : (
+          <Box flexDirection="column" paddingY={1}>
+            {reports.map((report, i) => (
+              <ReportCard
+                key={report.id}
+                metadata={report}
+                selected={i === selectedIndex}
+              />
+            ))}
+          </Box>
+        )}
+
+        {confirmDelete && (
+          <Box paddingY={1}>
+            <Text color="red">
+              Delete this report? (y/n)
+            </Text>
+          </Box>
+        )}
+      </Container>
+
+      <Footer
+        actions={[
+          { key: "enter", label: "View" },
+          { key: "d", label: "Delete" },
+          { key: "esc", label: "Back" },
+        ]}
+      />
+    </Box>
+  );
+}

package/src/screens/HomeScreen.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../components/layout/Header.js";
+import { Footer } from "../components/layout/Footer.js";
+import { Container } from "../components/layout/Container.js";
+import { REPORT_TYPES } from "../config/defaults.js";
+import { detectProject } from "../utils/project-detector.js";
+import { listReports } from "../storage/report-store.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import type { ProjectClassification, Screen } from "../types/index.js";
+import type { OpenReportConfig } from "../config/schema.js";
+
+interface HomeScreenProps {
+  projectRoot: string;
+  modelName: string;
+  config: OpenReportConfig;
+  onNavigate: (screen: Screen, params?: Record<string, string>) => void;
+  onQuit: () => void;
+}
+
+const menuItems = [
+  ...Object.values(REPORT_TYPES).map((rt) => ({
+    id: rt.id,
+    label: rt.name,
+    description: rt.description,
+    type: "report" as const,
+  })),
+  { id: "separator", label: "─────", description: "", type: "separator" as const },
+  { id: "history", label: "View Past Reports", description: "", type: "action" as const },
+  { id: "settings", label: "Settings", description: "", type: "action" as const },
+];
+
+export function HomeScreen({
+  projectRoot,
+  modelName,
+  config,
+  onNavigate,
+  onQuit,
+}: HomeScreenProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [classification, setClassification] =
+    useState<ProjectClassification | null>(null);
+  const [reportCount, setReportCount] = useState(0);
+  const [todoListEnabled, setTodoListEnabled] = useState(config.features?.todoList ?? false);
+
+  useEffect(() => {
+    detectProject(projectRoot).then(setClassification).catch(() => setClassification(null));
+    listReports(projectRoot).then((reports) => setReportCount(reports.length));
+  }, [projectRoot]);
+
+  const selectableItems = menuItems.filter((item) => item.type !== "separator");
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) =>
+        Math.min(selectableItems.length - 1, prev + 1)
+      );
+    } else if (input === "t") {
+      setTodoListEnabled((prev) => !prev);
+    } else if (key.return) {
+      const item = selectableItems[selectedIndex];
+      if (item.type === "report") {
+        onNavigate("generation", { reportType: item.id, todoList: todoListEnabled ? "true" : "false" });
+      } else if (item.id === "history") {
+        onNavigate("history");
+      } else if (item.id === "settings") {
+        onNavigate("config");
+      }
+    } else if (input === "c") {
+      onNavigate("config");
+    } else if (input === "q") {
+      onQuit();
+    }
+  });
+
+  const projectInfo = classification
+    ? `${classification.framework || classification.language}${classification.language === "typescript" ? " + TypeScript" : ""}`
+    : "Detecting...";
+
+  const { columns, rows } = useTerminalSize();
+  let selectableIdx = 0;
+
+  return (
+    <Box flexDirection="column" width={columns} height={rows}>
+      <Header modelName={modelName} />
+
+      <Container>
+        <Box paddingY={0}>
+          <Text color="gray">
+            {projectRoot} ({projectInfo})
+          </Text>
+        </Box>
+
+        <Box
+          flexDirection="column"
+          paddingY={1}
+          borderStyle="single"
+          borderColor="gray"
+          paddingX={1}
+        >
+          {menuItems.map((item) => {
+            if (item.type === "separator") {
+              return (
+                <Text key={item.id} color="gray">
+                  {item.label}
+                </Text>
+              );
+            }
+
+            const currentIdx = selectableIdx++;
+            const isSelected = currentIdx === selectedIndex;
+            const label =
+              item.id === "history"
+                ? `${item.label} (${reportCount})`
+                : item.label;
+
+            return (
+              <Box key={item.id} flexDirection="row" gap={1}>
+                <Text color={isSelected ? "yellow" : "gray"}>
+                  {isSelected ? ">" : " "}
+                </Text>
+                <Text bold={isSelected} color={isSelected ? "white" : undefined}>
+                  {label}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      </Container>
+
+      <Footer
+        actions={[
+          { key: "enter", label: "Select" },
+          { key: "t", label: `Todo ${todoListEnabled ? "ON" : "OFF"}` },
+          { key: "c", label: "Config" },
+          { key: "q", label: "Quit" },
+        ]}
+      />
+    </Box>
+  );
+}

package/src/screens/ViewerScreen.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../components/layout/Header.js";
+import { Footer } from "../components/layout/Footer.js";
+import { Container } from "../components/layout/Container.js";
+import { ScrollableView } from "../components/report/ScrollableView.js";
+import { renderMarkdown } from "../components/report/MarkdownRenderer.js";
+import { loadReport, getReportFilePath } from "../storage/report-store.js";
+import { openInBrowser } from "../report/open-browser.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import type { Screen } from "../types/index.js";
+
+interface ViewerScreenProps {
+  projectRoot: string;
+  reportId: string;
+  onNavigate: (screen: Screen, params?: Record<string, string>) => void;
+}
+
+export function ViewerScreen({
+  projectRoot,
+  reportId,
+  onNavigate,
+}: ViewerScreenProps) {
+  const { columns, rows } = useTerminalSize();
+  const [content, setContent] = useState<string | null>(null);
+  const [rendered, setRendered] = useState<string>("");
+
+  useEffect(() => {
+    loadReport(projectRoot, reportId).then((md) => {
+      if (md) {
+        setContent(md);
+        setRendered(renderMarkdown(md));
+      }
+    });
+  }, [projectRoot, reportId, columns]);
+
+  useInput((input) => {
+    if (input === "o") {
+      getReportFilePath(projectRoot, reportId, ".html").then((htmlPath) => {
+        if (htmlPath) openInBrowser(htmlPath);
+      });
+    }
+  });
+
+  if (!content) {
+    return (
+      <Box flexDirection="column" width={columns} height={rows}>
+        <Header />
+        <Container>
+          <Text color="red">Report not found: {reportId}</Text>
+        </Container>
+        <Footer actions={[{ key: "esc", label: "Back" }]} />
+      </Box>
+    );
+  }
+
+  // Available height for scrollable content: total rows - header(2) - footer(2) - padding(2)
+  const viewHeight = rows - 6;
+
+  return (
+    <Box flexDirection="column" width={columns} height={rows}>
+      <Header />
+
+      <Container>
+        <ScrollableView
+          content={rendered}
+          height={viewHeight}
+          onExit={() => onNavigate("home")}
+        />
+      </Container>
+
+      <Footer
+        actions={[
+          { key: "↑↓", label: "Scroll" },
+          { key: "/", label: "Search" },
+          { key: "o", label: "Browser" },
+          { key: "q", label: "Back" },
+        ]}
+      />
+    </Box>
+  );
+}

package/src/storage/metadata.ts

@@ -0,0 +1,69 @@
+import * as fs from "fs";
+import * as path from "path";
+import { ReportMetadataSchema } from "../schemas/report.js";
+import type { ReportMetadata } from "../types/index.js";
+import { debugLog } from "../utils/debug.js";
+
+const SAFE_ID_REGEX = /^[a-zA-Z0-9_-]+$/;
+
+function validateReportId(id: string): void {
+  if (!SAFE_ID_REGEX.test(id)) {
+    throw new Error(`Invalid report ID: ${id}`);
+  }
+}
+
+export async function saveMetadata(
+  reportsDir: string,
+  metadata: ReportMetadata
+): Promise<void> {
+  validateReportId(metadata.id);
+  const metaPath = path.join(reportsDir, `${metadata.id}.meta.json`);
+  await fs.promises.mkdir(reportsDir, { recursive: true });
+  await fs.promises.writeFile(metaPath, JSON.stringify(metadata, null, 2), "utf-8");
+}
+
+export async function loadMetadata(metaPath: string): Promise<ReportMetadata | null> {
+  try {
+    const content = await fs.promises.readFile(metaPath, "utf-8");
+    return ReportMetadataSchema.parse(JSON.parse(content));
+  } catch (e) {
+    debugLog("metadata:read", e);
+    return null;
+  }
+}
+
+export async function listMetadata(reportsDir: string, limit?: number): Promise<ReportMetadata[]> {
+  try {
+    try { await fs.promises.access(reportsDir); } catch { return []; }
+
+    const allFiles = await fs.promises.readdir(reportsDir);
+    const files = allFiles.filter((f) => f.endsWith(".meta.json"));
+
+    const results = await Promise.all(
+      files.map((file) => loadMetadata(path.join(reportsDir, file)))
+    );
+
+    const metadataList = results.filter((m): m is ReportMetadata => m !== null);
+
+    metadataList.sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+
+    return limit ? metadataList.slice(0, limit) : metadataList;
+  } catch (e) {
+    debugLog("metadata:list", e);
+    return [];
+  }
+}
+
+export async function deleteMetadata(reportsDir: string, id: string): Promise<boolean> {
+  validateReportId(id);
+  try {
+    const metaPath = path.join(reportsDir, `${id}.meta.json`);
+    await fs.promises.unlink(metaPath);
+    return true;
+  } catch (e) {
+    debugLog("metadata:delete", e);
+    return false;
+  }
+}