@graph8/sdk 0.362.0 → 0.373.0

package/blocks/objects/block.json

@@ -8,32 +8,35 @@
     "generic records table for any object",
     "record detail with owners, relationships and change history",
     "optimistic concurrency on edits",
-    "archive and restore with history kept"
+    "archive and restore with history kept",
+    "finished ObjectsScreen composing the picker, table, record detail and schema editor"
   ],
   "dependsOn": [
-    "foundation"
+    "foundation",
+    "pickers"
   ],
   "operations": [
-    "list_objects_objects_get",
-    "create_object_objects_post",
-    "get_object_objects__object_slug__get",
-    "list_object_attributes_objects__object_slug__attributes_get",
-    "update_object_objects__object_slug__patch",
-    "create_attribute_objects__object_slug__attributes_post",
-    "update_attribute_objects__object_slug__attributes__attr_slug__patch",
     "archive_attribute_objects__object_slug__attributes__attr_slug__delete",
     "archive_object_objects__object_slug__delete",
-    "list_object_records_objects__object_slug__records_get",
-    "create_object_record_objects__object_slug__records_post",
-    "update_object_record_objects__object_slug__records__record_id__patch",
     "archive_object_record_objects__object_slug__records__record_id__delete",
-    "get_object_record_objects__object_slug__records__record_id__get",
+    "assign_record_role_records__entity_type___entity_id__role_assignments_post",
+    "clear_record_role_records__entity_type___entity_id__role_assignments__role_slot__delete",
+    "create_attribute_objects__object_slug__attributes_post",
+    "create_object_objects_post",
+    "create_object_record_objects__object_slug__records_post",
+    "get_object_objects__object_slug__get",
     "get_object_record_changes_objects__object_slug__records__record_id__changes_get",
+    "get_object_record_objects__object_slug__records__record_id__get",
     "get_object_relationships_objects__object_slug__records__record_id__relationships_get",
-    "restore_object_record_objects__object_slug__records__record_id__restore_post",
     "get_record_role_slots_records__entity_type___entity_id__role_slots_get",
-    "assign_record_role_records__entity_type___entity_id__role_assignments_post",
-    "clear_record_role_records__entity_type___entity_id__role_assignments__role_slot__delete"
+    "list_object_attributes_objects__object_slug__attributes_get",
+    "list_object_records_objects__object_slug__records_get",
+    "list_objects_objects_get",
+    "list_team_members_team_members_get",
+    "restore_object_record_objects__object_slug__records__record_id__restore_post",
+    "update_attribute_objects__object_slug__attributes__attr_slug__patch",
+    "update_object_objects__object_slug__patch",
+    "update_object_record_objects__object_slug__records__record_id__patch"
   ],
   "components": [
     {
@@ -103,8 +106,12 @@
       "name": "AttributeFieldInput",
       "file": "components/attribute-field-input.tsx",
       "purpose": "One form control chosen by attribute type (text, number, date, select, checkbox...).",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "list_team_members_team_members_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "ObjectNotFound",
@@ -144,13 +151,25 @@
       "operations": [
         "get_record_role_slots_records__entity_type___entity_id__role_slots_get",
         "assign_record_role_records__entity_type___entity_id__role_assignments_post",
-        "clear_record_role_records__entity_type___entity_id__role_assignments__role_slot__delete"
+        "clear_record_role_records__entity_type___entity_id__role_assignments__role_slot__delete",
+        "list_team_members_team_members_get"
       ],
       "tiers": [
         "read",
         "write",
         "destructive"
       ]
+    },
+    {
+      "name": "ObjectsScreen",
+      "file": "components/objects-screen.tsx",
+      "purpose": "Finished custom-objects workspace: object picker, records table, record detail panel and the schema editor in a sheet. No required props.",
+      "operations": [
+        "list_objects_objects_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -208,7 +227,8 @@
     "objects:delete",
     "objects:manage",
     "objects:read",
-    "objects:write"
+    "objects:write",
+    "team:read"
   ],
   "defaults": [
     {
@@ -238,6 +258,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/objects/components/attribute-field-input.tsx

@@ -5,10 +5,12 @@
  *
  * Purpose: render the right input for an attribute's type (text, number, date, select, checkbox...)
  * and report the raw draft value. Convert it with `fromInputValue` from ../lib/object-types.
- * SDK operations: none (presentational). Used by RecordFormDialog and ObjectRecordDetail.
+ * SDK operations: none of its own. A person attribute (`actor_reference`) uses the pickers block MemberPicker (GET /team-members,
+ * read) so nobody types a user id; the raw id stays under "Use an id instead". Used by RecordFormDialog and ObjectRecordDetail.
  */
 
 import { Input } from "@graph8/sdk/ui";
+import { MemberPicker } from "@/g8/pickers/components/member-picker";
 import { selectOptions } from "../lib/object-types";
 import type { ObjectAttribute } from "../lib/object-types";
 
@@ -58,6 +60,17 @@ export function AttributeFieldInput({ attribute, value, onChange, disabled, id }
       </select>
     );
   }
+  if (attribute.attribute_type === "actor_reference" && !attribute.is_multiselect) {
+    return (
+      <div className="flex flex-col gap-1">
+        <MemberPicker id={fieldId} label={attribute.title} value={String(value) || null} disabled={disabled} placeholder="Choose a person" onChange={(m) => onChange(m.id)} />
+        <details className="text-xs">
+          <summary className="text-muted-foreground cursor-pointer">Use an id instead</summary>
+          <Input aria-label={`${attribute.title} user id`} placeholder="User id" className="mt-1 h-8 w-40" value={String(value)} disabled={disabled} onChange={(e) => onChange(e.target.value)} />
+        </details>
+      </div>
+    );
+  }
   const hint = attribute.is_multiselect
     ? "Separate several values with commas"
     : attribute.attribute_type === "record_reference"

package/blocks/objects/components/object-not-found.tsx

@@ -15,6 +15,7 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { isObjectsApiMissing } from "../lib/object-types";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ObjectNotFoundProps {
   /** What was not found, for the message: "record" or "object". */
@@ -24,10 +25,11 @@ export interface ObjectNotFoundProps {
 }
 
 export function ObjectNotFound({ what, error }: ObjectNotFoundProps) {
+  const brand = useBrand();
   const probe = useG8Query((signal) => g8Get<unknown[]>("/objects", {}, { signal }).then(() => "enabled" as const), []);
   if (probe.loading && !probe.data && !probe.error) return <p className="text-muted-foreground text-sm" aria-busy="true">Checking...</p>;
   if (isObjectsApiMissing(probe.error)) {
-    return <EmptyState title="Custom objects are unavailable" description="The graph8 API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current graph8 backend, then reload." />;
+    return <EmptyState title="Custom objects are unavailable" description={`The ${brand.linkLabel} API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current ${brand.linkLabel} backend, then reload.`} />;
   }
   if (probe.error) return <ApiError error={probe.error} title="Could not check custom objects" onRetry={() => void probe.refetch()} />;
   return <EmptyState title={`This ${what} no longer exists`} description={`It may have been deleted, or the link is out of date. Go back and pick another ${what}.`} />;

package/blocks/objects/components/object-record-detail.tsx

@@ -17,6 +17,7 @@
 import { useEffect, useState } from "react";
 import { Button, Card, CardContent, CardHeader, CardTitle, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
@@ -37,6 +38,10 @@ export interface ObjectRecordDetailProps {
   onBack?: () => void;
 }
 
+/** The relationships and history APIs have no paging: a full read is announced under the list. */
+const CHANGE_LIMIT = 20;
+const RELATION_LIMIT = 25;
+
 interface ChangeEntry { id: string; action: string; occurred_at: string; actor_type?: string; changes?: Record<string, unknown> }
 interface Relationship { id: string; relationship_label?: string; source_record_id: string; target_record_id: string; source_label?: string; target_label?: string }
 
@@ -59,7 +64,8 @@ export function ObjectRecordDetail({ objectSlug, recordId, onArchived, onBack }:
 
   if (isObjectsApiMissing(record.error)) return <ObjectNotFound what="record" error={record.error} />;
   if (record.error) return <ApiError error={record.error} title="Could not load the record" onRetry={() => void record.refetch()} />;
-  if (!record.data || schema.loading) return <div className="grid gap-2" aria-busy="true"><Skeleton className="h-8 w-64" /><Skeleton className="h-40 w-full" /></div>;
+  // The hook keeps the previous record while the next loads; edit and archive act on recordId, so show only that record.
+  if (!record.data || String(record.data.id) !== String(recordId) || schema.loading) return <div className="grid gap-2" aria-busy="true"><Skeleton className="h-8 w-64" /><Skeleton className="h-40 w-full" /></div>;
 
   const current = record.data;
   const roleEntity = ROLE_ENTITY_TYPES[objectSlug];
@@ -69,7 +75,7 @@ export function ObjectRecordDetail({ objectSlug, recordId, onArchived, onBack }:
       <div className="flex items-center justify-between gap-2">
         <div>
           {onBack ? <Button variant="link" size="sm" onClick={onBack}>Back</Button> : null}
-          <h2 className="text-lg font-semibold">{recordTitle(schema.definition, schema.attributes, current)}</h2>
+          <h2 className="text-lg font-medium">{recordTitle(schema.definition, schema.attributes, current)}</h2>
           {current.is_archived ? <p className="text-muted-foreground text-sm">This record is archived.</p> : null}
         </div>
         <div className="flex gap-2">
@@ -107,6 +113,7 @@ export function ObjectRecordDetail({ objectSlug, recordId, onArchived, onBack }:
               ))}
             </ul>
           )}
+          <FirstNotice shown={(relationships.data ?? []).length} limit={RELATION_LIMIT} noun="related records" />
         </CardContent>
       </Card>
       <Card>
@@ -125,6 +132,7 @@ export function ObjectRecordDetail({ objectSlug, recordId, onArchived, onBack }:
               ))}
             </ul>
           )}
