@graph8/sdk 0.370.0 → 0.373.0

package/blocks/company-intelligence/components/company-intelligence-tab.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * CompanyIntelligenceTab: an optional tab for a company's detail page. Mount it from the CRM block's `extraDetailTabs`:
+ *
+ *   <CompaniesScreen extraDetailTabs={[{ id: "intelligence", label: "Intelligence", render: (c) => <CompanyIntelligenceTab company={c} /> }]} />
+ *
+ * What it can honestly show: the company intelligence API researches YOUR OWN workspace website (it is locked to one
+ * website) and has no lookup for other companies. So the tab shows
+ *   - the full company profile when the company on screen IS your workspace's website,
+ *   - the competitor entry your research holds for it when the company is one of the competitors your research found,
+ *   - otherwise a clear note that there is nothing to show (it never invents firmographics, news or technology data).
+ *
+ * SDK operations, in order:
+ *   1. getIntelligencePrimaryWebsite  GET /intelligence/primary-website            (read, through useResearchTarget)
+ *   2. getAllIntelligenceData         GET /intelligence/all/{website_url}          (read, through CompanyProfileCard) own-company case
+ *   3. getIntelligenceData            GET /intelligence/data/competitor_discovery  (read, through useSourceEntry) competitor case
+ */
+import { Skeleton } from "@graph8/sdk/ui";
+import { Telescope } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { entryData, useResearchTarget, useSourceEntry } from "../hooks/use-intelligence";
+import { asArray, canonicalDomain, humanize, isRec, text } from "../lib/intelligence-types";
+import { CompanyProfileCard } from "./company-profile";
+
+/** The few company fields the tab reads; the CRM block's CompanyRecord satisfies it. */
+export interface TabCompany { name?: string | null; domain?: string | null; website?: string | null }
+
+export interface CompanyIntelligenceTabProps {
+  company: TabCompany;
+  /** Called when a person asks for the full intelligence screen. Omit it to hide the button. */
+  onOpenIntelligence?: () => void;
+  className?: string;
+}
+
+export function CompanyIntelligenceTab({ company, onOpenIntelligence, className }: CompanyIntelligenceTabProps) {
+  const brand = useBrand();
+  const host = canonicalDomain(company.domain ?? company.website) || null;
+  const target = useResearchTarget();
+  const own = Boolean(host && target.primaryDomain && host === target.primaryDomain);
+  const competitors = useSourceEntry("competitor_discovery", target.primary, Boolean(target.primary) && !own);
+  if (target.loading) return <Skeleton className="h-32 w-full" />;
+  if (target.error) return <ApiError error={target.error} title="Could not load company intelligence" onRetry={() => void target.refetch()} />;
+  if (!host) return <EmptyState title="No website on record" description="Add this company's website to see what your research knows about it." compact icon={<Telescope />} />;
+  if (own) {
+    return (
+      <div className={className}>
+        <CompanyProfileCard website={host} />
+        {onOpenIntelligence ? <button type="button" className="mt-3 text-sm underline underline-offset-2" onClick={onOpenIntelligence}>Open company intelligence</button> : null}
+      </div>
+    );
+  }
+  if (competitors.error && (competitors.error as { status?: number }).status !== 404) return <ApiError error={competitors.error} title="Could not load the competitors" onRetry={() => void competitors.refetch()} />;
+  const list = asArray(entryData(competitors.data ?? null)?.competitors).filter(isRec);
+  const match = list.find((c) => canonicalDomain(text(c.domain)) === host);
+  if (match) {
+    const pills = [text(match.competitive_type), text(match.similarity) ? `${text(match.similarity)} similarity` : null, text(match.confidence) ? `${text(match.confidence)} confidence` : null].filter(Boolean) as string[];
+    return (
+      <div className={className}>
+        <SectionCard title={text(match.name) ?? host} description="A competitor your company research found">
+          <div className="space-y-2 text-sm">
+            <div className="flex flex-wrap gap-1.5">{pills.map((p) => <StatusPill key={p} tone="info" quiet>{humanize(p)}</StatusPill>)}</div>
+            {text(match.description) ? <p>{text(match.description)}</p> : null}
+            {text(match.reasoning) ? <p className="text-muted-foreground">{text(match.reasoning)}</p> : null}
+          </div>
+        </SectionCard>
+        {onOpenIntelligence ? <button type="button" className="mt-3 text-sm underline underline-offset-2" onClick={onOpenIntelligence}>Open company intelligence</button> : null}
+      </div>
+    );
+  }
+  if (competitors.loading && !competitors.data && target.primary) return <Skeleton className="h-32 w-full" />;
+  return (
+    <EmptyState
+      className={className}
+      compact
+      icon={<Telescope />}
+      title="No intelligence for this company"
+      description={target.primary
+        ? `${brand.linkLabel} researches your own website (${target.primary}). It has no profile, news or technology data for other companies, and this one is not among the competitors your research found.`
+        : `${brand.linkLabel} researches your own website, and that research has not run yet. It has no profile, news or technology data for other companies.`}
+      action={onOpenIntelligence ? <button type="button" className="text-sm underline underline-offset-2" onClick={onOpenIntelligence}>Open company intelligence</button> : undefined}
+    />
+  );
+}

