@graph8/sdk 0.308.1 → 0.357.0

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

@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * AttributeFieldInput: one form control for one object attribute.
+ *
+ * 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.
+ */
+
+import { Input } from "@graph8/sdk/ui";
+import { selectOptions } from "../lib/object-types";
+import type { ObjectAttribute } from "../lib/object-types";
+
+export interface AttributeFieldInputProps {
+  attribute: ObjectAttribute;
+  value: string | boolean;
+  onChange: (value: string | boolean) => void;
+  disabled?: boolean;
+  id?: string;
+}
+
+const SELECT_CLASS =
+  "border-input bg-background h-9 w-full rounded-md border px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50";
+
+function inputType(type: string): string {
+  if (type === "number" || type === "currency" || type === "rating") return "number";
+  if (type === "date") return "date";
+  if (type === "timestamp") return "datetime-local";
+  if (type === "email_address") return "email";
+  return "text";
+}
+
+export function AttributeFieldInput({ attribute, value, onChange, disabled, id }: AttributeFieldInputProps) {
+  const fieldId = id ?? `g8-attr-${attribute.slug}`;
+  const options = selectOptions(attribute);
+  if (attribute.attribute_type === "checkbox") {
+    return (
+      <input
+        id={fieldId}
+        type="checkbox"
+        checked={value === true || value === "true"}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+        className="size-4"
+      />
+    );
+  }
+  if ((attribute.attribute_type === "select" || attribute.attribute_type === "status") && options.length > 0 && !attribute.is_multiselect) {
+    return (
+      <select id={fieldId} value={String(value)} disabled={disabled} onChange={(e) => onChange(e.target.value)} className={SELECT_CLASS}>
+        <option value="">{attribute.is_required ? "Choose..." : "None"}</option>
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    );
+  }
+  const hint = attribute.is_multiselect
+    ? "Separate several values with commas"
+    : attribute.attribute_type === "record_reference"
+      ? "Record id"
+      : attribute.attribute_type === "actor_reference"
+        ? "User id"
+        : undefined;
+  return (
+    <>
+      <Input
+        id={fieldId}
+        type={attribute.is_multiselect ? "text" : inputType(attribute.attribute_type)}
+        value={String(value)}
+        disabled={disabled}
+        required={attribute.is_required}
+        step={attribute.attribute_type === "number" || attribute.attribute_type === "currency" ? "any" : undefined}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {hint ? <p className="text-muted-foreground mt-1 text-xs">{hint}</p> : null}
+    </>
+  );
+}

