@graph8/sdk 0.362.0 → 0.370.0

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

@@ -0,0 +1,147 @@
+"use client";
+
+/**
+ * ObjectsScreen: the finished custom-objects workspace (HubSpot custom objects / Salesforce objects). Pick an object, work its
+ * records, open one for its values, owners, relationships and history, and define new objects and fields. No props are required.
+ *
+ * Composes: ScreenLayout, StatStrip, SplitView, FormSheet (screen kit) with ObjectTable, ObjectRecordDetail and
+ * ObjectSchemaEditor (this block). Standard objects (contacts, companies, deals) appear next to your own.
+ *
+ * Flows: switch between objects (deep link ?object=) - search the loaded rows, load more - create, edit and archive a record
+ * - open a record (deep link ?id=, full page with &view=full) to see values, owners, relationships and changes, edit, archive or restore it - define a
+ * new object, add, edit and archive fields, rename an object ("Define objects", needs an Admin key with objects:manage).
+ *
+ * SDK operations: none of its own. listObjects (picker, stats) is `read`; everything else runs inside the parts it composes,
+ * and every archive (record, field, object) goes through ConfirmSpendDialog. A 404 on the list call means the backend does not
+ * serve custom objects; the screen says so instead of showing an empty picker.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { Box, Maximize2, Minimize2, Settings2 } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useObjectSchema } from "../hooks/use-object-schema";
+import { isObjectsApiMissing } from "../lib/object-types";
+import type { ObjectDefinition } from "../lib/object-types";
+import { ObjectNotFound } from "./object-not-found";
+import { ObjectRecordDetail } from "./object-record-detail";
+import { ObjectSchemaEditor } from "./object-schema-editor";
+import { ObjectTable } from "./object-table";
+
+export interface ObjectsScreenProps {
+  /** Object to open when the URL names none. Default: the first non-standard object, else the first one. */
+  initialObjectSlug?: string;
+  /** Show "Define objects" (the schema editor). Default true; it needs an Admin key behind the proxy. */
+  allowSchemaEditing?: boolean;
+  /** Extra buttons in the page header. */
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+export function ObjectsScreen({ initialObjectSlug, allowSchemaEditing = true, toolbarActions, className }: ObjectsScreenProps) {
+  const [objectParam, setObjectParam] = useUrlState("object");
+  const [recordId, setRecordIdRaw] = useUrlState("id");
+  const [view, setView] = useUrlState("view");
+  const full = view === "full" && Boolean(recordId);
+  const setRecordId = (v: string | null): void => { if (v == null) setView(null); setRecordIdRaw(v); };
+  const [schemaOpen, setSchemaOpen] = useState(false);
+  const [tableKey, setTableKey] = useState(0);
+  const objects = useG8Query((signal) => g8Get<ObjectDefinition[]>("/objects", {}, { signal }).then((r) => r.data ?? []), []);
+  const all = (objects.data ?? []).filter((o) => !o.is_archived);
+  const slug = objectParam || initialObjectSlug || (all.find((o) => !o.is_system) ?? all[0])?.slug || "";
+  const current = all.find((o) => o.slug === slug);
+  const schema = useObjectSchema(slug || undefined);
+
+  const closeSchema = (open: boolean): void => {
+    setSchemaOpen(open);
+    if (open) return;
+    void objects.refetch();
+    void schema.refetch();
+    setTableKey((k) => k + 1);
+  };
+  const pick = (next: string) => { setObjectParam(next); setRecordId(null); };
+
+  if (isObjectsApiMissing(objects.error)) return <ObjectNotFound what="object" error={objects.error} />;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title={current?.plural_noun ?? "Objects"}
+      description="Records of any type you define, next to your standard contacts, companies and deals."
+      icon={<Box className="size-5" aria-hidden />}
+      actions={
+        <>
+          {toolbarActions}
+          {allowSchemaEditing ? <Button variant="outline" size="sm" onClick={() => setSchemaOpen(true)}><Settings2 className="size-4" aria-hidden />Define objects</Button> : null}
+        </>
+      }
+      stats={[
+        { label: "Objects", value: objects.loading && !objects.data ? "-" : all.length, hint: `${all.filter((o) => !o.is_system).length} custom` },
+        { label: "Fields on this object", value: slug && !schema.loading ? schema.attributes.length : "-" },
+      ]}
+    >
+      {objects.error ? <ApiError error={objects.error} title="Could not load objects" onRetry={() => void objects.refetch()} /> : null}
+      {objects.loading && !objects.data ? <Skeleton className="h-9 w-full" /> : null}
+
+      {all.length > 0 ? (
+        <div className="mb-3 flex flex-wrap gap-2" role="group" aria-label="Objects">
+          {all.map((o) => (
+            <Button key={o.slug} variant={o.slug === slug ? "default" : "outline"} size="sm" aria-pressed={o.slug === slug} onClick={() => pick(o.slug)}>
+              {o.plural_noun}{o.is_system ? <span className="ml-1 text-xs opacity-70">standard</span> : null}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+
+      {!objects.loading && !objects.error && all.length === 0 ? (
+        <EmptyState
+          title="No objects yet"
+          description="Define an object such as an invoice or a shipment, give it fields, then add records."
+          action={allowSchemaEditing ? <Button onClick={() => setSchemaOpen(true)}>Define your first object</Button> : undefined}
+        />
+      ) : null}
+
+      {slug ? (
+        <SplitView
+          detailOpen={Boolean(recordId)}
+          expanded={full}
+          onExpandedChange={(e) => setView(e ? "full" : null)}
+          onCloseDetail={() => setRecordId(null)}
+          detailWidth="lg"
+          list={<ObjectTable linkParam="id" key={`${slug}:${tableKey}`} objectSlug={slug} onSelectRecord={(r) => setRecordId(r.id)} />}
+          detail={recordId ? (
+            <div className="flex flex-col gap-2">
+              <div className="flex justify-end">
+                <Button variant="ghost" size="sm" onClick={() => setView(full ? null : "full")}>
+                  {full ? <Minimize2 className="size-4" aria-hidden /> : <Maximize2 className="size-4" aria-hidden />}{full ? "Back to split view" : "Open full page"}
+                </Button>
+              </div>
+            <ObjectRecordDetail
+              key={`${slug}:${recordId}`}
+              objectSlug={slug}
+              recordId={recordId}
+              onBack={() => setRecordId(null)}
+              onArchived={() => { setRecordId(null); setTableKey((k) => k + 1); }}
+            />
+            </div>
+          ) : null}
+        />
+      ) : null}
+
+      <FormSheet open={schemaOpen} onOpenChange={closeSchema} title="Define objects" description="Create objects, add fields, rename or archive them. Needs an Admin key.">
+        <ObjectSchemaEditor
+          initialObjectSlug={slug || undefined}
+          onSelectObject={pick}
+        />
+      </FormSheet>
+    </ScreenLayout>
+  );
+}

package/blocks/objects/lib/object-types.ts

@@ -8,7 +8,7 @@
  * an attribute definition into the right input, display text and API value.
  */
 
-import { G8Error } from "@graph8/sdk";
+import { G8Error } from "@graph8/sdk/errors";
 
 export type AttributeType =
   | "text" | "number" | "currency" | "date" | "timestamp" | "checkbox" | "select" | "status"

package/blocks/pages/block.json

@@ -14,43 +14,48 @@
     "foundation"
   ],
   "operations": [
-    "list_landing_pages_landing_pages_get",
+    "create_content_page_content_pages_post",
     "create_landing_page_landing_pages_post",
-    "publish_landing_page_landing_pages__landing_page_id__publish_post",
-    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
-    "delete_landing_page_landing_pages__landing_page_id__delete",
-    "get_landing_page_landing_pages__landing_page_id__get",
-    "update_landing_page_landing_pages__landing_page_id__patch",
-    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch",
     "create_landing_page_preview_link_landing_pages__landing_page_id__preview_get",
-    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
-    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
-    "list_content_pages_content_pages_get",
-    "create_content_page_content_pages_post",
-    "get_content_page_content_pages__page_id__get",
-    "update_content_page_content_pages__page_id__patch",
-    "enrich_content_page_content_pages__page_id__enrich_seo_post",
     "delete_content_page_content_pages__page_id__delete",
+    "delete_landing_page_landing_pages__landing_page_id__delete",
+    "enrich_content_page_content_pages__page_id__enrich_seo_post",
     "get_brand_kit_overview_brand_kit_get",
-    "trigger_brand_extraction_brand_kit_extract_post",
-    "list_archetypes_brand_kit_archetypes_get",
+    "get_content_page_content_pages__page_id__get",
+    "get_landing_page_landing_pages__landing_page_id__get",
     "get_layout_selections_brand_kit_layout_selections_get",
-    "save_layout_selections_brand_kit_layout_selections_put",
-    "list_seo_audits_seo_audits_get",
-    "start_seo_audit_seo_audits_post",
-    "get_seo_audit_seo_audits__audit_id__get",
     "get_seo_audit_issues_seo_audits__audit_id__issues_get",
+    "get_seo_audit_seo_audits__audit_id__get",
+    "list_archetypes_brand_kit_archetypes_get",
+    "list_content_pages_content_pages_get",
+    "list_landing_page_versions_landing_pages__landing_page_id__versions_get",
+    "list_landing_pages_landing_pages_get",
+    "list_seo_audits_seo_audits_get",
     "list_seo_tracked_keywords_seo_rank_tracking_get",
+    "publish_landing_page_landing_pages__landing_page_id__publish_post",
+    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post",
+    "restore_landing_page_version_landing_pages__landing_page_id__versions__version_num__restore_post",
+    "save_layout_selections_brand_kit_layout_selections_put",
     "save_seo_tracked_keywords_seo_rank_tracking_keywords_post",
-    "remove_seo_tracked_keywords_seo_rank_tracking_keywords_remove_post"
+    "start_seo_audit_seo_audits_post",
+    "trigger_brand_extraction_brand_kit_extract_post",
+    "unpublish_landing_page_landing_pages__landing_page_id__unpublish_post",
+    "update_content_page_content_pages__page_id__patch",
+    "update_landing_page_landing_pages__landing_page_id__patch",
+    "update_landing_page_section_landing_pages__landing_page_id__sections__section_idx__patch"
   ],
   "components": [
     {
       "name": "PagesScreen",
       "file": "components/pages-screen.tsx",
       "purpose": "Finished marketing-site workspace: landing pages with beside-the-list editor, content library, brand kit and SEO tabs.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "get_landing_page_landing_pages__landing_page_id__get",
+        "list_landing_pages_landing_pages_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "PageList",

package/blocks/pages/components/brand-kit-editor.tsx

@@ -99,7 +99,9 @@ function Layouts() {
   const picked = edit ?? saved;
   const save = useG8Mutation(() => g8Put("/brand-kit/layout-selections", { archetype_ids: picked }), { onSuccess: () => { setEdit(null); void selections.refetch(); } });
   const rows = rowsOf<Rec>(archetypes.data?.data);
-  const dirty = edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
+  // The saved selection must be known before anything is ticked or saved: ticking first would replace it with just that box.
+  const savedKnown = selections.data !== undefined && !selections.error;
+  const dirty = savedKnown && edit !== null && JSON.stringify([...picked].sort()) !== JSON.stringify([...saved].sort());
   const toggle = (id: string) => setEdit(picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id]);
   return (
     <Card>
@@ -107,13 +109,14 @@ function Layouts() {
       <CardContent className="space-y-3">
         <p className="text-muted-foreground text-sm">New landing pages are built from the layouts you tick.</p>
         {archetypes.error ? <ApiError error={archetypes.error} onRetry={() => void archetypes.refetch()} /> : null}
+        {selections.error ? <ApiError error={selections.error} title="Could not load your saved layouts" onRetry={() => void selections.refetch()} /> : null}
         {archetypes.loading && !archetypes.data ? <Skeleton className="h-24 w-full" /> : null}
         <div className="grid gap-2 sm:grid-cols-2">
           {rows.map((a) => {
             const id = text(a.id);
             return (
               <label key={id} className="flex cursor-pointer items-start gap-2 rounded-md border p-3 text-sm">
-                <input type="checkbox" checked={picked.includes(id)} onChange={() => toggle(id)} aria-label={text(a.name)} />
+                <input type="checkbox" checked={picked.includes(id)} disabled={!savedKnown} onChange={() => toggle(id)} aria-label={text(a.name)} />
                 <span><span className="font-medium">{text(a.name)}</span><br /><span className="text-muted-foreground">{text(a.description)}</span></span>
               </label>
             );

package/blocks/pages/components/content-library.tsx

@@ -25,6 +25,7 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
 import type { ContentPageRow, Rec } from "../lib/studio";
+import { plural } from "@/g8/lib/plural";
 
 export interface ContentLibraryProps {
   pageSize?: number;
@@ -70,7 +71,10 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
   useEffect(() => {
     setForm({ title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) });
   }, [detail.data]);
-  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, form), { onSuccess: () => { onSaved(); onClose(); } });
+  // Only the fields the person changed are sent, so nothing they did not touch can be blanked.
+  const original = { title: text(d.title), primary_keyword: text(d.primary_keyword), content_status: text(d.content_status, "idea"), body_content: text(d.body_content) };
+  const changed = Object.fromEntries(Object.entries(form).filter(([k, v]) => v !== original[k as keyof typeof original]));
+  const save = useG8Mutation(() => g8Patch(`/content/pages/${encodeURIComponent(pageId)}`, changed), { onSuccess: () => { onSaved(); onClose(); } });
   return (
     <Sheet open onOpenChange={(open) => { if (!open) onClose(); }}>
       <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
@@ -80,7 +84,8 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
         </SheetHeader>
         <div className="space-y-3 px-4 pb-4">
           {detail.error ? <ApiError error={detail.error} onRetry={() => void detail.refetch()} /> : null}
-          {detail.loading && !detail.data ? <Skeleton className="h-32 w-full" /> : (
+          {/* The form (and Save) exist only once the page has loaded: after a failed load there is nothing to edit over. */}
+          {!detail.data ? (detail.error ? null : <Skeleton className="h-32 w-full" />) : (
             <>
               <dl className="grid grid-cols-2 gap-2 text-sm">
                 {contentFacts(d).map(([k, v]) => (
@@ -96,7 +101,7 @@ function EditSheet({ pageId, onClose, onSaved, onAction }: { pageId: string; onC
               <div className="space-y-1"><Label htmlFor="cl-status">Status</Label><Select id="cl-status" value={form.content_status} options={STATUSES.slice(1)} onChange={(v) => setForm({ ...form, content_status: v })} /></div>
               <div className="space-y-1"><Label htmlFor="cl-body">Body</Label><Textarea id="cl-body" rows={10} value={form.body_content} onChange={(e) => setForm({ ...form, body_content: e.target.value })} /></div>
               {save.error ? <ApiError error={save.error} title="Could not save" /> : null}
-              <Button loading={save.loading} onClick={() => void save.mutate(undefined)}>Save</Button>
+              <Button loading={save.loading} disabled={Object.keys(changed).length === 0} onClick={() => void save.mutate(undefined)}>Save</Button>
             </>
           )}
         </div>
@@ -173,7 +178,7 @@ export function ContentLibrary({ pageSize = 25, className, selectedId, onSelecte
         </Table>
       )}
       <div className="mt-3 flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{total} {total === 1 ? "item" : "items"}</span>
+        <span className="text-muted-foreground">{plural(total, "item")}</span>
         <div className="flex gap-2">
           <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
           <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>

package/blocks/pages/components/page-list.tsx

@@ -25,6 +25,7 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
 import type { LandingPageRow } from "../lib/studio";
+import { plural } from "@/g8/lib/plural";
 
 export interface PageListProps {
   /** Called with the page id when a row is opened. Wire it to your PageEditor route. */
@@ -145,7 +146,7 @@ export function PageList({ onOpen, onDeleted, pageSize = 25, className }: PageLi
       )}
 
       <div className="mt-3 flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">{total} {total === 1 ? "page" : "pages"}</span>
+        <span className="text-muted-foreground">{plural(total, "page")}</span>
         <div className="flex gap-2">
           <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
           <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>

package/blocks/quotes/block.json

@@ -14,19 +14,19 @@
     "deals"
   ],
   "operations": [
-    "list_quotes_quotes_get",
-    "get_quote_quotes__quote_id__get",
-    "search_quote_contacts_quote_contacts_get",
     "create_quote_quotes_post",
-    "update_quote_quotes__quote_id__patch",
-    "list_quotable_products_quotable_products_get",
-    "send_quote_quotes__quote_id__send_post",
-    "edit_quote_as_draft_quotes__quote_id__edit_as_draft_post",
-    "duplicate_quote_quotes__quote_id__duplicate_post",
     "delete_quote_quotes__quote_id__delete",
-    "resend_envelope_envelopes__envelope_id__resend_post",
+    "duplicate_quote_quotes__quote_id__duplicate_post",
+    "edit_quote_as_draft_quotes__quote_id__edit_as_draft_post",
+    "get_deal_deals__deal_id__get",
+    "get_quote_quotes__quote_id__get",
     "list_deals_deals_get",
-    "get_deal_deals__deal_id__get"
+    "list_quotable_products_quotable_products_get",
+    "list_quotes_quotes_get",
+    "resend_envelope_envelopes__envelope_id__resend_post",
+    "search_quote_contacts_quote_contacts_get",
+    "send_quote_quotes__quote_id__send_post",
+    "update_quote_quotes__quote_id__patch"
   ],
   "components": [
     {
@@ -100,8 +100,13 @@
       "name": "QuotesScreen",
       "file": "components/quotes-screen.tsx",
       "purpose": "Finished quotes product: status numbers, list, viewer with send and signature tracking, deal-first builder and draft editing.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "list_deals_deals_get",
+        "list_quotes_quotes_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "ProductCatalog",

package/blocks/quotes/components/product-picker.tsx

@@ -22,6 +22,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { body, frequencyOf, lineFromProduct, money, text } from "../lib/quotes";
 import type { LineItem, ProductPrice, QuotableProduct } from "../lib/quotes";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ProductPickerProps {
   /** Only offer prices in this currency (the quote's currency). */
@@ -34,6 +35,7 @@ export interface ProductPickerProps {
 const intervalLabel = (p: ProductPrice) => (frequencyOf(p.recurring_interval) === "one_time" ? "one time" : `per ${p.recurring_interval}`);
 
 export function ProductPicker({ currency, onPick, pageSize = 25, className }: ProductPickerProps) {
+  const brand = useBrand();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const q = useG8Query((signal) => g8Get("/quotable-products", { currency: currency?.toUpperCase(), page, limit: pageSize }, { signal }), [currency, page, pageSize]);
@@ -49,7 +51,7 @@ export function ProductPicker({ currency, onPick, pageSize = 25, className }: Pr
       {q.error ? <ApiError error={q.error} onRetry={() => void q.refetch()} /> : null}
       {q.loading && !q.data ? <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-12 w-full" />)}</div> : null}
       {!q.loading && !q.error && shown.length === 0 ? (
-        <EmptyState title="No quotable products" description="Mark a Stripe product as quotable, or add a manual product, in graph8's quote settings." />
+        <EmptyState title="No quotable products" description={`Mark a Stripe product as quotable, or add a manual product, in ${brand.linkLabel}'s quote settings.`} />
       ) : null}
       <ul className="divide-y rounded-md border">
         {shown.map((p) => (

package/blocks/quotes/components/quote-related.tsx

@@ -27,7 +27,9 @@ import { useUrlState } from "@/g8/hooks/use-url-state";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { formatMoney, type Deal } from "@/g8/deals/lib/deals-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
 import { body, frequencyOf, money, text, type QuotableProduct, type ProductPrice } from "../lib/quotes";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 const productKey = (p: QuotableProduct) => p.stripe_product_id ?? p.manual_product_id ?? p.name;
 const cadence = (p: ProductPrice) => (frequencyOf(p.recurring_interval) === "one_time" ? "One time" : `Per ${p.recurring_interval}`);
@@ -39,6 +41,7 @@ export interface ProductCatalogProps {
 }
 
 export function ProductCatalog({ onStartQuote, pageSize = 50 }: ProductCatalogProps) {
+  const brand = useBrand();
   const [selected, setSelected] = useUrlState("product");
   const [mode, setMode] = useUrlState("view");
   const q = useG8Query((signal) => g8Get("/quotable-products", { page: 1, limit: pageSize }, { signal }), [pageSize]);
@@ -48,13 +51,13 @@ export function ProductCatalog({ onStartQuote, pageSize = 50 }: ProductCatalogPr
   const close = () => { setSelected(null); setMode(null); };
 
   const list = q.error ? <ApiError error={q.error} title="Could not load products" onRetry={() => void q.refetch()} /> : q.loading && !q.data ? <Skeleton className="h-40 w-full" aria-label="Loading products" /> : items.length === 0 ? (
-    <EmptyState icon={<Package className="size-8" />} title="No quotable products" description="Mark a Stripe product as quotable, or add a manual product, in graph8's quote settings." />
+    <EmptyState icon={<Package className="size-8" />} title="No quotable products" description={`Mark a Stripe product as quotable, or add a manual product, in ${brand.linkLabel}'s quote settings.`} />
   ) : (
     <Table>
       <TableHeader><TableRow><TableHead>Product</TableHead><TableHead>Source</TableHead><TableHead className="text-right">Prices</TableHead></TableRow></TableHeader>
       <TableBody>
         {items.map((p) => (
-          <TableRow key={productKey(p)} className="cursor-pointer" data-state={productKey(p) === selected ? "selected" : undefined} onClick={() => setSelected(productKey(p))}>
+          <TableRow key={productKey(p)} className="cursor-pointer" data-state={productKey(p) === selected ? "selected" : undefined} {...rowActivationProps(() => setSelected(productKey(p)))}>
             <TableCell><button type="button" className="font-medium hover:underline" onClick={(e) => { e.stopPropagation(); setSelected(productKey(p)); }}>{p.name}</button><div className="text-xs text-muted-foreground">{p.category}</div></TableCell>
             <TableCell><StatusPill tone="neutral">{p.source === "stripe" ? "Stripe" : "Manual"}</StatusPill></TableCell>
             <TableCell className="text-right tabular-nums">{p.prices.length}</TableCell>

package/blocks/radar/README.md

@@ -5,6 +5,16 @@ deep-dive reports. Depends only on `foundation`.
 
 Install: `npx @graph8/sdk add radar`.
 
+## Screens
+
+`RadarScreen` (`components/radar-screen.tsx`) is the finished page: copy it as your route. No props are required.
+
+- **Overview tab**: stat strip, threat board (click a row to open its battle card), alerts and recent moves.
+- **Competitors tab**: add, bulk-add detected, scan, pause, resume and remove competitors; the selected one opens its battle card
+  in a side panel. Deep link: `?id=<competitor id>`. **Reports tab**: generate and open deep-dive reports.
+- Scans and reports spend credits and are confirmed; removing a competitor is confirmed as destructive.
+- Slots: `toolbarActions`, `renderDetailActions(record)`, `extraDetailTabs` (each `{ id, label, render(record) }`), where `record` is `{ kind: "competitor" | "report", id }`.
+
 ## What you get
 
 | Component | Use it for | Props |

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