@graph8/sdk 0.370.0 → 0.373.0

package/blocks/quotes/components/create-quote-from-deal.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+/**
+ * CreateQuoteFromDeal: a "Create quote from this deal" button. It opens a side sheet with the quote builder for the
+ * deal, and after saving the draft shows the quote itself (send, duplicate, lifecycle) in the same sheet.
+ *
+ * Drop it into the deals screen's Quotes tab: `<DealsScreen renderQuoteActions={(deal) => <CreateQuoteFromDeal dealId={deal.id} />} />`.
+ * It cannot live in the deals block because quotes depends on deals, not the other way round.
+ *
+ * SDK operations (through QuoteBuilder and QuoteViewer): listQuotableProducts, searchQuoteContacts, createQuote and
+ * updateQuotePatch (a draft emails nobody, so it saves in one click), then getQuote and the viewer's actions. Sending,
+ * editing a sent quote as a draft, deleting and every lifecycle change stay behind ConfirmSpendDialog in QuoteViewer.
+ */
+import { useState } from "react";
+import { FileText } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { QuoteBuilder } from "./quote-builder";
+import { QuoteViewer } from "./quote-viewer";
+
+export interface CreateQuoteFromDealProps {
+  dealId: string;
+  /** Company (mashup company id) used to find signer contacts. */
+  companyId?: number;
+  label?: string;
+  /** Called with the new quote's id once the draft is saved. */
+  onCreated?: (quoteId: string) => void;
+  className?: string;
+}
+
+export function CreateQuoteFromDeal({ dealId, companyId, label = "Create quote from this deal", onCreated, className }: CreateQuoteFromDealProps) {
+  const [open, setOpen] = useState(false);
+  const [quoteId, setQuoteId] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+  const close = (next: boolean) => { setOpen(next); if (!next) { setQuoteId(null); setEditing(false); } };
+  return (
+    <>
+      <Button className={className} size="sm" onClick={() => setOpen(true)}><FileText className="size-4" aria-hidden />{label}</Button>
+      <FormSheet open={open} onOpenChange={close} title={quoteId ? "Quote" : "New quote"} description={quoteId ? undefined : "The quote is attached to this deal."} width="xl">
+        {open ? (quoteId && editing
+          ? <QuoteBuilder key={`edit-${quoteId}`} quoteId={quoteId} onSaved={(id) => { setQuoteId(id); setEditing(false); }} />
+          : quoteId
+            ? <QuoteViewer key={quoteId} quoteId={quoteId} onEdit={() => setEditing(true)} onOpenQuote={setQuoteId} onDeleted={() => close(false)} />
+            : <QuoteBuilder key={dealId} dealId={dealId} companyId={companyId} onSaved={(id) => { setQuoteId(id); onCreated?.(id); }} />) : null}
+      </FormSheet>
+    </>
+  );
+}

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