package/blocks/objects/components/attribute-form-dialog.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+/**
+ * AttributeFormDialog: add a field to an object, or edit one.
+ *
+ * SDK operations, in order:
+ *   1. createAttribute (POST /objects/{object_slug}/attributes)              write (needs objects:manage + Admin)
+ *   2. updateAttribute (PATCH /objects/{object_slug}/attributes/{attr_slug}) write (title, flags, options; the type and slug are immutable)
+ * Options for select/status fields are typed one per line and sent as `config.options` (a list of strings).
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ATTRIBUTE_TYPES, isValidSlug, selectOptions, slugify } from "../lib/object-types";
+import type { ObjectAttribute } from "../lib/object-types";
+
+export interface AttributeFormDialogProps {
+  open: boolean;
+  objectSlug: string;
+  /** Edit this attribute; omit to add a new one. */
+  attribute?: ObjectAttribute;
+  onClose: () => void;
+  onSaved: (attribute: ObjectAttribute) => void;
+}
+
+interface Draft {
+  title: string;
+  slug: string;
+  type: string;
+  required: boolean;
+  unique: boolean;
+  multiselect: boolean;
+  options: string;
+  currency: string;
+}
+
+function toDraft(attribute?: ObjectAttribute): Draft {
+  return {
+    title: attribute?.title ?? "",
+    slug: attribute?.slug ?? "",
+    type: attribute?.attribute_type ?? "text",
+    required: Boolean(attribute?.is_required),
+    unique: Boolean(attribute?.is_unique),
+    multiselect: Boolean(attribute?.is_multiselect),
+    options: attribute ? selectOptions(attribute).join("\n") : "",
+    currency: typeof attribute?.config?.currency_code === "string" ? attribute.config.currency_code : "USD",
+  };
+}
+
+function buildConfig(draft: Draft): Record<string, unknown> | undefined {
+  if (draft.type === "select" || draft.type === "status") {
+    return { options: draft.options.split("\n").map((o) => o.trim()).filter(Boolean) };
+  }
+  if (draft.type === "currency") return { currency_code: draft.currency.trim().toUpperCase() || "USD" };
+  return undefined;
+}
+
+export function AttributeFormDialog({ open, objectSlug, attribute, onClose, onSaved }: AttributeFormDialogProps) {
+  const [draft, setDraft] = useState<Draft>(() => toDraft(attribute));
+  const [slugTouched, setSlugTouched] = useState(false);
+  const base = `/objects/${encodeURIComponent(objectSlug)}/attributes`;
+  const needsOptions = draft.type === "select" || draft.type === "status";
+  const optionCount = draft.options.split("\n").filter((o) => o.trim()).length;
+  const valid = draft.title.trim() !== "" && isValidSlug(draft.slug) && (!needsOptions || optionCount > 0);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(toDraft(attribute));
+      setSlugTouched(false);
+    }
+  }, [open, attribute]);
+
+  const save = useG8Mutation(async () => {
+    const config = buildConfig(draft);
+    if (attribute) {
+      const res = await g8Patch<ObjectAttribute>(`${base}/${encodeURIComponent(attribute.slug)}`, {
+        title: draft.title.trim(),
+        is_required: draft.required,
+        is_unique: draft.unique,
+        ...(config ? { config } : {}),
+      });
+      return res.data;
+    }
+    const res = await g8Post<ObjectAttribute>(base, {
+      slug: draft.slug,
+      title: draft.title.trim(),
+      attribute_type: draft.type,
+      is_required: draft.required,
+      is_unique: draft.unique,
+      is_multiselect: draft.multiselect,
+      ...(config ? { config } : {}),
+    });
+    return res.data;
+  }, { onSuccess: (saved) => onSaved(saved) });
+
+  const set = (patch: Partial<Draft>): void => setDraft((prev) => ({ ...prev, ...patch }));
+  return (
+    <Dialog open={open} onOpenChange={(next) => (next ? undefined : onClose())}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{attribute ? `Edit ${attribute.title}` : "Add a field"}</DialogTitle>
+          <DialogDescription>{attribute ? "The field type and key cannot change once created." : "Fields are the columns of this object."}</DialogDescription>
+        </DialogHeader>
+        <form
+          className="grid gap-3"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (valid) void save.mutate(undefined);
+          }}
+        >
+          <div>
+            <Label htmlFor="g8-attr-title" className="mb-1">Name</Label>
+            <Input id="g8-attr-title" value={draft.title} onChange={(e) => set({ title: e.target.value, ...(attribute || slugTouched ? {} : { slug: slugify(e.target.value) }) })} />
+          </div>
+          <div>
+            <Label htmlFor="g8-attr-slug" className="mb-1">Key</Label>
+            <Input id="g8-attr-slug" value={draft.slug} disabled={Boolean(attribute)} onChange={(e) => { setSlugTouched(true); set({ slug: e.target.value }); }} />
+            <p className="text-muted-foreground mt-1 text-xs">Lowercase letters, numbers and underscores. Used in API payloads.</p>
+          </div>
+          <div>
+            <Label htmlFor="g8-attr-type" className="mb-1">Type</Label>
+            <select id="g8-attr-type" value={draft.type} disabled={Boolean(attribute)} onChange={(e) => set({ type: e.target.value })} className="border-input bg-background h-9 w-full rounded-md border px-3 text-sm disabled:opacity-50">
+              {ATTRIBUTE_TYPES.map((t) => (
+                <option key={t.value} value={t.value}>{t.label}</option>
+              ))}
+            </select>
+          </div>
+          {needsOptions ? (
+            <div>
+              <Label htmlFor="g8-attr-options" className="mb-1">Options (one per line)</Label>
+              <Textarea id="g8-attr-options" rows={4} value={draft.options} onChange={(e) => set({ options: e.target.value })} />
+            </div>
+          ) : null}
+          {draft.type === "currency" ? (
+            <div>
+              <Label htmlFor="g8-attr-currency" className="mb-1">Currency code</Label>
+              <Input id="g8-attr-currency" value={draft.currency} maxLength={3} onChange={(e) => set({ currency: e.target.value })} />
+            </div>
+          ) : null}
+          <div className="flex flex-wrap gap-4 text-sm">
+            <label className="flex items-center gap-2"><input type="checkbox" checked={draft.required} onChange={(e) => set({ required: e.target.checked })} />Required</label>
+            <label className="flex items-center gap-2"><input type="checkbox" checked={draft.unique} onChange={(e) => set({ unique: e.target.checked })} />Unique</label>
+            {needsOptions && !attribute ? (
+              <label className="flex items-center gap-2"><input type="checkbox" checked={draft.multiselect} onChange={(e) => set({ multiselect: e.target.checked })} />Allow several</label>
+            ) : null}
+          </div>
+          {save.error ? <ApiError error={save.error} title="Could not save the field" /> : null}
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose} disabled={save.loading}>Cancel</Button>
+            <Button type="submit" loading={save.loading} disabled={!valid}>{attribute ? "Save field" : "Add field"}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+/**
+ * ObjectNotFound: what to show when an object or record call answers 404.
+ *
+ * A 404 means two different things: the backend does not serve the custom objects API at all (the list call 404s: wrong base URL or an older deployment),
+ * or this one object/record does not exist (deleted, mistyped or stale id). The collection call `GET /objects`
+ * tells them apart: it is 404 only when the backend does not serve the API. (A missing scope or a proxy-blocked prefix is a 403 and shows as a normal API error.)
+ *
+ * SDK operations: listObjects (GET /objects), read.
+ */
+
+import { ApiError } from "@/g8/components/api-error";
+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";
+
+export interface ObjectNotFoundProps {
+  /** What was not found, for the message: "record" or "object". */
+  what: "record" | "object";
+  /** The error that triggered this view (only a 404 is meaningful here). */
+  error: unknown;
+}
+
+export function ObjectNotFound({ what, error }: ObjectNotFoundProps) {
+  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." />;
+  }
+  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

