@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/desk/DeskPokemon.stories.tsx

@@ -0,0 +1,177 @@
+// The real desk screens on the Pokemon doctype the One app ships, served from
+// fixtures. Shoot these at phone width to check the backoffice against its
+// approved board (FZ-7684).
+import { YStack } from "@multiplatform.one/components";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { ReactNode } from "react";
+import { Desk } from "./Desk";
+
+const meta = {
+  title: "Screens/Backoffice/Desk/Pokemon",
+  component: Desk,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+  },
+};
+export default meta;
+
+const MOCK_HOST = "https://backoffice-pokemon.mock.test";
+const DOCTYPE = "Pokemon";
+
+const pokemonMeta = {
+  name: DOCTYPE,
+  doctype: "DocType",
+  module: "Core",
+  title_field: "pokemon_name",
+  image_field: "sprite_front",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+    { fieldname: "poke_id", fieldtype: "Int", label: "Poke ID", in_list_view: 1 },
+    { fieldname: "species", fieldtype: "Data", label: "Species", in_list_view: 1 },
+    { fieldname: "height", fieldtype: "Int", label: "Height (dm)" },
+    { fieldname: "weight", fieldtype: "Int", label: "Weight (hg)" },
+    { fieldname: "base_experience", fieldtype: "Int", label: "Base Experience" },
+    { fieldname: "column_break_1", fieldtype: "Column Break" },
+    { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+    { fieldname: "sprite_back", fieldtype: "Attach Image", label: "Sprite (Back)" },
+    { fieldname: "section_break_stats", fieldtype: "Section Break", label: "Stats" },
+    { fieldname: "stats", fieldtype: "Table", label: "Stats", options: "Pokemon Stat" },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const statMeta = {
+  name: "Pokemon Stat",
+  doctype: "DocType",
+  module: "Core",
+  istable: 1,
+  fields: [
+    { fieldname: "stat", fieldtype: "Data", label: "Stat", in_list_view: 1 },
+    { fieldname: "base_stat", fieldtype: "Int", label: "Base Stat", in_list_view: 1 },
+    { fieldname: "effort", fieldtype: "Int", label: "Effort", in_list_view: 1 },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const sprite = (id: number, back = false) =>
+  `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${back ? "back/" : ""}${id}.png`;
+
+const rows: [string, string, number, string, number, number, number][] = [
+  ["pikachu", "Pikachu", 25, "Mouse Pokémon", 4, 60, 112],
+  ["raticate", "Raticate", 20, "Mouse Pokémon", 7, 185, 145],
+  ["rattata", "Rattata", 19, "Mouse Pokémon", 3, 35, 51],
+  ["pidgeot", "Pidgeot", 18, "Bird Pokémon", 15, 395, 216],
+  ["pidgeotto", "Pidgeotto", 17, "Bird Pokémon", 11, 300, 122],
+  ["pidgey", "Pidgey", 16, "Tiny Bird Pokémon", 3, 18, 50],
+  ["beedrill", "Beedrill", 15, "Poison Bee Pokémon", 10, 295, 178],
+  ["caterpie", "Caterpie", 10, "Worm Pokémon", 3, 29, 39],
+  ...(
+    [
+      "Bulbasaur",
+      "Ivysaur",
+      "Venusaur",
+      "Charmander",
+      "Charmeleon",
+      "Charizard",
+      "Squirtle",
+      "Wartortle",
+      "Blastoise",
+      "Metapod",
+      "Butterfree",
+      "Weedle",
+      "Kakuna",
+      "Spearow",
+      "Fearow",
+      "Ekans",
+      "Arbok",
+      "Raichu",
+    ] as const
+  ).map((title, i): [string, string, number, string, number, number, number] => {
+    const id = i < 9 ? i + 1 : i + 2;
+    return [title.toLowerCase(), title, id, "Pokémon", 5 + (i % 9), 60 + i * 37, 60 + i * 11];
+  }),
+];
+
+const now = Date.now();
+const pokemonDocs = rows.map(
+  ([name, pokemon_name, poke_id, species, height, weight, base_experience], i) => ({
+    name,
+    doctype: DOCTYPE,
+    pokemon_name,
+    poke_id,
+    species,
+    height,
+    weight,
+    base_experience,
+    sprite_front: sprite(poke_id),
+    sprite_back: sprite(poke_id, true),
+    modified: new Date(now - (4 + Math.floor(i / 5)) * 86_400_000).toISOString(),
+    stats: [
+      { name: `${name}-hp`, stat: "hp", base_stat: 45, effort: 1 },
+      { name: `${name}-attack`, stat: "attack", base_stat: 30, effort: 0 },
+      { name: `${name}-defense`, stat: "defense", base_stat: 35, effort: 0 },
+      { name: `${name}-speed`, stat: "speed", base_stat: 45, effort: 0 },
+    ],
+  }),
+);
+
+const frappe = () => ({
+  baseURL: MOCK_HOST,
+  fixtures: new InMemoryFixtureProvider({
+    DocType: [pokemonMeta, statMeta],
+    Workspace: [],
+    "Notification Log": [],
+    [DOCTYPE]: pokemonDocs,
+  }),
+});
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__deskPokemonMockFetch) return;
+  w.__deskPokemonMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (!urlStr.startsWith(MOCK_HOST)) return realFetch(input as RequestInfo, init);
+    const body =
+      new URL(urlStr).pathname === "/api/method/frappe.auth.get_logged_user"
+        ? { message: null }
+        : { data: [], message: [] };
+    return new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  };
+})();
+
+function Frame({ children }: { children: ReactNode }) {
+  return (
+    <YStack height="100vh" minHeight="$0">
+      {children}
+    </YStack>
+  );
+}
+
+export const List = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} />
+  </Frame>
+);
+
+export const Form = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} name="caterpie" />
+  </Frame>
+);
+
+export const Report = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={DOCTYPE} view="report" />
+  </Frame>
+);

