@graph8/sdk 0.362.0 → 0.373.0

package/blocks/company-intelligence/components/report-detail.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+/**
+ * ReportDetail: the complete screen for one research report. Reads it by id (so `?id=` deep links work), shows the
+ * markdown as safe formatted text (never HTML), lets a person edit the text, approve it into the knowledge base, see the
+ * model's recorded reasoning, write it again, or delete it.
+ *
+ * SDK operations, in order:
+ *   1. getResearchReport          GET    /research-reports/{report_id}           (read)
+ *   2. getResearchReportThinking  GET    /research-reports/{report_id}/thinking  (read)  the recorded reasoning, loaded when its tab opens
+ *   3. updateResearchReport       PATCH  /research-reports/{report_id}           (BILLABLE tier: it re-indexes the text into knowledge) ConfirmSpendDialog first
+ *   4. approveResearchReport      POST   /research-reports/{report_id}/approve   (write)  indexes the report into the knowledge base
+ *   5. unapproveResearchReport    POST   /research-reports/{report_id}/unapprove (write)  removes it from the index; the report stays
+ *   6. generateResearchReport     POST   /research-reports/generate              (BILLABLE) writes this report again; ConfirmSpendDialog first
+ *   7. deleteResearchReport       DELETE /research-reports/{report_id}           (DESTRUCTIVE) ConfirmSpendDialog first
+ * Editing sends only the text, and only when it changed; clearing it sends "" (the API ignores null). The edit form opens only
+ * once the report has loaded, and a save refreshes the cache so reopening shows the saved text. Confirms show what the report
+ * used the last time it ran when the API says so; there is no advance price.
+ */
+import { useState, type ReactNode } from "react";
+import { Check, Pencil, RefreshCw, Trash2, X } from "lucide-react";
+import { Button, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList, EmptyValue } from "@/g8/components/screen/key-value-list";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { INTEL_KEY, refreshIntelligence, useResearchTarget } from "../hooks/use-intelligence";
+import { eventLine, humanize, intelBody, isGenerating, lastRunCredits, reportEdit, rowsOf, text, when } from "../lib/intelligence-types";
+import type { ReportDetailBody, ThinkingEvent } from "../lib/intelligence-types";
+import { SafeMarkdown } from "../lib/safe-markdown";
+
+export interface ReportDetailProps {
+  reportId: string;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after any write (and after a delete, with the report gone), so the parent list refreshes. */
+  onChanged?: () => void;
+  extraActions?: ReactNode;
+  extraTabs?: { id: string; label: string; content: ReactNode }[];
+}
+
+const EVENTS_SHOWN = 50;
+
+function Reasoning({ reportId }: { reportId: string }) {
+  const [all, setAll] = useState(false);
+  const q = useG8Query(async (signal) => rowsOf<ThinkingEvent>(intelBody(await g8Get(`/research-reports/${encodeURIComponent(reportId)}/thinking`, undefined, { signal })), "events"), [reportId], { key: [INTEL_KEY, "thinking", reportId] });
+  if (q.error) return <ApiError error={q.error} title="Could not load the reasoning" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" />;
+  if (q.data.length === 0) return <EmptyState title="No reasoning recorded" description="The model's steps are kept for a limited time after a report is written." compact />;
+  const shown = all ? q.data : q.data.slice(0, EVENTS_SHOWN);
+  return (
+    <div className="space-y-2">
+      <ol className="space-y-1.5 text-sm">
+        {shown.map((e, i) => (
+          <li key={i} className="flex gap-2">
+            <span className="w-20 shrink-0 text-xs tabular-nums text-muted-foreground">{e.timestamp ? new Date(e.timestamp).toLocaleTimeString() : ""}</span>
+            <StatusPill tone="neutral" quiet>{humanize(e.type ?? "event")}</StatusPill>
+            <span className="min-w-0 break-words">{eventLine(e)}</span>
+          </li>
+        ))}
+      </ol>
+      {q.data.length > EVENTS_SHOWN ? (
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span role="status">Showing {shown.length.toLocaleString()} of {plural(q.data.length, "step")}</span>
+          <Button type="button" variant="outline" size="sm" onClick={() => setAll((v) => !v)}>{all ? "Show fewer" : "Show all"}</Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function ReportDetail({ reportId, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: ReportDetailProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const target = useResearchTarget();
+  const [draft, setDraft] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [problem, setProblem] = useState<unknown>(null);
+  const query = useG8Query(async (signal) => intelBody<ReportDetailBody>(await g8Get(`/research-reports/${encodeURIComponent(reportId)}`, undefined, { signal })), [reportId], { key: [INTEL_KEY, "report", reportId] });
+  const report = query.data;
+
+  if (query.error) return <ApiError error={query.error} title="Could not load the report" onRetry={() => void query.refetch()} />;
+  if (!report) return <Skeleton className="h-40 w-full" />;
+
+  const title = text(report.report_title) ?? humanize(report.report_type ?? "report");
+  const generating = isGenerating(report.status);
+  const original = report.markdown_content ?? "";
+  const value = draft ?? original;
+  const edit = reportEdit(original, value);
+  const credits = lastRunCredits(report);
+  const website = text(report.website_url) ?? target.primary;
+  const changed = () => { void refreshIntelligence(); void query.refetch(); onChanged?.(); };
+
+  const save = () => edit && ask({
+    tier: "billable", title: `Save changes to ${title}`, confirmLabel: "Save",
+    description: <p>Saving replaces the report text and re-indexes it in your knowledge base, which uses credits. The API gives no price in advance.</p>,
+    run: () => g8Patch(`/research-reports/${encodeURIComponent(reportId)}`, edit),
+    onDone: () => { setDraft(null); changed(); },
+  });
+  const rewrite = () => ask({
+    tier: "billable", title: `Write ${title} again`, confirmLabel: "Write again", estimatedCredits: credits ?? undefined,
+    description: <p>Runs this 1 report in full and replaces the current text.{credits != null ? " The credits shown are what it used the last time." : " The API gives no price in advance."}</p>,
+    run: () => g8Post("/research-reports/generate", { website_url: website, report_number: report.report_number }), onDone: changed,
+  });
+  const remove = () => ask({
+    tier: "destructive", title: `Delete ${title}`, confirmLabel: "Delete", affected: 1,
+    description: <p>Deletes this report. Writing it again is a full run{credits != null ? `, which used ${credits.toLocaleString()} credits last time` : ""}.</p>,
+    run: () => g8Delete(`/research-reports/${encodeURIComponent(reportId)}`), tolerateStatus: [404],
+    onDone: () => { setDraft(null); void refreshIntelligence(); onChanged?.(); onClose?.(); },
+  });
+  const approve = async (on: boolean) => {
+    setBusy(true);
+    setProblem(null);
+    try { await g8Post(`/research-reports/${encodeURIComponent(reportId)}/${on ? "approve" : "unapprove"}`); changed(); } catch (err) { setProblem(err); } finally { setBusy(false); }
+  };
+
+  const approved = Boolean(report.approved);
+  const actions = (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button type="button" size="sm" variant="outline" disabled={busy || generating} onClick={() => void approve(!approved)} title="Approved reports are indexed into the knowledge base that campaigns and the copilot read">
+        {approved ? <X className="size-3.5" aria-hidden /> : <Check className="size-3.5" aria-hidden />}{approved ? "Remove from knowledge" : "Approve into knowledge"}
+      </Button>
+      <Button type="button" size="sm" variant="outline" disabled={generating || !website || report.report_number == null} onClick={rewrite}><RefreshCw className="size-3.5" aria-hidden />Write again</Button>
+      <Button type="button" size="sm" variant="ghost" onClick={remove}><Trash2 className="size-3.5" aria-hidden />Delete</Button>
+      {extraActions}
+    </div>
+  );
+  const tabs = [
+    {
+      id: "report", label: "Report",
+      content: (
+        <div className="space-y-3">
+          {report.error_message ? <p role="alert" className="text-sm text-error-foreground">{report.error_message}</p> : null}
+          {text(report.markdown_content) ? <SafeMarkdown markdown={report.markdown_content as string} /> : <EmptyState title={generating ? "Writing the report" : "No text yet"} description={generating ? "This page updates when it is done." : "This report has not been written."} compact />}
+        </div>
+      ),
+    },
+    {
+      id: "edit", label: "Edit",
+      content: (
+        <form className="space-y-3" onSubmit={(e) => { e.preventDefault(); save(); }}>
+          {generating ? <p className="text-sm text-muted-foreground">The report is being written. Edit it once it is done.</p> : null}
+          <Textarea aria-label="Report text" rows={18} value={value} disabled={generating} onChange={(e) => setDraft(e.target.value)} className="font-mono text-xs" />
+          <div className="flex items-center gap-2">
+            <Button type="submit" size="sm" disabled={!edit || generating}><Pencil className="size-3.5" aria-hidden />Save changes</Button>
+            {draft !== null ? <Button type="button" size="sm" variant="ghost" onClick={() => setDraft(null)}>Discard changes</Button> : null}
+          </div>
+        </form>
+      ),
+    },
+    { id: "reasoning", label: "Reasoning", content: <Reasoning reportId={reportId} /> },
+    {
+      id: "details", label: "Details",
+      content: (
+        <KeyValueList columns={2} items={[
+          { label: "Type", value: text(report.report_type) ?? <EmptyValue />, mono: true },
+          { label: "Number", value: report.report_number ?? <EmptyValue /> },
+          { label: "Website", value: website ?? <EmptyValue /> },
+          { label: "Approved", value: approved ? (when(report.approved_at) ?? "Yes") : "No" },
+          { label: "Created", value: when(report.created_at) ?? <EmptyValue /> },
+          { label: "Completed", value: when(report.completed_at) ?? <EmptyValue /> },
+          { label: "Credits used last time", value: credits ?? <EmptyValue /> },
+        ]} />
+      ),
+    },
+  ];
+  return (
+    <>
+      <DetailPanel
+        title={title}
+        subtitle={text(report.website_url) ?? undefined}
+        badges={<StatusPill tone={toneForStatus(report.status ?? "")}>{generating ? "Generating" : humanize(report.status ?? "unknown")}</StatusPill>}
+        actions={actions}
+        tabs={extraTabs?.length ? [...tabs, ...extraTabs] : tabs}
+        onClose={onClose}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+      />
+      {failure || problem ? <ApiError error={failure ?? problem} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}

package/blocks/company-intelligence/components/research-reports.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+/**
+ * ResearchReports: the six research reports about your market (review sentiment, competitive teardown, voice of customer,
+ * GTM channels, analyst and media, buyer psychology) and the workflow that writes them. Start one or all, retry a failed
+ * one, resume what is missing, stop a run, reset the workflow. Click a finished report to open it.
+ *
+ * SDK operations, in order:
+ *   1. getIntelligencePrimaryWebsite  GET  /intelligence/primary-website          (read, through useResearchTarget)
+ *   2. getResearchWorkflowStatus      GET  /research-reports/workflow?website_url (read)  all six slots; re-read every 5 s while one generates
+ *   3. generateResearchReport         POST /research-reports/generate             (BILLABLE) one report; ConfirmSpendDialog first
+ *   4. generateAllResearchReports     POST /research-reports/generate-all         (BILLABLE) all six; ConfirmSpendDialog first
+ *   5. resumeResearchWorkflow         POST /research-reports/workflow/resume      (BILLABLE) every report that is not finished; ConfirmSpendDialog first
+ *   6. retryResearchReport            POST /research-reports/retry                (BILLABLE) one failed report; ConfirmSpendDialog first
+ *   7. stopAllResearch                POST /research-reports/stop-all             (write)    cancels what has not started; what already ran stays paid for
+ *   8. resetResearchWorkflow          POST /research-reports/workflow/reset       (DESTRUCTIVE) discards the workflow's progress; ConfirmSpendDialog first
+ * The API quotes no price: every confirm states the number of reports it will write (computed from the six slots on screen),
+ * never a fixed cost.
+ */
+import { useRef } from "react";
+import { FileSearch, OctagonX, Play, RotateCcw } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { RecordLink } from "@/g8/components/screen/record-link";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { refreshIntelligence, useResearchTarget, useWorkflow } from "../hooks/use-intelligence";
+import { REPORT_TYPES, humanize, incompleteSlots, isGenerating, isReportDone, slotsOf, text, whenDate } from "../lib/intelligence-types";
+import type { ReportSlot, WorkflowStatus } from "../lib/intelligence-types";
+
+export interface ResearchReportsProps {
+  /** Called when a person opens a report that has been generated. */
+  onSelect?: (slot: ReportSlot) => void;
+  /** The open report's id, to mark its row. */
+  selectedId?: string;
+  /** The URL param the owning screen reads for the open report. */
+  idParam?: string;
+  /** Called after any write, so a parent can refresh its own numbers. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const slotTitle = (s: ReportSlot): string => text(s.report_title) ?? humanize(s.report_type);
+const titles = (slots: ReportSlot[]): string => slots.map(slotTitle).join(", ");
+
+export function ResearchReports({ onSelect, selectedId, idParam, onChanged, className }: ResearchReportsProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const target = useResearchTarget();
+  const host = target.primary;
+  const { workflow, error, refetch } = useWorkflow(host);
+  const slots = slotsOf(workflow ?? undefined);
+  const generating = slots.some((s) => isGenerating(s.status));
+  // A failed or superseded refetch resolves undefined: keep the last known workflow so polling continues while a report writes.
+  const latest = useRef<WorkflowStatus | undefined>(undefined);
+  latest.current = workflow ?? latest.current;
+  useJobPoll<WorkflowStatus>(async () => (await refetch()) ?? latest.current ?? {}, {
+    enabled: generating, intervalMs: 5000, maxAttempts: 360,
+    isTerminal: (w) => !slotsOf(w).some((s) => isGenerating(s.status)),
+    onDone: () => { void refreshIntelligence(); onChanged?.(); },
+  });
+  const done = () => { void refetch(); void refreshIntelligence(); onChanged?.(); };
+
+  if (target.loading) return <Skeleton className="h-40 w-full" />;
+  if (!host) return <EmptyState title="Research a website first" description="The reports are written about your company's website. Start the website research on the Overview tab." icon={<FileSearch />} />;
+  if (error) return <ApiError error={error} title="Could not load the reports" onRetry={() => void refetch()} />;
+  if (!workflow) return <Skeleton className="h-40 w-full" />;
+
+  const finished = slots.filter((s) => isReportDone(s.status));
+  const missing = incompleteSlots(slots);
+  const withContent = slots.filter((s) => s.has_content);
+  const generate = (s: ReportSlot) => ask({
+    tier: "billable", title: `Write report ${s.report_number}: ${slotTitle(s)}`, confirmLabel: "Write report",
+    description: <p>A long multi-pass run against your market, your site and your competitors writes this 1 report. The API gives no price in advance: it is metered by usage.{isReportDone(s.status) ? " It replaces the finished version." : ""}</p>,
+    run: () => g8Post("/research-reports/generate", { website_url: host, report_number: s.report_number }), onDone: done,
+  });
+  const retry = (s: ReportSlot) => ask({
+    tier: "billable", title: `Retry report ${s.report_number}: ${slotTitle(s)}`, confirmLabel: "Retry report",
+    description: <p>Runs this 1 failed report again in full. The API gives no price in advance: it is metered by usage.</p>,
+    run: () => g8Post("/research-reports/retry", { website_url: host, report_type: s.report_type }), onDone: done,
+  });
+  const generateAll = () => ask({
+    tier: "billable", title: `Write all ${plural(slots.length || REPORT_TYPES.length, "report")}`, confirmLabel: "Write all",
+    description: <p>Writes {slots.length || REPORT_TYPES.length} reports, each a long multi-pass run.{finished.length ? ` ${plural(finished.length, "report")} already finished will be written again.` : ""} The API gives no price in advance: it is metered by usage, and what already ran stays paid for if you stop.</p>,
+    run: () => g8Post("/research-reports/generate-all", { website_url: host }), onDone: done,
+  });
+  const resume = () => ask({
+    tier: "billable", title: `Write the ${plural(missing.length, "missing report")}`, confirmLabel: "Write missing",
+    description: <p>Writes the {plural(missing.length, "report")} that {missing.length === 1 ? "is" : "are"} not finished: {titles(missing)}. The API gives no price in advance: it is metered by usage.</p>,
+    run: () => g8Post("/research-reports/workflow/resume"), onDone: done,
+  });
+  const reset = () => ask({
+    tier: "destructive", title: "Reset the research workflow", confirmLabel: "Reset", affected: withContent.length,
+    description: <p>Discards the workflow's progress, including {plural(withContent.length, "report")} with content. Writing them again is a full run each.</p>,
+    run: () => g8Post("/research-reports/workflow/reset", { website_url: host }), onDone: done,
+  });
+  const stop = () => ask({
+    tier: "destructive", title: "Stop the running reports", confirmLabel: "Stop", affected: slots.filter((s) => isGenerating(s.status)).length,
+    description: <p>Cancels the reports that have not started. What already ran stays and has already been charged for.</p>,
+    run: () => g8Post("/research-reports/stop-all", { website_url: host }), onDone: done,
+  });
+
+  return (
+    <div className={className}>
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <Button type="button" size="sm" onClick={generateAll} disabled={generating}><Play className="size-3.5" aria-hidden />Write all reports</Button>
+        <Button type="button" size="sm" variant="outline" onClick={resume} disabled={generating || missing.length === 0}>Write missing ({missing.length})</Button>
+        <Button type="button" size="sm" variant="outline" onClick={stop} disabled={!generating}><OctagonX className="size-3.5" aria-hidden />Stop</Button>
+        <Button type="button" size="sm" variant="ghost" onClick={reset} disabled={generating || withContent.length === 0}><RotateCcw className="size-3.5" aria-hidden />Reset workflow</Button>
+        <span className="ml-auto text-xs text-muted-foreground tabular-nums" role="status">{workflow.reports_completed ?? finished.length} of {workflow.total_reports ?? slots.length} finished</span>
+      </div>
+      {failure ? <ApiError error={failure} title="That did not work" className="mb-3" /> : null}
+      <ul className="divide-y divide-border rounded-md border border-border">
+        {slots.map((s) => (
+          <li key={s.report_number} aria-current={s.id && s.id === selectedId ? "true" : undefined} className="flex items-center justify-between gap-3 px-3 py-2 text-sm aria-[current=true]:bg-muted">
+            <div className="min-w-0">
+              <span className="mr-2 text-xs tabular-nums text-muted-foreground">{s.report_number}</span>
+              {s.id && s.has_content ? <RecordLink id={s.id} param={idParam} onOpen={() => onSelect?.(s)}>{slotTitle(s)}</RecordLink> : <span className="font-medium">{slotTitle(s)}</span>}
+              <div className="text-xs text-muted-foreground">{[s.approved ? "Approved into knowledge" : null, whenDate(s.completed_at) ? `Finished ${whenDate(s.completed_at)}` : null].filter(Boolean).join(", ") || "Not written yet"}</div>
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+              <StatusPill tone={toneForStatus(s.status)}>{humanize(s.status)}</StatusPill>
+              {s.status === "failed" ? <Button type="button" size="sm" variant="outline" onClick={() => retry(s)} aria-label={`Retry report ${s.report_number}`}>Retry</Button> : null}
+              {s.status === "pending" ? <Button type="button" size="sm" variant="outline" onClick={() => generate(s)} aria-label={`Write report ${s.report_number}`}>Write</Button> : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/company-intelligence/components/research-run.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+/**
+ * ResearchRun: start the website research, follow it step by step, and reset it. This is the workspace's OWN company
+ * research (the API locks it to one primary website): it collects the company profile, products, keywords, competitors,
+ * news, audience questions and brand assets that the rest of the block shows.
+ *
+ * SDK operations, in order:
+ *   1. getIntelligencePrimaryWebsite / getIntelligenceOrgDomain / getLatestIntelligenceTask   (read, through the hooks)
+ *   2. listIntelligenceDocuments  GET    /intelligence/documents          (read)         how many records a reset would remove
+ *   3. analyzeWebsite             POST   /intelligence/analyze           (BILLABLE)      scrapes and runs models; ConfirmSpendDialog first
+ *   4. getIntelligenceStatus      GET    /intelligence/status/{task_id}  (read)         polled until the run stops
+ *   5. resetIntelligence          DELETE /intelligence                   (DESTRUCTIVE)   removes every record and run, unlocks the website; ConfirmSpendDialog first
+ *
+ * Cost: the API quotes no price in advance and the run is metered by usage, so the confirm states the quantity it can
+ * state (how many sources are collected) and whether the call would only return a run from the last hour (which does
+ * nothing new and costs nothing). A reset states the real number of records it deletes.
+ */
+import { useEffect, useRef, useState } from "react";
+import { RotateCcw, Sparkles } from "lucide-react";
+import { Button, Input, Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { INTEL_KEY, refreshIntelligence, useLatestRun, useResearchTarget } from "../hooks/use-intelligence";
+import { finishedWithinHour, humanize, intelBody, isRunFinal, rowsOf, runSteps, stepTone, when } from "../lib/intelligence-types";
+import type { AnalyzeAccepted, IntelDocument, RunStatus } from "../lib/intelligence-types";
+
+export interface ResearchRunProps {
+  /** Called after a run was started, finished or reset, so a parent can refresh its own numbers. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+export function ResearchRun({ onChanged, className }: ResearchRunProps) {
+  const brand = useBrand();
+  const { ask, dialog, failure } = useConfirmAction();
+  const target = useResearchTarget();
+  const latest = useLatestRun();
+  const [typed, setTyped] = useState("");
+  const [force, setForce] = useState(false);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  // The poll reads the id from a ref: start() runs its first tick before React re-renders with the new state.
+  const polled = useRef<string | null>(null);
+
+  const docs = useG8Query(async (signal) => rowsOf<IntelDocument>(intelBody(await g8Get("/intelligence/documents", undefined, { signal })), "documents"), [], { key: [INTEL_KEY, "documents"] });
+  const activeId = taskId ?? (latest.run && !isRunFinal(latest.run.status) ? latest.run.task_id ?? null : null);
+  const shownId = activeId ?? latest.run?.task_id ?? null;
+  const status = useJobPoll<RunStatus>(
+    async (signal) => intelBody<RunStatus>(await g8Get(`/intelligence/status/${encodeURIComponent(polled.current ?? "")}`, undefined, { signal })),
+    { enabled: false, intervalMs: 3000, maxAttempts: 200, isTerminal: (s) => isRunFinal(s.status), onDone: () => { void refreshIntelligence(); onChanged?.(); } },
+  );
+  useEffect(() => {
+    if (!activeId) return undefined;
+    polled.current = activeId;
+    status.start();
+    return () => status.stop();
+    // start/stop are stable; the poll restarts only when the run being followed changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeId]);
+
+  // The status of the run on screen: the polled one, else a one-time read of the last finished run.
+  const lastRun = useG8Query(async (signal) => (shownId && !activeId ? intelBody<RunStatus>(await g8Get(`/intelligence/status/${encodeURIComponent(shownId)}`, undefined, { signal })) : null), [shownId, activeId], { key: [INTEL_KEY, "run", shownId ?? "none", activeId ? "live" : "done"] });
+  const run: RunStatus | null = (activeId ? status.status : lastRun.data) ?? null;
+
+  const website = target.primary ?? (typed.trim() || null);
+  const recent = finishedWithinHour(latest.run) && !force;
+  const sources = runSteps(run ?? undefined).length;
+  const records = docs.data?.length;
+
+  const askResearch = () => {
+    if (!website) return;
+    ask({
+      tier: "billable",
+      title: `Research ${website}`,
+      confirmLabel: "Start research",
+      description: (
+        <>
+          {recent ? <p>A run finished less than an hour ago, so this returns that run and does no new work. Tick "Run again" to collect fresh data.</p>
+            : <p>{sources > 0 ? `Collects ${plural(sources, "source")} from the website` : "Collects the company profile, products, keywords, competitors, news and brand assets from the website"}, with scraping and models. The API gives no price in advance: it is metered by usage.</p>}
+          {!target.primary ? <p>This website becomes your workspace's research website and is locked: you can only change it by resetting the research.</p> : null}
+        </>
+      ),
+      run: async () => {
+        const env = await g8Post("/intelligence/analyze", force ? { website_url: website, force: true } : { website_url: website });
+        const accepted = intelBody<AnalyzeAccepted>(env);
+        if (accepted.task_id) setTaskId(accepted.task_id);
+      },
+      onDone: () => { void refreshIntelligence(); void target.refetch(); onChanged?.(); },
+    });
+  };
+
+  const askReset = () => ask({
+    tier: "destructive",
+    title: "Reset company research",
+    confirmLabel: "Reset",
+    affected: records,
+    description: <p>Deletes every collected source and every research run, and unlocks the research website so you can pick another. Wiki documents and research reports are not touched. Collecting the data again uses credits.</p>,
+    run: async () => { await g8Delete("/intelligence"); setTaskId(null); polled.current = null; status.stop(); },
+    onDone: () => { void refreshIntelligence(); void target.refetch(); onChanged?.(); },
+  });
+
+  const steps = runSteps(run ?? undefined);
+  const running = run ? !isRunFinal(run.status) : false;
+  return (
+    <SectionCard
+      className={className}
+      title="Website research"
+      description={`Collects what ${brand.linkLabel} learns about your company from its website.`}
+      icon={<Sparkles className="size-4" aria-hidden />}
+      actions={<Button type="button" variant="outline" size="sm" onClick={askReset} disabled={!target.primary && !records}><RotateCcw className="size-3.5" aria-hidden />Reset research</Button>}
+    >
+      <div className="space-y-4">
+        {target.error ? <ApiError error={target.error} title="Could not load the research website" onRetry={() => void target.refetch()} compact /> : null}
+        <div className="flex flex-wrap items-end gap-2">
+          {target.primary ? (
+            <div className="space-y-1">
+              <Label htmlFor="intel-website">Research website</Label>
+              <Input id="intel-website" readOnly value={target.primary} className="w-72" />
+            </div>
+          ) : (
+            <div className="space-y-1">
+              <Label htmlFor="intel-website">Website to research</Label>
+              <Input id="intel-website" placeholder="acme.com" value={typed} onChange={(e) => setTyped(e.target.value)} className="w-72" />
+              {target.suggested && !typed ? <button type="button" className="text-xs underline underline-offset-2" onClick={() => setTyped(target.suggested ?? "")}>Use {target.suggested} from your workspace settings</button> : null}
+            </div>
+          )}
+          <Button type="button" onClick={askResearch} disabled={!website || running}>{running ? "Researching..." : latest.run ? "Research again" : "Research website"}</Button>
+          {finishedWithinHour(latest.run) ? (
+            <label className="flex items-center gap-1.5 text-sm"><input type="checkbox" checked={force} onChange={(e) => setForce(e.target.checked)} />Run again even though one finished in the last hour</label>
+          ) : null}
+        </div>
+        {target.primary ? <p className="text-xs text-muted-foreground">The research is locked to this website. Reset the research to use another.</p> : null}
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+        {status.error && activeId ? <ApiError error={status.error} title="Could not read the run's progress" compact /> : null}
+        {run ? (
+          <div className="space-y-2" aria-live="polite">
+            <div className="flex flex-wrap items-center gap-2 text-sm">
+              <StatusPill tone={toneForStatus(run.status ?? "")}>{humanize(run.status ?? "unknown")}</StatusPill>
+              {run.current_step && running ? <span className="text-muted-foreground">{run.current_step}</span> : null}
+              {typeof run.progress === "number" ? <span className="tabular-nums text-muted-foreground">{run.progress}%</span> : null}
+              {when(run.completed_at) ? <span className="text-xs text-muted-foreground">Finished {when(run.completed_at)}</span> : null}
+            </div>
+            {run.error_message ? <p role="alert" className="text-sm text-error-foreground">{run.error_message}</p> : null}
+            <ul className="grid gap-1 sm:grid-cols-2">
+              {steps.map((s) => <li key={s.key} className="flex items-center justify-between gap-2 text-sm"><span>{s.label}</span><StatusPill tone={stepTone(s.state)} quiet>{humanize(s.state)}</StatusPill></li>)}
+            </ul>
+          </div>
+        ) : latest.loading ? null : <p className="text-sm text-muted-foreground">No research has run yet.</p>}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </SectionCard>
+  );
+}

package/blocks/company-intelligence/components/source-detail.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * SourceDetail: the complete screen for one intelligence source. Shows what it collected (SourceView), when, whether a
+ * person edited it, and can re-collect it. A source that was not collected says so and offers the same button.
+ *
+ * SDK operations, in order:
+ *   1. getIntelligencePrimaryWebsite  GET  /intelligence/primary-website            (read, through useResearchTarget)
+ *   2. getIntelligenceData            GET  /intelligence/data/{data_type}?website_url  (read)  404 means "not collected"
+ *   3. retryIntelligenceSource        POST /intelligence/retry                      (BILLABLE) re-collects ONE source; ConfirmSpendDialog first
+ * Re-collecting keeps the last good data if it fails. The API gives no price; the confirm states the one source it touches.
+ */
+import { useRef, useState, type ReactNode } from "react";
+import { RefreshCw } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList, EmptyValue } from "@/g8/components/screen/key-value-list";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { g8Post } from "@/g8/lib/g8-client";
+import { refreshIntelligence, useResearchTarget, useSourceEntry } from "../hooks/use-intelligence";
+import { humanize, isRec, text, when } from "../lib/intelligence-types";
+import type { Rec } from "../lib/intelligence-types";
+import { SourceView } from "./source-view";
+
+export interface SourceDetailProps {
+  dataType: string;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  onChanged?: () => void;
+  /** Extra header actions from the screen's `renderDetailActions` slot. */
+  extraActions?: ReactNode;
+  /** Extra tabs from the screen's `extraDetailTabs` slot, after the built-in ones. */
+  extraTabs?: { id: string; label: string; content: ReactNode }[];
+}
+
+const is404 = (e: unknown): boolean => (e as { status?: number } | null)?.status === 404;
+
+export function SourceDetail({ dataType, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: SourceDetailProps) {
+  const brand = useBrand();
+  const { ask, dialog, failure } = useConfirmAction();
+  const target = useResearchTarget();
+  const host = target.primary;
+  const [waiting, setWaiting] = useState(false);
+  const before = useRef<string | null>(null);
+  const query = useSourceEntry(dataType, host, !target.loading);
+  const entry = query.data && isRec(query.data) ? query.data : null;
+  const collectedAt = text(entry?.collected_at);
+
+  // After a re-collect the work runs in the background: look again until the collection time moves.
+  useJobPoll<Rec | undefined>(async () => (await query.refetch()) ?? undefined, {
+    enabled: waiting, intervalMs: 4000, maxAttempts: 30,
+    isTerminal: (e) => text(e?.collected_at) !== before.current,
+    onDone: () => { setWaiting(false); void refreshIntelligence(); onChanged?.(); },
+  });
+
+  const title = text(entry?.display_name) ?? humanize(dataType);
+  const askRetry = () => ask({
+    tier: "billable",
+    title: `Re-collect ${title}`,
+    confirmLabel: "Re-collect",
+    description: <p>Collects this one source again from {host} with scraping and models. If it fails, the last good data stays. The API gives no price in advance: it is metered by usage.</p>,
+    run: async () => { before.current = collectedAt; await g8Post("/intelligence/retry", { website_url: host, data_type: dataType }); setWaiting(true); },
+    onDone: () => { void refreshIntelligence(); },
+  });
+  const retry = (
+    <Button type="button" size="sm" variant="outline" disabled={!host || waiting} onClick={askRetry} title={host ? undefined : "Start the website research first"}>
+      <RefreshCw className="size-3.5" aria-hidden />{waiting ? "Collecting..." : "Re-collect"}
+    </Button>
+  );
+  const actions = <div className="flex flex-wrap items-center gap-2">{retry}{extraActions}</div>;
+
+  let body: ReactNode;
+  if (query.error && !is404(query.error)) body = <ApiError error={query.error} title="Could not load the source" onRetry={() => void query.refetch()} />;
+  else if (!query.data && !query.error) body = <Skeleton className="h-40 w-full" />;
+  else if (!entry) body = <EmptyState title="Not collected" description="This source has no data. Re-collect it, or run the website research again." compact />;
+  else body = <SourceView dataType={dataType} data={entry.data} />;
+
+  const edits = isRec(entry?.overrides) ? Object.keys(entry.overrides as Rec).length : 0;
+  const tabs = [
+    { id: "data", label: "Data", content: <div className="space-y-3">{edits ? <p className="text-xs text-muted-foreground">{edits === 1 ? "1 field was" : `${edits} fields were`} edited by a person in {brand.linkLabel}; the values below include the edits.</p> : null}{body}</div> },
+    {
+      id: "details", label: "Details",
+      content: (
+        <KeyValueList columns={2} items={[
+          { label: "Source", value: dataType, mono: true },
+          { label: "Website", value: text(entry?.website_url) ?? host ?? <EmptyValue /> },
+          { label: "Collected", value: when(collectedAt) ?? <EmptyValue /> },
+          { label: "Last edited", value: when(entry?.edited_at) ? `${when(entry?.edited_at)}${text(entry?.edited_by_name) ? ` by ${text(entry?.edited_by_name)}` : ""}` : <EmptyValue /> },
+          { label: "Note", value: text(entry?.note) ?? <EmptyValue />, wide: true },
+        ]} />
+      ),
+    },
+  ];
+  return (
+    <>
+      <DetailPanel
+        title={title}
+        subtitle={host ?? undefined}
+        badges={entry ? <StatusPill tone={toneForStatus(text(entry.status) ?? "completed")}>{humanize(text(entry.status) ?? "completed")}</StatusPill> : undefined}
+        actions={actions}
+        tabs={extraTabs?.length ? [...tabs, ...extraTabs] : tabs}
+        onClose={onClose}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+      />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}