@@ -0,0 +1,143 @@
+"use client";
+
+/**
+ * ObjectRecordDetail: one record of any object: its values, owners, relationships and change history.
+ *
+ * SDK operations, in order:
+ *   1. getObject + listObjectAttributes (via useObjectSchema)                              read
+ *   2. getObjectRecord (GET /objects/{object_slug}/records/{record_id})                    read
+ *   3. getObjectRecordChanges (GET .../records/{record_id}/changes?limit=20)               read
+ *   4. getObjectRelationships (GET .../records/{record_id}/relationships?limit=25)         read
+ *   5. updateObjectRecord (RecordFormDialog, sends expected_revision)                      write
+ *   6. archiveObjectRecord (DELETE .../records/{record_id})                                destructive -> ConfirmSpendDialog
+ *   7. restoreObjectRecord (POST .../records/{record_id}/restore)                          write
+ * For contacts, companies and deals it also shows RecordRolesPanel (getRecordRoleSlots, assignRecordRole, clearRecordRole).
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+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 { useObjectSchema } from "../hooks/use-object-schema";
+import { ROLE_ENTITY_TYPES, formatValue, isObjectsApiMissing, recordTitle } from "../lib/object-types";
+import { ObjectNotFound } from "./object-not-found";
+import type { ObjectRecord } from "../lib/object-types";
+import { RecordFormDialog } from "./record-form-dialog";
+import { RecordRolesPanel } from "./record-roles-panel";
+
+export interface ObjectRecordDetailProps {
+  objectSlug: string;
+  recordId: string;
+  /** Called after the record is archived, so the page can go back to the table. */
+  onArchived?: () => void;
+  onBack?: () => void;
+}
+
+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 }
+
+export function ObjectRecordDetail({ objectSlug, recordId, onArchived, onBack }: ObjectRecordDetailProps) {
+  const base = `/objects/${encodeURIComponent(objectSlug)}/records/${encodeURIComponent(recordId)}`;
+  const schema = useObjectSchema(objectSlug);
+  const record = useG8Query((signal) => g8Get<ObjectRecord>(base, {}, { signal }).then((r) => r.data), [base]);
+  const changes = useG8Query((signal) => g8Get<{ entries: ChangeEntry[] }>(`${base}/changes`, { limit: 20 }, { signal }).then((r) => r.data?.entries ?? []), [base]);
+  const relationships = useG8Query((signal) => g8Get<{ relationships: Relationship[] }>(`${base}/relationships`, { limit: 25 }, { signal }).then((r) => r.data?.relationships ?? []), [base]);
+  const [editing, setEditing] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  // Dialogs belong to one record: opening another record must not leave them pointing at it.
+  useEffect(() => {
+    setEditing(false);
+    setConfirming(false);
+  }, [objectSlug, recordId]);
+  const refreshAll = (): void => { void record.refetch(); void changes.refetch(); };
+  const archive = useG8Mutation(() => g8Delete(base), { onSuccess: () => { setConfirming(false); refreshAll(); onArchived?.(); } });
+  const restore = useG8Mutation(() => g8Post(`${base}/restore`), { onSuccess: refreshAll });
+
+  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>;
+
+  const current = record.data;
+  const roleEntity = ROLE_ENTITY_TYPES[objectSlug];
+  const noun = schema.definition?.singular_noun ?? "record";
+  return (
+    <div className="grid gap-4">
+      <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>
+          {current.is_archived ? <p className="text-muted-foreground text-sm">This record is archived.</p> : null}
+        </div>
+        <div className="flex gap-2">
+          {current.is_archived ? (
+            <Button variant="outline" loading={restore.loading} onClick={() => void restore.mutate(undefined)}>Restore</Button>
+          ) : (
+            <><Button variant="outline" onClick={() => setEditing(true)}>Edit</Button><Button variant="outline" onClick={() => { archive.reset(); setConfirming(true); }}>Archive</Button></>
+          )}
+        </div>
+      </div>
+      {restore.error ? <ApiError error={restore.error} title="Could not restore" /> : null}
+      <Card>
+        <CardHeader><CardTitle>Details</CardTitle></CardHeader>
+        <CardContent>
+          <dl className="grid gap-2 sm:grid-cols-2">
+            {schema.attributes.map((a) => (
+              <div key={a.slug}>
+                <dt className="text-muted-foreground text-xs">{a.title}</dt>
+                <dd className="text-sm">{formatValue(a, current.values?.[a.slug]) || <span className="text-muted-foreground">Not set</span>}</dd>
+              </div>
+            ))}
+          </dl>
+        </CardContent>
+      </Card>
+      {roleEntity ? <RecordRolesPanel entityType={roleEntity} entityId={recordId} /> : null}
+      <Card>
+        <CardHeader><CardTitle>Related records</CardTitle></CardHeader>
+        <CardContent>
+          {relationships.loading && !relationships.data ? <Skeleton className="h-10 w-full" /> : (relationships.data ?? []).length === 0 ? (
+            <p className="text-muted-foreground text-sm">Nothing linked to this record yet.</p>
+          ) : (
+            <ul className="grid gap-1 text-sm">
+              {(relationships.data ?? []).map((r) => (
+                <li key={r.id}>{r.relationship_label ?? "Linked"}: {r.source_record_id === recordId ? r.target_label ?? r.target_record_id : r.source_label ?? r.source_record_id}</li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle>History</CardTitle></CardHeader>
+        <CardContent>
+          {changes.loading && !changes.data ? <Skeleton className="h-10 w-full" /> : (changes.data ?? []).length === 0 ? (
+            <p className="text-muted-foreground text-sm">No changes recorded.</p>
+          ) : (
+            <ul className="grid gap-1 text-sm">
+              {(changes.data ?? []).map((c) => (
+                <li key={c.id}>
+                  <span className="font-medium">{c.action}</span> {new Date(c.occurred_at).toLocaleString()}
+                  {c.actor_type ? ` by ${c.actor_type}` : ""}
+                  {c.changes && Object.keys(c.changes).length ? ` (${Object.keys(c.changes).join(", ")})` : ""}
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+      <RecordFormDialog open={editing} objectSlug={objectSlug} singularNoun={noun} attributes={schema.attributes} record={current} onClose={() => setEditing(false)} onSaved={() => { setEditing(false); refreshAll(); }} />
+      <ConfirmSpendDialog
+        open={confirming}
+        tier="destructive"
+        title={`Archive this ${noun}?`}
+        description={<><p>It leaves listings but stays readable by id, and its history is kept.</p>{archive.error ? <ApiError error={archive.error} title="Could not archive the record" /> : null}</>}
+        confirmLabel="Archive"
+        confirming={archive.loading}
+        onCancel={() => { archive.reset(); setConfirming(false); }}
+        onConfirm={() => void archive.mutate(undefined)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,197 @@
+"use client";
+
+/**
+ * ObjectSchemaEditor: define custom object types and their fields (the schema, not the records).
+ *
+ * SDK operations, in order:
+ *   1. listObjects (GET /objects)                                      read
+ *   2. createObject (POST /objects)                                    write       (Admin; objects:manage)
+ *   3. getObject + listObjectAttributes (via useObjectSchema)          read
+ *   4. updateObject (PATCH /objects/{object_slug})                     write       (labels, icon, display field)
+ *   5. createAttribute / updateAttribute (AttributeFormDialog)         write
+ *   6. archiveAttribute (DELETE .../attributes/{attr_slug})            destructive -> ConfirmSpendDialog
+ *   7. archiveObject (DELETE /objects/{object_slug})                   destructive -> ConfirmSpendDialog
+ * Archiving hides the object or field; records and history are kept. The API answers 404
+ * when the backend does not serve the objects API at all (wrong base URL or older deployment), which this component explains.
+ */
+
+import { useState } from "react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, 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";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+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";
+
+export interface ObjectSchemaEditorProps {
+  /** Object to open first. */
+  initialObjectSlug?: string;
+  /** Called when the person picks an object, so the page can show its records. */
+  onSelectObject?: (slug: string) => void;
+}
+
+type Pending = { kind: "attribute"; attribute: ObjectAttribute } | { kind: "object"; object: ObjectDefinition };
+
+function NewObjectForm({ onCreated }: { onCreated: (object: ObjectDefinition) => void }) {
+  const [singular, setSingular] = useState("");
+  const [plural, setPlural] = useState("");
+  const [slug, setSlug] = useState("");
+  const [touched, setTouched] = useState(false);
+  const create = useG8Mutation(
+    async () => (await g8Post<ObjectDefinition>("/objects", { slug, singular_noun: singular.trim(), plural_noun: plural.trim() || `${singular.trim()}s` })).data,
+    { onSuccess: (created) => { setSingular(""); setPlural(""); setSlug(""); setTouched(false); onCreated(created); } },
+  );
+  const valid = singular.trim() !== "" && isValidSlug(slug);
+  return (
+    <form className="grid gap-2" onSubmit={(e) => { e.preventDefault(); if (valid) void create.mutate(undefined); }}>
+      <Label htmlFor="g8-new-object">New object</Label>
+      <Input id="g8-new-object" placeholder="Singular name, e.g. Invoice" value={singular} onChange={(e) => { setSingular(e.target.value); if (!touched) setSlug(slugify(e.target.value + "s")); }} />
+      <Input aria-label="Plural name" placeholder="Plural name (optional)" value={plural} onChange={(e) => setPlural(e.target.value)} />
+      <Input aria-label="Object key" placeholder="key" value={slug} onChange={(e) => { setTouched(true); setSlug(e.target.value); }} />
+      {create.error ? <ApiError error={create.error} title="Could not create the object" /> : null}
+      <Button type="submit" size="sm" loading={create.loading} disabled={!valid}>Create object</Button>
+    </form>
+  );
+}
+
+function ObjectDetailsForm({ object, attributes, onSaved }: { object: ObjectDefinition; attributes: readonly ObjectAttribute[]; onSaved: () => void }) {
+  const [singular, setSingular] = useState(object.singular_noun);
+  const [plural, setPlural] = useState(object.plural_noun);
+  const [icon, setIcon] = useState(object.icon ?? "");
+  const [display, setDisplay] = useState(object.display_attribute_slug ?? "");
+  const save = useG8Mutation(
+    async () => (await g8Patch<ObjectDefinition>(`/objects/${encodeURIComponent(object.slug)}`, { singular_noun: singular.trim(), plural_noun: plural.trim(), icon: icon || null, display_attribute_slug: display || null })).data,
+    { onSuccess: onSaved },
+  );
+  return (
+    <form className="grid gap-2 sm:grid-cols-2" onSubmit={(e) => { e.preventDefault(); void save.mutate(undefined); }}>
+      <div><Label htmlFor="g8-obj-singular" className="mb-1">Singular name</Label><Input id="g8-obj-singular" value={singular} onChange={(e) => setSingular(e.target.value)} /></div>
+      <div><Label htmlFor="g8-obj-plural" className="mb-1">Plural name</Label><Input id="g8-obj-plural" value={plural} onChange={(e) => setPlural(e.target.value)} /></div>
+      <div>
+        <Label htmlFor="g8-obj-icon" className="mb-1">Icon</Label>
+        <select id="g8-obj-icon" value={icon} onChange={(e) => setIcon(e.target.value)} className="border-input bg-background h-9 w-full rounded-md border px-3 text-sm">
+          <option value="">Default</option>
+          {OBJECT_ICONS.map((i) => <option key={i} value={i}>{i}</option>)}
+        </select>
+      </div>
+      <div>
+        <Label htmlFor="g8-obj-display" className="mb-1">Record title field</Label>
+        <select id="g8-obj-display" value={display} onChange={(e) => setDisplay(e.target.value)} className="border-input bg-background h-9 w-full rounded-md border px-3 text-sm">
+          <option value="">Automatic</option>
+          {attributes.map((a) => <option key={a.slug} value={a.slug}>{a.title}</option>)}
+        </select>
+      </div>
+      {save.error ? <div className="sm:col-span-2"><ApiError error={save.error} title="Could not save the object" /></div> : null}
+      <div className="sm:col-span-2"><Button type="submit" size="sm" loading={save.loading}>Save object</Button></div>
+    </form>
+  );
+}
+
+export function ObjectSchemaEditor({ initialObjectSlug, onSelectObject }: ObjectSchemaEditorProps) {
+  const [selected, setSelected] = useState<string | undefined>(initialObjectSlug);
+  const [editing, setEditing] = useState<ObjectAttribute | "new" | null>(null);
+  const [pending, setPending] = useState<Pending | null>(null);
+  const objects = useG8Query((signal) => g8Get<ObjectDefinition[]>("/objects", {}, { signal }).then((r) => r.data ?? []), []);
+  const schema = useObjectSchema(selected);
+  const choose = (slug: string): void => { setSelected(slug); onSelectObject?.(slug); };
+
+  const archive = useG8Mutation(async (target: Pending) => {
+    if (target.kind === "attribute") await g8Delete(`/objects/${encodeURIComponent(selected ?? "")}/attributes/${encodeURIComponent(target.attribute.slug)}`);
+    else await g8Delete(`/objects/${encodeURIComponent(target.object.slug)}`);
+    return target;
+  }, {
+    onSuccess: (target) => {
+      setPending(null);
+      if (target.kind === "object") { setSelected(undefined); void objects.refetch(); } else void schema.refetch();
+    },
+  });
+
+  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." />;
+  }
+  if (objects.error) return <ApiError error={objects.error} title="Could not load objects" onRetry={() => void objects.refetch()} />;
+
+  const list = (objects.data ?? []).filter((o) => !o.is_archived);
+  const current = list.find((o) => o.slug === selected);
+  return (
+    <div className="grid gap-4 md:grid-cols-[16rem_1fr]">
+      <Card>
+        <CardHeader><CardTitle>Objects</CardTitle></CardHeader>
+        <CardContent className="grid gap-4">
+          {list.length === 0 ? <p className="text-muted-foreground text-sm">No objects yet. Create the first one below.</p> : (
+            <ul className="grid gap-1">
+              {list.map((o) => (
+                <li key={o.slug}>
+                  <Button variant={o.slug === selected ? "secondary" : "ghost"} size="sm" className="w-full justify-start" onClick={() => choose(o.slug)}>
+                    {o.plural_noun}{o.is_system ? <span className="text-muted-foreground ml-2 text-xs">standard</span> : null}
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <NewObjectForm onCreated={(created) => { void objects.refetch(); choose(created.slug); }} />
+        </CardContent>
+      </Card>
+      <Card>
+        {!current ? <CardContent><EmptyState title="Pick an object" description="Choose an object on the left to edit its fields, or create a new one." /></CardContent> : (
+          <>
+            <CardHeader><CardTitle>{current.plural_noun}</CardTitle></CardHeader>
+            <CardContent className="grid gap-4">
+              {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>
+                <Button size="sm" onClick={() => setEditing("new")}>Add field</Button>
+              </div>
+              {schema.loading ? <Skeleton className="h-24 w-full" /> : schema.attributes.length === 0 ? (
+                <EmptyState title="No fields yet" description="Add a field to start capturing data on this object." />
+              ) : (
+                <Table>
+                  <TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Key</TableHead><TableHead>Type</TableHead><TableHead /></TableRow></TableHeader>
+                  <TableBody>
+                    {schema.attributes.map((a) => (
+                      <TableRow key={a.slug}>
+                        <TableCell>{a.title}{a.is_required ? " *" : ""}</TableCell>
+                        <TableCell className="font-mono text-xs">{a.slug}</TableCell>
+                        <TableCell>{a.attribute_type}</TableCell>
+                        <TableCell className="text-right">
+                          {a.is_system ? null : (<><Button variant="ghost" size="sm" onClick={() => setEditing(a)}>Edit</Button><Button variant="ghost" size="sm" onClick={() => { archive.reset(); setPending({ kind: "attribute", attribute: a }); }}>Archive</Button></>)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+              {!current.is_system ? <div><Button variant="outline" size="sm" onClick={() => { archive.reset(); setPending({ kind: "object", object: current }); }}>Archive {current.plural_noun}</Button></div> : null}
+            </CardContent>
+          </>
+        )}
+      </Card>
+      {selected ? (
+        <AttributeFormDialog
+          open={editing !== null}
+          objectSlug={selected}
+          attribute={editing && editing !== "new" ? editing : undefined}
+          onClose={() => setEditing(null)}
+          onSaved={() => { setEditing(null); void schema.refetch(); }}
+        />
+      ) : null}
+      <ConfirmSpendDialog
+        open={pending !== null}
+        tier="destructive"
+        title={pending?.kind === "object" ? `Archive ${pending.object.plural_noun}?` : `Archive the field "${pending?.attribute.title ?? ""}"?`}
+        description={<><p>{pending?.kind === "object" ? "The object disappears from the app. Its records and history are kept." : "The field stops appearing on records. Stored values and history are kept."}</p>{archive.error ? <ApiError error={archive.error} title="Could not archive" /> : null}</>}
+        confirmLabel="Archive"
+        confirming={archive.loading}
+        onCancel={() => { archive.reset(); setPending(null); }}
+        onConfirm={() => { if (pending) void archive.mutate(pending); }}
+      />
+    </div>
+  );
+}