package/src/desk/DeskSurface.spec.tsx

@@ -80,6 +80,7 @@ const everyKind: DeskTarget[] = [
   { kind: "view", doctype: TASK_DOCTYPE, view: "kanban" },
   { kind: "new", doctype: TASK_DOCTYPE },
   { kind: "form", doctype: TASK_DOCTYPE, name: "QDT-0001" },
+  { kind: "form-builder", doctype: TASK_DOCTYPE },
   { kind: "report", reportName: "Open Tasks" },
   { kind: "not-found", slug: "nope" },
 ];
@@ -100,6 +101,7 @@ describe("<DeskSurface />", () => {
             new: Probe,
             form: Probe,
             report: Probe,
+            "form-builder": Probe,
             "not-found": Probe,
           }}
         />,

package/src/desk/DeskSurface.tsx

@@ -9,6 +9,8 @@
  */
 import { Spinner, YStack } from "@multiplatform.one/components";
 import { useMemo, type ComponentType } from "react";
+import { useBackofficeCapabilities } from "../config/BackofficeProvider";
+import { FormBuilderScreen } from "../formBuilder/FormBuilderScreen";
 import { setCreatePrefill } from "../form/createPrefill";
 import { DocFormScreen } from "../form/DocFormScreen";
 import { DoctypeListScreen } from "../list/DoctypeListScreen";
@@ -85,6 +87,10 @@ export function DeskSurface({
   initialFilters,
   views,
 }: DeskSurfaceHostProps) {
+  const capabilities = useBackofficeCapabilities();
+  if (target.kind === "form-builder" && !capabilities.formBuilder.enabled) {
+    return <NotFoundScreen />;
+  }
   const Override = resolveOverride(overrides, target);
   if (Override) return <Override target={target} readOnly={readOnly} />;
 
@@ -115,6 +121,8 @@ export function DeskSurface({
       // returns, so this branch and a bare <FrappeForm> resolve a doctype
       // the same way.
       return <DocFormScreen doctype={target.doctype} name={target.name} readOnly={readOnly} />;
+    case "form-builder":
+      return <FormBuilderScreen doctype={target.doctype} />;
     case "report":
       return <QueryReportScreen reportName={target.reportName} />;
     case "not-found":

package/src/desk/resolveDeskPath.spec.ts

@@ -172,3 +172,23 @@ describe("resolveDeskPath rejections", () => {
     });
   });
 });
+
+describe("form builder addresses", () => {
+  it("reserves the single customize-form segment for the picker", () => {
+    expect(resolveDeskPath("/backoffice/customize-form")).toEqual({
+      kind: "form-builder",
+      doctype: undefined,
+    });
+    expect(
+      resolveDeskPath("/admin/customize-form", "/admin", { doc_type: ["Sales Order", "ToDo"] }),
+    ).toEqual({ kind: "form-builder", doctype: "Sales Order" });
+  });
+
+  it("keeps named Customize Form documents on the form route", () => {
+    expect(resolveDeskPath("/backoffice/customize-form/Sales%20Order")).toEqual({
+      kind: "slug-name",
+      slug: "customize-form",
+      name: "Sales Order",
+    });
+  });
+});

