@graph8/sdk 0.361.0 → 0.370.0

package/blocks/radar/block.json

@@ -87,6 +87,45 @@
         "read",
         "billable"
       ]
+    },
+    {
+      "name": "RadarScreen",
+      "file": "components/radar-screen.tsx",
+      "purpose": "Finished competitive-radar page: overview with threat board, competitor roster with battle-card panel, and reports.",
+      "operations": [
+        "get_marketing_overview_analytics_marketing_overview_get",
+        "overview_radar_overview_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "CompetitorDetail",
+      "file": "components/competitor-detail.tsx",
+      "purpose": "Complete screen for one competitor: every field, battle card, scan, pause or resume, remove.",
+      "operations": [
+        "scan_competitor_radar_competitors__competitor_id__scan_post",
+        "update_competitor_radar_competitors__competitor_id__patch",
+        "delete_competitor_radar_competitors__competitor_id__delete"
+      ],
+      "tiers": [
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "ReportDetail",
+      "file": "components/report-detail.tsx",
+      "purpose": "Complete screen for one radar report: status, preview, HTML and PDF links, regenerate.",
+      "operations": [
+        "list_radar_reports_radar_reports_get",
+        "create_radar_report_radar_reports_post"
+      ],
+      "tiers": [
+        "read",
+        "billable"
+      ]
     }
   ],
   "hooks": [
@@ -184,6 +223,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

package/blocks/radar/components/competitor-detail.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * CompetitorDetail: the complete screen for one tracked competitor. Finds it by id (so `?id=` deep links work), shows every
+ * field (tier, threat score, traffic and trend, posting cadence, ads live, scan state and budget, capture errors), the battle
+ * card, and every action: scan now, pause or resume, remove. A running scan is followed until it finishes.
+ *
+ * SDK operations, in order:
+ *   1. listCompetitors       GET    /radar/competitors                  (read; re-read every 5 s while a scan runs)
+ *   2. competitorBattleCard  GET    /radar/competitors/{id}/battle-card (read, free; inside CompetitorBattleCard)
+ *   3. scanCompetitor        POST   /radar/competitors/{id}/scan        (billable, confirmed: at most budget + 1 credits)
+ *   4. updateCompetitor      PATCH  /radar/competitors/{id}             (billable tier, free; confirmed; pause or resume)
+ *   5. deleteCompetitor      DELETE /radar/competitors/{id}             (destructive, confirmed; removes its history too)
+ */
+import { useEffect, type ReactNode } from "react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Delete, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useCompetitors } from "../hooks/use-competitors";
+import { formatCount, isScanning, scanCostEstimate } from "../lib/radar-types";
+import { CompetitorBattleCard } from "./competitor-battle-card";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+
+export interface CompetitorDetailProps {
+  competitorId: 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 }[];
+}
+
+export function CompetitorDetail({ competitorId, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: CompetitorDetailProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const { competitors, capacity, loading, error, refetch } = useCompetitors();
+  const c = competitors.find((x) => x.id === competitorId);
+  const scanning = c ? isScanning(c) : false;
+
+  useEffect(() => {
+    if (!scanning) return;
+    const timer = setInterval(() => void refetch(), 5000);
+    return () => clearInterval(timer);
+  }, [scanning, refetch]);
+
+  if (error) return <ApiError error={error} title="Could not load the competitor" onRetry={() => void refetch()} />;
+  if (loading && competitors.length === 0) return <Skeleton className="h-40 w-full" />;
+  if (!c) return <EmptyState title="Competitor not found" description="It may have been removed." />;
+  const label = c.name || c.domain;
+  const changed = () => {
+    void refetch();
+    onChanged?.();
+  };
+  const errors = Object.entries(c.enrichment_errors ?? {});
+  const trend = typeof c.traffic_trend_pct === "number" ? `${c.traffic_trend_pct > 0 ? "+" : ""}${Math.round(c.traffic_trend_pct)}%` : "-";
+
+  const actions = (
+    <div className="flex flex-wrap gap-1">
+      <AskButton ask={ask} label="Scan now" tier="billable" title={`Scan ${label}`} confirmLabel="Scan" estimatedCredits={scanCostEstimate(c)} disabled={scanning || !c.is_active}
+        description={`1 credit per page captured (up to ${c.page_budget}) plus 1 for the traffic lookup. This is the most it can charge; your balance is not checked here.`}
+        run={() => g8Post(`/radar/competitors/${c.id}/scan`, {})} onDone={changed} />
+      <AskButton ask={ask} label={c.is_active ? "Pause" : "Resume"} variant="ghost" tier="billable" title={`${c.is_active ? "Pause" : "Resume"} ${label}`} confirmLabel={c.is_active ? "Pause" : "Resume"} estimatedCredits={0}
+        description={c.is_active ? "A paused competitor is no longer scanned. Its history is kept." : "Scans resume on the normal schedule."}
+        run={() => g8Patch(`/radar/competitors/${c.id}`, { is_active: !c.is_active })} onDone={changed} />
+      <AskButton ask={ask} label="Remove" variant="ghost" tier="destructive" title={`Remove ${label}`} confirmLabel="Remove" tolerateStatus={[404]}
+        description="The competitor and its captured pages, ads and history are deleted." run={() => g8Delete(`/radar/competitors/${c.id}`)} onDone={() => { changed(); onClose?.(); }} />
+    </div>
+  );
+
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <div className="space-y-4">
+          <KeyValueList columns={2} items={[
+            { label: "Website", value: <a className="underline" href={`https://${c.domain}`} target="_blank" rel="noreferrer">{c.domain}</a> },
+            { label: "Tier", value: c.tier === "tier1" ? "Tier 1 (25 pages per scan)" : "Watchlist (8 pages per scan)" },
+            { label: "Threat score", value: c.threat_score ?? "-" },
+            { label: "Monthly traffic", value: formatCount(c.traffic_estimate) },
+            { label: "Traffic trend", value: trend },
+            { label: "Posts per week", value: c.posts_per_week ?? "-" },
+            { label: "Ads live", value: formatCount(c.ads_live_count) },
+            { label: "Page budget", value: c.page_budget },
+            { label: "Last scanned", value: c.last_scanned_at ? c.last_scanned_at.slice(0, 10) : "not scanned yet" },
+            { label: "Scan state", value: scanning ? "scanning..." : c.scan_status },
+          ]} />
+          {errors.length > 0 ? (
+            <SectionCard title="Capture issues" description="Sources that could not be read on the last scan.">
+              <ul className="space-y-1 text-sm">{errors.map(([source, message]) => <li key={source}><span className="font-medium">{source}</span>: {message}</li>)}</ul>
+            </SectionCard>
+          ) : null}
+          {capacity ? <p className="text-xs text-muted-foreground">{capacity.used} of {capacity.limit} competitors tracked on your plan.</p> : null}
+        </div>
+      ),
+    },
+    { id: "card", label: "Battle card", content: <CompetitorBattleCard competitorId={c.id} /> },
+  ];
+  return (
+    <>
+    <DetailPanel title={label} subtitle={c.domain} avatar={<EntityAvatar name={label} kind="company" size="lg" />}
+      badges={<StatusPill tone={c.is_active ? (scanning ? "info" : "positive") : "neutral"}>{!c.is_active ? "paused" : scanning ? "scanning" : "tracking"}</StatusPill>}
+      actions={extraActions ? <>{actions}{extraActions}</> : 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} />
+    </>
+  );
+}

