@graph8/sdk 0.361.0 → 0.370.0

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

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * PagesScreen: the finished marketing-site workspace. No props needed.
+ *
+ * Composes: ScreenLayout (title, tabs, stats), SplitView + DetailPanel (landing page list and the selected
+ * page's editor, deep link `?id=`), PageList (list, filter, blank or AI create, publish, unpublish, delete),
+ * PageEditor (details, sections, preview, versions, publish), ContentLibrary, BrandKitEditor, SeoReport.
+ *
+ * Every record is deep-linkable: `?id=` opens a landing page (Edit and Details tabs) or, on the Content tab
+ * (`?tab=content`), a content item with all of its fields and actions; the Brand kit tab is the one brand record.
+ * `&view=full` shows the open record as a full page.
+ *
+ * User flows: see every landing page with its state, create one (blank is free, AI is a confirmed spend), open it
+ * beside the list, edit its sections, preview, restore a version, publish or unpublish (confirmed), delete
+ * (confirmed); manage the content inventory (add by URL, edit, SEO enrichment, delete); re-scan the brand kit and
+ * choose page layouts; run an SEO audit and track keywords. The editor changes text fields of sections-mode pages;
+ * freeform HTML pages can be previewed, published and versioned, and their HTML is edited in the graph8 app.
+ *
+ * SDK operations: listLandingPages (for the headline numbers only); everything else lives in the composed parts,
+ * which confirm every publish, unpublish, delete, AI generation and paid audit.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Globe } from "lucide-react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { asRec, num, rowsOf, shortDate, text } from "../lib/studio";
+import type { LandingPageRow } from "../lib/studio";
+import { BrandKitEditor } from "./brand-kit-editor";
+import { ContentLibrary } from "./content-library";
+import { PageEditor } from "./page-editor";
+import { PageList } from "./page-list";
+import { SeoReport } from "./seo-report";
+
+export interface PagesScreenProps {
+  /** Prefill the SEO audit domain. */
+  defaultDomain?: string;
+  renderDetailActions?: (pageId: string) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (pageId: string) => ReactNode }[];
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+type Tab = "pages" | "content" | "brand" | "seo";
+
+/** Every field of one landing page (name and slug are edited in the Edit tab). */
+function PageDetails({ pageId }: { pageId: string }) {
+  const res = useG8Query((signal) => g8Get(`/landing-pages/${encodeURIComponent(pageId)}`, undefined, { signal }), [pageId]);
+  if (res.error) return <ApiError error={res.error} title="Could not load the page" onRetry={() => void res.refetch()} />;
+  if (!res.data) return <Skeleton className="h-32 w-full" aria-busy="true" />;
+  const d = asRec(res.data.data);
+  const n = (k: string): string => (d[k] == null || d[k] === "" ? "Not set" : text(d[k]));
+  const sections = Array.isArray(d.sections) ? d.sections.length : null;
+  return (
+    <KeyValueList
+      columns={2}
+      items={[
+        { label: "Name", value: n("name") },
+        { label: "Status", value: n("status") },
+        { label: "Slug", value: n("slug") },
+        { label: "Mode", value: d.generation_mode === "freeform" ? "Freeform HTML" : "Sections" },
+        { label: "Sections", value: sections == null ? "None (freeform)" : String(sections) },
+        { label: "Live URL", value: n("published_url") },
+        { label: "Description", value: n("description") },
+        { label: "Created", value: shortDate(d.created_at) || "Not set" },
+        { label: "Updated", value: shortDate(d.updated_at) || "Not set" },
+        { label: "Page id", value: n("id") },
+        ...(d.error_message ? [{ label: "Last error", value: text(d.error_message) }] : []),
+      ]}
+    />
+  );
+}
+
+export function PagesScreen({ defaultDomain, renderDetailActions, extraDetailTabs, toolbarActions, className }: PagesScreenProps) {
+  const [tabParam, setTabParam] = useUrlState("tab", "pages");
+  const tab = (["pages", "content", "brand", "seo"].includes(tabParam) ? tabParam : "pages") as Tab;
+  const [pageId, setPageId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expandProps = { onExpand: () => setView("full"), onCollapse: view === "full" ? () => setView(null) : undefined };
+  // The list owns its own fetch; bumping this remounts it after the editor changed something (publish, rename).
+  const [rev, setRev] = useState(0);
+  const pages = useG8Query((signal) => g8Get("/landing-pages", { limit: 100 }, { signal }), [rev]);
+  const data = asRec(pages.data?.data);
+  const rows = rowsOf<LandingPageRow>(data, "landing_pages");
+  const total = num(data.total) ?? rows.length;
+  const published = rows.filter((p) => p.status === "published").length;
+  const current = tab === "pages" ? rows.find((p) => p.id === pageId) : undefined;
+
+  const detail = tab === "pages" && pageId ? (
+    <DetailPanel
+      title={current?.name || "Landing page"}
+      subtitle={current?.published_url ?? undefined}
+      badges={current ? <StatusPill tone={current.status === "published" ? "positive" : "neutral"}>{current.status}</StatusPill> : undefined}
+      actions={renderDetailActions?.(pageId)}
+      onClose={() => { setPageId(null); setView(null); }}
+      {...expandProps}
+      tabs={[
+        { id: "edit", label: "Edit", content: <PageEditor key={pageId} pageId={pageId} onSaved={() => setRev((r) => r + 1)} /> },
+        { id: "details", label: "Details", content: <PageDetails key={`${pageId}:${rev}`} pageId={pageId} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(pageId) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Pages"
+      description="Landing pages, your content library, the brand kit and SEO in one place."
+      icon={<Globe className="size-5" />}
+      actions={toolbarActions}
+      tabs={[
+        { id: "pages", label: "Landing pages", count: total },
+        { id: "content", label: "Content" },
+        { id: "brand", label: "Brand kit" },
+        { id: "seo", label: "SEO" },
+      ]}
+      activeTab={tab}
+      onTabChange={(id) => { setTabParam(id === "pages" ? null : id); setPageId(null); setView(null); }}
+      stats={tab === "pages" ? [
+        { label: "Landing pages", value: total.toLocaleString() },
+        { label: "Published", value: published.toLocaleString(), tone: "positive" },
+        { label: "Drafts", value: Math.max(0, rows.length - published).toLocaleString() },
+      ] : undefined}
+    >
+      {tab === "pages" ? (
+        <>
+          {pages.error ? <ApiError error={pages.error} title="Could not load landing pages" onRetry={() => void pages.refetch()} /> : null}
+          <SplitView
+            detailOpen={Boolean(pageId)}
+            onCloseDetail={() => { setPageId(null); setView(null); }}
+            expanded={view === "full"}
+            onExpandedChange={(e) => setView(e ? "full" : null)}
+            detailWidth="xl"
+            list={<PageList key={rev} onOpen={(id) => setPageId(id)} onDeleted={(id) => { if (id === pageId) { setPageId(null); setView(null); } setRev((r) => r + 1); }} />}
+            detail={detail}
+          />
+        </>
+      ) : tab === "content" ? <ContentLibrary selectedId={pageId || null} onSelectedChange={(id) => setPageId(id)} />
+        : tab === "brand" ? <BrandKitEditor />
+        : <SeoReport defaultDomain={defaultDomain} />}
+    </ScreenLayout>
+  );
+}

package/blocks/quotes/README.md

@@ -11,6 +11,22 @@ Install with `npx @graph8/sdk add quotes`.
 | `QuoteViewer` | One quote with totals and status-based actions: send/resend, edit as draft, duplicate, delete. |
 | `SignatureStatus` | Envelope state, signers, activity, reminder. |
 
+## Screens
+
+`QuotesScreen` (`components/quotes-screen.tsx`): `<QuotesScreen />`, optionally `dealId` or `companyId` to scope it.
+
+- Headline numbers by status (drafts, out for signature, accepted, declined) and the quote list with its status filter.
+- Open a quote (deep link `?id=<quote id>`): line items, totals, signer, signature progress, with the actions its status
+  allows. Send, resend, signature reminder and edit-as-draft are external and confirmed; delete is destructive and
+  confirmed; duplicate and saving a draft email nobody.
+- **New quote** asks for the deal first (search by name, skipped when `dealId` is given because graph8 attaches every
+  quote to a deal), then opens the builder (details, signer, line items from the quotable products, live totals).
+- Edit a draft from the viewer in a side sheet.
+- Slots, all optional: `renderDetailActions(quoteId)`, `extraDetailTabs`, `toolbarActions`.
+
+The deal search calls `GET /deals`, so the key also needs `deals:read` and the proxy `allowedPrefixes` need `deals`.
+
+
 ## Flow, in order (and the ids passed between steps)
 
 1. `GET /quotable-products` -> items with `prices[]`. A line item needs `stripe_product_id` + `stripe_price_id`, or `manual_product_id`
@@ -71,6 +87,7 @@ and **delete** (destructive). From code, never call `sendQuote` without the pers
 | `duplicateQuote` | POST `/api/v1/quotes/{quote_id}/duplicate` | external | `quotes:run` |
 | `deleteQuote` | DELETE `/api/v1/quotes/{quote_id}` | destructive | `quotes:delete` |
 | `resendEnvelope` | POST `/api/v1/envelopes/{envelope_id}/resend` | external | `quotes:run` |
+| `listDeals` | GET `/api/v1/deals` | read | `deals:read` (the deal picker in QuotesScreen) |
 
 ## Recipes
 

package/blocks/quotes/block.json

@@ -14,17 +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",
+    "delete_quote_quotes__quote_id__delete",
+    "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",
     "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",
-    "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"
+    "update_quote_quotes__quote_id__patch"
   ],
   "components": [
     {
@@ -93,6 +95,31 @@
         "read",
         "external"
       ]
+    },
+    {
+      "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": [
+        "list_deals_deals_get",
+        "list_quotes_quotes_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "ProductCatalog",
+      "file": "components/quote-related.tsx",
+      "purpose": "Quotable products with a full product record (fields and prices); also exports QuoteDealTab, the deal a quote belongs to.",
+      "operations": [
+        "list_quotable_products_quotable_products_get",
+        "get_quote_quotes__quote_id__get",
+        "get_deal_deals__deal_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -146,6 +173,7 @@
     }
   ],
   "scopes": [
+    "deals:read",
     "quotes:delete",
     "quotes:read",
     "quotes:run"
@@ -178,6 +206,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

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-list.tsx

@@ -25,17 +25,21 @@ export interface QuoteListProps {
   onOpen?: (quoteId: string) => void;
   onNew?: () => void;
   pageSize?: number;
+  /** Change it to reload the current page after a save or delete elsewhere on the screen. */
+  refreshKey?: number;
+  /** Mark this quote row as the open one. */
+  selectedId?: string | null;
   className?: string;
 }
 
 const STATUSES = ["", "draft", "sent", "viewed", "accepted", "declined", "voided", "expired", "archived"];
 
-export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, className }: QuoteListProps) {
+export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, className }: QuoteListProps) {
   const [status, setStatus] = useState("");
   const [page, setPage] = useState(1);
   const q = useG8Query(
     (signal) => g8Get("/quotes", { status: status || undefined, deal_id: dealId, mashup_company_id: companyId, page, limit: pageSize }, { signal }),
-    [status, dealId, companyId, page, pageSize],
+    [status, dealId, companyId, page, pageSize, refreshKey],
   );
   const data = body(q.data);
   const rows = (Array.isArray(data.items) ? data.items : []) as Rec[];
@@ -57,7 +61,7 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, cla
           <TableHeader><TableRow><TableHead>Quote</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Total</TableHead><TableHead>Sent</TableHead></TableRow></TableHeader>
           <TableBody>
             {rows.map((r) => (
-              <TableRow key={text(r.id)}>
+              <TableRow key={text(r.id)} data-state={selectedId === text(r.id) ? "selected" : undefined}>
                 <TableCell><button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(text(r.id))}>{text(r.title, "Untitled quote")}</button><div className="text-muted-foreground text-xs">{text(r.quote_number)}</div></TableCell>
                 <TableCell>{statusLabel(r.status)}</TableCell>
                 <TableCell className="text-right">{money(r.total, text(r.currency, "USD"))}</TableCell>

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

@@ -0,0 +1,123 @@
+"use client";
+
+/**
+ * Catalog and related-record views for the quotes screen.
+ *
+ * ProductCatalog: every quotable product (Stripe and manual) as a list, with a full product record (all fields and
+ * every price) in a detail panel, and a "Start a quote" action.
+ * QuoteDealTab: the deal a quote belongs to, as a tab of the quote's detail.
+ *
+ * SDK operations, in order:
+ *   ProductCatalog: GET /quotable-products?page&limit  (quotes.listQuotableProducts)  read
+ *   QuoteDealTab:   GET /quotes/{id}                   (quotes.getQuote)              read - finds the deal id
+ *                   GET /deals/{id}                    (deals.getDeal)                read
+ * Nothing here is billable, external or destructive.
+ */
+import { useState } from "react";
+import { Package } from "lucide-react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+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}`);
+
+export interface ProductCatalogProps {
+  /** Show the Start a quote action; wire it to your New quote flow. */
+  onStartQuote?: () => void;
+  pageSize?: number;
+}
+
+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]);
+  const data = body(q.data);
+  const items = (Array.isArray(data.items) ? data.items : []) as QuotableProduct[];
+  const product = items.find((p) => productKey(p) === selected);
+  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 ${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} {...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>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+
+  const detail = product ? (
+    <DetailPanel
+      title={product.name}
+      subtitle={product.category ?? undefined}
+      badges={<StatusPill tone="neutral">{product.source === "stripe" ? "Stripe" : "Manual"}</StatusPill>}
+      actions={onStartQuote ? <Button size="sm" onClick={onStartQuote}>Start a quote</Button> : undefined}
+      onClose={close}
+      onExpand={mode === "full" ? undefined : () => setMode("full")}
+      onCollapse={mode === "full" ? () => setMode(null) : undefined}
+      tabs={[{ id: "product", label: "Product", content: (
+        <div className="space-y-4">
+          <SectionCard title="Details">
+            <KeyValueList columns={2} items={[
+              { label: "Name", value: product.name }, { label: "Source", value: product.source }, { label: "Category", value: product.category },
+              { label: "Description", value: product.description }, { label: "Stripe product id", value: product.stripe_product_id, mono: true }, { label: "Manual product id", value: product.manual_product_id, mono: true },
+            ]} />
+          </SectionCard>
+          <SectionCard title="Prices" description="A quote line copies one of these prices.">
+            {product.prices.length === 0 ? <p className="text-sm text-muted-foreground">No flat price. Tiered Stripe prices cannot be quoted.</p> : (
+              <Table>
+                <TableHeader><TableRow><TableHead>Billing</TableHead><TableHead>Type</TableHead><TableHead className="text-right">Amount</TableHead></TableRow></TableHeader>
+                <TableBody>{product.prices.map((p, i) => <TableRow key={p.stripe_price_id ?? i}><TableCell>{cadence(p)}</TableCell><TableCell>{text(p.type)}</TableCell><TableCell className="text-right tabular-nums">{money(p.unit_amount, (p.currency ?? "usd").toUpperCase())}</TableCell></TableRow>)}</TableBody>
+              </Table>
+            )}
+          </SectionCard>
+        </div>
+      ) }]}
+    />
+  ) : null;
+
+  return <SplitView detailOpen={Boolean(product)} onCloseDetail={close} expanded={mode === "full" && Boolean(product)} onExpandedChange={(f) => setMode(f ? "full" : null)} list={list} detail={detail} />;
+}
+
+export function QuoteDealTab({ quoteId, onOpenDeal }: { quoteId: string; onOpenDeal?: (dealId: string) => void }) {
+  const q = useG8Query(async (signal) => {
+    const quote = body(await g8Get(`/quotes/${encodeURIComponent(quoteId)}`, undefined, { signal }));
+    const dealId = text(quote.deal_id);
+    if (!dealId) return null;
+    const env = await g8Get<Deal>(`/deals/${encodeURIComponent(dealId)}`, undefined, { signal });
+    return (env.data ?? env) as unknown as Deal;
+  }, [quoteId]);
+  if (q.error) return <ApiError error={q.error} title="Could not load the deal" onRetry={() => void q.refetch()} />;
+  if (q.loading && q.data === undefined) return <Skeleton className="h-24 w-full" aria-label="Loading deal" />;
+  const d = q.data;
+  if (!d) return <EmptyState title="No deal on this quote" />;
+  return (
+    <SectionCard title={d.name || "Deal"} actions={onOpenDeal ? <Button size="sm" variant="outline" onClick={() => onOpenDeal(d.id)}>Open deal</Button> : undefined}>
+      <KeyValueList columns={2} items={[
+        { label: "Stage", value: d.stage_name }, { label: "Amount", value: d.amount == null ? null : formatMoney(d.amount, d.currency) }, { label: "Owner", value: d.owner_name ?? d.owner_email },
+        { label: "Close date", value: d.close_date?.slice(0, 10) }, { label: "Pipeline", value: d.pipeline_name }, { label: "Contacts", value: d.contact_count },
+      ]} />
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,169 @@
+"use client";
+
+/**
+ * QuotesScreen: the finished quotes product. Every quote with its status, a viewer for the open one, a builder for
+ * new and draft quotes, and e-signature tracking. No props are required.
+ *
+ * It composes: ProductCatalog (Products tab), QuoteDealTab, QuoteList (status filter, paging), QuoteViewer (totals, send, resend, edit as draft, duplicate,
+ * delete, e-signature status and reminder), QuoteBuilder (details, signer, line items from ProductPicker) and a deal
+ * picker, because graph8 attaches every quote to a deal.
+ *
+ * Flows:
+ *   - Headline numbers by status: drafts, out for signature, accepted, declined.
+ *   - Open a quote (deep link ?id=<quote id>, full page with &view=full) -> line items, totals, signer, payment
+ *     terms, signature progress, and a Deal tab. The Products tab lists every quotable product; open one for all
+ *     its fields and prices (?tab=products&product=<id>).
+ *   - New quote: choose the deal (search by name; skipped when `dealId` is passed), then the builder. Saving a draft
+ *     emails nobody, so it needs no confirmation.
+ *   - Edit a draft from the viewer; duplicate; delete a draft (confirmed).
+ *   - Send for signature, resend, send a signature reminder, and edit a sent quote as a new draft: all external
+ *     actions, each behind ConfirmSpendDialog because they reach a real person.
+ *
+ * SDK operations (through the composed parts): listQuotes, getQuote, createQuote, updateQuotePatch,
+ * searchQuoteContacts, listQuotableProducts, sendQuote (external), editQuoteAsDraft (external), duplicateQuote,
+ * deleteQuote (destructive), resendEnvelope (external) and the deals block's listDeals (the deal picker).
+ *
+ * Slots (all optional): renderDetailActions, extraDetailTabs, toolbarActions.
+ */
+import { useState, type ReactNode } from "react";
+import { FileText, Plus, Search } from "lucide-react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+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 { 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 { useDebounced } from "../hooks/use-debounced";
+import { body } from "../lib/quotes";
+import { QuoteBuilder } from "./quote-builder";
+import { QuoteList } from "./quote-list";
+import { ProductCatalog, QuoteDealTab } from "./quote-related";
+import { QuoteViewer } from "./quote-viewer";
+
+export interface QuotesScreenProps {
+  /** Show only the quotes of this deal and create new ones for it. */
+  dealId?: string;
+  /** Show only the quotes of this company (mashup company id). */
+  companyId?: number;
+  renderDetailActions?: (quoteId: string) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (quoteId: string) => ReactNode }>;
+  toolbarActions?: ReactNode;
+  /** Open the quote's deal in your deals screen; without it the Deal tab is read-only. */
+  onOpenDeal?: (dealId: string) => void;
+}
+
+const STATUS_STATS: Array<{ status: string; label: string; tone?: "positive" | "negative" | "info" }> = [
+  { status: "draft", label: "Drafts" },
+  { status: "sent", label: "Out for signature", tone: "info" },
+  { status: "accepted", label: "Accepted", tone: "positive" },
+  { status: "declined", label: "Declined", tone: "negative" },
+];
+
+function useStatusTotals(dealId: string | undefined, companyId: number | undefined, refreshKey: number) {
+  return useG8Query(async (signal) => {
+    const totals = await Promise.all(STATUS_STATS.map(async (s) => {
+      const data = body(await g8Get("/quotes", { status: s.status, deal_id: dealId, mashup_company_id: companyId, page: 1, limit: 1 }, { signal }));
+      return typeof data.total === "number" ? data.total : 0;
+    }));
+    return totals;
+  }, [dealId, companyId, refreshKey]);
+}
+
+/** Step one of a new quote when no deal is given: find the deal the quote belongs to. */
+function DealStep({ onPick }: { onPick: (deal: Deal) => void }) {
+  const [text, setText] = useState("");
+  const term = useDebounced(text);
+  const deals = useG8Query(async (signal) => {
+    const env = await g8Get<Deal[]>("/deals", { search: term || undefined, limit: 10, page: 1 }, { signal });
+    return env.data ?? [];
+  }, [term]);
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">A quote belongs to a deal. Pick the deal first.</p>
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-2 top-2.5 size-4 text-muted-foreground" aria-hidden />
+        <Input aria-label="Search deals" className="pl-8" placeholder="Search deals by name" value={text} onChange={(e) => setText(e.target.value)} />
+      </div>
+      {deals.error ? <ApiError error={deals.error} title="Could not load deals" onRetry={() => void deals.refetch()} /> : null}
+      {!deals.loading && !deals.error && (deals.data ?? []).length === 0 ? <EmptyState title={term ? "No deals match" : "No deals yet"} description="Create a deal first, then quote it." /> : null}
+      <ul className="divide-y rounded-md border empty:hidden" aria-label="Deals">
+        {(deals.data ?? []).map((d) => (
+          <li key={d.id}>
+            <button type="button" className="flex w-full items-center justify-between gap-2 p-3 text-left text-sm hover:bg-muted" onClick={() => onPick(d)}>
+              <span><span className="font-medium">{d.name || "Untitled deal"}</span><span className="block text-xs text-muted-foreground">{d.stage_name ?? ""}</span></span>
+              <span className="tabular-nums text-muted-foreground">{formatMoney(d.amount, d.currency)}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function QuotesScreen({ dealId, companyId, renderDetailActions, extraDetailTabs, toolbarActions, onOpenDeal }: QuotesScreenProps) {
+  const [selectedId, setSelectedId] = useUrlState("id");
+  const [mode, setMode] = useUrlState("view");
+  const [tabParam, setTab] = useUrlState("tab", "quotes");
+  const tab = tabParam === "products" ? "products" : "quotes";
+  const [version, setVersion] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const [pickedDeal, setPickedDeal] = useState<Deal | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const totals = useStatusTotals(dealId, companyId, version);
+  const refresh = () => setVersion((v) => v + 1);
+  const close = () => { setSelectedId(null); setMode(null); };
+  const openNew = () => { setPickedDeal(null); setCreating(true); };
+  const saved = (id: string) => { setCreating(false); setEditingId(null); refresh(); setSelectedId(id); };
+  const builderDeal = dealId ?? pickedDeal?.id;
+
+  const stats = STATUS_STATS.map((s, i) => ({ label: s.label, value: totals.data ? (totals.data[i] ?? 0).toLocaleString() : "-", tone: s.tone }));
+
+  const detail = selectedId ? (
+    <DetailPanel
+      title="Quote"
+      actions={renderDetailActions?.(selectedId)}
+      onClose={close}
+      onExpand={mode === "full" ? undefined : () => setMode("full")}
+      onCollapse={mode === "full" ? () => setMode(null) : undefined}
+      tabs={[
+        { id: "quote", label: "Quote", content: <QuoteViewer key={selectedId} quoteId={selectedId} onEdit={setEditingId} onOpenQuote={(id) => { refresh(); setSelectedId(id); }} onDeleted={() => { close(); refresh(); }} /> },
+        { id: "deal", label: "Deal", content: <QuoteDealTab key={selectedId} quoteId={selectedId} onOpenDeal={onOpenDeal} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selectedId) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      title="Quotes"
+      description="Build quotes from your products, send them for signature and track who has signed."
+      icon={<FileText className="size-5" />}
+      actions={<>{toolbarActions}<Button onClick={openNew}><Plus className="size-4" aria-hidden />New quote</Button></>}
+      stats={stats}
+      tabs={[{ id: "quotes", label: "Quotes" }, { id: "products", label: "Products" }]}
+      activeTab={tab}
+      onTabChange={(id) => { setTab(id); close(); }}
+    >
+      {totals.error ? <ApiError error={totals.error} title="Could not load quote numbers" onRetry={() => void totals.refetch()} /> : null}
+      {tab === "products" ? <ProductCatalog onStartQuote={openNew} /> : <SplitView
+        detailOpen={Boolean(selectedId)}
+        onCloseDetail={close}
+        expanded={mode === "full" && Boolean(selectedId)}
+        onExpandedChange={(full) => setMode(full ? "full" : null)}
+        detail={detail}
+        list={<QuoteList dealId={dealId} companyId={companyId} refreshKey={version} selectedId={selectedId} onOpen={setSelectedId} onNew={openNew} />}
+      />}
+      <FormSheet open={creating} onOpenChange={setCreating} title="New quote" description={pickedDeal ? `For ${pickedDeal.name ?? "this deal"}` : undefined}>
+        {creating ? (builderDeal ? <QuoteBuilder key={builderDeal} dealId={builderDeal} companyId={companyId} onSaved={saved} /> : <DealStep onPick={setPickedDeal} />) : null}
+      </FormSheet>
+      <FormSheet open={editingId != null} onOpenChange={(o) => { if (!o) setEditingId(null); }} title="Edit draft quote">
+        {editingId ? <QuoteBuilder key={editingId} quoteId={editingId} onSaved={saved} /> : null}
+      </FormSheet>
+    </ScreenLayout>
+  );
+}

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 |