@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/memories/components/MemoryFormDialog.tsx

@@ -1,18 +1,42 @@
 import type { GQLMemoryKind } from "@manta-eu/client";
-import { GQLMemoryScope, type GQLConflictingMemory, type GQLMemory, type GQLMemorySchema } from "@manta-eu/client";
-import { formatEntityName } from "@manta-eu/client/shared/rdf-namespaces";
+import {
+  GQLMemoryScope,
+  type GQLConflictingMemory,
+  type GQLMemory,
+  type GQLMemoryPropertyProblem,
+  type GQLMemorySchemaFieldsFragment,
+} from "@manta-eu/client";
+import {
+  inferVolatility,
+  maxImportanceForVolatility,
+  resolveTrustedUntil,
+  type MemoryVolatility,
+} from "@manta-eu/client/shared/memory-volatility";
 import { humanCount } from "@manta-eu/lib/humanize";
 import { isPresent } from "@manta-eu/lib/present";
 import { addYears, endOfDay, format, startOfTomorrow } from "date-fns";
 import { CalendarIcon, ChevronLeft, X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useConflictCheck } from "../hooks/useConflictCheck";
 import { validateMemoryForm } from "../memory-form-validation";
+import {
+  changedPropertyValues,
+  cleanPropertyValues,
+  filledPropertyCount,
+  missingRequiredProperties,
+  propertyErrorsByPath,
+  propertyValuesFromMemory,
+  writableProperties,
+  type MemoryPropertyErrors,
+} from "../memory-property-values";
 import { ConflictMemoryCard } from "./ConflictMemoryCard";
+import { FieldLabel } from "./FieldLabel";
+import { importanceLabel } from "./ImportanceSlider";
 import { MemoryFields, emptyForm, type FormErrors, type MemoryFormState } from "./MemoryFields";
+import { MemoryPropertyFields } from "./MemoryPropertyFields";
+import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Calendar } from "#components/calendar/index";
-import { Input } from "#components/input/index";
 import {
   Dialog,
   DialogContent,
@@ -23,24 +47,26 @@ import {
 } from "#components/modal/index";
 import { Popover, PopoverContent, PopoverTrigger } from "#components/popover/index";
 import {
+  createSelectClassName,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-  createSelectClassName,
 } from "#components/select/index";
 import { cn } from "#lib/utils";
 
+export type MemorySaveResult = { propertyErrors?: readonly GQLMemoryPropertyProblem[] | null } | void;
+
 export type MemoryFormDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   scope: GQLMemoryScope;
   initial?: GQLMemory;
-  onSave: (form: MemoryFormState, supersedesMemoryIris?: string[]) => Promise<void>;
+  onSave: (form: MemoryFormState, supersedesMemoryIris?: string[]) => Promise<MemorySaveResult>;
   isSaving: boolean;
   canManageSharedMemories?: boolean;
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   currentUserId?: string;
 };
 
@@ -48,15 +74,6 @@ function normalizeDesc(s: string): string {
   return s.trim().replace(/\s+/g, " ");
 }
 
