@graph8/sdk 0.370.0 → 0.373.0

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

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

@@ -0,0 +1,274 @@
+"use client";
+
+/**
+ * SourceView: shows what one intelligence source collected, in a form a person can read. No SDK operations: pass it the
+ * `data` of a source (`GET /intelligence/data/{data_type}` or one entry of `GET /intelligence/all/{website}`).
+ *
+ * The payloads are open-shaped, so every field is read defensively: a missing value shows a dash (never 0 and never a
+ * guess), web content is drawn as text (never HTML), and links are drawn only for http(s) URLs. A source with a shape
+ * this component does not know falls back to a readable tree of its values.
+ *
+ * Known shapes (from the writers in the app): company_enrichment (flat profile), competitor_discovery ({ competitors }),
+ * brand_news ({ articles }), product_inventory ({ products, services, capabilities }), company_keywords / organic_keywords /
+ * paid_keywords ({ keywords }), audience_questions ({ questions }), search_trends ({ trends }), top_content ({ pages }),
+ * website_scrape ({ pages }), visual_assets ({ logo_url, branding }), brand_sentiment (aggregates).
+ */
+import { useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { KeyValueList, EmptyValue } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { plural } from "@/g8/lib/plural";
+import { asArray, humanize, isRec, num, safeHttpUrl, text, whenDate } from "../lib/intelligence-types";
+import type { Rec } from "../lib/intelligence-types";
+
+const SHOW = 12;
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+function Link({ url, children }: { url: unknown; children?: React.ReactNode }) {
+  const href = safeHttpUrl(url);
+  if (!href) return <>{children ?? text(url) ?? <EmptyValue />}</>;
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 underline underline-offset-2">
+      {children ?? href.replace(/^https?:\/\/(www\.)?/, "")}
+      <ExternalLink className="size-3" aria-hidden />
+    </a>
+  );
+}
+
+/** A list that shows its first rows and says how many more there are, with a button to see them. */
+function More<T>({ items, noun, render }: { items: T[]; noun: string; render: (item: T, index: number) => React.ReactNode }) {
+  const [all, setAll] = useState(false);
+  const shown = all ? items : items.slice(0, SHOW);
+  return (
+    <div className="space-y-2">
+      <ul className="divide-y divide-border">{shown.map((item, i) => <li key={i} className="py-2 text-sm">{render(item, i)}</li>)}</ul>
+      {items.length > SHOW ? (
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span role="status">Showing {shown.length.toLocaleString()} of {plural(items.length, noun)}</span>
+          <Button type="button" variant="outline" size="sm" onClick={() => setAll((v) => !v)}>{all ? "Show fewer" : "Show all"}</Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const PROFILE_FIELDS: Array<[string, string]> = [
+  ["company_name", "Company name"], ["industry", "Industry"], ["employee_count", "Employees"], ["revenue", "Revenue"],
+  ["founded_year", "Founded"], ["funding", "Funding"], ["address", "Headquarters"], ["phone", "Phone"], ["primary_email", "Email"],
+];
+const PROFILE_LINKS: Array<[string, string]> = [
+  ["linkedin", "LinkedIn"], ["twitter", "X / Twitter"], ["facebook", "Facebook"], ["instagram", "Instagram"], ["youtube", "YouTube"], ["github", "GitHub"],
+];
+
+export function CompanyProfileFields({ data }: { data: Rec }) {
+  const description = text(data.description);
+  return (
+    <div className="space-y-3">
+      {description ? <p className="text-sm leading-6">{description}</p> : null}
+      <KeyValueList columns={2} items={[
+        ...PROFILE_FIELDS.map(([k, label]) => ({ label, value: text(data[k]) ?? <EmptyValue /> })),
+        ...PROFILE_LINKS.filter(([k]) => text(data[k])).map(([k, label]) => ({ label, value: <Link url={data[k]} /> })),
+      ]} />
+    </div>
+  );
+}
+
+function Competitors({ data }: { data: Rec }) {
+  const rows = asArray(data.competitors).filter(isRec);
+  const summary = text(data.market_summary);
+  return (
+    <div className="space-y-3">
+      {summary ? <p className="text-sm text-muted-foreground">{summary}</p> : null}
+      {rows.length === 0 ? <p className="text-sm text-muted-foreground">No competitors in this source.</p> : (
+        <More items={rows} noun="competitor" render={(c) => (
+          <div className="space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="font-medium">{text(c.name) ?? text(c.domain) ?? "Unnamed"}</span>
+              {text(c.domain) ? <span className="text-xs text-muted-foreground">{text(c.domain)}</span> : null}
+              {text(c.competitive_type) ? <StatusPill tone="info">{humanize(text(c.competitive_type) as string)}</StatusPill> : null}
+              {text(c.similarity) ? <StatusPill tone="neutral">{`${humanize(text(c.similarity) as string)} similarity`}</StatusPill> : null}
+              {text(c.confidence) ? <StatusPill tone="neutral" quiet>{`${humanize(text(c.confidence) as string)} confidence`}</StatusPill> : null}
+            </div>
+            {text(c.description) ? <p className="text-muted-foreground">{text(c.description)}</p> : null}
+            {text(c.reasoning) ? <p className="text-xs text-muted-foreground">{text(c.reasoning)}</p> : null}
+          </div>
+        )} />
+      )}
+    </div>
+  );
+}
+
+const sentimentTone = (s: number | null): "positive" | "negative" | "neutral" => (s == null ? "neutral" : s > 0.2 ? "positive" : s < -0.2 ? "negative" : "neutral");
+
+function News({ data }: { data: Rec }) {
+  const rows = asArray(data.articles).filter(isRec);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No articles in this source.</p>;
+  return (
+    <More items={rows} noun="article" render={(a) => {
+      const source = isRec(a.source) ? text(a.source.name) : text(a.source);
+      const sentiment = num(a.sentiment);
+      return (
+        <div className="space-y-0.5">
+          <div className="font-medium"><Link url={a.url}>{text(a.title) ?? "Untitled article"}</Link></div>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            {source ? <span>{source}</span> : null}
+            {whenDate(a.published_at) ? <span>{whenDate(a.published_at)}</span> : null}
+            {sentiment != null ? <StatusPill tone={sentimentTone(sentiment)} quiet>{`Sentiment ${sentiment.toFixed(2)}`}</StatusPill> : null}
+          </div>
+          {text(a.description) ? <p className="text-muted-foreground">{text(a.description)}</p> : null}
+        </div>
+      );
+    }} />
+  );
+}
+
+function Products({ data }: { data: Rec }) {
+  const lists: Array<[string, unknown[]]> = [["Products", asArray(data.products)], ["Services", asArray(data.services)], ["Capabilities", asArray(data.capabilities)]];
+  const description = text(data.company_description);
+  return (
+    <div className="space-y-3">
+      {description ? <p className="text-sm leading-6">{description}</p> : null}
+      {lists.filter(([, rows]) => rows.length).map(([label, rows]) => (
+        <SectionCard key={label} title={label} description={plural(rows.length, label.toLowerCase().replace(/s$/, ""))}>
+          <More items={rows} noun={label.toLowerCase().replace(/s$/, "")} render={(r) => isRec(r)
+            ? <div><span className="font-medium">{text(r.name) ?? "Unnamed"}</span>{text(r.description) ? <p className="text-muted-foreground">{text(r.description)}</p> : null}</div>
+            : <span>{text(r) ?? <EmptyValue />}</span>} />
+        </SectionCard>
+      ))}
+    </div>
+  );
+}
+
+/** Keyword rows use legacy SEMrush codes: Ph = phrase, Nq = monthly searches, Cp = cost per click, Po = position, Ur = url. */
+const KEYWORD_COLUMNS: Array<[string, string]> = [["Nq", "Searches"], ["Po", "Position"], ["Cp", "CPC"], ["Ur", "URL"]];
+
+function Keywords({ data }: { data: Rec }) {
+  const rows = asArray(data.keywords);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No keywords in this source.</p>;
+  return (
+    <More items={rows} noun="keyword" render={(k) => {
+      if (!isRec(k)) return <span>{text(k) ?? <EmptyValue />}</span>;
+      const extras = KEYWORD_COLUMNS.filter(([key]) => k[key] != null && k[key] !== "");
+      return (
+        <div className="flex flex-wrap items-baseline gap-x-3">
+          <span className="font-medium">{text(k.Ph) ?? text(k.keyword) ?? text(k.name) ?? "Keyword"}</span>
+          {extras.map(([key, label]) => <span key={key} className="text-xs text-muted-foreground">{label} {key === "Ur" ? <Link url={k[key]} /> : text(k[key])}</span>)}
+        </div>
+      );
+    }} />
+  );
+}
+
+function Questions({ data }: { data: Rec }) {
+  const rows = asArray(data.questions);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No questions in this source.</p>;
+  return <More items={rows} noun="question" render={(q) => <span>{isRec(q) ? text(q.question) ?? text(q.text) ?? <EmptyValue /> : text(q) ?? <EmptyValue />}</span>} />;
+}
+
+function Trends({ data }: { data: Rec }) {
+  const rows = asArray(data.trends);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No trends in this source.</p>;
+  return <More items={rows} noun="trend" render={(t) => (isRec(t) ? <GenericRow row={t} lead="keyword" /> : <span>{text(t) ?? <EmptyValue />}</span>)} />;
+}
+
+function Pages({ data, withText }: { data: Rec; withText?: boolean }) {
+  const rows = asArray(data.pages).filter(isRec);
+  const [open, setOpen] = useState<number | null>(null);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No pages in this source.</p>;
+  return (
+    <More items={rows} noun="page" render={(p, i) => {
+      const body = text(p.markdown) ?? text(p.content);
+      return (
+        <div className="space-y-1">
+          <div className="flex items-center justify-between gap-2">
+            <Link url={p.url ?? p.Ur}>{text(p.title) ?? undefined}</Link>
+            {withText && body ? <Button type="button" variant="ghost" size="sm" onClick={() => setOpen(open === i ? null : i)}>{open === i ? "Hide text" : `Read text (${plural(body.length, "character")})`}</Button> : null}
+          </div>
+          {withText && open === i && body ? <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-2 text-xs">{body.slice(0, 20_000)}</pre> : null}
+        </div>
+      );
+    }} />
+  );
+}
+
+function Visual({ data }: { data: Rec }) {
+  const logo = safeHttpUrl(data.logo_url);
+  const branding = isRec(data.branding) ? data.branding : {};
+  const colors = isRec(branding.colors) ? Object.entries(branding.colors).filter(([, v]) => typeof v === "string" && HEX.test(v)) : [];
+  const fonts = asArray(branding.fonts).map((f) => (isRec(f) ? text(f.family) ?? text(f.name) : text(f))).filter(Boolean) as string[];
+  return (
+    <div className="space-y-3">
+      {logo ? <img src={logo} alt="Company logo" className="h-12 max-w-48 object-contain" /> : null}
+      {colors.length ? (
+        <ul className="flex flex-wrap gap-3">
+          {colors.map(([name, value]) => (
+            <li key={name} className="flex items-center gap-2 text-xs">
+              <span aria-hidden className="size-6 rounded border border-border" style={{ backgroundColor: value as string }} />
+              <span>{humanize(name)} <span className="text-muted-foreground">{value as string}</span></span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {fonts.length ? <p className="text-sm">Fonts: {fonts.join(", ")}</p> : null}
+      {!logo && !colors.length && !fonts.length ? <p className="text-sm text-muted-foreground">No brand assets in this source.</p> : null}
+    </div>
+  );
+}
+
+function GenericRow({ row, lead }: { row: Rec; lead?: string }) {
+  const entries = Object.entries(row).filter(([, v]) => typeof v === "string" || typeof v === "number" || typeof v === "boolean");
+  const first = lead ? entries.find(([k]) => k === lead) : undefined;
+  return (
+    <div className="flex flex-wrap items-baseline gap-x-3">
+      {first ? <span className="font-medium">{String(first[1])}</span> : null}
+      {entries.filter(([k]) => k !== lead).slice(0, 8).map(([k, v]) => <span key={k} className="text-xs text-muted-foreground">{humanize(k)} {String(v)}</span>)}
+    </div>
+  );
+}
+
+/** Fallback: scalars as key/value pairs, nested objects and lists one level down. Depth-limited so a huge blob stays readable. */
+export function GenericData({ value, depth = 0 }: { value: unknown; depth?: number }) {
+  if (Array.isArray(value)) {
+    if (value.length === 0) return <p className="text-sm text-muted-foreground">Nothing here.</p>;
+    return <More items={value} noun="item" render={(v) => (isRec(v) && depth < 2 ? <GenericRow row={v} /> : <span>{typeof v === "object" ? "" : text(v) ?? ""}</span>)} />;
+  }
+  if (!isRec(value)) return <span className="text-sm">{text(value) ?? <EmptyValue />}</span>;
+  const scalars = Object.entries(value).filter(([, v]) => ["string", "number", "boolean"].includes(typeof v));
+  const nested = Object.entries(value).filter(([, v]) => v != null && typeof v === "object");
+  return (
+    <div className="space-y-3">
+      {scalars.length ? <KeyValueList columns={2} items={scalars.map(([k, v]) => ({ label: humanize(k), value: String(v) }))} /> : null}
+      {depth < 2 ? nested.map(([k, v]) => <SectionCard key={k} title={humanize(k)}><GenericData value={v} depth={depth + 1} /></SectionCard>) : null}
+    </div>
+  );
+}
+
+export interface SourceViewProps {
+  /** The source's type key, for example `company_enrichment`. */
+  dataType: string;
+  /** The `data` blob of the source. */
+  data: unknown;
+}
+
+export function SourceView({ dataType, data }: SourceViewProps) {
+  if (data == null) return <p className="text-sm text-muted-foreground">This source has no data yet.</p>;
+  const rec = isRec(data) ? data : null;
+  if (!rec) return <GenericData value={data} />;
+  switch (dataType) {
+    case "company_enrichment": return <CompanyProfileFields data={rec} />;
+    case "competitor_discovery": return <Competitors data={rec} />;
+    case "brand_news": return <News data={rec} />;
+    case "product_inventory": return <Products data={rec} />;
+    case "company_keywords":
+    case "organic_keywords":
+    case "paid_keywords": return <Keywords data={rec} />;
+    case "audience_questions": return <Questions data={rec} />;
+    case "search_trends": return <Trends data={rec} />;
+    case "top_content": return <Pages data={rec} />;
+    case "website_scrape": return <Pages data={rec} withText />;
+    case "visual_assets": return <Visual data={rec} />;
+    default: return <GenericData value={rec} />;
+  }
+}