package/blocks/radar/components/competitor-tracker.tsx

@@ -30,6 +30,7 @@ import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { useCompetitors } from "../hooks/use-competitors";
 import { formatCount, isScanning, normalizeDomain, radarBody, scanCostEstimate } from "../lib/radar-types";
 import type { Competitor, CompetitorList, CompetitorSuggestion } from "../lib/radar-types";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface CompetitorTrackerProps {
   /** Called when a person opens a competitor (for example to show its CompetitorBattleCard). */
@@ -46,6 +47,7 @@ type Pending =
   | { type: "delete"; competitor: Competitor };
 
 export function CompetitorTracker({ onSelect, className }: CompetitorTrackerProps) {
+  const brand = useBrand();
   const { competitors, capacity, scanning, loading, error, refetch } = useCompetitors();
   const [domain, setDomain] = useState("");
   const [name, setName] = useState("");
@@ -112,7 +114,7 @@ export function CompetitorTracker({ onSelect, className }: CompetitorTrackerProp
       ) : null}
 
       {loading && competitors.length === 0 ? <Skeleton className="h-24 w-full" /> : null}
-      {!loading && competitors.length === 0 ? <EmptyState title="No competitors tracked yet" description="Add a website above, or pick one graph8 detected from your market research." /> : null}
+      {!loading && competitors.length === 0 ? <EmptyState title="No competitors tracked yet" description={`Add a website above, or pick one ${brand.linkLabel} detected from your market research.`} /> : null}
       <ul className="flex flex-col gap-2">
         {competitors.map((c) => (
           <li key={c.id} className="flex flex-wrap items-center justify-between gap-2 rounded-md border p-3" data-testid="competitor">

package/blocks/radar/components/radar-report.tsx

@@ -28,10 +28,12 @@ import type { Capability, RadarReportRow } from "../lib/radar-types";
 export interface RadarReportProps {
   /** Preselect a capability (a feature-matrix row id). */
   capabilityId?: string;
+  /** Called when a person opens a report (show a ReportDetail). */
+  onSelectReport?: (report: RadarReportRow) => void;
   className?: string;
 }
 
-export function RadarReport({ capabilityId, className }: RadarReportProps) {
+export function RadarReport({ capabilityId, onSelectReport, className }: RadarReportProps) {
   const [capability, setCapability] = useState(capabilityId ?? "");
   const [audience, setAudience] = useState<"executive" | "developer">("executive");
   const [edge, setEdge] = useState<"us" | "them">("us");
@@ -70,7 +72,7 @@ export function RadarReport({ capabilityId, className }: RadarReportProps) {
       <ul className="flex flex-col gap-2">
         {rows.map((r) => (
           <li key={r.id} className="flex items-center justify-between gap-2 rounded-md border p-3" data-testid="report">
-            <div className="flex flex-col"><span className="text-sm font-medium">{r.title || r.capability_name}</span>
+            <div className="flex flex-col">{onSelectReport ? <button type="button" className="text-left text-sm font-medium hover:underline" onClick={() => onSelectReport(r)}>{r.title || r.capability_name}</button> : <span className="text-sm font-medium">{r.title || r.capability_name}</span>}
               <span className="text-xs text-muted-foreground">{r.audience} · {r.status}{r.error_message ? ` · ${r.error_message}` : ""}</span></div>
             {r.status === "completed" ? (
               <div className="flex gap-2"><a className="text-sm underline" href={`${G8_PROXY_BASE}/radar/reports/${r.id}/html`} target="_blank" rel="noreferrer">Open</a><a className="text-sm underline" href={`${G8_PROXY_BASE}/radar/reports/${r.id}/pdf`} target="_blank" rel="noreferrer">PDF</a></div>

package/blocks/radar/components/radar-screen.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+/**
+ * RadarScreen: the finished competitive-intelligence page. Three tabs:
+ *   Overview     stat strip (tracked, moves, open gaps, act now), threat board, alerts and recent moves. A threat-board row
+ *                opens that competitor's battle card.
+ *   Competitors  the roster (CompetitorTracker: add, bulk-add detected, scan one or all, pause, resume, remove) with the
+ *                selected competitor's complete detail screen (every field, battle card, scan, pause, remove) (`?id=`).
+ *   Reports      generate deep-dive reports on a capability (RadarReport); each report opens its detail screen (`?id=`).
+ *
+ * Every detail also opens as a full page with `?view=full`.
+ *
+ * SDK operations: reads of overview (GET /radar/overview) and getMarketingOverview (GET /analytics/marketing/overview, 7 days) for the
+ * Overview tab; the marketing card shows only the scalar values the payload carries, since the contract leaves its shape open. Everything else is composed:
+ * CompetitorTracker (billable + destructive, confirmed), CompetitorBattleCard (free read), RadarReport (billable, confirmed).
+ * Prerequisites: `radar` in the proxy allowlist, credits for scans/reports, market research done in graph8.
+ */
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { Crosshair } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { radarBody } from "../lib/radar-types";
+import type { RadarOverviewBody } from "../lib/radar-types";
+import { CompetitorDetail } from "./competitor-detail";
+import { ReportDetail } from "./report-detail";
+import { CompetitorTracker } from "./competitor-tracker";
+import { RadarReport } from "./radar-report";
+
+/** The record open in the detail panel, passed to the slot props. */
+export type RadarRecord = { kind: "competitor" | "report"; id: string };
+
+export interface RadarScreenProps {
+  toolbarActions?: ReactNode;
+  /** Buttons added to the open competitor's or report's header. */
+  renderDetailActions?: (record: RadarRecord) => ReactNode;
+  /** Tabs added after the built-in ones on the open competitor or report. */
+  extraDetailTabs?: { id: string; label: string; render: (record: RadarRecord) => ReactNode }[];
+  className?: string;
+}
+
+type Tab = "overview" | "competitors" | "reports";
+const TABS = ["overview", "competitors", "reports"] as const;
+
+function statsOf(o: RadarOverviewBody | undefined): StatItem[] | undefined {
+  if (!o?.summary || !o.summary.tracked) return undefined;
+  const s = o.summary;
+  return [
+    { label: "Tracked", value: s.tracked, hint: `${s.tier1} tier 1, ${s.watchlist} watchlist` },
+    { label: "Moves (7 days)", value: s.moves_7d },
+    { label: "Open gaps", value: s.open_gaps, tone: s.open_gaps ? "warning" : "neutral" },
+    { label: "Act now", value: s.act_now, tone: s.act_now ? "negative" : "neutral" },
+  ];
+}
+
+/** Your own marketing numbers next to rival moves. The payload is open-shaped: show scalar values only, never guess field names. */
+function MarketingCard() {
+  const q = useG8Query(async (signal) => (await g8Get("/analytics/marketing/overview", { days: 7 }, { signal })) as { data?: unknown }, []);
+  const data = q.data?.data;
+  const scalars = data && typeof data === "object" && !Array.isArray(data)
+    ? Object.entries(data as Record<string, unknown>).filter(([, v]) => typeof v === "number" || (typeof v === "string" && v.length < 60)).slice(0, 8)
+    : [];
+  if (q.error || scalars.length === 0) return null;
+  return (
+    <SectionCard title="Your marketing, last 7 days" description="Your own numbers next to what rivals did.">
+      <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm sm:grid-cols-4">
+        {scalars.map(([k, v]) => (
+          <div key={k}>
+            <dt className="text-xs text-muted-foreground">{k.replace(/_/g, " ")}</dt>
+            <dd className="font-medium tabular-nums">{typeof v === "number" ? v.toLocaleString() : String(v)}</dd>
+          </div>
+        ))}
+      </dl>
+    </SectionCard>
+  );
+}
+
+function Overview({ data, onOpen, onTrack }: { data: RadarOverviewBody; onOpen: (id: string, name: string) => void; onTrack: () => void }) {
+  if (!data.summary?.tracked) {
+    return (
+      <EmptyState
+        title="Nothing is tracked yet"
+        description="Add a competitor to start seeing moves, gaps and a threat board."
+        action={<Button onClick={onTrack}>Add a competitor</Button>}
+      />
+    );
+  }
+  return (
+    <div className="space-y-4">
+      <MarketingCard />
+      {data.summary.scan_stale ? <p role="status" className="text-sm text-amber-700">The last scan{data.summary.last_scan_at ? ` (${data.summary.last_scan_at.slice(0, 10)})` : ""} is older than your cadence. Scan from the Competitors tab.</p> : null}
+      {data.summary.credit_cap_reached ? <p role="status" className="text-sm text-amber-700">The monthly radar credit cap is reached: automatic scans are paused.</p> : null}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <SectionCard title="Threat board" description="Competitors ranked by threat score. Open one for its battle card.">
+          <ul className="divide-y">
+            {(data.threat_board ?? []).map((r) => (
+              <li key={r.id}>
+                <button type="button" className="flex w-full items-center gap-3 py-2 text-left text-sm hover:bg-muted/50" onClick={() => onOpen(r.id, r.name || r.domain)}>
+                  <EntityAvatar name={r.name || r.domain} kind="company" size="sm" />
+                  <span className="min-w-0 flex-1 truncate font-medium">{r.name || r.domain}</span>
+                  <StatusPill tone={r.tier === "tier1" ? "info" : "neutral"}>{r.tier === "tier1" ? "Tier 1" : "Watchlist"}</StatusPill>
+                  <span className="shrink-0 text-xs text-muted-foreground tabular-nums">threat {r.threat_score ?? "-"} · {r.moves_7d} moves</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+        <div className="space-y-4">
+          <SectionCard title="Alerts">
+            {(data.alerts ?? []).length === 0 ? <p className="text-sm text-muted-foreground">No alerts.</p> : (
+              <ul className="space-y-1.5 text-sm">
+                {(data.alerts ?? []).map((a) => (
+                  <li key={a.id}><span className="font-medium">{a.title}</span>{a.detail ? <span className="text-muted-foreground"> {a.detail}</span> : null}</li>
+                ))}
+              </ul>
+            )}
+          </SectionCard>
+          <SectionCard title="Recent moves">
+            {(data.moves ?? []).length === 0 ? <p className="text-sm text-muted-foreground">No moves yet.</p> : (
+              <ul className="space-y-1.5 text-sm">
+                {(data.moves ?? []).map((m) => (
+                  <li key={m.id}>
+                    {m.competitor_domain ? <span className="font-medium">{m.competitor_domain}: </span> : null}
+                    {m.text || m.title}
+                    {m.became_gap ? <span className="ml-1"><StatusPill tone="warning">became a gap</StatusPill></span> : null}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </SectionCard>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RadarScreen(props: RadarScreenProps) {
+  const [tabValue, setTab] = useUrlState("tab", "overview");
+  const tab: Tab = (TABS as readonly string[]).includes(tabValue) ? (tabValue as Tab) : "overview";
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expanded = view === "full" && Boolean(id);
+  const [tick, setTick] = useState(0);
+  const overview = useG8Query(async (signal) => radarBody<RadarOverviewBody>(await g8Get("/radar/overview", undefined, { signal })), [tick]);
+
+  const close = () => {
+    setId("");
+    setView("");
+  };
+  const panel = {
+    onClose: close,
+    onExpand: expanded ? undefined : () => setView("full"),
+    onCollapse: expanded ? () => setView("") : undefined,
+    onChanged: () => setTick((t) => t + 1),
+  };
+  const slots = (record: RadarRecord) => ({
+    extraActions: props.renderDetailActions?.(record),
+    extraTabs: (props.extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(record) })),
+  });
+  const split = (list: ReactNode, detail: ReactNode) => (
+    <SplitView detailOpen={Boolean(id)} onCloseDetail={close} expanded={expanded} onExpandedChange={(next) => setView(next ? "full" : "")} detailWidth="lg" list={list} detail={id ? detail : null} />
+  );
+
+  return (
+    <ScreenLayout
+      title="Competitive radar"
+      description="Track rivals, read what changed, and walk into every deal with a battle card."
+      icon={<Crosshair className="size-5" />}
+      actions={
+        <>
+          {props.toolbarActions}
+          <Button variant="outline" onClick={() => { setTab("reports"); close(); }}>New report</Button>
+          <Button onClick={() => { setTab("competitors"); close(); }}>Add competitor</Button>
+        </>
+      }
+      tabs={[
+        { id: "overview", label: "Overview" },
+        { id: "competitors", label: "Competitors" },
+        { id: "reports", label: "Reports" },
+      ]}
+      activeTab={tab}
+      onTabChange={(next) => {
+        setTab(next);
+        close();
+      }}
+      stats={statsOf(overview.data)}
+      className={props.className}
+    >
+      {tab === "overview" ? (
+        overview.error ? (
+          <ApiError error={overview.error} title="Could not load the overview" onRetry={() => void overview.refetch()} />
+        ) : overview.data ? (
+          <Overview data={overview.data} onOpen={(competitorId) => { setTab("competitors"); setId(competitorId); }} onTrack={() => setTab("competitors")} />
+        ) : (
+          <p className="text-sm text-muted-foreground" role="status">Loading overview...</p>
+        )
+      ) : tab === "competitors" ? (
+        split(<CompetitorTracker key={tick} onSelect={(c) => setId(c.id)} />, <CompetitorDetail key={id} competitorId={id} {...panel} {...slots({ kind: "competitor", id })} />)
+      ) : (
+        split(<RadarReport key={tick} onSelectReport={(r) => setId(r.id)} />, <ReportDetail key={id} reportId={id} {...panel} {...slots({ kind: "report", id })} />)
+      )}
+    </ScreenLayout>
+  );
+}

package/blocks/radar/components/report-detail.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+/**
+ * ReportDetail: the complete screen for one radar report. Finds it by id (so `?id=` deep links work), shows its capability,
+ * audience, angle, status and times, follows it while it generates, links to the finished HTML and PDF (through your proxy so the
+ * signed-in session authorizes them), and can regenerate it. Regenerating overwrites the earlier report for the same
+ * capability, audience and angle.
+ *
+ * SDK operations, in order:
+ *   1. listRadarReports    GET  /radar/reports                       (read; re-read every 4 s while generating)
+ *   2. getRadarReportHtml  GET  /radar/reports/{id}/html             (read; opened as a link)
+ *   3. getRadarReportPdf   GET  /radar/reports/{id}/pdf              (read; opened as a link)
+ *   4. createRadarReport   POST /radar/reports                       (billable, confirmed; no advance price)
+ */
+import { useEffect, type ReactNode } from "react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { G8_PROXY_BASE, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { isReportFinal, radarBody } from "../lib/radar-types";
+import type { RadarReportRow } from "../lib/radar-types";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+
+export interface ReportDetailProps {
+  reportId: 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 when = (v: string | null | undefined) => (v ? new Date(v).toLocaleString() : "-");
+
+export function ReportDetail({ reportId, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: ReportDetailProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const query = useG8Query(async (signal) => radarBody<{ items?: RadarReportRow[]; reports?: RadarReportRow[] }>(await g8Get("/radar/reports", undefined, { signal })), []);
+  const rows = query.data?.items ?? query.data?.reports ?? [];
+  const report = rows.find((r) => r.id === reportId);
+  const generating = report ? !isReportFinal(report.status) : false;
+
+  useEffect(() => {
+    if (!generating) return;
+    const timer = setInterval(() => void query.refetch(), 4000);
+    return () => clearInterval(timer);
+  }, [generating, query.refetch]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (query.error) return <ApiError error={query.error} title="Could not load the report" onRetry={() => void query.refetch()} />;
+  if (!query.data) return <Skeleton className="h-40 w-full" />;
+  if (!report) return <EmptyState title="Report not found" description="It may have been replaced by a newer one." />;
+  const title = report.title || report.capability_name || "Report";
+  const done = report.status === "completed";
+
+  const actions = (
+    <div className="flex flex-wrap items-center gap-2">
+      {done ? (
+        <>
+          <a className="text-sm underline" href={`${G8_PROXY_BASE}/radar/reports/${report.id}/html`} target="_blank" rel="noreferrer">Open</a>
+          <a className="text-sm underline" href={`${G8_PROXY_BASE}/radar/reports/${report.id}/pdf`} target="_blank" rel="noreferrer">PDF</a>
+        </>
+      ) : null}
+      <AskButton ask={ask} label="Regenerate" tier="billable" title={`Regenerate the ${report.audience} report on ${report.capability_name ?? "this capability"}`} confirmLabel="Generate"
+        disabled={generating || !report.capability_id}
+        description="A model writes the report and it uses credits. The API gives no price in advance and your balance is not checked here. This overwrites the earlier report for this capability and audience."
+        run={() => g8Post("/radar/reports", { audience: report.audience, capability_id: report.capability_id, edge: report.edge ?? "us" })}
+        onDone={() => { void query.refetch(); onChanged?.(); }} />
+    </div>
+  );
+  const tabs = [
+    {
+      id: "report",
+      label: "Report",
+      content: (
+        <div className="space-y-3">
+          <KeyValueList columns={2} items={[
+            { label: "Capability", value: report.capability_name ?? "-" },
+            { label: "Audience", value: report.audience },
+            { label: "Angle", value: report.edge === "them" ? "Where they win" : report.edge === "us" ? "Where we win" : "-" },
+            { label: "Status", value: generating ? "generating..." : report.status },
+            { label: "Created", value: when(report.created_at) },
+            { label: "Completed", value: when(report.completed_at) },
+          ]} />
+          {report.error_message ? <p role="alert" className="text-sm text-error-foreground">{report.error_message}</p> : null}
+          {done ? <iframe title={`${title} preview`} className="h-[28rem] w-full rounded border" src={`${G8_PROXY_BASE}/radar/reports/${report.id}/html`} /> : null}
+        </div>
+      ),
+    },
+  ];
+  return (
+    <>
+      <DetailPanel title={title} subtitle={report.audience} badges={<StatusPill tone={done ? "positive" : report.status === "failed" ? "negative" : "info"}>{report.status}</StatusPill>} actions={extraActions ? <>{actions}{extraActions}</> : 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} />
+    </>
+  );
+}

package/blocks/search/README.md

@@ -6,6 +6,16 @@ searches. Builds on `lists` (which builds on `crm`): once results are saved, you
 
 Install: `npx @graph8/sdk add search` (installs `foundation`, `crm` and `lists` first).
 
+## Screens
+
+`ProspectSearchScreen` is the finished prospecting page; mount it with no props. People and Companies tabs (`?tab=`),
+the filter builder with real value suggestions and Clear filters, saved searches (save, load, delete), results with
+paging and the locked-field banner, **Save results to a list** (billable, confirmed, polled until built) and, after
+"Open list", a panel with the saved list's real contacts (emails and phones unlocked) that can be added to another list.
+A **Saved searches** tab (`?tab=saved&id=`) opens each saved search with its filters, Run and a confirmed Delete; a result's name opens a prospect detail with every field (locked ones stay hidden; results have no id, so no deep link). Slots: `toolbarActions`, `renderSavedListActions(list)` (for example an enrich or enroll button), `onSaved`.
+
+Prerequisites: `lists` and `crm` installed (the CLI does it), proxy allowlist `search`, `lists`, `contacts`, an active subscription.
+
 ## Read this first: search results are masked
 
 `POST /search/contacts` returns **previews**, not CRM records:

package/blocks/search/block.json

@@ -8,7 +8,8 @@
     "paged contact and company results with total and paging-window handling",
     "locked emails and phones shown as Locked, with a one-step path to reveal them",
     "save-to-list into a new list with a billable confirmation and polled progress",
-    "saved searches: save, load, delete"
+    "saved searches: save, load, delete",
+    "finished ProspectSearchScreen page"
   ],
   "dependsOn": [
     "lists"
@@ -90,6 +91,19 @@
         "write",
         "destructive"
       ]
+    },
+    {
+      "name": "ProspectSearchScreen",
+      "file": "components/prospect-search-screen.tsx",
+      "purpose": "Finished prospecting page: People/Companies tabs, filters, saved searches, results, save to list and the saved list's unlocked members.",
+      "operations": [
+        "delete_saved_search_search_saved_searches__query_id__delete",
+        "list_saved_searches_search_saved_searches_get"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
     }
   ],
   "hooks": [
@@ -180,6 +194,7 @@
     }
   ],
   "peerDependencies": {
+    "lucide-react": ">=0.400.0",
     "react": ">=18"
   }
 }

package/blocks/search/components/filter-builder.tsx

@@ -54,10 +54,10 @@ function useDebounced<T>(value: T, ms = 250): T {
   return v;
 }
 
-function ValuePicker({ resource, meta, value, onChange, disabled }: { resource: SearchResource; meta: FieldMeta; value: unknown[]; onChange: (v: unknown[]) => void; disabled?: boolean }) {
+function ValuePicker({ resource, meta, value, onChange, disabled, within }: { resource: SearchResource; meta: FieldMeta; within?: SearchCondition[]; value: unknown[]; onChange: (v: unknown[]) => void; disabled?: boolean }) {
   const [draft, setDraft] = useState("");
   const typed = useDebounced(draft.trim());
-  const options = useFilterOptions(resource, meta.key, meta.suggest === "options");
+  const options = useFilterOptions(resource, meta.key, meta.suggest === "options", within);
   const auto = useG8Query(
     async (signal) => extractSuggestions((await g8Get("/search/autocomplete", { resource, field: meta.key, value: typed, size: 8 }, { signal })).data),
     [resource, meta.key, typed],
@@ -134,7 +134,7 @@ export function FilterBuilder({ resource = "contacts", value, onChange, onSearch
             </select>
             {NO_VALUE_OPERATORS.includes(c.operator) ? null : c.operator === "between"
               ? <BetweenPicker meta={m} value={c.value ?? []} disabled={disabled} onChange={(v) => update(i, { value: v })} />
-              : <ValuePicker resource={resource} meta={m} value={c.value ?? []} disabled={disabled} onChange={(v) => update(i, { value: v })} />}
+              : <ValuePicker resource={resource} meta={m} within={value.filter((_, j) => j !== i)} value={c.value ?? []} disabled={disabled} onChange={(v) => update(i, { value: v })} />}
             <Button type="button" variant="ghost" size="sm" disabled={disabled} aria-label="Remove filter" onClick={() => onChange(value.filter((_, j) => j !== i))}>Remove</Button>
           </div>
         );