@graph8/sdk 0.308.1 → 0.357.0

package/blocks/crm/block.json

@@ -0,0 +1,378 @@
+{
+  "$schema": "../block.schema.json",
+  "id": "crm",
+  "title": "Contacts & companies",
+  "summary": "Contact and company tables, detail pages, create/edit forms with custom fields, notes, tasks, activity, CSV import and duplicate merging.",
+  "features": [
+    "paginated, filterable contact and company tables with selection and custom-field columns",
+    "contact and company detail pages with tabs for activity, notes and tasks",
+    "create/edit form that renders the org's custom fields",
+    "CSV/Excel import wizard with column mapping and preview",
+    "duplicate review with merge, bulk merge and undo",
+    "locked (masked) emails and phones shown as Locked, never as values"
+  ],
+  "dependsOn": [
+    "foundation"
+  ],
+  "operations": [
+    "assert_companies_batch_companies_assert_batch_put",
+    "assert_company_companies_assert_put",
+    "assert_contact_contacts_assert_put",
+    "assert_contacts_batch_contacts_assert_batch_put",
+    "create_company_companies_post",
+    "create_company_note_companies__company_id__notes_post",
+    "create_company_task_companies__company_id__tasks_post",
+    "create_contacts_contacts_post",
+    "create_field_fields_post",
+    "create_list_lists_post",
+    "create_note_contacts__contact_id__notes_post",
+    "create_task_contacts__contact_id__tasks_post",
+    "delete_company_companies__company_id__delete",
+    "delete_contact_contacts__contact_id__delete",
+    "delete_note_notes__note_id__delete",
+    "delete_task_tasks__task_id__delete",
+    "duplicate_counts_duplicates_counts_get",
+    "get_activity_feed_activity_feed_get",
+    "get_bulk_merge_status_duplicates_bulk_merge__run_id__get",
+    "get_company_companies__company_id__get",
+    "get_contact_contacts__contact_id__get",
+    "import_contacts_imports__import_id__contacts_post",
+    "list_companies_companies_get",
+    "list_company_fields_fields_companies_get",
+    "list_company_notes_companies__company_id__notes_get",
+    "list_company_tasks_companies__company_id__tasks_get",
+    "list_contact_fields_fields_get",
+    "list_contact_tasks_contacts__contact_id__tasks_get",
+    "list_contacts_contacts_get",
+    "list_duplicates_duplicates_get",
+    "list_lists_lists_get",
+    "list_notes_contacts__contact_id__notes_get",
+    "list_recent_merges_duplicates_recent_merges_get",
+    "merge_company_companies__company_id__merge_post",
+    "merge_contact_contacts__contact_id__merge_post",
+    "preview_import_file_imports__import_id__preview_post",
+    "reject_suggestion_duplicates__suggestion_id__reject_post",
+    "set_field_values_batch_fields_values_batch_patch",
+    "start_bulk_merge_duplicates_bulk_merge_post",
+    "undo_merge_duplicates_undo_merge__merge_history_id__post",
+    "update_company_companies__company_id__patch",
+    "update_contact_contacts__contact_id__patch",
+    "update_note_notes__note_id__patch",
+    "update_task_tasks__task_id__patch",
+    "upload_import_file_imports_post"
+  ],
+  "components": [
+    {
+      "name": "ContactTable",
+      "file": "components/contact-table.tsx",
+      "purpose": "Filterable, paginated contacts grid with selection, bulk delete, custom-field columns and slots for other blocks' bulk actions. Embed with listId or companyId.",
+      "operations": [
+        "list_contact_fields_fields_get",
+        "list_contacts_contacts_get",
+        "delete_contact_contacts__contact_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "ContactDetail",
+      "file": "components/contact-detail.tsx",
+      "purpose": "Full contact page: header, editable overview, Activity/Notes/Tasks tabs, delete. renderActions and extraTabs let other blocks add buttons and tabs.",
+      "operations": [
+        "get_contact_contacts__contact_id__get",
+        "delete_contact_contacts__contact_id__delete",
+        "list_contact_fields_fields_get",
+        "list_company_fields_fields_companies_get",
+        "create_contacts_contacts_post",
+        "update_contact_contacts__contact_id__patch",
+        "create_company_companies_post",
+        "update_company_companies__company_id__patch",
+        "set_field_values_batch_fields_values_batch_patch",
+        "create_field_fields_post",
+        "get_activity_feed_activity_feed_get",
+        "list_notes_contacts__contact_id__notes_get",
+        "create_note_contacts__contact_id__notes_post",
+        "create_company_note_companies__company_id__notes_post",
+        "update_note_notes__note_id__patch",
+        "list_contact_tasks_contacts__contact_id__tasks_get",
+        "create_task_contacts__contact_id__tasks_post",
+        "update_task_tasks__task_id__patch",
+        "delete_task_tasks__task_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CompanyTable",
+      "file": "components/company-table.tsx",
+      "purpose": "Filterable, paginated companies grid; same props shape as ContactTable.",
+      "operations": [
+        "list_company_fields_fields_companies_get",
+        "list_companies_companies_get",
+        "delete_company_companies__company_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "CompanyDetail",
+      "file": "components/company-detail.tsx",
+      "purpose": "Full company page: header, editable overview, People tab (ContactTable), Activity/Notes/Tasks tabs, delete.",
+      "operations": [
+        "get_company_companies__company_id__get",
+        "delete_company_companies__company_id__delete",
+        "list_contact_fields_fields_get",
+        "list_company_fields_fields_companies_get",
+        "create_contacts_contacts_post",
+        "update_contact_contacts__contact_id__patch",
+        "create_company_companies_post",
+        "update_company_companies__company_id__patch",
+        "set_field_values_batch_fields_values_batch_patch",
+        "create_field_fields_post",
+        "list_contacts_contacts_get",
+        "delete_contact_contacts__contact_id__delete",
+        "get_activity_feed_activity_feed_get",
+        "list_company_notes_companies__company_id__notes_get",
+        "create_company_note_companies__company_id__notes_post",
+        "update_note_notes__note_id__patch",
+        "delete_note_notes__note_id__delete",
+        "list_company_tasks_companies__company_id__tasks_get",
+        "create_company_task_companies__company_id__tasks_post",
+        "update_task_tasks__task_id__patch",
+        "delete_task_tasks__task_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "RecordForm",
+      "file": "components/record-form.tsx",
+      "purpose": "Create or edit one contact or company, rendering the org's custom fields and an inline 'add custom field'. Sends only changed fields on edit; surfaces duplicate-contact 409s.",
+      "operations": [
+        "list_contact_fields_fields_get",
+        "list_company_fields_fields_companies_get",
+        "create_contacts_contacts_post",
+        "update_contact_contacts__contact_id__patch",
+        "create_company_companies_post",
+        "update_company_companies__company_id__patch",
+        "set_field_values_batch_fields_values_batch_patch",
+        "create_field_fields_post"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
+    },
+    {
+      "name": "ActivityTimeline",
+      "file": "components/activity-timeline.tsx",
+      "purpose": "Chronological feed of everything that happened to a contact, company or deal.",
+      "operations": [
+        "get_activity_feed_activity_feed_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "NotesPanel",
+      "file": "components/notes-panel.tsx",
+      "purpose": "List, add, edit and delete notes on a contact or company; synced notes are read-only.",
+      "operations": [
+        "list_notes_contacts__contact_id__notes_get",
+        "list_company_notes_companies__company_id__notes_get",
+        "create_note_contacts__contact_id__notes_post",
+        "create_company_note_companies__company_id__notes_post",
+        "update_note_notes__note_id__patch",
+        "delete_note_notes__note_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "TaskList",
+      "file": "components/task-list.tsx",
+      "purpose": "Tasks on a contact or company with quick add, complete/reopen and delete.",
+      "operations": [
+        "list_contact_tasks_contacts__contact_id__tasks_get",
+        "list_company_tasks_companies__company_id__tasks_get",
+        "create_task_contacts__contact_id__tasks_post",
+        "create_company_task_companies__company_id__tasks_post",
+        "update_task_tasks__task_id__patch",
+        "delete_task_tasks__task_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "ImportWizard",
+      "file": "components/import-wizard.tsx",
+      "purpose": "Upload a CSV/Excel file, map columns with a live preview, pick the destination list and update policy, import.",
+      "operations": [
+        "upload_import_file_imports_post",
+        "preview_import_file_imports__import_id__preview_post",
+        "list_lists_lists_get",
+        "create_list_lists_post",
+        "import_contacts_imports__import_id__contacts_post"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
+    },
+    {
+      "name": "DedupeReview",
+      "file": "components/dedupe-review.tsx",
+      "purpose": "Review duplicate suggestions: merge a pair, mark not-duplicates, bulk merge with a rule (polled), undo recent merges.",
+      "operations": [
+        "duplicate_counts_duplicates_counts_get",
+        "list_duplicates_duplicates_get",
+        "reject_suggestion_duplicates__suggestion_id__reject_post",
+        "merge_contact_contacts__contact_id__merge_post",
+        "merge_company_companies__company_id__merge_post",
+        "start_bulk_merge_duplicates_bulk_merge_post",
+        "get_bulk_merge_status_duplicates_bulk_merge__run_id__get",
+        "list_recent_merges_duplicates_recent_merges_get",
+        "undo_merge_duplicates_undo_merge__merge_history_id__post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    }
+  ],
+  "hooks": [
+    {
+      "name": "usePageQuery",
+      "file": "hooks/use-page-query.ts",
+      "purpose": "Page-number pagination over list endpoints that answer { data, pagination: { page, total, has_next } }; resets to page 1 when filters change."
+    },
+    {
+      "name": "useDebouncedValue",
+      "file": "hooks/use-debounced.ts",
+      "purpose": "A value that only updates after it stopped changing, for filter boxes."
+    },
+    {
+      "name": "useCustomFields",
+      "file": "hooks/use-custom-fields.ts",
+      "purpose": "The org's custom columns for contacts or companies.",
+      "operations": [
+        "list_contact_fields_fields_get",
+        "list_company_fields_fields_companies_get"
+      ]
+    }
+  ],
+  "lib": [
+    {
+      "file": "lib/crm-types.ts",
+      "purpose": "Record and field types plus helpers (isMasked, contactName, isCustomField) shared by the CRM components."
+    }
+  ],
+  "recipes": [
+    {
+      "file": "recipes/upsert-contact-with-company.ts",
+      "title": "Upsert a contact with its company and custom fields, then read it back",
+      "when": "Server-side sync or form handler that must write a person who may already exist. `upsert` matches on work_email, then linkedin_url, so it is safe to retry; `company_domain` links (or creates) the company; `custom_fields` are keyed by the field title or slug. The ids you need next come from the responses: look the contact up by email to get its id, never guess it."
+    },
+    {
+      "file": "recipes/custom-fields-and-values.ts",
+      "title": "Create a custom field and write values to many records at once",
+      "when": "Adding an org-specific column (a score, a segment) and filling it for a batch of contacts or companies. Field creation is a write; values go in with one batch call (up to 500 rows) instead of one request per record. Field ids come from the create or list response."
+    },
+    {
+      "file": "recipes/notes-tasks-and-activity.ts",
+      "title": "Log a note, create a follow-up task and read the activity feed",
+      "when": "Recording what happened on a contact or company and showing the combined timeline. The feed is one read over notes, tasks, emails, calls, meetings and field changes, newest first."
+    },
+    {
+      "file": "recipes/dedupe-and-merge.ts",
+      "title": "Review duplicate suggestions and merge one pair",
+      "when": "Cleaning the CRM. A merge is destructive (the secondary record stops existing; undo works for 30 days), so list and preview freely but ask a human before calling `mergeContact`. The suggestion and contact ids come from the list response."
+    }
+  ],
+  "prerequisites": [
+    {
+      "id": "proxy-allowlist",
+      "where": "app",
+      "description": "The /api/g8 proxy route allows the CRM areas: allowedPrefixes must include contacts, companies, fields, notes, tasks, activity-feed, imports, duplicates and lists, and `authorize` must check your own session.",
+      "verify": "app/api/g8/[...path]/route.ts lists those prefixes in allowedPrefixes and sets authorize; GET /api/g8/contacts?limit=1 returns 200 when signed in and 401/403 when not."
+    },
+    {
+      "id": "api-key-scopes",
+      "where": "api",
+      "description": "The server API key carries the scopes in this block's `scopes` (contacts, companies, lists and notes/tasks read+write; contacts:delete for bulk merge).",
+      "verify": "recipes/verify-proxy-key.ts passes and g8.api.me.describeCurrentKey() lists the scopes."
+    },
+    {
+      "id": "import-size-limit",
+      "where": "app",
+      "description": "ImportWizard uploads through the proxy, which caps request bodies at 5 MiB. For larger files raise maxBodyBytes in app/api/g8/[...path]/route.ts (and pass maxBytes to ImportWizard) or run the import server-side.",
+      "verify": "A file near the limit uploads without a 413."
+    }
+  ],
+  "scopes": [
+    "companies:delete",
+    "companies:read",
+    "companies:write",
+    "contacts:delete",
+    "contacts:read",
+    "contacts:write",
+    "fields:read",
+    "fields:write",
+    "lists:read",
+    "lists:write",
+    "notes:delete",
+    "notes:read",
+    "notes:write",
+    "tasks:delete",
+    "tasks:read",
+    "tasks:write"
+  ],
+  "defaults": [
+    {
+      "decision": "Which list new contacts created by RecordForm join",
+      "default": "None: the contact is created without a list (pass listId to put it in one)",
+      "askHuman": false
+    },
+    {
+      "decision": "Import update policy",
+      "default": "autofill (only fill blanks); overwrite is opt-in and confirmed",
+      "askHuman": false
+    },
+    {
+      "decision": "Whether to fill missing import fields from graph8 (uses credits)",
+      "default": "Off",
+      "askHuman": false
+    },
+    {
+      "decision": "Page size of tables",
+      "default": "25 rows",
+      "askHuman": false
+    },
+    {
+      "decision": "Who may delete or merge records",
+      "default": "Anyone the app lets through the proxy; the API key's scopes are the only other limit",
+      "askHuman": true
+    }
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

package/blocks/crm/components/activity-timeline.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+/**
+ * ActivityTimeline: one chronological feed of everything that happened to a
+ * contact, company or deal (notes, tasks, emails, calls, meetings, stage and field changes).
+ *
+ * SDK operations, in order (read only, no confirm dialog):
+ *   1. getActivityFeed   GET /activity-feed?entity_type&entity_id&types&source&limit
+ *
+ * The feed is newest first. "Load more" asks for a bigger `limit` (the endpoint
+ * has no cursor); the page never shows more than `maxLimit` events.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+
+export interface ActivityEvent {
+  id: string;
+  record_type: string;
+  occurred_at: string;
+  title: string;
+  summary?: string | null;
+  source?: string;
+  actor?: { name?: string | null; email?: string | null } | null;
+  changes?: Array<{ field: string; field_label: string; from_value?: unknown; to_value?: unknown }>;
+}
+
+export interface ActivityTimelineProps {
+  entityType: "contact" | "company" | "deal";
+  entityId: number | string;
+  /** Restrict to some event types, for example ["note", "email", "call"]. */
+  types?: string[];
+  pageSize?: number;
+  maxLimit?: number;
+  /** Change it to reload after you wrote a note or task next to the feed. */
+  refreshKey?: number;
+  className?: string;
+}
+
+const TYPE_LABEL: Record<string, string> = {
+  task: "Task", note: "Note", email: "Email", call: "Call", meeting: "Meeting", chat: "Chat", sms: "SMS",
+  stage_change: "Stage", quote: "Quote", record_change: "Change", deal: "Deal",
+};
+
+function show(value: unknown): string {
+  return value == null || value === "" ? "empty" : String(value);
+}
+
+export function ActivityTimeline({ entityType, entityId, types, pageSize = 25, maxLimit = 200, refreshKey, className }: ActivityTimelineProps) {
+  const [limit, setLimit] = useState(pageSize);
+  const feed = useG8Query(
+    async (signal) => {
+      const res = await g8Get<{ items?: ActivityEvent[] } | ActivityEvent[]>(
+        "/activity-feed",
+        { entity_type: entityType, entity_id: String(entityId), types: types?.join(","), limit },
+        { signal },
+      );
+      const body = res.data;
+      return Array.isArray(body) ? body : (body?.items ?? []);
+    },
+    [entityType, entityId, types?.join(","), limit, refreshKey],
+  );
+
+  if (feed.error && !feed.data) return <ApiError error={feed.error} title="Could not load activity" onRetry={() => void feed.refetch()} />;
+  if (feed.loading && !feed.data) return <div className={`flex flex-col gap-3 ${className ?? ""}`}>{[0, 1, 2].map((i) => <Skeleton key={i} className="h-12 w-full" />)}</div>;
+  const events = feed.data ?? [];
+  if (events.length === 0) return <EmptyState className={className} title="No activity yet" description="Notes, tasks, emails, calls and changes show up here." />;
+
+  return (
+    <div className={className}>
+      <ol className="flex flex-col gap-3" aria-label="Activity">
+        {events.map((e) => (
+          <li key={e.id} className="rounded-md border p-3" data-testid="activity-item">
+            <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+              <span className="font-medium uppercase tracking-wide">{TYPE_LABEL[e.record_type] ?? e.record_type}</span>
+              <time dateTime={e.occurred_at}>{new Date(e.occurred_at).toLocaleString()}</time>
+            </div>
+            <p className="mt-1 text-sm font-medium">{e.title}</p>
+            {e.summary ? <p className="mt-0.5 whitespace-pre-wrap text-sm text-muted-foreground">{e.summary}</p> : null}
+            {e.changes?.length ? (
+              <ul className="mt-1 text-xs text-muted-foreground">
+                {e.changes.map((c) => <li key={c.field}>{c.field_label}: {show(c.from_value)} to {show(c.to_value)}</li>)}
+              </ul>
+            ) : null}
+            {e.actor?.name || e.actor?.email ? <p className="mt-1 text-xs text-muted-foreground">by {e.actor.name ?? e.actor.email}</p> : null}
+          </li>
+        ))}
+      </ol>
+      {feed.error ? <ApiError className="mt-3" error={feed.error} title="Could not refresh activity" onRetry={() => void feed.refetch()} /> : null}
+      {events.length >= limit && limit < maxLimit ? (
+        <div className="mt-3 flex justify-center"><Button variant="outline" size="sm" loading={feed.loading} onClick={() => setLimit((l) => Math.min(maxLimit, l + pageSize))}>Load more</Button></div>
+      ) : null}
+    </div>
+  );
+}

package/blocks/crm/components/company-detail.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+/**
+ * CompanyDetail: the full company record. Header, Overview (editable through
+ * RecordForm), a People tab that embeds ContactTable for this company, and tabs
+ * for Activity, Notes and Tasks.
+ *
+ * SDK operations, in order:
+ *   1. getCompany      GET    /companies/{id}?include_custom_fields=true   (read)
+ *   2. updateCompany + setFieldValuesBatch   via RecordForm                 (write)
+ *   3. listContacts (company_id), deleteContact       via ContactTable      (read, destructive)
+ *   4. getActivityFeed, notes and tasks ops           via ActivityTimeline, NotesPanel, TaskList
+ *   5. deleteCompany   DELETE /companies/{id}                              (destructive, ConfirmSpendDialog)
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton, Tabs, TabsContent, TabsList, TabsTrigger } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { initials, location } from "../lib/crm-types";
+import type { CompanyRecord, ContactRecord } from "../lib/crm-types";
+import { ActivityTimeline } from "./activity-timeline";
+import { ContactTable } from "./contact-table";
+import { NotesPanel } from "./notes-panel";
+import { RecordForm } from "./record-form";
+import { TaskList } from "./task-list";
+
+export interface CompanyDetailProps {
+  companyId: number;
+  onDeleted?: (companyId: number) => void;
+  /** Called when a person in the People tab is clicked: route to your ContactDetail. */
+  onOpenContact?: (contact: ContactRecord) => void;
+  renderActions?: (company: CompanyRecord) => ReactNode;
+  extraTabs?: Array<{ id: string; label: string; render: (company: CompanyRecord) => ReactNode }>;
+  className?: string;
+}
+
+function Fact({ label, value }: { label: string; value?: string | number | null }) {
+  return (
+    <div>
+      <dt className="text-xs uppercase tracking-wide text-muted-foreground">{label}</dt>
+      <dd className="text-sm">{value || <span className="text-muted-foreground">-</span>}</dd>
+    </div>
+  );
+}
+
+export function CompanyDetail({ companyId, onDeleted, onOpenContact, renderActions, extraTabs = [], className }: CompanyDetailProps) {
+  const [editing, setEditing] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [feedKey, setFeedKey] = useState(0);
+  const query = useG8Query((signal) => g8Get<CompanyRecord>(`/companies/${companyId}`, { include_custom_fields: true }, { signal }), [companyId]);
+  const remove = useG8Mutation(() => g8Delete(`/companies/${companyId}`), { onSuccess: () => { setConfirmDelete(false); onDeleted?.(companyId); } });
+  const bump = () => setFeedKey((k) => k + 1);
+
+  if (query.loading && !query.data) return <div className={`flex flex-col gap-3 ${className ?? ""}`}><Skeleton className="h-16 w-full" /><Skeleton className="h-40 w-full" /></div>;
+  if (query.error && !query.data) return <ApiError error={query.error} title="Could not load this company" onRetry={() => void query.refetch()} />;
+  const company = query.data!.data;
+  const name = company.name || company.domain || "Unnamed company";
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <header className="flex flex-wrap items-center gap-3">
+        <div aria-hidden className="flex size-12 items-center justify-center rounded-md bg-muted text-sm font-semibold">{initials(name)}</div>
+        <div className="min-w-0 flex-1">
+          <h2 className="truncate text-lg font-semibold">{name}</h2>
+          <p className="truncate text-sm text-muted-foreground">{[company.domain, company.industry].filter(Boolean).join(" - ") || "No domain or industry"}</p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {renderActions?.(company)}
+          <Button variant="outline" size="sm" onClick={() => setEditing((v) => !v)}>{editing ? "Close editor" : "Edit"}</Button>
+          <Button variant="destructive" size="sm" onClick={() => setConfirmDelete(true)}>Delete</Button>
+        </div>
+      </header>
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the company" /> : null}
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="people">People</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+          <TabsTrigger value="notes">Notes</TabsTrigger>
+          <TabsTrigger value="tasks">Tasks</TabsTrigger>
+          {extraTabs.map((t) => <TabsTrigger key={t.id} value={t.id}>{t.label}</TabsTrigger>)}
+        </TabsList>
+        <TabsContent value="overview" className="pt-4">
+          {editing ? (
+            <RecordForm entity="company" record={company} onCancel={() => setEditing(false)} onSaved={() => { setEditing(false); void query.refetch(); bump(); }} />
+          ) : (
+            <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Fact label="Website" value={company.website} />
+              <Fact label="Phone" value={company.phone} />
+              <Fact label="Employees" value={company.employee_count} />
+              <Fact label="Revenue" value={company.revenue} />
+              <Fact label="Founded" value={company.founded_year} />
+              <Fact label="Location" value={location(company)} />
+              <Fact label="LinkedIn" value={company.linkedin_url} />
+              <Fact label="Owner" value={company.owner_name} />
+              {Object.entries(company.custom_fields ?? {}).map(([key, v]) => <Fact key={key} label={key} value={v} />)}
+              {company.description ? <div className="sm:col-span-2"><Fact label="About" value={company.description} /></div> : null}
+            </dl>
+          )}
+        </TabsContent>
+        <TabsContent value="people" className="pt-4"><ContactTable companyId={companyId} pageSize={10} onOpen={onOpenContact} /></TabsContent>
+        <TabsContent value="activity" className="pt-4"><ActivityTimeline entityType="company" entityId={companyId} refreshKey={feedKey} /></TabsContent>
+        <TabsContent value="notes" className="pt-4"><NotesPanel entity="company" entityId={companyId} onChanged={bump} /></TabsContent>
+        <TabsContent value="tasks" className="pt-4"><TaskList entity="company" entityId={companyId} onChanged={bump} /></TabsContent>
+        {extraTabs.map((t) => <TabsContent key={t.id} value={t.id} className="pt-4">{t.render(company)}</TabsContent>)}
+      </Tabs>
+
+      <ConfirmSpendDialog open={confirmDelete} tier="destructive" title={`Delete ${name}`} description="Its contacts stay but lose the company link."
+        affected={1} confirming={remove.loading} onConfirm={() => void remove.mutate(undefined)} onCancel={() => setConfirmDelete(false)} />
+    </div>
+  );
+}