@agent-native/core 0.113.0 → 0.114.0

package/src/client/blocks/library/DataModelBlock.tsx

@@ -0,0 +1,775 @@
+import {
+  IconArrowNarrowRight,
+  IconChevronRight,
+  IconDatabase,
+  IconKey,
+  IconLink,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+
+import { cn } from "../../utils.js";
+import { ltrCodeBlockProps } from "../code-block-direction.js";
+import type { BlockEditProps, BlockReadProps } from "../types.js";
+import type {
+  DataModelChange,
+  DataModelData,
+  DataModelEntity,
+  DataModelField,
+  DataModelRelation,
+  DataModelRelationKind,
+} from "./data-model.config.js";
+import { DATA_MODEL_CHANGES } from "./data-model.config.js";
+import { DevInput, DevSelect } from "./dev-doc-ui.js";
+
+/**
+ * Read + Edit renderers for a `data-model` block — a dbdiagram / Prisma-style
+ * entity-relationship diagram. Lives in core so any app can register the dev-doc
+ * block (no shadcn import).
+ */
+
+/* ── Theme-aware change tokens (shared vocabulary with `file-tree`) ─────────── */
+
+/**
+ * Change-chip palette — the SAME tinted-bg + saturated-text scheme the
+ * `file-tree` block uses, in BOTH the `.dark` plan theme and light mode (never a
+ * dark-only palette). Keeps data-model diff chips visually consistent with the
+ * file-tree change badges so a reviewer reads one vocabulary across dev-doc
+ * blocks.
+ */
+const CHANGE_BADGE: Record<DataModelChange, string> = {
+  added:
+    "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+  modified: "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300",
+  removed: "bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-300",
+  renamed:
+    "bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300",
+};
+
+/** Human-readable chip label, matching the file-tree change labels. */
+const CHANGE_LABEL: Record<DataModelChange, string> = {
+  added: "Added",
+  modified: "Modified",
+  removed: "Removed",
+  renamed: "Renamed",
+};
+
+/** Accent ink for a changed field/entity name, echoing its change color. */
+const CHANGE_NAME_INK: Record<DataModelChange, string> = {
+  added: "text-emerald-700 dark:text-emerald-300",
+  modified: "text-blue-700 dark:text-blue-300",
+  removed: "text-red-600 line-through dark:text-red-300",
+  renamed: "text-violet-700 dark:text-violet-300",
+};
+
+/** Subtle left accent rule on a changed field row (added = green, removed = red). */
+const CHANGE_ROW_ACCENT: Record<DataModelChange, string> = {
+  added: "border-l-2 border-l-emerald-400 dark:border-l-emerald-500/60",
+  modified: "border-l-2 border-l-blue-400 dark:border-l-blue-500/60",
+  removed: "border-l-2 border-l-red-400 dark:border-l-red-500/60",
+  renamed: "border-l-2 border-l-violet-400 dark:border-l-violet-500/60",
+};
+
+/** A small theme-aware change chip ("Added" / "Modified" / …). */
+function ChangeChip({
+  change,
+  className,
+}: {
+  change: DataModelChange;
+  className?: string;
+}) {
+  return (
+    <span
+      title={CHANGE_LABEL[change]}
+      aria-label={CHANGE_LABEL[change]}
+      className={cn(
+        "rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide leading-none",
+        CHANGE_BADGE[change],
+        className,
+      )}
+    >
+      {CHANGE_LABEL[change]}
+    </span>
+  );
+}
+
+/* ── Resolution helpers (shared by Read + relation inference) ──────────────── */
+
+/** Split a `fk` string like `"User.id"` into `{ entity: "User", field: "id" }`. */
+function parseFk(fk: string): { entity: string; field?: string } {
+  const trimmed = fk.trim();
+  const dot = trimmed.indexOf(".");
+  if (dot === -1) return { entity: trimmed };
+  return {
+    entity: trimmed.slice(0, dot).trim(),
+    field: trimmed.slice(dot + 1).trim() || undefined,
+  };
+}
+
+/**
+ * Resolve an entity reference (used by `fk` targets and `relation.from`/`to`)
+ * against the entity list by `id` first, then by case-insensitive `name`. Returns
+ * the matched entity or `undefined`.
+ */
+function resolveEntity(
+  entities: DataModelEntity[],
+  ref: string,
+): DataModelEntity | undefined {
+  const needle = ref.trim();
+  return (
+    entities.find((entity) => entity.id === needle) ??
+    entities.find(
+      (entity) => entity.name.toLowerCase() === needle.toLowerCase(),
+    )
+  );
+}
+
+/** A short, readable label for an entity reference (its name, or the raw ref). */
+function entityLabel(entities: DataModelEntity[], ref: string): string {
+  return resolveEntity(entities, ref)?.name ?? ref;
+}
+
+/** The cardinality glyph shown in the relations list (1:1 / 1:n / n:n). */
+function relationGlyph(kind?: DataModelRelationKind): string {
+  if (kind === "1-1") return "1:1";
+  if (kind === "n-n") return "n:n";
+  return "1:n";
+}
+
+/**
+ * Relations to render: explicit `relations` when present, otherwise inferred —
+ * every `fk` field becomes a `1-n` relation from the referenced (parent) entity
+ * to the entity holding the foreign key, so the connectors list is never empty
+ * when the schema clearly implies them.
+ */
+function effectiveRelations(data: DataModelData): DataModelRelation[] {
+  if (data.relations && data.relations.length > 0) return data.relations;
+  const inferred: DataModelRelation[] = [];
+  for (const entity of data.entities) {
+    for (const field of entity.fields) {
+      if (!field.fk) continue;
+      const target = resolveEntity(data.entities, parseFk(field.fk).entity);
+      if (!target) continue;
+      inferred.push({
+        from: target.id,
+        to: entity.id,
+        kind: "1-n",
+        label: field.name,
+      });
+    }
+  }
+  return inferred;
+}
+
+/* ── Read (interactive ERD) ────────────────────────────────────────────────── */
+
+/**
+ * Read-only renderer for a `data-model` block — a dbdiagram / Prisma-style
+ * entity-relationship diagram. Each entity is a collapsible card: the header
+ * shows the entity name + field count, and expanding it reveals a compact field
+ * table (Field · Type · flags) with PK / FK / nullable indicators.
+ *
+ * INTERACTIVITY (the reason this is a custom block, not a plain table): hovering
+ * or clicking a foreign-key field highlights the referenced entity card — it
+ * scrolls into view, expands, and gets a temporary accent ring — so a reader can
+ * trace a relationship across the whole model. Explicit `relations` (or relations
+ * inferred from `fk` fields) render as a labeled connector list below the cards.
+ *
+ * Every color is theme-aware via Tailwind `dark:` variants or plan CSS vars, so
+ * the diagram reads correctly in both the `.dark` plan theme and light mode.
+ */
+export function DataModelRead({
+  data,
+  blockId,
+  title,
+  summary,
+}: BlockReadProps<DataModelData>) {
+  const entities = data.entities ?? [];
+  const relations = useMemo(() => effectiveRelations(data), [data]);
+
+  // Per-entity collapse state. Default: the first entity expanded (or all of them
+  // when the model is small) so the block is useful at a glance without a click.
+  const [expanded, setExpanded] = useState<Record<string, boolean>>(() => {
+    const initial: Record<string, boolean> = {};
+    const expandAll = entities.length <= 2;
+    entities.forEach((entity, index) => {
+      initial[entity.id] = expandAll || index === 0;
+    });
+    return initial;
+  });
+
+  // Which entity is being hovered/clicked-to via an FK — drives the accent ring.
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const cardRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const toggle = useCallback((id: string) => {
+    setExpanded((current) => ({ ...current, [id]: !current[id] }));
+  }, []);
+
+  // Highlight + reveal a referenced entity: expand it, ring it, and scroll it
+  // into view. Used on FK hover (transient) and click (scroll).
+  const focusEntity = useCallback(
+    (targetId: string | undefined, scroll: boolean) => {
+      if (!targetId) {
+        setHighlighted(null);
+        return;
+      }
+      setHighlighted(targetId);
+      if (scroll) {
+        setExpanded((current) => ({ ...current, [targetId]: true }));
+        cardRefs.current[targetId]?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    },
+    [],
+  );
+
+  return (
+    <section
+      {...ltrCodeBlockProps}
+      className="plan-block"
+      data-block-id={blockId}
+    >
+      {title && <div className="plan-block-label">{title}</div>}
+
+      <div className="flex flex-col gap-3">
+        {entities.map((entity) => {
+          const isOpen = expanded[entity.id] ?? false;
+          const isHighlighted = highlighted === entity.id;
+          return (
+            <div
+              key={entity.id}
+              ref={(node) => {
+                cardRefs.current[entity.id] = node;
+              }}
+              data-entity-id={entity.id}
+              className={cn(
+                "overflow-hidden rounded-xl border bg-plan-block transition-shadow",
+                isHighlighted
+                  ? "border-blue-400 ring-2 ring-blue-400/60 dark:border-blue-400 dark:ring-blue-400/50"
+                  : "border-plan-line",
+              )}
+            >
+              {/* Entity header — always visible, toggles the field table. */}
+              <button
+                type="button"
+                data-plan-interactive
+                aria-expanded={isOpen}
+                onClick={() => toggle(entity.id)}
+                className="flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-accent/40"
+              >
+                <IconChevronRight
+                  className={cn(
+                    "size-4 shrink-0 text-plan-muted transition-transform",
+                    isOpen && "rotate-90",
+                  )}
+                />
+                <IconDatabase className="size-4 shrink-0 text-blue-600 dark:text-blue-300" />
+                <span
+                  className={cn(
+                    "min-w-0 truncate font-mono text-sm font-semibold",
+                    entity.change
+                      ? CHANGE_NAME_INK[entity.change]
+                      : "text-plan-text",
+                  )}
+                >
+                  {entity.name}
+                </span>
+                {entity.change && <ChangeChip change={entity.change} />}
+                <span className="ml-auto shrink-0 rounded-full bg-accent/50 px-2 py-0.5 text-[11px] font-medium text-plan-muted">
+                  {entity.fields.length}{" "}
+                  {entity.fields.length === 1 ? "field" : "fields"}
+                </span>
+              </button>
+
+              {/* Expanded field table. */}
+              {isOpen && (
+                <div className="border-t border-plan-line">
+                  {entity.note && (
+                    <p className="px-4 pt-2 text-xs italic text-plan-muted">
+                      {entity.note}
+                    </p>
+                  )}
+                  <table className="w-full border-collapse text-sm">
+                    <tbody>
+                      {entity.fields.map((field, index) => {
+                        const fkTarget = field.fk
+                          ? resolveEntity(entities, parseFk(field.fk).entity)
+                          : undefined;
+                        return (
+                          <tr
+                            key={`${field.name}-${index}`}
+                            className={cn(
+                              "border-t border-plan-line/70 align-top first:border-t-0",
+                              field.fk && "cursor-pointer hover:bg-blue-500/5",
+                              field.change && CHANGE_ROW_ACCENT[field.change],
+                            )}
+                            // FK interactivity: hovering rings the referenced
+                            // entity card; clicking also scrolls it into view.
+                            onMouseEnter={
+                              fkTarget
+                                ? () => focusEntity(fkTarget.id, false)
+                                : undefined
+                            }
+                            onMouseLeave={
+                              fkTarget
+                                ? () => focusEntity(undefined, false)
+                                : undefined
+                            }
+                            onClick={
+                              fkTarget
+                                ? () => focusEntity(fkTarget.id, true)
+                                : undefined
+                            }
+                          >
+                            <td className="w-px whitespace-nowrap py-1.5 pl-4 pr-2">
+                              <div className="flex items-center gap-1.5">
+                                {field.pk && (
+                                  <IconKey
+                                    className="size-3.5 shrink-0 text-amber-500 dark:text-amber-300"
+                                    aria-label="Primary key"
+                                  />
+                                )}
+                                {field.fk && (
+                                  <IconLink
+                                    className="size-3.5 shrink-0 text-blue-500 dark:text-blue-300"
+                                    aria-label="Foreign key"
+                                  />
+                                )}
+                                <span
+                                  className={cn(
+                                    "font-mono text-xs",
+                                    field.pk && "font-semibold",
+                                    field.change
+                                      ? CHANGE_NAME_INK[field.change]
+                                      : "text-plan-text",
+                                  )}
+                                >
+                                  {field.name}
+                                </span>
+                              </div>
+                            </td>
+                            <td className="py-1.5 pr-2">
+                              <div className="flex flex-wrap items-center gap-1.5">
+                                {/* Prior value (`was`) for a modified field —
+                                    struck through ahead of the current type. */}
+                                {field.change === "modified" && field.was && (
+                                  <>
+                                    <span className="inline-block rounded bg-accent/30 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted line-through">
+                                      {field.was}
+                                    </span>
+                                    <IconArrowNarrowRight
+                                      className="size-3 shrink-0 text-plan-muted"
+                                      aria-hidden
+                                    />
+                                  </>
+                                )}
+                                {field.type && (
+                                  <span
+                                    className={cn(
+                                      "inline-block rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px]",
+                                      field.change === "removed"
+                                        ? "text-plan-muted line-through"
+                                        : "text-plan-muted",
+                                    )}
+                                  >
+                                    {field.type}
+                                  </span>
+                                )}
+                              </div>
+                            </td>
+                            <td className="py-1.5 pr-4 text-right">
+                              <div className="flex flex-wrap items-center justify-end gap-1">
+                                {field.change && (
+                                  <ChangeChip change={field.change} />
+                                )}
+                                {field.pk && (
+                                  <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-600 dark:text-amber-300 bg-amber-100 dark:bg-amber-500/15">
+                                    PK
+                                  </span>
+                                )}
+                                {field.fk && (
+                                  <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/15">
+                                    FK
+                                    <span className="font-mono font-normal opacity-90">
+                                      {fkTarget
+                                        ? `${fkTarget.name}${
+                                            parseFk(field.fk).field
+                                              ? `.${parseFk(field.fk).field}`
+                                              : ""
+                                          }`
+                                        : field.fk}
+                                    </span>
+                                  </span>
+                                )}
+                                {field.nullable && (
+                                  <span className="rounded px-1.5 py-0.5 text-[10px] font-medium text-plan-muted bg-accent/50">
+                                    nullable
+                                  </span>
+                                )}
+                                {field.default != null &&
+                                  field.default !== "" && (
+                                    <span className="rounded px-1.5 py-0.5 font-mono text-[10px] text-plan-muted bg-accent/40">
+                                      = {field.default}
+                                    </span>
+                                  )}
+                              </div>
+                              {field.note && (
+                                <div className="mt-0.5 text-[11px] italic text-plan-muted">
+                                  {field.note}
+                                </div>
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                      {entity.fields.length === 0 && (
+                        <tr>
+                          <td className="px-4 py-2 text-xs text-plan-muted">
+                            No fields yet.
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Relations / connectors list. */}
+      {relations.length > 0 && (
+        <div className="mt-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-plan-muted">
+            Relations
+          </div>
+          <div className="mt-2 flex flex-col gap-1.5">
+            {relations.map((relation, index) => {
+              const fromEntity = resolveEntity(entities, relation.from);
+              const toEntity = resolveEntity(entities, relation.to);
+              return (
+                <button
+                  key={`${relation.from}-${relation.to}-${index}`}
+                  type="button"
+                  data-plan-interactive
+                  className="group flex w-fit items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors hover:bg-accent/40"
+                  onMouseEnter={() => focusEntity(toEntity?.id, false)}
+                  onMouseLeave={() => focusEntity(undefined, false)}
+                  onClick={() => focusEntity(toEntity?.id, true)}
+                >
+                  <span className="font-mono text-xs font-semibold text-plan-text">
+                    {entityLabel(entities, relation.from)}
+                  </span>
+                  <span className="flex items-center gap-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-[10px] font-bold text-blue-700 dark:bg-blue-500/15 dark:text-blue-300">
+                    {relationGlyph(relation.kind)}
+                    <IconArrowNarrowRight className="size-3" />
+                  </span>
+                  <span className="font-mono text-xs font-semibold text-plan-text">
+                    {entityLabel(entities, relation.to)}
+                  </span>
+                  {relation.label && (
+                    <span className="text-xs text-plan-muted">
+                      · {relation.label}
+                    </span>
+                  )}
+                  {!fromEntity || !toEntity ? (
+                    <span className="text-[10px] text-amber-600 dark:text-amber-300">
+                      (unresolved)
+                    </span>
+                  ) : null}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {summary && <p className="mt-5 text-plan-muted">{summary}</p>}
+    </section>
+  );
+}
+
+/* ── Edit (panel form) ─────────────────────────────────────────────────────── */
+
+let entitySeq = 0;
+/** Stable-enough new entity id for a freshly-added entity in the editor. */
+function newEntityId(): string {
+  entitySeq += 1;
+  return `e_${Date.now().toString(36)}_${entitySeq}`;
+}
+
+/**
+ * Panel editor for a `data-model` block. A structured form: a list of entities
+ * (add/remove), each with a name Input, an optional note, and repeatable field
+ * rows (add/remove) carrying name / type / PK checkbox / FK input / nullable
+ * checkbox. Relations are derived from `fk` in v1, so the form focuses on the
+ * entities + fields. Renders BARE content (no `<section>`); the registry's panel
+ * surface supplies the popover chrome.
+ */
+export function DataModelEdit({
+  data,
+  onChange,
+  editable,
+}: BlockEditProps<DataModelData>) {
+  const entities = data.entities ?? [];
+
+  const patchEntities = (next: DataModelEntity[]) =>
+    onChange({ ...data, entities: next });
+
+  const updateEntity = (index: number, next: Partial<DataModelEntity>) =>
+    patchEntities(
+      entities.map((entity, i) =>
+        i === index ? { ...entity, ...next } : entity,
+      ),
+    );
+
+  const removeEntity = (index: number) =>
+    patchEntities(entities.filter((_, i) => i !== index));
+
+  const addEntity = () =>
+    patchEntities([
+      ...entities,
+      {
+        id: newEntityId(),
+        name: "NewEntity",
+        fields: [{ name: "id", pk: true }],
+      },
+    ]);
+
+  const updateField = (
+    entityIndex: number,
+    fieldIndex: number,
+    next: Partial<DataModelField>,
+  ) => {
+    const entity = entities[entityIndex];
+    if (!entity) return;
+    updateEntity(entityIndex, {
+      fields: entity.fields.map((field, i) =>
+        i === fieldIndex ? { ...field, ...next } : field,
+      ),
+    });
+  };
+
+  const removeField = (entityIndex: number, fieldIndex: number) => {
+    const entity = entities[entityIndex];
+    if (!entity) return;
+    updateEntity(entityIndex, {
+      fields: entity.fields.filter((_, i) => i !== fieldIndex),
+    });
+  };
+
+  const addField = (entityIndex: number) => {
+    const entity = entities[entityIndex];
+    if (!entity) return;
+    updateEntity(entityIndex, {
+      fields: [...entity.fields, { name: "field" }],
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-4" data-plan-interactive>
+      {entities.map((entity, entityIndex) => (
+        <div
+          key={entity.id}
+          className="flex flex-col gap-2 rounded-lg border border-input p-3"
+        >
+          <div className="flex items-center gap-2">
+            <IconDatabase className="size-4 shrink-0 text-muted-foreground" />
+            <DevInput
+              className="h-8 font-mono text-sm font-semibold"
+              value={entity.name}
+              disabled={!editable}
+              placeholder="EntityName"
+              onChange={(event) =>
+                updateEntity(entityIndex, { name: event.target.value })
+              }
+            />
+            <DevSelect
+              className="h-8 w-[120px] shrink-0"
+              value={entity.change ?? "none"}
+              disabled={!editable}
+              onValueChange={(value) =>
+                updateEntity(entityIndex, {
+                  change:
+                    value === "none" ? undefined : (value as DataModelChange),
+                })
+              }
+              options={[
+                { value: "none", label: "No change" },
+                ...DATA_MODEL_CHANGES.map((change) => ({
+                  value: change,
+                  label: CHANGE_LABEL[change],
+                })),
+              ]}
+            />
+            {editable && (
+              <button
+                type="button"
+                data-plan-interactive
+                aria-label="Remove entity"
+                className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+                onClick={() => removeEntity(entityIndex)}
+              >
+                <IconTrash className="size-4" />
+              </button>
+            )}
+          </div>
+
+          {/* Field rows. */}
+          <div className="flex flex-col gap-1.5">
+            {entity.fields.map((field, fieldIndex) => (
+              <div
+                key={fieldIndex}
+                className="flex flex-col gap-1.5 rounded-md border border-input/60 bg-accent/20 p-2"
+              >
+                <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-1.5">
+                  <DevInput
+                    className="h-7 font-mono text-xs"
+                    value={field.name}
+                    disabled={!editable}
+                    placeholder="name"
+                    onChange={(event) =>
+                      updateField(entityIndex, fieldIndex, {
+                        name: event.target.value,
+                      })
+                    }
+                  />
+                  <DevInput
+                    className="h-7 font-mono text-xs"
+                    value={field.type ?? ""}
+                    disabled={!editable}
+                    placeholder="type (e.g. uuid)"
+                    onChange={(event) =>
+                      updateField(entityIndex, fieldIndex, {
+                        type: event.target.value || undefined,
+                      })
+                    }
+                  />
+                  {editable && (
+                    <button
+                      type="button"
+                      data-plan-interactive
+                      aria-label="Remove field"
+                      className="flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+                      onClick={() => removeField(entityIndex, fieldIndex)}
+                    >
+                      <IconTrash className="size-3.5" />
+                    </button>
+                  )}
+                </div>
+                <div className="flex flex-wrap items-center gap-3">
+                  <label className="flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground">
+                    <input
+                      type="checkbox"
+                      className="size-3.5 cursor-pointer accent-primary"
+                      checked={Boolean(field.pk)}
+                      disabled={!editable}
+                      onChange={(event) =>
+                        updateField(entityIndex, fieldIndex, {
+                          pk: event.target.checked || undefined,
+                        })
+                      }
+                    />
+                    PK
+                  </label>
+                  <label className="flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground">
+                    <input
+                      type="checkbox"
+                      className="size-3.5 cursor-pointer accent-primary"
+                      checked={Boolean(field.nullable)}
+                      disabled={!editable}
+                      onChange={(event) =>
+                        updateField(entityIndex, fieldIndex, {
+                          nullable: event.target.checked || undefined,
+                        })
+                      }
+                    />
+                    Nullable
+                  </label>
+                  <DevInput
+                    className="h-7 flex-1 font-mono text-xs"
+                    value={field.fk ?? ""}
+                    disabled={!editable}
+                    placeholder="FK → Entity.field"
+                    onChange={(event) =>
+                      updateField(entityIndex, fieldIndex, {
+                        fk: event.target.value || undefined,
+                      })
+                    }
+                  />
+                </div>
+                {/* Diff row: change kind + the prior value (`was`) when the
+                    field is "modified", so before/after renders in Read. */}
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <DevSelect
+                    className="h-7 w-[120px] shrink-0"
+                    value={field.change ?? "none"}
+                    disabled={!editable}
+                    onValueChange={(value) =>
+                      updateField(entityIndex, fieldIndex, {
+                        change:
+                          value === "none"
+                            ? undefined
+                            : (value as DataModelChange),
+                        // Drop a stale `was` when leaving the modified state.
+                        ...(value === "modified" ? {} : { was: undefined }),
+                      })
+                    }
+                    options={[
+                      { value: "none", label: "No change" },
+                      ...DATA_MODEL_CHANGES.map((change) => ({
+                        value: change,
+                        label: CHANGE_LABEL[change],
+                      })),
+                    ]}
+                  />
+                  {field.change === "modified" && (
+                    <DevInput
+                      className="h-7 flex-1 font-mono text-xs"
+                      value={field.was ?? ""}
+                      disabled={!editable}
+                      placeholder="was (prior value, e.g. old type)"
+                      onChange={(event) =>
+                        updateField(entityIndex, fieldIndex, {
+                          was: event.target.value || undefined,
+                        })
+                      }
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+            {editable && (
+              <button
+                type="button"
+                data-plan-interactive
+                className="flex w-fit items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+                onClick={() => addField(entityIndex)}
+              >
+                <IconPlus className="size-3.5" />
+                Add field
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {editable && (
+        <button
+          type="button"
+          data-plan-interactive
+          className="flex items-center justify-center gap-1.5 rounded-md border border-dashed border-input py-2 text-sm text-muted-foreground hover:bg-accent/40 hover:text-foreground"
+          onClick={addEntity}
+        >
+          <IconPlus className="size-4" />
+          Add entity
+        </button>
+      )}
+    </div>
+  );
+}