@@ -178,7 +178,7 @@ export function QuoteBuilder({ quoteId, dealId, companyId, currency = "USD", onS
           <div className="text-right text-sm" data-testid="totals">
             <div>Subtotal {money(sub, form.currency)}</div>
             <div>Tax {money(taxCents, form.currency)}</div>
-            <div className="font-semibold">Total {money(sub + taxCents, form.currency)}</div>
+            <div className="font-medium">Total {money(sub + taxCents, form.currency)}</div>
           </div>
           <details>
             <summary className="cursor-pointer text-sm font-medium">Add a product</summary>

package/blocks/quotes/components/quote-lifecycle-actions.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+/**
+ * QuoteLifecycleActions: what you can do with a quote after it exists: download the PDF, archive or restore it, and
+ * for a quote that is out for signature, expire it, revoke it or mark it accepted. QuoteViewer renders it under the
+ * header; it can also be mounted on its own for a quote you already loaded.
+ *
+ * SDK operations, in order:
+ *   1. GET  /quotes/{id}/pdf                (quotes.getQuotePdf)       read        - the document as the customer sees it
+ *   2. POST /quotes/{id}/archive            (quotes.archiveQuote)      DESTRUCTIVE - off the active list, reversible -> ConfirmSpendDialog
+ *      POST /quotes/{id}/unarchive          (quotes.unarchiveQuote)    external    -> ConfirmSpendDialog
+ *   3. POST /quotes/{id}/expire             (quotes.expireQuote)       DESTRUCTIVE - terminal, the customer's link stops working -> ConfirmSpendDialog
+ *   4. POST /quotes/{id}/revoke             (quotes.revokeQuote)       DESTRUCTIVE - terminal, withdraws a sent quote -> ConfirmSpendDialog
+ *   5. POST /quotes/{id}/mark-accepted { evidence_type, evidence_note }  (quotes.markQuoteAccepted)  external - RAISES AN INVOICE -> ConfirmSpendDialog
+ * Status rules (the API enforces them too): expire, revoke and mark accepted apply to sent or viewed quotes; archive
+ * to any quote that is not archived. Marking accepted runs the same provisioning as a signed envelope, so use it only
+ * when the customer paid or signed outside the product; the evidence is stored on the audit trail.
+ * The PDF endpoint answers JSON: a link (`url`, `pdf_url`, `download_url`) opens in a new tab, base64 content downloads.
+ */
+import { useState } from "react";
+import { Download } from "lucide-react";
+import { Button, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { asRec, text } from "../lib/quotes";
+
+export interface QuoteLifecycleActionsProps {
+  quoteId: string;
+  /** The quote's status: draft, sent, viewed, accepted, declined, voided, expired or archived. */
+  status: string;
+  /** True when the quote is archived (a status of "archived", or an archived flag on the record). */
+  archived?: boolean;
+  /** Shown in the dialogs and used for the PDF file name. */
+  title?: string;
+  quoteNumber?: string;
+  /** Called after any lifecycle change, so the caller reloads the quote. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+type Pending = "archive" | "unarchive" | "expire" | "revoke" | "accept";
+
+export const EVIDENCE_TYPES: Array<[string, string]> = [
+  ["offline_signature", "Signed offline"],
+  ["customer_email", "Customer confirmed by email"],
+  ["verbal_authorization", "Verbal authorization"],
+  ["payment_received", "Payment received"],
+];
+
+function base64Bytes(b64: string): Uint8Array {
+  const bin = atob(b64.replace(/^data:application\/pdf;base64,/, "").replace(/\s/g, ""));
+  return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+}
+
+/** Open or save the PDF an `/pdf` response describes. Throws when it carries neither a link nor content. */
+export function deliverPdf(res: unknown, filename: string): void {
+  const raw = asRec(res);
+  const data = "data" in raw ? raw.data : raw;
+  const rec = asRec(data);
+  const link = typeof data === "string" && /^https?:/.test(data) ? data : text(rec.pdf_url ?? rec.download_url ?? rec.signed_url ?? rec.url ?? rec.link);
+  if (link) {
+    window.open(link, "_blank", "noopener,noreferrer");
+    return;
+  }
+  const b64 = typeof data === "string" ? data : text(rec.pdf_base64 ?? rec.content_base64 ?? rec.base64 ?? rec.pdf ?? rec.content);
+  if (!b64) throw new Error("The API returned no PDF for this quote (no link and no file content).");
+  const url = URL.createObjectURL(new Blob([base64Bytes(b64) as BlobPart], { type: "application/pdf" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+export function QuoteLifecycleActions({ quoteId, status, archived = false, title, quoteNumber, onChanged, className }: QuoteLifecycleActionsProps) {
+  const base = `/quotes/${encodeURIComponent(quoteId)}`;
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [evidenceType, setEvidenceType] = useState(EVIDENCE_TYPES[0][0]);
+  const [evidenceNote, setEvidenceNote] = useState("");
+  const [needNote, setNeedNote] = useState(false);
+  const name = title || "this quote";
+  const out = status === "sent" || status === "viewed";
+  const isArchived = archived || status === "archived";
+
+  const pdf = useG8Mutation(async () => { deliverPdf(await g8Get(`${base}/pdf`), `${quoteNumber || "quote"}.pdf`); });
+  const run = useG8Mutation(async (kind: Pending) => {
+    if (kind === "accept") return g8Post(`${base}/mark-accepted`, { evidence_type: evidenceType, evidence_note: evidenceNote.trim() });
+    return g8Post(`${base}/${kind}`);
+  }, {
+    invalidates: [["quotes"]],
+    onSuccess: () => { setPending(null); setEvidenceNote(""); setNeedNote(false); onChanged?.(); },
+  });
+  const cancel = () => { setPending(null); setNeedNote(false); };
+  const confirm = (kind: Pending) => {
+    if (kind === "accept" && !evidenceNote.trim()) { setNeedNote(true); return; }
+    void run.mutate(kind);
+  };
+
+  return (
+    <div className={className}>
+      <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Quote lifecycle">
+        {isArchived ? <span className="text-xs text-muted-foreground">Archived</span> : null}
+        <Button size="sm" variant="outline" loading={pdf.loading} onClick={() => void pdf.mutate(undefined)}><Download className="size-4" aria-hidden />Download PDF</Button>
+        {out ? <Button size="sm" variant="outline" onClick={() => setPending("accept")}>Mark accepted</Button> : null}
+        {out ? <Button size="sm" variant="ghost" onClick={() => setPending("revoke")}>Revoke</Button> : null}
+        {out ? <Button size="sm" variant="ghost" onClick={() => setPending("expire")}>Expire</Button> : null}
+        {isArchived ? <Button size="sm" variant="ghost" onClick={() => setPending("unarchive")}>Unarchive</Button> : <Button size="sm" variant="ghost" onClick={() => setPending("archive")}>Archive</Button>}
+      </div>
+      {pdf.error ? <ApiError error={pdf.error} title="Could not get the PDF" /> : null}
+      {run.error ? <ApiError error={run.error} title="That quote action failed" /> : null}
+
+      {pending === "archive" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Archive "${name}"?`} confirmLabel="Archive" affected={1} confirming={run.loading}
+          description="The quote leaves the active list. Nothing is sent and you can unarchive it later." onConfirm={() => confirm("archive")} onCancel={cancel} />
+      ) : null}
+      {pending === "unarchive" ? (
+        <ConfirmSpendDialog open tier="external" title={`Unarchive "${name}"?`} confirmLabel="Unarchive" confirming={run.loading}
+          description="The quote returns to the active list." onConfirm={() => confirm("unarchive")} onCancel={cancel} />
+      ) : null}
+      {pending === "expire" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Expire "${name}"?`} confirmLabel="Expire quote" affected={1} confirming={run.loading}
+          description="The customer's link stops working. This is final: create a new quote to offer it again." onConfirm={() => confirm("expire")} onCancel={cancel} />
+      ) : null}
+      {pending === "revoke" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Revoke "${name}"?`} confirmLabel="Revoke quote" affected={1} confirming={run.loading}
+          description="Withdraws the quote you already sent, so the customer can no longer sign it. This is final: use it when the offer itself was wrong." onConfirm={() => confirm("revoke")} onCancel={cancel} />
+      ) : null}
+      {pending === "accept" ? (
+        <ConfirmSpendDialog open tier="external" title={`Mark "${name}" accepted?`} confirmLabel="Mark accepted" recipients={1} confirming={run.loading}
+          description={(
+            <div className="space-y-2 text-left">
+              <p>Accepts the quote on the customer&apos;s behalf. This raises an invoice or subscription with your billing provider, the same as a signed quote. Use it only when the customer paid or signed outside the product.</p>
+              <select aria-label="Evidence type" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={evidenceType} onChange={(e) => setEvidenceType(e.target.value)}>
+                {EVIDENCE_TYPES.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+              </select>
+              <Textarea aria-label="Evidence note" rows={3} placeholder="Describe the evidence (required), for example the email date or payment reference" value={evidenceNote} onChange={(e) => { setEvidenceNote(e.target.value); setNeedNote(false); }} />
+              {needNote ? <p role="alert" className="text-sm text-destructive">Add a note describing the evidence before accepting.</p> : null}
+            </div>
+          )}
+          onConfirm={() => confirm("accept")} onCancel={cancel} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -4,7 +4,7 @@
  * QuoteList: quotes with a status filter, totals in the quote's own currency, and paging.
  *
  * SDK operations, in the order the screen uses them:
- *   1. listQuotes  GET /quotes?status&mashup_company_id&deal_id&page&limit  (read; `{ items, total, page, limit }`)
+ *   1. listQuotes  GET /quotes?status&include_archived&mashup_company_id&deal_id&page&limit  (read; `{ items, total, page, limit }`)
  *
  * Read-only: no billable, external or destructive call, so no confirmation. Pass `dealId` or `companyId` to show the
  * quotes of one deal or company (for a tab on a deal page). `onOpen` receives the quote id for QuoteViewer.
@@ -36,10 +36,11 @@ const STATUSES = ["", "draft", "sent", "viewed", "accepted", "declined", "voided
 
 export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, className }: QuoteListProps) {
   const [status, setStatus] = useState("");
+  const [archived, setArchived] = useState(false);
   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, refreshKey],
+    (signal) => g8Get("/quotes", { status: status || undefined, include_archived: archived || undefined, deal_id: dealId, mashup_company_id: companyId, page, limit: pageSize }, { signal }),
+    [status, archived, dealId, companyId, page, pageSize, refreshKey],
   );
   const data = body(q.data);
   const rows = (Array.isArray(data.items) ? data.items : []) as Rec[];
@@ -51,6 +52,7 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, ref
         <select aria-label="Status" value={status} onChange={(e) => { setStatus(e.target.value); setPage(1); }} className="border-input bg-background h-9 rounded-md border px-2 text-sm">
           {STATUSES.map((s) => <option key={s} value={s}>{s ? statusLabel(s) : "All statuses"}</option>)}
         </select>
+        <label className="flex items-center gap-1 text-sm text-muted-foreground"><input type="checkbox" checked={archived} onChange={(e) => { setArchived(e.target.checked); setPage(1); }} />Include archived</label>
         {onNew ? <Button className="ml-auto" onClick={onNew}>New quote</Button> : null}
       </div>
       {q.error ? <ApiError error={q.error} onRetry={() => void q.refetch()} /> : null}

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

@@ -5,7 +5,7 @@
  *
  * 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.
+ * QuoteDealTab: the deal a quote belongs to, as a tab of the quote's detail, with "Create another quote" (CreateQuoteFromDeal).
  *
  * SDK operations, in order:
  *   ProductCatalog: GET /quotable-products?page&limit  (quotes.listQuotableProducts)  read
@@ -28,6 +28,7 @@ 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 { CreateQuoteFromDeal } from "./create-quote-from-deal";
 import { body, frequencyOf, money, text, type QuotableProduct, type ProductPrice } from "../lib/quotes";
 import { useBrand } from "@/g8/hooks/use-brand";
 
@@ -113,7 +114,7 @@ export function QuoteDealTab({ quoteId, onOpenDeal }: { quoteId: string; onOpenD
   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}>
+    <SectionCard title={d.name || "Deal"} actions={<>{onOpenDeal ? <Button size="sm" variant="outline" onClick={() => onOpenDeal(d.id)}>Open deal</Button> : null}<CreateQuoteFromDeal dealId={d.id} label="Create another quote" /></>}>
       <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 },

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

@@ -11,6 +11,9 @@
  *   4. duplicateQuote   POST   /quotes/{id}/duplicate         (external tier, but only copies into a new draft)
  *   5. deleteQuote      DELETE /quotes/{id}                   (destructive; drafts only)
  *
+ * The lifecycle row (QuoteLifecycleActions): download the PDF, archive or unarchive, and for a sent quote expire, revoke or
+ * mark accepted. Those operations live in that component and each risky one is confirmed there.
+ *
  * Send, edit-as-draft and delete go through ConfirmSpendDialog. Duplicate creates an unsent draft and emails
  * nobody, so it runs on one click (same reasoning as saving a draft in QuoteBuilder).
  * Send needs a signer on the quote; without one the button explains what is missing instead of failing.
@@ -24,6 +27,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { asRec, body, lineTotal, linesFromQuote, money, statusLabel, text } from "../lib/quotes";
+import { QuoteLifecycleActions } from "./quote-lifecycle-actions";
 import { SignatureStatus } from "./signature-status";
 
 export interface QuoteViewerProps {
@@ -75,7 +79,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
   return (
     <div className={className}>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <h2 className="text-lg font-semibold">{text(d.title, "Untitled quote")}</h2>
+        <h2 className="text-lg font-medium">{text(d.title, "Untitled quote")}</h2>
         <span className="text-muted-foreground text-sm" data-testid="quote-status">{statusLabel(status)} · {text(d.quote_number)}</span>
         <div className="ml-auto flex flex-wrap gap-2">
           {draft ? <Button variant="outline" onClick={() => onEdit?.(quoteId)}>Edit</Button> : null}
@@ -85,6 +89,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
           {draft || sent ? <Button disabled={!hasSigner} title={hasSigner ? undefined : "Add a signer in the builder first"} onClick={() => setPending("send")}>{sent ? "Resend" : "Send for signature"}</Button> : null}
         </div>
       </div>
+      <QuoteLifecycleActions className="mb-4" quoteId={quoteId} status={status} archived={Boolean(d.archived_at || d.is_archived || d.archived === true)} title={text(d.title)} quoteNumber={text(d.quote_number)} onChanged={() => void q.refetch()} />
       {run.error ? <ApiError error={run.error} title="That action failed" /> : null}
       {copy.error ? <ApiError error={copy.error} title="Could not duplicate" /> : null}
       {draft && !hasSigner ? <p className="text-muted-foreground mb-3 text-sm">Add a signer before sending.</p> : null}
@@ -104,7 +109,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
             <div>Subtotal {money(d.subtotal, currency)}</div>
             {Number(d.discount_amount) ? <div>Discount -{money(d.discount_amount, currency)}</div> : null}
             <div>Tax {money(d.tax_amount, currency)}</div>
-            <div className="font-semibold">Total {money(d.total, currency)}</div>
+            <div className="font-medium">Total {money(d.total, currency)}</div>
           </div>
         </CardContent>
       </Card>

package/blocks/quotes/components/record-quotes-tab.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+/**
+ * RecordQuotesTab: the quotes tied to one contact (as the signer) or one company, each opening in the quotes screen. Use it
+ * as an `extraDetailTabs` entry of ContactsScreen / CompaniesScreen:
+ *   { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="contacts" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactQuotes  GET /contacts/{id}/quotes   (read) when kind="contacts"
+ *      getCompanyQuotes  GET /companies/{id}/quotes  (read) when kind="companies"
+ * Both answer every matching quote in one read (the API does not page them). Nothing here is billable, external or
+ * destructive; creating and sending a quote happens in the quotes screen.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { FileText } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { asRec, linesFromQuote, money, statusLabel, subtotal, text } from "../lib/quotes";
+import type { Rec } from "../lib/quotes";
+
+const TONE: Record<string, Tone> = { sent: "info", viewed: "info", accepted: "positive", declined: "negative", voided: "negative", expired: "warning", draft: "neutral", archived: "neutral" };
+
+/** The quote's total: the API's own `total` when it sends one, else the sum of its lines. */
+function totalOf(q: Rec): string {
+  const currency = text(q.currency, "USD");
+  if (typeof q.total === "number") return money(q.total, currency);
+  try {
+    const sum = subtotal(linesFromQuote(q.line_items));
+    return sum > 0 ? money(sum, currency) : "";
+  } catch {
+    return "";
+  }
+}
+
+export interface RecordQuotesTabProps {
+  kind: "contacts" | "companies";
+  id: number;
+  /** Route to the quote in your quotes screen. Without it the rows link to `${quotesPath}?id=<quote id>`. */
+  onOpenQuote?: (quoteId: string) => void;
+  /** Path of your quotes screen for the plain links. Default "/quotes". */
+  quotesPath?: string;
+}
+
+export function RecordQuotesTab({ kind, id, onOpenQuote, quotesPath = "/quotes" }: RecordQuotesTabProps) {
+  const q = useG8Query(async (signal) => {
+    const env = asRec(await g8Get(`/${kind}/${id}/quotes`, undefined, { signal }));
+    const inner = env.data;
+    const rows = Array.isArray(inner) ? inner : (asRec(inner).items ?? []);
+    return (rows as unknown[]).map(asRec).filter((r) => text(r.id) !== "");
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load quotes" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading quotes" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<FileText className="size-8" />} title="No quotes yet" description={kind === "contacts" ? "Quotes this contact signs show up here." : "Quotes for this company show up here."} />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Quotes">
+      {q.data.map((r) => {
+        const quoteId = text(r.id);
+        const status = text(r.status);
+        const total = totalOf(r);
+        return (
+          <li key={quoteId}>
+            <a
+              href={`${quotesPath}?id=${encodeURIComponent(quoteId)}`}
+              className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted"
+              onClick={(e) => {
+                if (!onOpenQuote || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                e.preventDefault();
+                onOpenQuote(quoteId);
+              }}
+            >
+              <span className="min-w-0">
+                <span className="block truncate font-medium">{text(r.title, "Untitled quote")}</span>
+                {text(r.quote_number) ? <span className="block text-xs text-muted-foreground">{text(r.quote_number)}</span> : null}
+              </span>
+              <span className="flex shrink-0 items-center gap-2">
+                {total ? <span className="tabular-nums text-muted-foreground">{total}</span> : null}
+                <StatusPill tone={TONE[status] ?? "neutral"} dot>{statusLabel(status)}</StatusPill>
+              </span>
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/blocks/radar/components/competitor-battle-card.tsx

@@ -34,7 +34,7 @@ export function CompetitorBattleCard({ competitorId, className }: CompetitorBatt
   if (!card) return <Skeleton className="h-40 w-full" />;
   return (
     <article className={`flex flex-col gap-4 ${className ?? ""}`} aria-busy={query.loading}>
-      <header><h3 className="text-base font-semibold">{card.competitor.name || card.competitor.domain}</h3><p className="text-sm text-muted-foreground">{card.summary}</p></header>
+      <header><h3 className="text-base font-medium">{card.competitor.name || card.competitor.domain}</h3><p className="text-sm text-muted-foreground">{card.summary}</p></header>
       <section aria-label="Lead with"><h4 className="text-sm font-medium">Lead with</h4>
         {card.talk_track.lead_with.length ? <ul className="list-disc pl-5 text-sm">{card.talk_track.lead_with.map((t) => <li key={t}>{t}</li>)}</ul> : <p className="text-sm text-muted-foreground">No proven advantage yet. Add proof to your catalog or show unverified ones.</p>}
       </section>

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

@@ -37,11 +37,11 @@ export function RadarOverview({ onSelectCompetitor, className }: RadarOverviewPr
     <div className={`flex flex-col gap-5 ${className ?? ""}`}>
       <dl className="grid grid-cols-2 gap-3 sm:grid-cols-5">
         {stats.map(([label, value]) => (
-          <div key={label} className="rounded-md border p-3"><dt className="text-xs text-muted-foreground">{label}</dt><dd className="text-xl font-semibold">{value}</dd></div>
+          <div key={label} className="rounded-md border p-3"><dt className="text-xs text-muted-foreground">{label}</dt><dd className="text-xl font-medium">{value}</dd></div>
         ))}
       </dl>
-      {s.scan_stale ? <p role="status" className="text-sm text-amber-700">The last scan{s.last_scan_at ? ` (${s.last_scan_at.slice(0, 10)})` : ""} is older than your cadence.</p> : null}
-      {s.credit_cap_reached ? <p role="status" className="text-sm text-amber-700">The monthly radar credit cap is reached: automatic scans are paused.</p> : null}
+      {s.scan_stale ? <p role="status" className="text-sm text-warning-foreground">The last scan{s.last_scan_at ? ` (${s.last_scan_at.slice(0, 10)})` : ""} is older than your cadence.</p> : null}
+      {s.credit_cap_reached ? <p role="status" className="text-sm text-warning-foreground">The monthly radar credit cap is reached: automatic scans are paused.</p> : null}
 
       <section aria-label="Threat board"><h3 className="mb-2 text-sm font-medium">Threat board</h3>
         <ul className="flex flex-col gap-1">
@@ -59,7 +59,7 @@ export function RadarOverview({ onSelectCompetitor, className }: RadarOverviewPr
       </section>
       <section aria-label="Recent moves"><h3 className="mb-2 text-sm font-medium">Recent moves</h3>
         {o.moves.length === 0 ? <p className="text-sm text-muted-foreground">No moves yet.</p> : (
-          <ul className="flex flex-col gap-1">{o.moves.map((m) => <li key={m.id} className="text-sm">{m.competitor_domain ? <span className="font-medium">{m.competitor_domain}: </span> : null}{m.text || m.title}{m.became_gap ? <span className="ml-1 text-xs text-amber-700">became a gap</span> : null}</li>)}</ul>
+          <ul className="flex flex-col gap-1">{o.moves.map((m) => <li key={m.id} className="text-sm">{m.competitor_domain ? <span className="font-medium">{m.competitor_domain}: </span> : null}{m.text || m.title}{m.became_gap ? <span className="ml-1 text-xs text-warning-foreground">became a gap</span> : null}</li>)}</ul>
         )}
       </section>
     </div>

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

@@ -98,8 +98,8 @@ function Overview({ data, onOpen, onTrack }: { data: RadarOverviewBody; onOpen:
   return (
     <div className="space-y-4">
       <MarketingCard />
-      {data.summary.scan_stale ? <p role="status" className="text-sm text-amber-700">The last scan{data.summary.last_scan_at ? ` (${data.summary.last_scan_at.slice(0, 10)})` : ""} is older than your cadence. Scan from the Competitors tab.</p> : null}
-      {data.summary.credit_cap_reached ? <p role="status" className="text-sm text-amber-700">The monthly radar credit cap is reached: automatic scans are paused.</p> : null}
+      {data.summary.scan_stale ? <p role="status" className="text-sm text-warning-foreground">The last scan{data.summary.last_scan_at ? ` (${data.summary.last_scan_at.slice(0, 10)})` : ""} is older than your cadence. Scan from the Competitors tab.</p> : null}
+      {data.summary.credit_cap_reached ? <p role="status" className="text-sm text-warning-foreground">The monthly radar credit cap is reached: automatic scans are paused.</p> : null}
       <div className="grid gap-4 lg:grid-cols-2">
         <SectionCard title="Threat board" description="Competitors ranked by threat score. Open one for its battle card.">
           <ul className="divide-y">

package/blocks/sequencer/README.md

@@ -125,3 +125,9 @@ un-archive.
 | `resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post` | POST /sequences/{sequence_id}/contacts/{contact_id}/resume | external | SequenceStats |
 
 Recipes (`recipes/`): `create-multichannel-sequence.ts`, `launch-and-enroll.ts`, `sequence-report.ts`, `pause-when-unsafe.ts`.
+
+## Cross-block glue
+
+- `AddToSequenceButton` (`components/add-to-sequence-button.tsx`): "Add to sequence" for any selection of contacts (live sequences only, then the enroll dialog with its preflight and confirmation). `SequencesScreen` gains optional `onOpenContact`: an enrolled person gets an "Open in contacts" button.
+
+- `RecordSequencesTab` (`components/record-sequences-tab.tsx`): a contact's enrollments with state and step (`getContactSequences`, the API's 50 most recent, with a notice when full), `AddToSequenceButton`, and a confirmed Withdraw from one sequence (`withdrawContactsFromSequences`, needs `contacts:write`). `extraDetailTabs` entry for ContactsScreen.

package/blocks/sequencer/block.json

@@ -21,6 +21,7 @@
     "create_sequence_sequences_post",
     "delete_sequence_step_sequences__sequence_id__steps__step_id__delete",
     "duplicate_sequence_sequences__sequence_id__duplicate_post",
+    "get_contact_sequences_contacts__contact_id__sequences_get",
     "get_outreach_connection_integrations_linkedin_outreach_connection_get",
     "get_safe_to_send_deliverability_safe_to_send_get",
     "get_sequence_analytics_sequences__sequence_id__analytics_get",
@@ -41,7 +42,8 @@
     "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post",
     "resume_sequence_sequences__sequence_id__resume_post",
     "run_sequence_sequences__sequence_id__run_post",
-    "update_sequence_step_sequences__sequence_id__steps__step_id__patch"
+    "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
+    "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
   ],
   "components": [
     {
@@ -189,6 +191,30 @@
         "write",
         "external"
       ]
+    },
+    {
+      "name": "AddToSequenceButton",
+      "file": "components/add-to-sequence-button.tsx",
+      "purpose": "\"Add to sequence\" for any selection of contacts: pick a live sequence, then the enroll dialog (preflight and confirmation) enrolls them. Drops into ContactsScreen bulk and detail slots.",
+      "operations": [
+        "list_sequences_sequences_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "RecordSequencesTab",
+      "file": "components/record-sequences-tab.tsx",
+      "purpose": "The sequences one contact is or was enrolled in, with state and step, Add to sequence, and a confirmed Withdraw; an extraDetailTabs entry for ContactsScreen. Withdraw is a write-tier op (the validator derives tiers from the contract), confirmed anyway with the destructive-styled dialog because it stops outreach.",
+      "operations": [
+        "get_contact_sequences_contacts__contact_id__sequences_get",
+        "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
     }
   ],
   "hooks": [],
@@ -243,6 +269,7 @@
   "scopes": [
     "campaigns:read",
     "contacts:read",
+    "contacts:write",
     "integrations:read",
     "lists:read",
     "sequences:delete",

package/blocks/sequencer/components/add-to-sequence-button.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * AddToSequenceButton: "Add to sequence" for any selection of contacts. Opens a sheet with every live sequence,
+ * then the enroll dialog (which runs the sending preflight and asks the person to confirm before anything is sent).
+ * Drop it into ContactsScreen's `renderBulkActions` / `renderDetailActions`.
+ *
+ * SDK operations, in order:
+ *   1. listSequences   GET /sequences?page=&limit=100      (read; pages through the whole list, live ones only)
+ *   2. EnrollDialog: getSafeToSend, getSequence, addContactsToSequence   (external: confirmed in the dialog)
+ */
+
+import { useState } from "react";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { ListPlus } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { EnrollDialog } from "./enroll-dialog";
+import { listOf, statusGroup, type SequenceRow } from "../lib/sequencer-utils";
+
+/** Every active sequence, paging through the whole list (the API answers one page at a time). */
+async function activeSequences(signal: AbortSignal): Promise<SequenceRow[]> {
+  const out: SequenceRow[] = [];
+  for (let page = 1; page <= 50; page++) {
+    const env = await g8Get("/sequences", { page, limit: 100 }, { signal });
+    const rows = listOf<SequenceRow>(env);
+    out.push(...rows.filter((s) => statusGroup(s.status) === "live"));
+    const more = (env as { pagination?: { has_next?: boolean } }).pagination?.has_next;
+    if (!more || rows.length === 0) break;
+  }
+  return out;
+}
+
+export interface AddToSequenceButtonProps {
+  contactIds: number[];
+  onEnrolled?: () => void;
+  variant?: "outline" | "default";
+}
+
+/** Pick a sequence, then enroll the contacts in it. The enroll dialog shows the sending preflight before anything is sent. */
+export function AddToSequenceButton({ contactIds, onEnrolled, variant = "outline" }: AddToSequenceButtonProps) {
+  const [step, setStep] = useState<"closed" | "pick" | "enroll">("closed");
+  const [sequenceId, setSequenceId] = useState("");
+  const sequences = useG8Query(activeSequences, [], { enabled: step === "pick" });
+  const chosen = (sequences.data ?? []).find((s) => s.id === sequenceId);
+  return (
+    <>
+      <Button size="sm" variant={variant} disabled={contactIds.length === 0} onClick={() => { setSequenceId(""); setStep("pick"); }}>
+        <ListPlus className="mr-1 size-4" aria-hidden />
+        Add to sequence
+      </Button>
+      <Sheet open={step === "pick"} onOpenChange={(o) => { if (!o) setStep("closed"); }}>
+        <SheetContent className="w-full sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>Add to sequence</SheetTitle>
+            <SheetDescription>{contactIds.length === 1 ? "1 contact" : `${contactIds.length} contacts`} will be enrolled in the sequence you pick.</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-3 p-4">
+            {sequences.error ? <ApiError error={sequences.error} title="Could not load sequences" onRetry={() => void sequences.refetch()} /> : null}
+            {sequences.loading && !sequences.data ? <Skeleton className="h-9 w-full" aria-label="Loading sequences" /> : null}
+            {sequences.data && sequences.data.length === 0 ? <EmptyState compact title="No active sequences" description="Launch a sequence on the Sequences page first." /> : null}
+            {sequences.data && sequences.data.length > 0 ? (
+              <>
+                <label htmlFor="enroll-sequence" className="text-sm font-medium">Sequence</label>
+                <select id="enroll-sequence" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={sequenceId} onChange={(e) => setSequenceId(e.target.value)}>
+                  <option value="">Choose a sequence</option>
+                  {sequences.data.map((s) => <option key={s.id} value={s.id}>{s.name || s.id}</option>)}
+                </select>
+                <Button disabled={!sequenceId} onClick={() => setStep("enroll")}>Continue</Button>
+              </>
+            ) : null}
+          </div>
+        </SheetContent>
+      </Sheet>
+      {step === "enroll" && chosen ? (
+        <EnrollDialog open sequenceId={chosen.id} sequenceName={chosen.name ?? undefined} contactIds={contactIds} onClose={() => setStep("closed")} onEnrolled={() => { setStep("closed"); onEnrolled?.(); }} />
+      ) : null}
+    </>
+  );
+}

package/blocks/sequencer/components/enroll-dialog.tsx

@@ -46,7 +46,7 @@ function Verdict() {
   const v = objectOf(verdict.data);
   if ((v.safe_to_send ?? v.safe) !== false) return null;
   return (
-    <p role="alert" className="mt-2 rounded bg-amber-50 p-2 text-amber-900">
+    <p role="alert" className="mt-2 rounded bg-warning p-2 text-warning-foreground">
       Deliverability warning: {typeof v.reason === "string" ? v.reason : "sending is not recommended right now."}
     </p>
   );
@@ -81,7 +81,7 @@ export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listI
           <p>They start receiving this sequence's steps. Contacts already enrolled are skipped.</p>
           {note ? <div className="mt-2">{note}</div> : null}
           {missingList ? (
-            <p role="alert" className="mt-2 text-red-700">
+            <p role="alert" className="mt-2 text-error-foreground">
               This sequence has no audience list. Pass the list these contacts came from as `listId`.
             </p>
           ) : null}