@runfusion/fusion 0.26.0 → 0.27.1

package/dist/plugins/fusion-plugin-reports/src/aggregation.ts

@@ -0,0 +1,23 @@
+/**
+ * INTERIM SEAM — replaced by FN-3780's real aggregation orchestrator.
+ * Keep the type surface stable so FN-3780 can swap the implementation without renaming exports.
+ */
+import type { ReportsCadence } from "./cadence.js";
+
+export interface ReportAggregationInput {
+  runId: string;
+  cadence: ReportsCadence;
+  settings: Record<string, unknown>;
+}
+
+export interface ReportAggregationOutput {
+  summary: string;
+  sections: Array<{ id: string; title: string; body: string }>;
+}
+
+export type ReportsAggregator = (input: ReportAggregationInput) => Promise<ReportAggregationOutput>;
+
+export const aggregateReportData: ReportsAggregator = async ({ cadence }) => ({
+  summary: `Aggregation scaffold not yet implemented for ${cadence} reports.`,
+  sections: [],
+});

package/dist/plugins/fusion-plugin-reports/src/approval.ts

@@ -0,0 +1,97 @@
+import type { Report, ReportStatus } from "./store/report-types.js";
+
+export type ApprovalState = "not_required" | "awaiting_approval" | "approved" | "rejected" | "published";
+export type ApprovalAction = "approve" | "reject" | "publish";
+
+export interface ApprovalDecision {
+  decidedBy: string;
+  decidedAt: string;
+  note?: string;
+  action: ApprovalAction;
+}
+
+export interface ApprovalSettings {
+  approvalRequired: boolean;
+  autoPublishOnApproval: boolean;
+  approverAgentIds: string[];
+  publishTargets: string[];
+}
+
+export interface ApprovalActor {
+  id: string;
+  type: "human" | "agent";
+}
+
+export type ApprovalError = "invalid_transition" | "unauthorized";
+
+export function initializeApprovalState(reportStatus: ReportStatus, settings: ApprovalSettings): ApprovalState {
+  if (reportStatus !== "review_complete") return "not_required";
+  if (settings.approvalRequired) return "awaiting_approval";
+  return settings.autoPublishOnApproval ? "published" : "approved";
+}
+
+export function nextApprovalState(
+  current: ApprovalState,
+  action: ApprovalAction,
+  settings: ApprovalSettings,
+  actor: ApprovalActor,
+): { next: ApprovalState } | { error: ApprovalError } {
+  if (!isAuthorized(settings, actor)) return { error: "unauthorized" };
+  if (current === "awaiting_approval" && action === "approve") {
+    return { next: settings.autoPublishOnApproval ? "published" : "approved" };
+  }
+  if (current === "awaiting_approval" && action === "reject") return { next: "rejected" };
+  if (current === "approved" && action === "publish") return { next: "published" };
+  return { error: "invalid_transition" };
+}
+
+export function applyDecision(
+  report: Report,
+  decision: ApprovalDecision,
+  settings: ApprovalSettings,
+  actor: ApprovalActor,
+):
+  | { error: ApprovalError }
+  | {
+    updatedReport: Partial<Report>;
+    sideEffects: { publishTargets: string[] };
+  } {
+  const transition = nextApprovalState(report.approvalState, decision.action, settings, actor);
+  if ("error" in transition) return transition;
+
+  const approvalHistory = [...report.approvalHistory, decision];
+  const update: Partial<Report> = {
+    approvalState: transition.next,
+    approvalHistory,
+  };
+
+  if (transition.next === "approved") {
+    update.status = "approved";
+    update.approvedAt = decision.decidedAt;
+    update.approvedBy = decision.decidedBy;
+  }
+
+  if (transition.next === "published") {
+    update.status = "published";
+    update.publishedAt = decision.decidedAt;
+    if (decision.action === "approve") {
+      update.approvedAt = decision.decidedAt;
+      update.approvedBy = decision.decidedBy;
+    }
+  }
+
+  return {
+    updatedReport: update,
+    sideEffects: {
+      publishTargets: transition.next === "published" ? [...settings.publishTargets] : [],
+    },
+  };
+}
+
+function isAuthorized(settings: ApprovalSettings, actor: ApprovalActor): boolean {
+  if (!settings.approvalRequired) return true;
+  const approvers = settings.approverAgentIds;
+  if (approvers.length === 0) return actor.type === "human";
+  if (actor.type !== "agent") return false;
+  return approvers.includes(actor.id);
+}