+          <FirstNotice shown={(changes.data ?? []).length} limit={CHANGE_LIMIT} noun="changes" />
         </CardContent>
       </Card>
       <RecordFormDialog open={editing} objectSlug={objectSlug} singularNoun={noun} attributes={schema.attributes} record={current} onClose={() => setEditing(false)} onSaved={() => { setEditing(false); refreshAll(); }} />

package/blocks/objects/components/object-schema-editor.tsx

@@ -27,6 +27,7 @@ import { useObjectSchema } from "../hooks/use-object-schema";
 import { OBJECT_ICONS, isObjectsApiMissing, isValidSlug, slugify } from "../lib/object-types";
 import type { ObjectAttribute, ObjectDefinition } from "../lib/object-types";
 import { AttributeFormDialog } from "./attribute-form-dialog";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ObjectSchemaEditorProps {
   /** Object to open first. */
@@ -93,6 +94,7 @@ function ObjectDetailsForm({ object, attributes, onSaved }: { object: ObjectDefi
 }
 
 export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: ObjectSchemaEditorProps) {
+  const brand = useBrand();
   const [selected, setSelected] = useState<string | undefined>(initialObjectSlug);
   const [editing, setEditing] = useState<ObjectAttribute | "new" | null>(null);
   const [pending, setPending] = useState<Pending | null>(null);
@@ -113,7 +115,7 @@ export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: Object
 
   if (objects.loading && !objects.data) return <div className="grid gap-2" aria-busy="true"><Skeleton className="h-8 w-48" /><Skeleton className="h-40 w-full" /></div>;
   if (isObjectsApiMissing(objects.error)) {
-    return <EmptyState title="Custom objects are unavailable" description="The graph8 API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current graph8 backend, then reload." />;
+    return <EmptyState title="Custom objects are unavailable" description={`The ${brand.linkLabel} API at this base URL does not serve custom objects. Check G8_API_URL and that it points at a current ${brand.linkLabel} backend, then reload.`} />;
   }
   if (objects.error) return <ApiError error={objects.error} title="Could not load objects" onRetry={() => void objects.refetch()} />;
 
@@ -146,7 +148,7 @@ export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: Object
               {schema.error ? <ApiError error={schema.error} title="Could not load the fields" onRetry={() => void schema.refetch()} /> : null}
               {!current.is_system ? <ObjectDetailsForm key={current.slug} object={current} attributes={schema.attributes} onSaved={() => void objects.refetch()} /> : <p className="text-muted-foreground text-sm">Standard objects can gain fields but cannot be renamed or archived.</p>}
               <div className="flex items-center justify-between">
-                <h3 className="text-sm font-semibold">Fields</h3>
+                <h3 className="text-sm font-medium">Fields</h3>
                 <Button size="sm" onClick={() => setEditing("new")}>Add field</Button>
               </div>
               {schema.loading ? <Skeleton className="h-24 w-full" /> : schema.attributes.length === 0 ? (

package/blocks/objects/components/object-table.tsx

@@ -13,6 +13,7 @@
  */
 
 import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
 import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
@@ -20,6 +21,8 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { g8Delete, g8Get } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { usePaginated } from "@/g8/hooks/use-paginated";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 import { useObjectSchema } from "../hooks/use-object-schema";
 import { formatValue, isObjectsApiMissing, recordTitle } from "../lib/object-types";
 import { ObjectNotFound } from "./object-not-found";
@@ -27,6 +30,8 @@ import type { ObjectRecord } from "../lib/object-types";
 import { RecordFormDialog } from "./record-form-dialog";
 
 export interface ObjectTableProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   objectSlug: string;
   /** Rows per request, 1-200. Default 50. */
   pageSize?: number;
@@ -36,7 +41,7 @@ export interface ObjectTableProps {
   maxColumns?: number;
 }
 
-export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColumns = 6 }: ObjectTableProps) {
+export function ObjectTable({ linkParam, objectSlug, pageSize = 50, onSelectRecord, maxColumns = 6 }: ObjectTableProps) {
   const schema = useObjectSchema(objectSlug);
   const slug = encodeURIComponent(objectSlug);
   const records = usePaginated<ObjectRecord>(
@@ -68,6 +73,11 @@ export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColu
     return <ApiError error={schema.error ?? records.error} title="Could not load records" onRetry={() => { void schema.refetch(); void records.reload(); }} />;
   }
 
+  const cellText = (c: (typeof columns)[number], i: number, record: ObjectRecord): ReactNode => {
+    const text = formatValue(c, record.values?.[c.slug]) || (i === 0 ? recordTitle(schema.definition, schema.attributes, record) : "");
+    return i === 0 && onSelectRecord && text ? <RecordLink param={linkParam} id={record.id} onOpen={() => onSelectRecord(record)}>{text}</RecordLink> : text;
+  };
+
   return (
     <div className="grid gap-3">
       <div className="flex items-center justify-between gap-2">
@@ -92,9 +102,9 @@ export function ObjectTable({ objectSlug, pageSize = 50, onSelectRecord, maxColu
           </TableHeader>
           <TableBody>
             {rows.map((record) => (
-              <TableRow key={record.id} className={onSelectRecord ? "cursor-pointer" : undefined} onClick={() => onSelectRecord?.(record)}>
+              <TableRow key={record.id} className={onSelectRecord ? "cursor-pointer" : undefined} {...(onSelectRecord ? rowActivationProps(() => onSelectRecord(record)) : {})}>
                 {columns.map((c, i) => (
-                  <TableCell key={c.slug}>{formatValue(c, record.values?.[c.slug]) || (i === 0 ? recordTitle(schema.definition, schema.attributes, record) : "")}</TableCell>
+                  <TableCell key={c.slug}>{cellText(c, i, record)}</TableCell>
                 ))}
                 <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                   <Button variant="ghost" size="sm" onClick={() => setForm({ record })}>Edit</Button>

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

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

package/blocks/objects/components/record-roles-panel.tsx

@@ -8,7 +8,8 @@
  *   2. assignRecordRole (POST /records/{entity_type}/{entity_id}/role-assignments)                  write
  *   3. clearRecordRole (DELETE /records/{entity_type}/{entity_id}/role-assignments/{role_slot})     destructive -> ConfirmSpendDialog
  * Only the standard objects (contacts, companies, deals) have role slots; custom objects do not.
- * The API takes a user id, not a name: pass `userOptions` to give people a picker.
+ * The API takes a user id, not a name, so nobody types one: each slot has a MemberPicker (search teammates by name;
+ * GET /team-members, read). Pass `userOptions` for your own fixed list; a raw id still works under "Use an id instead".
  */
 
 import { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { MemberPicker } from "@/g8/pickers/components/member-picker";
 
 type Slot = "sdr" | "ae" | "csm";
 const SLOTS: ReadonlyArray<{ slot: Slot; label: string }> = [
@@ -32,7 +34,7 @@ interface RoleSlots { sdr?: SlotInfo | null; ae?: SlotInfo | null; csm?: SlotInf
 export interface RecordRolesPanelProps {
   entityType: "contact" | "company" | "deal";
   entityId: string;
-  /** Optional people to pick from. Without it the user id is typed. */
+  /** Optional people to pick from (your own list). Without it a MemberPicker searches the team. */
   userOptions?: ReadonlyArray<{ id: string; name: string }>;
 }
 
@@ -40,10 +42,11 @@ export function RecordRolesPanel({ entityType, entityId, userOptions }: RecordRo
   const base = `/records/${entityType}/${encodeURIComponent(entityId)}`;
   const slots = useG8Query((signal) => g8Get<RoleSlots>(`${base}/role-slots`, {}, { signal }).then((r) => r.data), [base]);
   const [draft, setDraft] = useState<Record<string, string>>({});
+  const [draftNames, setDraftNames] = useState<Record<string, string>>({});
   const [clearing, setClearing] = useState<Slot | null>(null);
   const [busySlot, setBusySlot] = useState<Slot | null>(null);
   const assign = useG8Mutation((vars: { slot: Slot; userId: string }) => g8Post(`${base}/role-assignments`, { role_slot: vars.slot, user_id: vars.userId }), {
-    onSuccess: (_r, vars) => { setDraft((d) => ({ ...d, [vars.slot]: "" })); void slots.refetch(); },
+    onSuccess: (_r, vars) => { setDraft((d) => ({ ...d, [vars.slot]: "" })); setDraftNames((n) => ({ ...n, [vars.slot]: "" })); void slots.refetch(); },
   });
   const assignSlot = async (slot: Slot, userId: string): Promise<void> => {
     setBusySlot(slot);
@@ -53,6 +56,7 @@ export function RecordRolesPanel({ entityType, entityId, userOptions }: RecordRo
   // Typed ids and open dialogs belong to ONE record.
   useEffect(() => {
     setDraft({});
+    setDraftNames({});
     setClearing(null);
     assign.reset();
     clear.reset();
@@ -65,7 +69,7 @@ export function RecordRolesPanel({ entityType, entityId, userOptions }: RecordRo
   const canModify = slots.data != null && slots.data.can_modify !== false;
   return (
     <section aria-label="Owners" className="grid gap-2">
-      <h3 className="text-sm font-semibold">Owners</h3>
+      <h3 className="text-sm font-medium">Owners</h3>
       {slots.loading && !slots.data ? <p className="text-muted-foreground text-sm">Loading owners...</p> : null}
       {SLOTS.map(({ slot, label }) => {
         const holder = slots.data?.[slot];
@@ -81,7 +85,13 @@ export function RecordRolesPanel({ entityType, entityId, userOptions }: RecordRo
                     {userOptions.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
                   </select>
                 ) : (
-                  <Input aria-label={`${label} user id`} placeholder="User id" className="h-8 w-40" value={draft[slot] ?? ""} onChange={(e) => setDraft((d) => ({ ...d, [slot]: e.target.value }))} />
+                  <>
+                    <MemberPicker label={`${label} person`} value={draft[slot] || null} selectedName={draftNames[slot]} placeholder="Choose a person" onChange={(m) => { setDraft((d) => ({ ...d, [slot]: m.id })); setDraftNames((n) => ({ ...n, [slot]: m.name })); }} />
+                    <details className="text-xs">
+                      <summary className="text-muted-foreground cursor-pointer">Use an id instead</summary>
+                      <Input aria-label={`${label} user id`} placeholder="User id" className="mt-1 h-8 w-40" value={draft[slot] ?? ""} onChange={(e) => { setDraft((d) => ({ ...d, [slot]: e.target.value })); setDraftNames((n) => ({ ...n, [slot]: "" })); }} />
+                    </details>
+                  </>
                 )}
                 <Button size="sm" variant="outline" loading={busySlot === slot} disabled={!draft[slot] || busySlot !== null} onClick={() => void assignSlot(slot, draft[slot])}>Assign</Button>
                 {holder ? <Button size="sm" variant="ghost" onClick={() => { clear.reset(); setClearing(slot); }}>Clear</Button> : null}

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

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

package/blocks/pages/README.md

@@ -114,3 +114,17 @@ export default function Pages() { const router = useRouter(); return <PageList o
 - `recipes/edit-page-section.ts`: Change the text of one section of a landing page
 - `recipes/audit-site-seo.ts`: Run an SEO site audit and list what to fix first
 - `recipes/refresh-brand-kit.ts`: Re-scan the brand kit from the website
+
+## Depth added (C7c)
+
+Landing pages now cover the whole life of a page, not only create and publish. Each open page has these tabs beside Edit and Details:
+
+- **Publishing** (`PageDomains`): the URLs the page is live on, publish to a connected domain (domain, subdomain and path are sent together, behind a confirm), take one URL down (destructive confirm), download the HTML.
+- **Tracking** (`PageTracking`): tracking mode, form label, chat widget, conversion goal (only changed fields are sent), a dedicated stream through Provision, reset consent (destructive confirm).
+- **AI tools** (`PageAiTools`): edit by instruction, review (quick check is 0 credits), apply exact fixes for free, fix one finding with AI, write search metadata. Every AI pass is a billable confirm; the API quotes no price in advance, so the dialog says what runs.
+- **Analytics** (`PageAnalytics`): visits, people, companies, sources and forms for 7/30/90 days and a traffic source; the top-level Analytics tab is portfolio-wide. People and companies page with Load more.
+- "Clone a page" (`PageClone`, confirmed spend) rebuilds a URL or pasted HTML as a draft; `PageGenerationStatus` shows progress of an AI-built page.
+
+The headline numbers read the API totals, and a page past the first 100 still opens with its real title.
+
+Not covered (and why): HTML-level edits (`importLandingPageHtml`, `replaceLandingPageHtml`, `updateLandingPageHtml`, `setLandingPageText/Media`, element edits, anchors) need element ids a form cannot show; templates and components (`duplicateLandingPageTemplate`, `promoteLandingPageTemplate`, `ensureLandingPageBaseTemplate`, `extract components`) are template admin; `agent-sessions` and `getLandingPageConversation` are the hosted editor's chat; consent default (`/landing-page-consent/*`) is workspace admin; clone-homepage duplicates clone-url. Content calendar, programmatic pages and brand-kit template ops belong to later blocks.