package/src/desk/resolveDeskPath.ts

@@ -32,6 +32,7 @@ export interface DeskViewParams {
  */
 export type DeskAddress =
   | { kind: "home" }
+  | { kind: "form-builder"; doctype?: string }
   | { kind: "slug"; slug: string; filtersParam?: string; sortParam?: string }
   | {
       kind: "slug-view";
@@ -58,7 +59,7 @@ function decode(segment: string): string {
 
 /**
  * Resolve `path` (no query string; query lives in `params`, One-router
- * semantics) against the six route shapes `createBackofficePaths` writes.
+ * semantics) against the seven route shapes `createBackofficePaths` writes.
  * Paths outside `basePath` resolve to `not-found`.
  */
 export function resolveDeskPath(
@@ -77,6 +78,10 @@ export function resolveDeskPath(
   const segments = rest.split("/").filter(Boolean).map(decode);
   if (segments.length === 0) return { kind: "home" };
 
+  if (segments.length === 1 && segments[0] === "customize-form") {
+    return { kind: "form-builder", doctype: first(params.doc_type) };
+  }
+
   if (segments[0] === "query-report") {
     if (segments.length === 2 && segments[1]) {
       return { kind: "report", reportName: segments[1], filtersParam: first(params.filters) };

package/src/desk/target.ts

@@ -20,6 +20,7 @@ import { resolveDeskPath, type DeskAddress, type DeskViewParams } from "./resolv
 
 export type DeskTarget =
   | { kind: "home" }
+  | { kind: "form-builder"; doctype?: string }
   | { kind: "workspace"; workspace: string }
   | { kind: "list"; doctype: string; filtersParam?: string; sortParam?: string }
   | {
@@ -72,6 +73,8 @@ function addressToTarget(
   switch (address.kind) {
     case "home":
       return { kind: "home" };
+    case "form-builder":
+      return { kind: "form-builder", doctype: address.doctype };
     case "report":
       return { kind: "report", reportName: address.reportName, filtersParam: address.filtersParam };
     case "not-found":

package/src/form/DocFormScreen.guest.screen.spec.tsx

@@ -121,6 +121,10 @@ describe("DocFormScreen with DocType meta refused (LC-96)", () => {
     expect(screen.queryByText(/Could not load/)).toBeNull();
     expect(screen.queryByLabelText("Owner", { exact: true })).toBeNull();
     expect(button("Save")).toBeUndefined();
+    expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
+    expect(
+      screen.getByTestId("form-toolbar").contains(screen.getByTestId("form-toolbar-menu")),
+    ).toBe(true);
     expect(metaReads).toBe(1);
   });
 

package/src/form/DocFormScreen.rights.spec.tsx

@@ -4,8 +4,9 @@
 // reader got an editable form and Save. It now resolves the session's roles.
 // The form body is FrappeForm's (MPO-15 AC2), so a reader asking for a new
 // record meets FrappeForm's not-permitted state, as desk refuses new_doc.
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
@@ -36,6 +37,9 @@ const tackle = {
 let run = 0;
 let roles: string[] = [];
 let sessionAnswered = false;
+let sessionUser = "user@pokemon.test";
+let formDoctype = doctype;
+let formName = tackle.name;
 
 function json(body: unknown, status = 200) {
   return new Response(JSON.stringify(body), {
@@ -47,24 +51,33 @@ function json(body: unknown, status = 200) {
 beforeEach(() => {
   run += 1;
   sessionAnswered = false;
+  sessionUser = "user@pokemon.test";
+  formDoctype = doctype;
+  formName = tackle.name;
   vi.stubGlobal("fetch", async (input: string | URL | Request) => {
     const url = new URL(String(input instanceof Request ? input.url : input));
     const method = url.pathname.replace(/^\/api\/method\//, "");
-    if (method === "frappe.auth.get_logged_user") return json({ message: "user@pokemon.test" });
+    if (method === "frappe.auth.get_logged_user") return json({ message: sessionUser });
     if (method === "frappe.core.doctype.user.user.get_roles") {
       sessionAnswered = true;
       return json({ message: roles });
     }
-    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [meta] });
+    if (method === "frappe.desk.form.load.getdoctype")
+      return json({ docs: [{ ...meta, name: formDoctype }] });
     if (method === "frappe.desk.form.load.getdoc") {
-      return json({ docs: [tackle], docinfo: { permissions: { null: 0 } } });
+      return json({
+        docs: [{ ...tackle, doctype: formDoctype, name: formName }],
+        docinfo: { permissions: { null: 0 } },
+      });
     }
     if (method === "frappe.desk.form.load.get_docinfo") {
       return json({ docinfo: { permissions: { null: 0 } } });
     }
-    const resource = `/api/resource/${encodeURIComponent(doctype)}`;
-    if (url.pathname === `${resource}/a1b2c3`) return json({ data: tackle });
-    if (url.pathname === resource) return json({ data: [tackle] });
+    const resource = `/api/resource/${encodeURIComponent(formDoctype)}`;
+    if (url.pathname.startsWith(`${resource}/`))
+      return json({ data: { ...tackle, doctype: formDoctype, name: formName } });
+    if (url.pathname === resource)
+      return json({ data: [{ ...tackle, doctype: formDoctype, name: formName }] });
     return json({ data: [], message: [] });
   });
 });
@@ -109,8 +122,13 @@ describe("DocFormScreen rights without docinfo permissions", () => {
   it("lets an editor save a new record", async () => {
     roles = ["Pokemon Editor", "Guest"];
     renderForm("new");
-    await waitFor(() => expect(saveButton()).toBeTruthy(), { timeout: 5000 });
+    await waitFor(() => expect(moveNameInput()).toBeTruthy(), { timeout: 5000 });
     expect(moveNameInput().disabled || moveNameInput().readOnly).toBe(false);
+    expect(saveButton()).toBeUndefined();
+    fireEvent.change(moveNameInput(), { target: { value: "New move" } });
+    await waitFor(() => expect(saveButton()).toBeTruthy(), { timeout: 5000 });
+    expect(screen.getByTestId("form-toolbar").contains(saveButton()!)).toBe(true);
+    expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
   });
 
   it("tells a reader they can't create one, with no Save", async () => {
@@ -132,3 +150,90 @@ describe("DocFormScreen rights without docinfo permissions", () => {
     expect(moveNameInput().disabled || moveNameInput().readOnly).toBe(true);
   });
 });
+
+describe("DocFormScreen form layout action", () => {
+  function renderLayoutForm(
+    options: { enabled?: boolean; fixtures?: boolean; hide?: boolean; name?: string } = {},
+  ) {
+    const navigation = createMemoryNavigator("/admin/current");
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{
+          baseURL: `https://layout-rights-${run}.spec.test`,
+          fixtures: options.fixtures
+            ? new InMemoryFixtureProvider({
+                DocType: [meta],
+                [doctype]: [tackle],
+              })
+            : undefined,
+        }}
+        basePath="/admin"
+        capabilities={{ formBuilder: options.enabled }}
+        navigation={navigation}
+      >
+        <DocFormScreen
+          doctype={formDoctype}
+          name={options.name ?? "a1b2c3"}
+          actionOverrides={options.hide ? { hide: ["form-layout"] } : undefined}
+        />
+      </BackofficeProvider>,
+    );
+    return navigation;
+  }
+
+  async function openMenu() {
+    await waitFor(() => expect(screen.getByTestId("form-toolbar-menu")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("form-toolbar-menu"));
+    await waitFor(() => expect(screen.getByText("Reload")).toBeTruthy());
+  }
+
+  it.each(["System Manager", "Administrator", "fixtures"])(
+    "lets %s navigate to the document type layout",
+    async (access) => {
+      roles = access === "System Manager" ? ["System Manager", "Guest"] : ["Guest"];
+      sessionUser = access === "Administrator" ? "Administrator" : "user@pokemon.test";
+      const navigation = renderLayoutForm({ fixtures: access === "fixtures" });
+      if (access !== "fixtures") await settle();
+      await openMenu();
+      fireEvent.click(await screen.findByText("Edit form layout"));
+      expect(navigation.getLocation()).toMatchObject({
+        path: "/admin/customize-form",
+        params: { doc_type: doctype },
+      });
+    },
+  );
+
+  it.each(["reader", "capability", "override"])("hides the action for %s", async (reason) => {
+    roles = reason === "reader" ? ["Guest"] : ["System Manager", "Guest"];
+    renderLayoutForm({ enabled: reason !== "capability", hide: reason === "override" });
+    await settle();
+    await openMenu();
+    expect(screen.queryByText("Edit form layout")).toBeNull();
+  });
+
+  it("edits the named type when the document itself is a DocType", async () => {
+    roles = ["System Manager", "Guest"];
+    formDoctype = "DocType";
+    formName = "Sales Order";
+    const navigation = renderLayoutForm({ name: "Sales Order" });
+    await settle();
+    await openMenu();
+    fireEvent.click(await screen.findByText("Edit form layout"));
+    expect(navigation.getLocation()).toMatchObject({
+      path: "/admin/customize-form",
+      params: { doc_type: "Sales Order" },
+    });
+  });
+
+  it("asks before leaving a dirty form for the layout", async () => {
+    roles = ["System Manager", "Pokemon Editor"];
+    const navigation = renderLayoutForm();
+    await settle();
+    await waitFor(() => expect(moveNameInput().value).toBe("tackle"));
+    fireEvent.change(moveNameInput(), { target: { value: "changed" } });
+    await openMenu();
+    fireEvent.click(await screen.findByText("Edit form layout"));
+    expect(navigation.getLocation().path).toBe("/admin/current");
+    await waitFor(() => expect(screen.getByText("Discard unsaved changes?")).toBeTruthy());
+  });
+});

package/src/form/DocFormScreen.tsx

@@ -57,6 +57,7 @@ import { deskDocUrl } from "../shared/deskLinks";
 import { getListNavNeighbors, type ListNavNeighbors } from "../shared/listNavContext";
 import { invalidateDocinfo, useDocinfo } from "../shared/useDocinfo";
 import { useRecentVisit } from "../shared/useRecentVisit";
+import { useUserRoles } from "../shared/useUserRoles";
 import { useDoctypeMeta } from "../shared/useDoctypeMeta";
 import { groupConnectionLinks } from "./connections-data";
 import { setCreatePrefill } from "./createPrefill";
@@ -72,6 +73,7 @@ import { FormConnections } from "./FormConnections";
 import { FormHeaderCluster } from "./FormHeaderCluster";
 import { FormSidebarPanel } from "./FormSidebarPanel";
 import { FormTimeline } from "./FormTimeline";
+import { toAbsoluteUrl } from "./sidebar-utils";
 import { FormToolbar, resolveIndicator, type FormToolbarMenuItem } from "./FormToolbar";
 import { htmlToText } from "./timeline-utils";
 import {
@@ -88,7 +90,7 @@ import {
 export interface DocFormActionOverrides {
   /**
    * Built-in menu item keys to remove ("reload" | "duplicate" | "rename" |
-   * "print" | "email" | "links" | "jump-list" | "new" | "delete").
+   * "print" | "email" | "links" | "jump-list" | "new" | "delete" | "form-layout").
    */
   hide?: readonly string[];
   /** Extra host actions appended to the menu (after provider `actions.form`). */
@@ -141,6 +143,7 @@ export function DocFormScreen({
   // accordion stacks between the form body and the timeline.
   const sizeClass = useLayoutSizeClass();
   const config = useFrappeConfig();
+  const { roles, user } = useUserRoles();
 
   const isCreate = name === "new";
   const docName = isCreate ? undefined : name;
@@ -468,6 +471,17 @@ export function DocFormScreen({
       icon: "list",
       onSelect: () => navigate(paths.list(doctype)),
     });
+    if (
+      capabilities.formBuilder.enabled &&
+      (fixtureMode || roles?.includes("System Manager") || user === "Administrator")
+    ) {
+      items.push({
+        key: "form-layout",
+        label: t("formBuilder.editLayout", "Edit form layout"),
+        icon: "layout",
+        onSelect: () => navigate(paths.formBuilder(doctype === "DocType" ? name : doctype)),
+      });
+    }
     if (connection && !connection.fixtures && canOpenNewTab()) {
       // Desk counterpart of this document — same session caveat as Print
       // off-web (system browser opens unauthenticated).
@@ -514,6 +528,9 @@ export function DocFormScreen({
     navigate,
     paths,
     capabilities,
+    fixtureMode,
+    roles,
+    user,
   ]);
 
   // Host action registry: provider-level `actions.form` plus per-screen
@@ -794,49 +811,53 @@ export function DocFormScreen({
       />
     ) : null;
 
-  const toolbar = (
-    <FormToolbar
-      breadcrumbs={breadcrumbs}
-      onNavigate={navigate}
-      title={title}
-      indicator={indicator}
-      showIndicator={!!meta}
-      isSaving={form.isSubmitting}
-      cluster={
-        !isCreate && docName && !metaRefused ? (
-          <FormHeaderCluster
-            doctype={doctype}
-            name={docName}
-            docinfo={docinfo}
-            currentUser={currentUser}
-            onRefresh={refreshDocinfo}
-          />
-        ) : undefined
-      }
-      canSave={canSave}
-      canSubmit={canSubmit}
-      canCancel={canCancel}
-      canAmend={canAmend}
-      onSave={() => void handleSave()}
-      onSubmit={() => setConfirmAction("submit")}
-      onCancel={() => setConfirmAction("cancel")}
-      onAmend={handleAmend}
-      menuItems={effectiveMenuItems}
-      onOpenDesk={
-        !isCreate && docName && connection && !connection.fixtures && canOpenNewTab()
-          ? () => openInNewTab(deskDocUrl(connection.baseURL, doctype, docName))
-          : undefined
-      }
-      {...(docPager.inList
-        ? {
-            onPrevDoc: () => openNeighborDoc(docPager.prev),
-            onNextDoc: () => openNeighborDoc(docPager.next),
-            prevDocDisabled: !docPager.prev,
-            nextDocDisabled: !docPager.next,
-          }
-        : {})}
-    />
-  );
+  const imageField = meta?.image_field;
+  const imageValue = imageField
+    ? (form.doc as Record<string, unknown> | undefined)?.[imageField]
+    : undefined;
+  const headerImage =
+    typeof imageValue === "string" && imageValue
+      ? toAbsoluteUrl(connection?.baseURL, imageValue)
+      : undefined;
+
+  const toolbarProps = {
+    breadcrumbs,
+    onNavigate: navigate,
+    title,
+    indicator,
+    showIndicator: !!meta,
+    isSaving: form.isSubmitting,
+    isDirty: form.isDirty,
+    image: headerImage,
+    cluster:
+      !isCreate && docName && !metaRefused ? (
+        <FormHeaderCluster
+          doctype={doctype}
+          name={docName}
+          docinfo={docinfo}
+          currentUser={currentUser}
+          onRefresh={refreshDocinfo}
+        />
+      ) : undefined,
+    canSave,
+    canSubmit,
+    canCancel,
+    canAmend,
+    onSave: () => void handleSave(),
+    onSubmit: () => setConfirmAction("submit"),
+    onCancel: () => setConfirmAction("cancel"),
+    onAmend: handleAmend,
+    menuItems: effectiveMenuItems,
+    ...(docPager.inList
+      ? {
+          onPrevDoc: () => openNeighborDoc(docPager.prev),
+          onNextDoc: () => openNeighborDoc(docPager.next),
+          prevDocDisabled: !docPager.prev,
+          nextDocDisabled: !docPager.next,
+        }
+      : {}),
+  };
+  const toolbar = <FormToolbar {...toolbarProps} />;
 
   return (
     <YStack flex={1}>

package/src/form/FormConnections.tsx

@@ -261,7 +261,7 @@ export function FormConnections({ doctype, name, meta: metaProp }: FormConnectio
     }
     return (
       <EmptyState
-        compact
+        size="$3"
         intent="error"
         title={t("connections.metaError", "Couldn't load connections")}
         description={metaError?.message}
@@ -272,7 +272,7 @@ export function FormConnections({ doctype, name, meta: metaProp }: FormConnectio
   if (groups.length === 0) {
     return (
       <EmptyState
-        compact
+        size="$3"
         title={t("connections.emptyTitle", "No connections")}
         description={t(
           "connections.empty",

package/src/form/FormErrorBoundary.spec.tsx

@@ -123,13 +123,12 @@ describe("form error containment", () => {
     expect(slot.textContent).toContain("Retry");
     expect(containmentLogs().length).toBeGreaterThan(0);
 
-    // The rest of the form survived: toolbar Save is present, the other
-    // sibling field rendered, and the Subject field still accepts edits.
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.queryByText("Save")).toBeNull();
     expect(screen.getByDisplayValue("Sibling value")).toBeTruthy();
     fireEvent.change(subjectInput, { target: { value: "Edited while broken" } });
     await waitFor(() => {
       expect(screen.getByDisplayValue("Edited while broken")).toBeTruthy();
+      expect(screen.getByTestId("form-toolbar-save")).toBeTruthy();
     });
   });
 

package/src/form/FormErrorBoundary.tsx

@@ -79,7 +79,7 @@ function FormErrorFallback({
         </Text>
       ) : null}
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         onRetry={onRetry}
         errorTitle={errorTitle ?? t("fieldRenderError", "This field failed to render")}