package/dist/plugins/fusion-plugin-reports/src/cadence.ts

@@ -0,0 +1,23 @@
+import { getDailyEnabled, getTimezone, getWeeklyEnabled } from "./settings.js";
+
+export type ReportsCadence = "daily" | "weekly";
+
+export interface CadenceResolution {
+  cadence: ReportsCadence;
+  timezone: string;
+}
+
+export function resolveEnabledCadences(settings: Record<string, unknown>): CadenceResolution[] {
+  const timezone = getTimezone(settings);
+  const enabled: CadenceResolution[] = [];
+
+  if (getDailyEnabled(settings)) {
+    enabled.push({ cadence: "daily", timezone });
+  }
+
+  if (getWeeklyEnabled(settings)) {
+    enabled.push({ cadence: "weekly", timezone });
+  }
+
+  return enabled;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/ReportsView.css

@@ -0,0 +1,82 @@
+.reports-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+}
+.reports-view-header { display: flex; justify-content: space-between; align-items: center; }
+.reports-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); }
+.reports-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-md); }
+.reports-list { display: flex; flex-direction: column; gap: var(--space-sm); }
+.reports-list-item {
+  text-align: left;
+  border: var(--btn-border-width) solid var(--border);
+  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
+}
+.reports-list-item[data-selected="true"] {
+  border-color: var(--todo);
+  background: var(--card-hover);
+  box-shadow: var(--focus-ring-strong);
+}
+.reports-detail { display: flex; flex-direction: column; gap: var(--space-sm); }
+.reports-detail-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
+.reports-detail-body { display: flex; flex-direction: column; gap: var(--space-sm); }
+.reports-detail-meta {
+  color: var(--text-muted);
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
+}
+.reports-detail-sections {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+.reports-detail iframe, .reports-compare iframe { width: 100%; min-height: calc(var(--space-2xl) * 10); border: var(--btn-border-width) solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.reports-empty {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  justify-content: center;
+  min-height: calc(var(--space-2xl) * 6);
+  text-align: center;
+}
+.reports-empty p {
+  color: var(--text-muted);
+  margin: 0;
+}
+.reports-compare {
+  width: min(100%, calc(var(--space-2xl) * 32));
+  max-height: min(100%, calc(100dvh - var(--space-2xl)));
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+.reports-compare-header {
+  position: sticky;
+  top: 0;
+  background: var(--card);
+  z-index: 1;
+}
+.reports-compare-pickers {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-sm);
+}
+.reports-compare-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
+@media (max-width: 1024px) {
+  .reports-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .reports-compare-pickers,
+  .reports-compare-frames { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 900px) {
+  .reports-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 768px) {
+  .reports-filters { grid-template-columns: minmax(0, 1fr); }
+  .reports-layout { grid-template-columns: minmax(0, 1fr); }
+  .reports-compare {
+    width: min(100%, calc(100vw - var(--space-lg)));
+    max-height: min(100%, calc(100dvh - var(--space-lg)));
+  }
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/ReportsView.tsx

@@ -0,0 +1,24 @@
+import "./ReportsView.css";
+import { ReportComparisonDrawer } from "./components/ReportComparisonDrawer.js";
+import { ReportDetailPanel } from "./components/ReportDetailPanel.js";
+import { ReportEmptyState } from "./components/ReportEmptyState.js";
+import { ReportFiltersBar } from "./components/ReportFiltersBar.js";
+import { ReportListItem } from "./components/ReportListItem.js";
+import type { ToastType } from "./types.js";
+import { useReports } from "./useReports.js";
+import { useViewportMode } from "./useViewportMode.js";
+
+export function ReportsView({ projectId, addToast }: { projectId?: string; addToast: (message: string, type?: ToastType) => void }) {
+  const model = useReports({ projectId, addToast });
+  const { mobile } = useViewportMode();
+  const agents = [...new Set(model.reports.flatMap((r) => ((r.metadata?.agentIds as string[] | undefined) ?? [])))];
+  return <div className="reports-view">
+    <div className="reports-view-header"><h2>Reports</h2><button className="btn btn-sm" onClick={model.enterCompareMode}>Compare</button></div>
+    <ReportFiltersBar filters={model.filters} onChange={model.setFilters} agents={agents} />
+    <div className="reports-layout" data-mobile={mobile ? "true" : "false"}>
+      <div className="reports-list">{model.reports.length === 0 ? <ReportEmptyState /> : model.reports.map((report) => <ReportListItem key={report.id} report={report} selected={model.selectedId === report.id} onSelect={model.selectId} />)}</div>
+      <ReportDetailPanel report={model.selectedReport} projectId={projectId} />
+    </div>
+    {model.compareMode ? <ReportComparisonDrawer reports={model.reports} leftId={model.compareA} rightId={model.compareB} onPick={model.setCompareSlot} onClose={model.closeCompareMode} projectId={projectId} /> : null}
+  </div>;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/ReportComparisonDrawer.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import * as preview from "../useReportPreview.js";
+import { ReportComparisonDrawer } from "../components/ReportComparisonDrawer.js";
+
+describe("ReportComparisonDrawer", () => {
+  it("renders compare ui", () => {
+    vi.spyOn(preview, "useReportPreview").mockReturnValue({ html: "<article />", loading: false, error: null });
+    const { getByText } = render(<ReportComparisonDrawer reports={[{ id: "R-1", title: "A" }, { id: "R-2", title: "B" }] as never} leftId="R-1" rightId="R-2" onPick={vi.fn()} onClose={vi.fn()} />);
+    expect(getByText("Compare reports")).toBeInTheDocument();
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/ReportDetailPanel.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import * as preview from "../useReportPreview.js";
+import { ReportDetailPanel } from "../components/ReportDetailPanel.js";
+
+describe("ReportDetailPanel", () => {
+  it("renders report", () => {
+    vi.spyOn(preview, "useReportPreview").mockReturnValue({ html: "<article />", loading: false, error: null });
+    const { getByText } = render(<ReportDetailPanel report={{ id: "R-1", title: "Report", cadence: "daily", status: "published", periodStart: "2026-01-01", periodEnd: "2026-01-02" } as never} />);
+    expect(getByText("Report")).toBeInTheDocument();
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/ReportFiltersBar.test.tsx

@@ -0,0 +1,14 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ReportFiltersBar } from "../components/ReportFiltersBar.js";
+
+const filters = { cadence: "all", status: "all", from: "", to: "", q: "", agentId: "" } as const;
+
+describe("ReportFiltersBar", () => {
+  it("emits changes", async () => {
+    const onChange = vi.fn();
+    const { getByPlaceholderText } = render(<ReportFiltersBar filters={{ ...filters }} onChange={onChange} agents={[]} />);
+    fireEvent.change(getByPlaceholderText("Search title"), { target: { value: "hello" } });
+    await waitFor(() => expect(onChange).toBeCalled());
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/ReportsView.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import * as reportsHook from "../useReports.js";
+import { ReportsView } from "../ReportsView.js";
+
+describe("ReportsView", () => {
+  it("renders list and compare toggle", () => {
+    vi.spyOn(reportsHook, "useReports").mockReturnValue({
+      filters: { cadence: "all", status: "all", from: "", to: "", q: "", agentId: "" },
+      setFilters: vi.fn(),
+      reports: [{ id: "R-1", title: "A", cadence: "daily", status: "published", periodStart: "2026-01-01", periodEnd: "2026-01-02", metadata: {} }],
+      loading: false,
+      selectedId: "R-1",
+      selectedReport: { id: "R-1", title: "A", cadence: "daily", status: "published", periodStart: "2026-01-01", periodEnd: "2026-01-02", metadata: {} },
+      selectId: vi.fn(),
+      compareMode: false,
+      compareA: undefined,
+      compareB: undefined,
+      enterCompareMode: vi.fn(),
+      closeCompareMode: vi.fn(),
+      setCompareSlot: vi.fn(),
+    } as never);
+    const { getByText } = render(<ReportsView addToast={vi.fn()} />);
+    fireEvent.click(getByText("Compare"));
+    expect(getByText("Reports")).toBeInTheDocument();
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/api.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from "vitest";
+import { getReportExportUrl, getReportPreviewHtml, listReports } from "../api.js";
+
+describe("api", () => {
+  it("lists reports", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true, json: async () => ({ reports: [{ id: "R-1" }] }) }));
+    const reports = await listReports();
+    expect(reports).toHaveLength(1);
+  });
+
+  it("reads preview html", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true, text: async () => "<article/>" }));
+    await expect(getReportPreviewHtml("R-1")).resolves.toContain("article");
+  });
+
+  it("builds export url", () => {
+    expect(getReportExportUrl("R-1")).toContain("/reports/R-1/export.html");
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/useReportSectionDiff.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { diffReportSections } from "../useReportSectionDiff.js";
+
+describe("diffReportSections", () => {
+  it("classifies changed sections", () => {
+    const a = { metadata: { wins: ["a"] } } as never;
+    const b = { metadata: { wins: ["b"] } } as never;
+    const diff = diffReportSections(a, b);
+    expect(diff.changed.find((item) => item.id === "system-wins")).toBeTruthy();
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/__tests__/useReports.test.ts

@@ -0,0 +1,13 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import * as api from "../api.js";
+import { useReports } from "../useReports.js";
+
+describe("useReports", () => {
+  it("loads reports", async () => {
+    vi.spyOn(api, "listReports").mockResolvedValue([{ id: "R-1", title: "A" } as never]);
+    vi.spyOn(api, "getReport").mockResolvedValue({ id: "R-1", title: "A" } as never);
+    const { result } = renderHook(() => useReports({ addToast: vi.fn() }));
+    await waitFor(() => expect(result.current.reports).toHaveLength(1));
+  });
+});

package/dist/plugins/fusion-plugin-reports/src/dashboard/api.ts

@@ -0,0 +1,85 @@
+import type { ReportRecord } from "./types.js";
+import type { ShareBlocks } from "../share-blocks.js";
+
+const BASE = "/api/plugins/reports";
+
+interface ListReportsParams {
+  cadence?: string;
+  status?: string;
+  from?: string;
+  to?: string;
+  q?: string;
+  agentId?: string;
+  projectId?: string;
+}
+
+function qp(params: Record<string, string | undefined>): string {
+  const entries = Object.entries(params).filter(([, value]) => typeof value === "string" && value.length > 0) as Array<[string, string]>;
+  if (entries.length === 0) return "";
+  return `?${entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&")}`;
+}
+
+async function request<T>(path: string, init?: RequestInit, responseType: "json" | "text" = "json"): Promise<T> {
+  const response = await fetch(`${BASE}${path}`, init);
+  if (!response.ok) {
+    let message = `${response.status} ${response.statusText}`;
+    try {
+      const data = (await response.json()) as { error?: string };
+      if (data.error) message = data.error;
+    } catch {
+      // ignore
+    }
+    throw new Error(message);
+  }
+  if (responseType === "text") return (await response.text()) as T;
+  return (await response.json()) as T;
+}
+
+export async function listReports(params: ListReportsParams = {}): Promise<ReportRecord[]> {
+  const data = await request<{ reports: ReportRecord[] }>(`/reports${qp({ ...params })}`);
+  return data.reports;
+}
+
+export async function getReport(id: string, projectId?: string): Promise<ReportRecord> {
+  const data = await request<{ report: ReportRecord }>(`/reports/${encodeURIComponent(id)}${qp({ projectId })}`);
+  return data.report;
+}
+
+export function getReportPreviewHtml(id: string, projectId?: string): Promise<string> {
+  return request<string>(`/reports/${encodeURIComponent(id)}/preview.html${qp({ projectId })}`, undefined, "text");
+}
+
+export function getReportExportUrl(id: string, projectId?: string): string {
+  return `${BASE}/reports/${encodeURIComponent(id)}/export.html${qp({ projectId })}`;
+}
+
+export async function approveReport(id: string, note?: string): Promise<ReportRecord> {
+  const data = await request<{ report: ReportRecord }>(`/reports/${encodeURIComponent(id)}/approve`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(note ? { note } : {}),
+  });
+  return data.report;
+}
+
+export async function rejectReport(id: string, note?: string): Promise<ReportRecord> {
+  const data = await request<{ report: ReportRecord }>(`/reports/${encodeURIComponent(id)}/reject`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(note ? { note } : {}),
+  });
+  return data.report;
+}
+
+export async function publishReport(id: string): Promise<ReportRecord> {
+  const data = await request<{ report: ReportRecord }>(`/reports/${encodeURIComponent(id)}/publish`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: "{}",
+  });
+  return data.report;
+}
+
+export async function getShareBlocks(id: string): Promise<ShareBlocks> {
+  return request<ShareBlocks>(`/reports/${encodeURIComponent(id)}/share-blocks`);
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportApprovalPanel.css

@@ -0,0 +1,59 @@
+.report-approval-panel {
+  border-top: var(--btn-border-width) solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding-top: var(--space-md);
+}
+
+.report-approval-panel__header {
+  align-items: center;
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+.report-approval-panel__header h4 {
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.report-approval-panel__note {
+  min-height: calc(var(--space-2xl) * 2);
+}
+
+.card-status-badge--awaiting_approval {
+  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
+  color: var(--color-warning);
+}
+
+.card-status-badge--approved,
+.card-status-badge--published {
+  background: color-mix(in srgb, var(--color-success) 20%, transparent);
+  color: var(--color-success);
+}
+
+.card-status-badge--rejected {
+  background: color-mix(in srgb, var(--color-error) 20%, transparent);
+  color: var(--color-error);
+}
+
+.report-approval-panel__actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.report-approval-panel__history {
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin: 0;
+  padding-left: var(--space-lg);
+}
+
+@media (max-width: 768px) {
+  .report-approval-panel__actions {
+    flex-direction: column;
+  }
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportApprovalPanel.tsx

@@ -0,0 +1,58 @@
+import { useMemo, useState } from "react";
+import { approveReport, publishReport, rejectReport } from "../api.js";
+import type { ReportRecord } from "../types.js";
+import "./ReportApprovalPanel.css";
+
+interface Props {
+  report: ReportRecord;
+  onReportChange: (report: ReportRecord) => void;
+}
+
+export function ReportApprovalPanel({ report, onReportChange }: Props) {
+  const [note, setNote] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const approvalState = report.approvalState ?? "not_required";
+  const canApprove = approvalState === "awaiting_approval";
+  const canPublish = approvalState === "approved";
+
+  const history = useMemo(() => [...(report.approvalHistory ?? [])].reverse(), [report.approvalHistory]);
+
+  async function run(action: "approve" | "reject" | "publish") {
+    setBusy(true);
+    setError(null);
+    try {
+      const next = action === "approve"
+        ? await approveReport(report.id, note)
+        : action === "reject"
+          ? await rejectReport(report.id, note)
+          : await publishReport(report.id);
+      onReportChange(next);
+      setNote("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return <section className="report-approval-panel">
+    <div className="report-approval-panel__header">
+      <h4>Approval</h4>
+      <span className={`card-status-badge card-status-badge--${approvalState}`}>{approvalState}</span>
+    </div>
+    {canApprove ? <>
+      <textarea className="input report-approval-panel__note" value={note} onChange={(event) => setNote(event.target.value)} placeholder="Optional note" />
+      <div className="report-approval-panel__actions">
+        <button className="btn btn-primary" disabled={busy} onClick={() => run("approve")}>Approve</button>
+        <button className="btn btn-danger" disabled={busy} onClick={() => run("reject")}>Reject</button>
+      </div>
+    </> : null}
+    {canPublish ? <div className="report-approval-panel__actions"><button className="btn btn-primary" disabled={busy} onClick={() => run("publish")}>Publish</button></div> : null}
+    {error ? <div className="form-error">{error}</div> : null}
+    <ul className="report-approval-panel__history">
+      {history.map((item, index) => <li key={`${item.decidedAt}-${index}`}>{item.action} by {item.decidedBy} at {item.decidedAt}{item.note ? ` — ${item.note}` : ""}</li>)}
+    </ul>
+  </section>;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportComparisonDrawer.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import type { ReportRecord } from "../types.js";
+import { useReportPreview } from "../useReportPreview.js";
+import { useReportSectionDiff } from "../useReportSectionDiff.js";
+
+export function ReportComparisonDrawer({ reports, leftId, rightId, onPick, onClose, projectId }: { reports: ReportRecord[]; leftId?: string; rightId?: string; onPick: (slot: "a" | "b", id: string) => void; onClose: () => void; projectId?: string }) {
+  const left = useMemo(() => reports.find((r) => r.id === leftId), [reports, leftId]);
+  const right = useMemo(() => reports.find((r) => r.id === rightId), [reports, rightId]);
+  const leftPreview = useReportPreview(leftId, projectId);
+  const rightPreview = useReportPreview(rightId, projectId);
+  const diff = useReportSectionDiff(left, right);
+  return <div className="modal-overlay open reports-compare-overlay" role="dialog" aria-modal="true" aria-label="Compare reports">
+    <div className="modal modal-lg reports-compare">
+      <div className="modal-header reports-compare-header"><h3>Compare reports</h3><button className="btn btn-sm" onClick={onClose}>Close</button></div>
+      <div className="reports-compare-pickers"><select className="select" value={leftId ?? ""} onChange={(e) => onPick("a", e.target.value)}>{reports.map((r) => <option key={r.id} value={r.id}>{r.title}</option>)}</select>
+      <select className="select" value={rightId ?? ""} onChange={(e) => onPick("b", e.target.value)}>{reports.map((r) => <option key={r.id} value={r.id}>{r.title}</option>)}</select></div>
+      <div className="reports-compare-frames"><iframe sandbox="allow-same-origin" srcDoc={leftPreview.html} title="Report A" /><iframe sandbox="allow-same-origin" srcDoc={rightPreview.html} title="Report B" /></div>
+      <div>Changed: {diff.changed.map((s) => s.id).join(", ")}</div>
+    </div>
+  </div>;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportDetailPanel.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { getReportExportUrl } from "../api.js";
+import { useReportPreview } from "../useReportPreview.js";
+import type { ReportRecord } from "../types.js";
+import { ReportApprovalPanel } from "./ReportApprovalPanel.js";
+import { ShareBlocksPanel } from "./ShareBlocksPanel.js";
+
+const SECTION_IDS = ["summary", "system-wins", "system-highlights", "system-lowlights", "system-proposals", "system-deep-dives", "agent-card", "data-coverage", "review-panel"];
+
+export function ReportDetailPanel({ report, projectId }: { report?: ReportRecord; projectId?: string }) {
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const [currentReport, setCurrentReport] = useState<ReportRecord | undefined>(report);
+  useEffect(() => setCurrentReport(report), [report]);
+  const { html, loading, error } = useReportPreview(currentReport?.id, projectId);
+  const sections = useMemo(() => SECTION_IDS, []);
+  if (!currentReport) return <div className="reports-detail card">Select a report.</div>;
+  return <div className="reports-detail card">
+    <div className="reports-detail-header"><h3>{currentReport.title}</h3><a className="btn btn-sm" href={getReportExportUrl(currentReport.id, projectId)} download>Download standalone HTML</a></div>
+    <div className="reports-detail-meta">{currentReport.cadence} • {currentReport.status} • {currentReport.periodStart} → {currentReport.periodEnd}</div>
+    <div className="reports-detail-body">
+      <nav className="reports-detail-sections">{sections.map((section) => <button key={section} className="btn btn-sm" onClick={() => frameRef.current?.contentWindow?.document.querySelector(`[data-section="${section}"]`)?.scrollIntoView()}>{section}</button>)}</nav>
+      {loading ? <div>Loading preview...</div> : null}
+      {error ? <div>{error}</div> : null}
+      <iframe ref={frameRef} sandbox="allow-same-origin" srcDoc={html} title="Report preview" />
+    </div>
+    <ReportApprovalPanel report={currentReport} onReportChange={setCurrentReport} />
+    <ShareBlocksPanel report={currentReport} />
+  </div>;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportEmptyState.tsx

@@ -0,0 +1,3 @@
+export function ReportEmptyState() {
+  return <div className="reports-empty card"><h3>No reports found</h3><p>Adjust filters or enable schedules in settings.</p></div>;
+}

package/dist/plugins/fusion-plugin-reports/src/dashboard/components/ReportFiltersBar.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import type { ReportFilters } from "../types.js";
+
+export function ReportFiltersBar({ filters, onChange, agents }: { filters: ReportFilters; onChange: (next: ReportFilters) => void; agents: string[] }) {
+  const [query, setQuery] = useState(filters.q);
+  useEffect(() => {
+    const timeout = setTimeout(() => onChange({ ...filters, q: query }), 250);
+    return () => clearTimeout(timeout);
+  }, [query]);
+
+  return <div className="reports-filters">
+    <select className="select" value={filters.cadence} onChange={(e) => onChange({ ...filters, cadence: e.target.value as ReportFilters["cadence"] })}><option value="all">All cadence</option><option value="daily">Daily</option><option value="weekly">Weekly</option></select>
+    <select className="select" value={filters.status} onChange={(e) => onChange({ ...filters, status: e.target.value as ReportFilters["status"] })}><option value="all">All status</option><option value="generating">Generating</option><option value="review_pending">Review pending</option><option value="review_in_progress">Review in progress</option><option value="review_complete">Review complete</option><option value="approved">Approved</option><option value="published">Published</option><option value="failed">Failed</option></select>
+    <input className="input" type="date" value={filters.from} onChange={(e) => onChange({ ...filters, from: e.target.value })} />
+    <input className="input" type="date" value={filters.to} onChange={(e) => onChange({ ...filters, to: e.target.value })} />
+    <input className="input" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search title" />
+    <select className="select" value={filters.agentId} onChange={(e) => onChange({ ...filters, agentId: e.target.value })}><option value="">All agents</option>{agents.map((agent) => <option key={agent} value={agent}>{agent}</option>)}</select>
+  </div>;
+}