package/blocks/company-intelligence/components/company-profile.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+/**
+ * CompanyProfileCard: the company profile the research collected (industry, size, funding, links) with a one-line count of
+ * what else was found (products, keywords, competitors, articles). Mount it alone on any page.
+ *
+ * SDK operations, in order:
+ *   1. getIntelligencePrimaryWebsite  GET /intelligence/primary-website   (read, through useResearchTarget) used when no `website` prop is given
+ *   2. getAllIntelligenceData         GET /intelligence/all/{website_url} (read)  every source collected for the website
+ * Nothing here is billable. A source that was not collected is said to be missing, never shown as zero.
+ */
+import { Building2 } from "lucide-react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { plural } from "@/g8/lib/plural";
+import { entryData, useAllIntelligence, useResearchTarget } from "../hooks/use-intelligence";
+import { asArray, canonicalDomain, safeHttpUrl, text, whenDate } from "../lib/intelligence-types";
+import { CompanyProfileFields } from "./source-view";
+
+export interface CompanyProfileCardProps {
+  /** A website or host. Default: the workspace's research website. */
+  website?: string | null;
+  /** Called with a source type when a person asks for the full source. */
+  onOpenSource?: (dataType: string) => void;
+  className?: string;
+}
+
+const FOUND: Array<[string, string, string, string]> = [
+  ["product_inventory", "products", "product", "Products"],
+  ["company_keywords", "keywords", "keyword", "Keywords"],
+  ["competitor_discovery", "competitors", "competitor", "Competitors"],
+  ["brand_news", "articles", "article", "News"],
+  ["audience_questions", "questions", "audience question", "Audience questions"],
+];
+
+export function CompanyProfileCard({ website, onOpenSource, className }: CompanyProfileCardProps) {
+  const target = useResearchTarget();
+  const host = canonicalDomain(website ?? target.primary) || null;
+  const all = useAllIntelligence(host);
+  if (target.loading && !website) return <Skeleton className="h-40 w-full" />;
+  if (!host) return <EmptyState title="No research website yet" description="Start the website research to build the company profile." compact icon={<Building2 />} />;
+  if (all.error) return <ApiError error={all.error} title="Could not load the company profile" onRetry={() => void all.refetch()} />;
+  if (all.loading || !all.entries) return <Skeleton className="h-40 w-full" />;
+  const profile = entryData(all.entries.company_enrichment);
+  const logo = safeHttpUrl(entryData(all.entries.visual_assets)?.logo_url);
+  const name = text(profile?.company_name) ?? host;
+  const collected = whenDate(all.entries.company_enrichment?.collected_at);
+  return (
+    <SectionCard className={className} title={name} description={host + (collected ? `, collected ${collected}` : "")} icon={<EntityAvatar name={name} imageUrl={logo ?? undefined} kind="company" size="sm" />}>
+      {profile ? <CompanyProfileFields data={profile} /> : <p className="text-sm text-muted-foreground">The company profile was not collected for this website.</p>}
+      <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 border-t border-border pt-3 text-xs text-muted-foreground">
+        {FOUND.map(([type, key, noun, label]) => {
+          const data = entryData(all.entries?.[type]);
+          if (!data) return <li key={type}>{label}: not collected</li>;
+          const n = asArray(data[key]).length;
+          return (
+            <li key={type}>
+              {onOpenSource && n ? <button type="button" className="underline underline-offset-2" onClick={() => onOpenSource(type)}>{plural(n, noun)}</button> : plural(n, noun)}
+            </li>
+          );
+        })}
+      </ul>
+    </SectionCard>
+  );
+}

