fix(console): loading + error state for Contribute-to-explore (slow prepare)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: raymondfeng

packages/console/src/panels/Insights/InsightsReportCard.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, waitFor, act, fireEvent } from "@testing-library/react";
 import { InsightsReportCard } from "./index.js";
 import type { InsightsReportView } from "./insightsStream.js";
 
@@ -50,4 +50,53 @@ describe("InsightsReportCard", () => {
     render(<InsightsReportCard report={report} onContribute={() => {}} />);
     expect(screen.getByText("Contribute to explore →")).toBeTruthy();
   });
+
+  const contributeReport: InsightsReportView = {
+    totals: { sessions: 1, mostly: 1, partially: 0, not: 0 },
+    outcomes_summary: "1 session(s): 1 mostly achieved.",
+    narrative: "You ship.",
+    by_model: [],
+    friction: [],
+    publish_candidates: [{ sessionId: "c", goal: "deploy feature", why: "Succeeded" }],
+  };
+
+  it("disables the Contribute button and shows Preparing… while the prepare call is in flight", async () => {
+    let resolveContribute!: () => void;
+    const onContribute = () => new Promise<void>((r) => { resolveContribute = r; });
+
+    render(<InsightsReportCard report={contributeReport} onContribute={onContribute} />);
+    const btn = screen.getByText("Contribute to explore →") as HTMLButtonElement;
+    expect(btn.disabled).toBe(false);
+
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      const preparing = screen.getByText("Preparing…") as HTMLButtonElement;
+      expect(preparing).toBeTruthy();
+      expect(preparing.disabled).toBe(true);
+    });
+
+    act(() => { resolveContribute(); });
+
+    await waitFor(() => {
+      const restored = screen.getByText("Contribute to explore →") as HTMLButtonElement;
+      expect(restored.disabled).toBe(false);
+    });
+  });
+
+  it("shows an error and does not navigate when prepare rejects", async () => {
+    const originalHash = window.location.hash;
+    const onContribute = () => Promise.reject(new Error("server blew up"));
+
+    render(<InsightsReportCard report={contributeReport} onContribute={onContribute} />);
+    const btn = screen.getByText("Contribute to explore →");
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(screen.getByText(/server blew up/)).toBeTruthy();
+    });
+
+    expect(window.location.hash).toBe(originalHash);
+    expect((screen.getByText("Contribute to explore →") as HTMLButtonElement).disabled).toBe(false);
+  });
 });

packages/console/src/panels/Insights/index.tsx

@@ -125,7 +125,23 @@ export function Insights({ apiBase }: { apiBase: string }) {
   );
 }
 
-export function InsightsReportCard({ report, scanned, onBuild, onContribute }: { report: InsightsReportView; scanned?: number | null; onBuild?: () => void; onContribute?: () => void }) {
+export function InsightsReportCard({ report, scanned, onBuild, onContribute }: { report: InsightsReportView; scanned?: number | null; onBuild?: () => void; onContribute?: () => void | Promise<void> }) {
+  const [contributing, setContributing] = useState(false);
+  const [contributeError, setContributeError] = useState<string | null>(null);
+
+  const handleContribute = async () => {
+    if (!onContribute) return;
+    setContributing(true);
+    setContributeError(null);
+    try {
+      await onContribute();
+    } catch (e) {
+      setContributeError(e instanceof Error ? e.message : "Prepare failed.");
+    } finally {
+      setContributing(false);
+    }
+  };
+
   // Be honest about the cap: the report judges the most-recent sessions, which
   // can be fewer than were scanned (50-session batch bound, or unmissioned ones).
   const judged = report.totals.sessions;
@@ -161,8 +177,9 @@ export function InsightsReportCard({ report, scanned, onBuild, onContribute }: {
           <div className="analyze-candidate-head">
             <h4 style={{ margin: 0 }}>Worth publishing</h4>
             {onBuild && <button type="button" className="ledger-build" style={{ marginLeft: "auto" }} onClick={onBuild}>Build a Gem from this project →</button>}
-            {onContribute && <button type="button" className="ledger-build" onClick={onContribute}>Contribute to explore →</button>}
+            {onContribute && <button type="button" className="ledger-build" disabled={contributing} onClick={handleContribute}>{contributing ? "Preparing…" : "Contribute to explore →"}</button>}
           </div>
+          {contributeError && <p className="ledger-error">{contributeError}</p>}
           <ul className="analyze-include">
             {publishCandidates.map((c) => (
               <li key={c.sessionId}>