-function shortDatatype(iri: string): string {
-  if (iri.endsWith("#string")) return "text";
-  if (iri.endsWith("#decimal")) return "decimal";
-  if (iri.endsWith("#integer")) return "integer";
-  if (iri.endsWith("#boolean")) return "boolean";
-  if (iri.endsWith("#anyURI")) return "url";
-  return formatEntityName(iri);
-}
-
 function initialSubclass(memory: GQLMemory): string | null {
   if (!memory.memorySubclass) return null;
   return memory.memorySubclass;
@@ -68,7 +85,7 @@ function buildFormFromMemory(memory: GQLMemory): MemoryFormState {
     description: memory.description ?? null,
     kind: memory.kind as GQLMemoryKind,
     memorySubclass: initialSubclass(memory),
-    customProperties: (memory.customProperties as Record<string, string> | null) ?? {},
+    customProperties: propertyValuesFromMemory(memory),
     memoryValidUntil: memory.memoryValidUntil ? new Date(memory.memoryValidUntil).toISOString() : null,
     memoryTrustedUntil: memory.memoryTrustedUntil ? new Date(memory.memoryTrustedUntil).toISOString() : null,
     teams: memory.teams,
@@ -76,6 +93,61 @@ function buildFormFromMemory(memory: GQLMemory): MemoryFormState {
   };
 }
 
+type DatePickerControlProps = {
+  id: string;
+  placeholder: string;
+  value: string | null;
+  onChange: (value: string | null) => void;
+  notAfter?: string | null;
+  describedBy?: string;
+  invalid?: boolean;
+};
+
+function DatePickerControl(props: DatePickerControlProps) {
+  const { id, placeholder, value, onChange, notAfter, describedBy, invalid } = props;
+  const selected = value ? new Date(value) : undefined;
+  const latest = notAfter ? new Date(notAfter) : undefined;
+
+  return (
+    <div className="flex items-center gap-2">
+      <Popover>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            id={id}
+            aria-invalid={invalid ? true : undefined}
+            aria-describedby={describedBy}
+            className={cn(createSelectClassName({ size: "base" }), "flex-1 min-w-0 gap-2")}
+          >
+            <CalendarIcon className="size-4 shrink-0 text-muted-foreground" />
+            <span className={cn("flex-1 min-w-0 truncate text-left", !value && "text-placeholder-foreground")}>
+              {selected ? format(selected, "MMM d, yyyy") : placeholder}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-auto border-0 bg-transparent p-0 shadow-none">
+          <Calendar
+            mode="single"
+            captionLayout="dropdown"
+            startMonth={new Date()}
+            endMonth={latest ?? addYears(new Date(), 10)}
+            selected={selected}
+            defaultMonth={selected}
+            disabled={latest ? { before: startOfTomorrow(), after: latest } : { before: startOfTomorrow() }}
+            onSelect={(date) => onChange(date ? endOfDay(date).toISOString() : null)}
+          />
+        </PopoverContent>
+      </Popover>
+      {value && (
+        <Button type="button" variant="tertiary" size="base" onClick={() => onChange(null)} className="shrink-0">
+          <X className="size-3.5" />
+          Clear
+        </Button>
+      )}
+    </div>
+  );
+}
+
 type MemoryDateFieldProps = {
   id: string;
   label: string;
@@ -89,52 +161,112 @@ type MemoryDateFieldProps = {
 
 function MemoryDateField(props: MemoryDateFieldProps) {
   const { id, label, hint, placeholder, value, onChange, notAfter, error } = props;
-  const selected = value ? new Date(value) : undefined;
-  const latest = notAfter ? new Date(notAfter) : undefined;
   const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
 
   return (
     <div className="flex flex-col gap-1.5">
-      <label htmlFor={id} className="typography-small">
-        {label}
-      </label>
-      <div className="flex items-center gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <button
-              type="button"
-              id={id}
-              aria-invalid={error ? true : undefined}
-              aria-describedby={error ? errorId : undefined}
-              className={cn(createSelectClassName({ size: "base" }), "flex-1 min-w-0 gap-2")}
-            >
-              <CalendarIcon className="size-4 shrink-0 text-muted-foreground" />
-              <span className={cn("flex-1 min-w-0 truncate text-left", !value && "text-placeholder-foreground")}>
-                {selected ? format(selected, "MMM d, yyyy") : placeholder}
-              </span>
-            </button>
-          </PopoverTrigger>
-          <PopoverContent align="start" className="w-auto border-0 bg-transparent p-0 shadow-none">
-            <Calendar
-              mode="single"
-              captionLayout="dropdown"
-              startMonth={new Date()}
-              endMonth={latest ?? addYears(new Date(), 10)}
-              selected={selected}
-              defaultMonth={selected}
-              disabled={latest ? { before: startOfTomorrow(), after: latest } : { before: startOfTomorrow() }}
-              onSelect={(date) => onChange(date ? endOfDay(date).toISOString() : null)}
-            />
-          </PopoverContent>
-        </Popover>
-        {value && (
-          <Button type="button" variant="tertiary" size="base" onClick={() => onChange(null)} className="shrink-0">
-            <X className="size-3.5" />
-            Clear
-          </Button>
-        )}
-      </div>
-      <p className="typography-small text-muted-foreground">{hint}</p>
+      <FieldLabel label={label} hint={hint} htmlFor={id} />
+      <span id={hintId} className="sr-only">
+        {hint}
+      </span>
+      <DatePickerControl
+        id={id}
+        placeholder={placeholder}
+        value={value}
+        notAfter={notAfter}
+        invalid={isPresent(error)}
+        describedBy={error ? `${hintId} ${errorId}` : hintId}
+        onChange={onChange}
+      />
+      {error && (
+        <p id={errorId} className="typography-small text-error-foreground">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+type TrustPreset = MemoryVolatility | "date";
+
+const trustPresets: readonly { value: TrustPreset; label: string }[] = [
+  { value: "stable", label: "Stable · trusted indefinitely" },
+  { value: "slow", label: "Changes slowly · 90 days" },
+  { value: "volatile", label: "Changes often · 7 days" },
+  { value: "date", label: "Pick a date" },
+];
+
+const levelWording: Record<MemoryVolatility, string> = {
+  stable: "is stable",
+  slow: "changes slowly",
+  volatile: "changes often",
+};
+
+function isTrustPreset(value: string): value is TrustPreset {
+  return trustPresets.some((preset) => preset.value === value);
+}
+
+type TrustedUntilFieldProps = {
+  value: string | null;
+  validUntil: string | null;
+  importance: number;
+  error?: string;
+  preset: TrustPreset | null;
+  onPresetChange: (preset: TrustPreset) => void;
+  onChange: (value: string | null) => void;
+};
+
+// The dialog keeps the chosen preset, since this field unmounts whenever the dialog shows another view.
+function TrustedUntilField(props: TrustedUntilFieldProps) {
+  const { value, validUntil, importance, error, onPresetChange: setPreset, onChange } = props;
+  const preset = props.preset ?? (value ? "date" : "stable");
+  const level: MemoryVolatility = preset === "date" ? inferVolatility(value, new Date()) : preset;
+  const cap = maxImportanceForVolatility(level);
+  const hint = "Stops pre-loading after this date but stays searchable. Use it for anything that drifts.";
+  const errorId = "memory-trust-horizon-error";
+
+  function choose(next: string) {
+    if (!isTrustPreset(next)) return;
+    setPreset(next);
+    if (next === "date") return;
+    onChange(next === "stable" ? null : resolveTrustedUntil(next, validUntil));
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <FieldLabel label="Trusted until" hint={hint} htmlFor="memory-trust-preset" />
+      <Select value={preset} onValueChange={choose}>
+        <SelectTrigger label="Trusted until" id="memory-trust-preset" hiddenLabel>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {trustPresets.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {preset !== "stable" && (
+        <DatePickerControl
+          id="memory-trust-horizon"
+          placeholder="Pick a date"
+          value={value}
+          notAfter={validUntil}
+          invalid={isPresent(error)}
+          describedBy={error ? errorId : undefined}
+          onChange={(next) => {
+            setPreset(next === null ? "stable" : "date");
+            onChange(next);
+          }}
+        />
+      )}
+      {importance > cap && (
+        <p className="typography-small text-muted-foreground">
+          The agent keeps a memory that {levelWording[level]} at {importanceLabel(cap)} importance or lower.
+        </p>
+      )}
       {error && (
         <p id={errorId} className="typography-small text-error-foreground">
           {error}
@@ -164,6 +296,9 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
   const [errors, setErrors] = useState<FormErrors>({});
   const [submitted, setSubmitted] = useState(false);
   const [view, setView] = useState<"main" | "properties" | "conflicts">("main");
+  const [propertyErrors, setPropertyErrors] = useState<MemoryPropertyErrors>({});
+  const [trustPreset, setTrustPreset] = useState<TrustPreset | null>(null);
+  const initialValues = useMemo(() => (initial ? propertyValuesFromMemory(initial) : {}), [initial]);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
   const [pendingConflicts, setPendingConflicts] = useState<GQLConflictingMemory[]>([]);
   const [pendingForm, setPendingForm] = useState<MemoryFormState | null>(null);
@@ -195,9 +330,11 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
       setErrors({});
       setSubmitted(false);
       setView("main");
+      setPropertyErrors({});
       originalDescRef.current = initial ? normalizeDesc(initial.description ?? "") : "";
       setShowDiscardConfirm(false);
       clearConflicts();
+      setTrustPreset(null);
       setConflictCheckTimedOut(false);
     }
   }, [open, initial]);
@@ -209,10 +346,29 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
       form.memoryValidUntil !== (initial.memoryValidUntil ? new Date(initial.memoryValidUntil).toISOString() : null) ||
       form.memoryTrustedUntil !==
         (initial.memoryTrustedUntil ? new Date(initial.memoryTrustedUntil).toISOString() : null) ||
-      JSON.stringify(form.customProperties) !==
-        JSON.stringify((initial.customProperties as Record<string, string> | null) ?? {})
+      JSON.stringify(cleanPropertyValues(form.customProperties)) !== JSON.stringify(cleanPropertyValues(initialValues))
     : isPresent(form.label) || isPresent(form.description) || isPresent(form.teams);
 
+  const selectedSchema = form.memorySubclass
+    ? (schemas?.find((schema) => schema.iri === form.memorySubclass) ?? null)
+    : null;
+  const schemaProperties = writableProperties(selectedSchema);
+
+  const submit = useCallback(
+    async (next: MemoryFormState, supersedesMemoryIris?: string[]) => {
+      const keepsSchema = isEdit && next.memorySubclass === initialSubclass(initial);
+      const outgoing = keepsSchema
+        ? { ...next, customProperties: changedPropertyValues(next.customProperties, initialValues) }
+        : next;
+      const result = await onSave(outgoing, supersedesMemoryIris);
+      if (result && isPresent(result.propertyErrors)) {
+        setPropertyErrors(propertyErrorsByPath(result.propertyErrors));
+        setView(isPresent(writableProperties(selectedSchema)) ? "properties" : "main");
+      }
+    },
+    [isEdit, initial, initialValues, onSave, selectedSchema],
+  );
+
   const handleRequestClose = useCallback(
     (nextOpen: boolean) => {
       if (!nextOpen && isDirty && !isSaving) {
@@ -232,10 +388,17 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
       return;
     }
 
+    const missing = missingRequiredProperties(selectedSchema, form.customProperties);
+    if (isPresent(missing)) {
+      setPropertyErrors(missing);
+      setView("properties");
+      return;
+    }
+
     const currentForm = form;
 
     if (isEdit && normalizeDesc(currentForm.description ?? "") === originalDescRef.current) {
-      await onSave(currentForm);
+      await submit(currentForm);
       return;
     }
 
@@ -254,7 +417,7 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
     }
 
     if (!isPresent(conflicts)) {
-      await onSave(currentForm);
+      await submit(currentForm);
       return;
     }
 
@@ -264,7 +427,7 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
     setConflictChecked(new Set(conflicts.map((c) => c.iri)));
     setConflictMerging(new Set());
     setView("conflicts");
-  }, [form, isEdit, initial, scope, isTeam, check, onSave]);
+  }, [form, isEdit, initial, scope, isTeam, check, submit, selectedSchema]);
 
   const toggleConflictChecked = useCallback((iri: string) => {
     setConflictChecked((prev) => {
@@ -318,8 +481,8 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
     const saved = pendingForm;
     clearConflicts();
     setView("main");
-    await onSave(saved, []);
-  }, [pendingForm, clearConflicts, onSave]);
+    await submit(saved, []);
+  }, [pendingForm, clearConflicts, submit]);
 
   const handleConflictConfirmInline = useCallback(async () => {
     if (!pendingForm) return;
@@ -331,21 +494,15 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
     }
     clearConflicts();
     setView("main");
-    await onSave(finalForm, supersedesIris);
-  }, [pendingForm, pendingConflicts, conflictChecked, conflictMerging, isTeam, clearConflicts, onSave]);
-
-  const selectedSchema = form.memorySubclass ? (schemas?.find((s) => s.iri === form.memorySubclass) ?? null) : null;
-  const schemaProperties =
-    selectedSchema && isPresent(selectedSchema.properties)
-      ? [...selectedSchema.properties].sort((a, b) => {
-          if (a.required && !b.required) return -1;
-          if (!a.required && b.required) return 1;
-          return 0;
-        })
-      : [];
+    await submit(finalForm, supersedesIris);
+  }, [pendingForm, pendingConflicts, conflictChecked, conflictMerging, isTeam, clearConflicts, submit]);
+
   const hasProperties = isPresent(schemaProperties);
   const requiredPropertyCount = schemaProperties.filter((p) => p.required).length;
-  const filledPropertyCount = schemaProperties.filter((p) => isPresent(form.customProperties[p.path])).length;
+  const writablePaths = new Set(schemaProperties.map((property) => property.path));
+  const otherPropertyErrors = Object.entries(propertyErrors)
+    .filter(([path]) => !writablePaths.has(path))
+    .map(([, message]) => message);
 
   const scopeLabel = isTeam ? "team" : isCompany ? "company" : "user";
   const titleText = isEdit
@@ -386,7 +543,13 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={handleRequestClose}>
-      <DialogContent className="flex flex-col overflow-hidden">
+      <DialogContent
+        className="flex flex-col overflow-hidden"
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          document.getElementById(isEdit ? "memory-label" : "memory-description")?.focus();
+        }}
+      >
         {view === "conflicts" ? (
           <DialogHeader>
             <button
@@ -453,125 +616,68 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
               ))}
             </>
           ) : view === "properties" ? (
-            schemaProperties.map((prop) => {
-              const localName = formatEntityName(prop.path);
-              const value = form.customProperties[prop.path] ?? "";
-              const isBoolean = prop.dataType === "http://www.w3.org/2001/XMLSchema#boolean";
-              const isNumeric =
-                prop.dataType === "http://www.w3.org/2001/XMLSchema#integer" ||
-                prop.dataType === "http://www.w3.org/2001/XMLSchema#decimal";
-              const hasSmallEnum = isPresent(prop.allowedValues) && prop.allowedValues.length <= 4;
-              const hasLargeEnum = prop.allowedValues && prop.allowedValues.length > 4;
-              function setPropValue(v: string) {
-                setForm((prev) => ({
-                  ...prev,
-                  customProperties: { ...prev.customProperties, [prop.path]: v },
-                }));
-              }
-              return (
-                <div key={prop.path} className="flex flex-col gap-2 rounded-lg bg-faint p-3">
-                  <div className="flex items-center gap-2">
-                    <label
-                      htmlFor={hasLargeEnum || (!hasSmallEnum && !isBoolean) ? `prop-${localName}` : undefined}
-                      className="typography-small-medium text-default-foreground flex-1"
-                    >
-                      {prop.label}
-                      {prop.required && <span className="text-error-foreground ml-1">*</span>}
-                    </label>
-                    <span className="typography-tiny text-muted-foreground bg-card border border-muted-border rounded px-1.5 py-0.5 shrink-0">
-                      {shortDatatype(prop.dataType)}
-                    </span>
-                  </div>
-                  {hasSmallEnum ? (
-                    <div className="flex gap-1 flex-wrap">
-                      {prop.allowedValues!.map((v) => (
-                        <Button
-                          key={v}
-                          type="button"
-                          variant={value === v ? "primary" : "tertiary"}
-                          size="sm"
-                          rounded="md"
-                          onClick={() => setPropValue(v)}
-                        >
-                          {v}
-                        </Button>
-                      ))}
-                    </div>
-                  ) : hasLargeEnum ? (
-                    <Select value={value} onValueChange={setPropValue}>
-                      <SelectTrigger label={prop.label} id={`prop-${localName}`} hiddenLabel>
-                        <SelectValue placeholder={`Select ${prop.label.toLowerCase()}`} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {prop.allowedValues!.map((v) => (
-                          <SelectItem key={v} value={v}>
-                            {v}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  ) : isBoolean ? (
-                    <div className="flex gap-1">
-                      {(["true", "false"] as const).map((v) => (
-                        <Button
-                          key={v}
-                          type="button"
-                          variant={(value || "false") === v ? "primary" : "tertiary"}
-                          size="sm"
-                          rounded="md"
-                          className="flex-1"
-                          onClick={() => setPropValue(v)}
-                        >
-                          {v === "true" ? "Yes" : "No"}
-                        </Button>
-                      ))}
-                    </div>
-                  ) : (
-                    <Input
-                      id={`prop-${localName}`}
-                      type={isNumeric ? "number" : "text"}
-                      value={value}
-                      onChange={(e) => setPropValue(e.target.value)}
-                      placeholder={`Enter ${prop.label.toLowerCase()}`}
-                    />
-                  )}
-                </div>
-              );
-            })
+            <>
+              {otherPropertyErrors.map((message) => (
+                <Banner key={message} label={message} className="shrink-0" />
+              ))}
+              {selectedSchema && (
+                <MemoryPropertyFields
+                  schema={selectedSchema}
+                  values={form.customProperties}
+                  errors={propertyErrors}
+                  onChange={(path, values) => {
+                    setForm((prev) => ({ ...prev, customProperties: { ...prev.customProperties, [path]: values } }));
+                    setPropertyErrors((previous) => {
+                      if (!(path in previous)) return previous;
+                      const { [path]: _cleared, ...rest } = previous;
+                      return rest;
+                    });
+                  }}
+                />
+              )}
+            </>
           ) : (
-            <MemoryFields
-              form={form}
-              errors={errors}
-              isTeam={isTeam}
-              canManageSharedMemories={canManageSharedMemories}
-              schemas={schemas}
-              onChange={(next) => setForm((prev) => ({ ...prev, ...next }))}
-              labelPlaceholder={isEdit ? "e.g. Target ROAS" : "Auto-generated from description"}
-              descriptionPlaceholder={getDescriptionPlaceholder()}
-              autoFocus={!isEdit}
-              onEditProperties={hasProperties ? () => setView("properties") : undefined}
-              filledPropertyCount={filledPropertyCount}
-              totalPropertyCount={schemaProperties.length}
-            >
-              <MemoryDateField
-                id="memory-expiry"
-                label="Valid until"
-                hint="No longer true after this date, so the agent stops using it. Nothing is deleted. Use it only for a real deadline."
-                placeholder="Never expires"
-                value={form.memoryValidUntil}
-                onChange={(memoryValidUntil) => setForm((prev) => ({ ...prev, memoryValidUntil }))}
-              />
-              <MemoryDateField
-                id="memory-trust-horizon"
-                label="Trusted until"
-                hint="Stops pre-loading after this date but stays searchable. Use it for anything that drifts."
-                placeholder="Trusted indefinitely"
-                value={form.memoryTrustedUntil}
-                notAfter={form.memoryValidUntil}
-                error={errors.memoryTrustedUntil}
-                onChange={(memoryTrustedUntil) => setForm((prev) => ({ ...prev, memoryTrustedUntil }))}
-              />
-            </MemoryFields>
+            <>
+              {!hasProperties &&
+                otherPropertyErrors.map((message) => <Banner key={message} label={message} className="shrink-0" />)}
+              <MemoryFields
+                form={form}
+                errors={errors}
+                isTeam={isTeam}
+                canManageSharedMemories={canManageSharedMemories}
+                onChange={(next) => setForm((prev) => ({ ...prev, ...next }))}
+                labelPlaceholder={isEdit ? "e.g. Target ROAS" : "Auto-generated from description"}
+                descriptionPlaceholder={getDescriptionPlaceholder()}
+                autoFocus={!isEdit}
+                schemas={schemas}
+                onEditProperties={hasProperties ? () => setView("properties") : undefined}
+                prefillSchemaDefaults={!isEdit}
+                storedSchemaValues={
+                  initial ? { schemaIri: initialSubclass(initial), values: initialValues } : undefined
+                }
+                filledPropertyCount={filledPropertyCount(selectedSchema, form.customProperties)}
+                totalPropertyCount={schemaProperties.length}
+                hasPropertyErrors={isPresent(propertyErrors)}
+              >
+                <MemoryDateField
+                  id="memory-expiry"
+                  label="Valid until"
+                  hint="No longer true after this date, so the agent stops using it. Nothing is deleted. Use it only for a real deadline."
+                  placeholder="Never expires"
+                  value={form.memoryValidUntil}
+                  onChange={(memoryValidUntil) => setForm((prev) => ({ ...prev, memoryValidUntil }))}
+                />
+                <TrustedUntilField
+                  value={form.memoryTrustedUntil}
+                  validUntil={form.memoryValidUntil}
+                  importance={form.importance}
+                  error={errors.memoryTrustedUntil}
+                  preset={trustPreset}
+                  onPresetChange={setTrustPreset}
+                  onChange={(memoryTrustedUntil) => setForm((prev) => ({ ...prev, memoryTrustedUntil }))}
+                />
+              </MemoryFields>
+            </>
           )}
         </div>
 
@@ -620,7 +726,7 @@ export function MemoryFormDialog(props: MemoryFormDialogProps) {
               <Button
                 onClick={() => {
                   setConflictCheckTimedOut(false);
-                  void onSave(pendingForm, []);
+                  void submit(pendingForm, []);
                   setPendingForm(null);
                 }}
                 disabled={isSaving}