package/blocks/company-intelligence/components/intelligence-sources.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+/**
+ * IntelligenceSources: the list of data sources the research collected (company profile, products, keywords, competitors,
+ * news, audience questions, brand assets ...), plus the sources of the last run that failed or have not finished, so a
+ * missing source is visible and can be re-collected. Click a row to open it.
+ *
+ * SDK operations, in order:
+ *   1. listIntelligenceDocuments  GET /intelligence/documents       (read)  the collected sources
+ *   2. getLatestIntelligenceTask  GET /intelligence/latest-task     (read)  the last run
+ *   3. getIntelligenceStatus      GET /intelligence/status/{task_id} (read) which steps of that run did not complete
+ * The API does not page this list (at most one row per source type); the header says how many there are.
+ */
+import { Database } from "lucide-react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { RecordLink } from "@/g8/components/screen/record-link";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { plural } from "@/g8/lib/plural";
+import { useLatestRun, useRunStatus, useSourceDocuments } from "../hooks/use-intelligence";
+import { humanize, runSteps, stepTone, text, titleize, whenDate } from "../lib/intelligence-types";
+
+export interface SourceRow { dataType: string; label: string; folder: string | null; collectedAt: string | null; state: string }
+
+export interface IntelligenceSourcesProps {
+  /** Called when a person opens a source. */
+  onSelect?: (source: SourceRow) => void;
+  /** The open source's type, to mark its row. */
+  selectedType?: string;
+  /** The URL param the owning screen reads for the open source, so Cmd-click opens it in a new tab. */
+  idParam?: string;
+  className?: string;
+}
+
+export function IntelligenceSources({ onSelect, selectedType, idParam, className }: IntelligenceSourcesProps) {
+  const { docs, error, refetch } = useSourceDocuments();
+  const { run } = useLatestRun();
+  const { status } = useRunStatus(run?.task_id);
+  if (error) return <ApiError error={error} title="Could not load the sources" onRetry={() => void refetch()} />;
+  if (!docs) return <Skeleton className="h-40 w-full" />;
+  const collected: SourceRow[] = docs.map((d) => ({ dataType: d.data_type, label: text(d.display_name) ?? humanize(d.data_type), folder: text(d.folder), collectedAt: d.collected_at ?? null, state: "completed" }));
+  const have = new Set(collected.map((r) => r.dataType));
+  const missing: SourceRow[] = runSteps(status ?? undefined).filter((s) => !have.has(s.key) && s.state !== "completed").map((s) => ({ dataType: s.key, label: titleize(s.key), folder: null, collectedAt: null, state: s.state }));
+  const rows = [...collected, ...missing];
+  if (rows.length === 0) return <EmptyState title="No sources yet" description="Start the website research and the sources it collects will appear here." icon={<Database />} />;
+  return (
+    <div className={className}>
+      <p className="mb-2 text-xs text-muted-foreground" role="status">All {plural(rows.length, "source")}{missing.length ? `, ${plural(missing.length, "source")} not collected` : ""}</p>
+      <ul className="divide-y divide-border rounded-md border border-border">
+        {rows.map((r) => (
+          <li key={r.dataType} aria-current={r.dataType === selectedType ? "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">
+              <RecordLink id={r.dataType} param={idParam} onOpen={() => onSelect?.(r)}>{r.label}</RecordLink>
+              <div className="text-xs text-muted-foreground">{[r.folder, r.collectedAt ? `Collected ${whenDate(r.collectedAt)}` : null].filter(Boolean).join(", ") || "Not collected"}</div>
+            </div>
+            <StatusPill tone={stepTone(r.state)} quiet>{r.state === "completed" ? "Collected" : humanize(r.state)}</StatusPill>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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>
+  );
+}