@multiplatform.one/frappe-ui 7.88.0 → 7.88.2

package/src/FrappeChartCard.tsx

@@ -35,6 +35,7 @@ import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { failureReason } from "./liveErrors";
 import { ChartCard } from "./ChartCard";
 import { useFrappeConfig } from "./FrappeProvider";
 import { frappeDevWarn } from "./shared/devWarn";
@@ -191,16 +192,15 @@ export function FrappeChartCard({
     );
   }
 
+  const errorReason = isPermissionError ? "permission_denied" : failureReason(error);
   if (error) {
     return (
       <AsyncBoundary
         size="$3"
         error={error}
-        errorTitle={
-          isPermissionError
-            ? t("No permission to read {{doctype}}", { doctype: dataSource.doctype })
-            : t("Couldn't load {{title}}", { title: config.title })
-        }
+        reason={errorReason}
+        subject={config.title}
+        errorTitle={errorReason ? undefined : t("Couldn't load {{title}}", { title: config.title })}
         {...(chartCardProps as YStackProps)}
       />
     );

package/src/FrappeForm.routedPage.spec.tsx

@@ -29,11 +29,11 @@ const meta = {
   title_field: "pokemon_name",
   image_field: "sprite_front",
   fields: [
-    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", reqd: 1 },
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon name", reqd: 1 },
     { fieldname: "height", fieldtype: "Int", label: "Height (dm)" },
     { fieldname: "weight", fieldtype: "Int", label: "Weight (hg)" },
     { fieldname: "column_break_1", fieldtype: "Column Break" },
-    { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+    { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (front)" },
   ],
   permissions: [{ role: "Pokemon Editor", read: 1, write: 1, create: 1 }],
 };

package/src/FrappeForm.tsx

@@ -49,7 +49,7 @@ import { connectionFields, connectionsFromMeta, type FrappeConnection } from "./
 import { FrappeFormConnections } from "./FrappeFormConnections";
 import { FrappeNotConfigured } from "./FrappeNotConfigured";
 import { FrappeRowsReader, type FrappeRowsSnapshot } from "./FrappeRowsReader";
-import { isPermissionError } from "./liveErrors";
+import { failureReason, isPermissionError } from "./liveErrors";
 import { fieldsFromRecord } from "./recordShape";
 import {
   frappeRouteHref,
@@ -798,7 +798,11 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
         <AsyncBoundary
           {...knobProps.panelPadding}
           error={metaError}
-          errorTitle={t("Failed to load {{doctype}} form", { doctype })}
+          reason={failureReason(metaError)}
+          subject={doctype}
+          errorTitle={
+            failureReason(metaError) ? undefined : t("Failed to load {{doctype}} form", { doctype })
+          }
         />
       ),
     );
@@ -819,7 +823,11 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
       <AsyncBoundary
         {...knobProps.panelPadding}
         error={docError}
-        errorTitle={t("Failed to load {{doctype}}", { doctype })}
+        reason={failureReason(docError)}
+        subject={doctype}
+        errorTitle={
+          failureReason(docError) ? undefined : t("Failed to load {{doctype}}", { doctype })
+        }
       />,
     );
   }

package/src/FrappeFormConnections.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { YStack } from "tamagui";
 import { connectionFields, type FrappeConnection } from "./frappeConnections";
-import { isPermissionError } from "./liveErrors";
+import { failureReason } from "./liveErrors";
 import { useFrappeRows, type FrappeRowsConnection } from "./useFrappeRows";
 
 type ConnectionRow = Record<string, unknown> & { name: string; doctype: string };
@@ -98,9 +98,11 @@ export function FrappeFormConnectionSection({
           size="$3"
           loading={isLoading}
           error={error}
+          reason={failureReason(error)}
+          subject={link.doctype}
           errorTitle={
-            error && isPermissionError(error)
-              ? t("You do not have permission to view {{doctype}}", { doctype: link.doctype })
+            failureReason(error)
+              ? undefined
               : t("Error loading {{doctype}}", { doctype: link.doctype })
           }
           empty={rows.length === 0}

package/src/FrappeGuestMeta.spec.tsx

@@ -27,7 +27,7 @@ const roster = [
 const pokemonMeta = {
   name: "Pokemon",
   title_field: "pokemon_name",
-  fields: [{ fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name" }],
+  fields: [{ fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon name" }],
   permissions: [{ role: "Guest", read: 1 }],
 };
 

package/src/FrappeKPICard.tsx

@@ -30,6 +30,7 @@ import {
 import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { type YStackProps } from "tamagui";
+import { failureReason } from "./liveErrors";
 import { useFrappeConfig } from "./FrappeProvider";
 import { frappeDevWarn } from "./shared/devWarn";
 import {
@@ -161,16 +162,15 @@ export function FrappeKPICard({
     return <KPICardSkeleton {...stackProps} />;
   }
 
+  const errorReason = isPermissionError ? "permission_denied" : failureReason(error);
   if (error) {
     return (
       <AsyncBoundary
         size="$3"
         error={error}
-        errorTitle={
-          isPermissionError
-            ? t("No permission to read {{doctype}}", { doctype: dataSource.doctype })
-            : t("Couldn't load {{title}}", { title: config.title })
-        }
+        reason={errorReason}
+        subject={config.title}
+        errorTitle={errorReason ? undefined : t("Couldn't load {{title}}", { title: config.title })}
         {...stackProps}
       />
     );

package/src/FrappeList.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { YStack } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
-import { isPermissionError } from "./liveErrors";
+import { failureReason } from "./liveErrors";
 import { useFrappePagination, type UseFrappePaginationOptions } from "./useFrappePagination";
 
 export interface FrappeListProps<TDoc extends { name: string; doctype: string }> extends Omit<
@@ -135,11 +135,9 @@ export function FrappeList<TDoc extends { name: string; doctype: string }>({
         layout={layout === "grid" ? "generic" : "list"}
         error={error}
         onRetry={onRetry}
-        errorTitle={
-          isPermissionError(error)
-            ? t("You do not have permission to view {{doctype}}", { doctype })
-            : t("Error loading {{doctype}}", { doctype })
-        }
+        reason={failureReason(error)}
+        subject={doctype}
+        errorTitle={failureReason(error) ? undefined : t("Error loading {{doctype}}", { doctype })}
       />
     );
   }

package/src/FrappeListView.cards.spec.tsx

@@ -168,7 +168,7 @@ describe("FrappeListView card grid states", () => {
     const fixtures = createRosterFixtures();
     vi.spyOn(fixtures, "getList").mockRejectedValue(new Error("Failed to fetch"));
     renderCards(fixtures, { emptyState: <Text testID="roster-empty">empty</Text> });
-    await waitFor(() => expect(screen.getByText("Error loading Pokemon")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("Pokemon didn't load")).toBeTruthy());
     expect(screen.queryByTestId("roster-empty")).toBeNull();
     expect(screen.getByRole("button", { name: /retry/i })).toBeTruthy();
   });

package/src/FrappeListView.permissionDenied.spec.tsx

@@ -26,7 +26,7 @@ describe("FrappeListView Cards / Permission Denied", () => {
   it("shows the permission error, not the empty roster", async () => {
     renderWithProviders(<PermissionDenied />);
     await waitFor(() =>
-      expect(screen.getByText("You do not have permission to view Pokemon")).toBeTruthy(),
+      expect(screen.getByText("Pokemon isn't open to this account")).toBeTruthy(),
     );
     expect(screen.queryByText("No Pokemon records found")).toBeNull();
   });

package/src/FrappeListView.seed.spec.tsx

@@ -42,7 +42,7 @@ const pokemonMeta = {
   name: "Pokemon",
   title_field: "pokemon_name",
   fields: [
-    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon name", in_list_view: 1 },
     { fieldname: "poke_id", fieldtype: "Int", label: "Poke ID", in_list_view: 1 },
   ],
   permissions: [{ role: "Guest", read: 1 }],

package/src/FrappeReportBuilder.stories.tsx

@@ -10,6 +10,7 @@ export default {
   tags: ["!test"],
   parameters: {
     status: { type: "stable" },
+    layout: "fullscreen",
     docs: {
       description: {
         component:

package/src/FrappeReportBuilder.tsx

@@ -868,7 +868,8 @@ function FrappeReportBuilderBody({
         />
       </YStack>
       <ScrollView
-        flex={1}
+        flexGrow={0}
+        flexShrink={1}
         minWidth={0}
         minHeight={0}
         paddingHorizontal="$3"

package/src/FrappeTable.infiniteLoadError.spec.tsx

@@ -22,10 +22,10 @@ interface Pokemon {
 
 const columns: DataTableColumn<Partial<Pokemon>>[] = [
   { id: "name", accessorKey: "name", header: "ID" },
-  { id: "pokemon_name", accessorKey: "pokemon_name", header: "Pokemon Name" },
+  { id: "pokemon_name", accessorKey: "pokemon_name", header: "Pokemon name" },
 ];
 
-const filterFields = [{ id: "pokemon_name", label: "Pokemon Name", type: "text" as const }];
+const filterFields = [{ id: "pokemon_name", label: "Pokemon name", type: "text" as const }];
 const readOnly = { create: false, write: false, delete: false };
 const settle = { timeout: 8000 };
 

package/src/FrappeTable.refusedCount.spec.tsx

@@ -21,10 +21,10 @@ interface Pokemon {
 
 const columns: DataTableColumn<Partial<Pokemon>>[] = [
   { id: "name", accessorKey: "name", header: "ID" },
-  { id: "pokemon_name", accessorKey: "pokemon_name", header: "Pokemon Name" },
+  { id: "pokemon_name", accessorKey: "pokemon_name", header: "Pokemon name" },
 ];
 
-const filterFields = [{ id: "pokemon_name", label: "Pokemon Name", type: "text" as const }];
+const filterFields = [{ id: "pokemon_name", label: "Pokemon name", type: "text" as const }];
 const readOnly = { create: false, write: false, delete: false };
 const settle = { timeout: 8000 };
 

package/src/FrappeTable.tsx

@@ -29,7 +29,7 @@ import { buildPermLevelMatrix } from "./formEngine/fieldPermissions";
 import { useDocRights } from "./formEngine/useDocRights";
 import { buildListColumns } from "./list/listColumns";
 import { listFieldsToFetch } from "./list/listFields";
-import { isPermissionError } from "./liveErrors";
+import { failureReason, isPermissionError } from "./liveErrors";
 import { useFrappeRows } from "./useFrappeRows";
 
 /**
@@ -756,6 +756,12 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // `limit: null` keeps the bench's own page length rather than the hook's
   // default — FrappeTable paginates on the rows it is handed, and moving its
   // row ceiling here would move it for every existing consumer.
+  // Retry on the live path parks the read for one render: the last release
+  // evicts the errored collection, so the next acquire is one fresh sync.
+  const [retryParked, setRetryParked] = useState(false);
+  useEffect(() => {
+    if (retryParked) setRetryParked(false);
+  }, [retryParked]);
   const rowsMessages = useMemo(
     () => ({
       permission: t("You do not have permission to view {{doctype}}", { doctype }),
@@ -772,7 +778,7 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     fields: clientFields,
     filters: activeFilters,
     limit: null,
-    enabled: !serverSide && !columnsPending,
+    enabled: !serverSide && !columnsPending && !retryParked,
     messages: rowsMessages,
   });
 
@@ -854,11 +860,20 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // while a refetch is in flight — that was the named blank-the-list defect.
   const boundaryState = resolvedError
     ? { error: resolvedError }
-    : isRowsLoadingResolved || columnsPending
+    : isRowsLoadingResolved || columnsPending || retryParked
       ? { loading: loading ?? true }
       : rowData.length === 0 && !infiniteServerMode && !isFetching
         ? { empty: true }
         : null;
+  const errorReason = failureReason(resolvedError);
+  const retryLoad = () => {
+    if (!serverSide) {
+      setRetryParked(true);
+      return;
+    }
+    lastFetchKey.current = "";
+    if (lastStateRef.current) fetchServerData(lastStateRef.current);
+  };
   if (boundaryState) {
     return (
       <YStack
@@ -874,7 +889,10 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
         <FrappeReconnectIndicator config={connectionConfig} />
         <AsyncBoundary
           layout={layout === "list" || layout === "cards" ? "list" : "table"}
-          errorTitle={t("Error loading {{doctype}}", { doctype })}
+          reason={errorReason}
+          subject={doctype}
+          onRetry={resolvedError && !infiniteServerMode ? retryLoad : undefined}
+          errorTitle={errorReason ? undefined : t("Error loading {{doctype}}", { doctype })}
           emptyTitle={t("No {{doctype}} records found", { doctype })}
           {...boundaryState}
         />

package/src/frappeRefusals.spec.tsx

@@ -0,0 +1,168 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeChartCard } from "./FrappeChartCard";
+import { FrappeFormConnectionSection } from "./FrappeFormConnections";
+import { FrappeKPICard } from "./FrappeKPICard";
+import { FrappeList } from "./FrappeList";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+import { failureReason, toLiveLoadError } from "./liveErrors";
+
+const state = vi.hoisted(() => ({ error: null as unknown, permission: false }));
+
+vi.mock("./useFrappeRows", async (importOriginal) => {
+  const real = await importOriginal<typeof import("./useFrappeRows")>();
+  return {
+    ...real,
+    useFrappeRows: () => ({
+      rows: [],
+      syncError: state.error,
+      isLoading: false,
+      isQueryLoading: false,
+      isError: state.error !== null,
+      error: state.error,
+      collection: undefined,
+    }),
+  };
+});
+
+vi.mock("./useFrappePagination", () => ({
+  useFrappePagination: () => ({
+    items: [],
+    isLoading: false,
+    onLoadMore: () => {},
+    hasMore: false,
+    error: state.error,
+  }),
+}));
+
+vi.mock("./useFrappeAggregate", async (importOriginal) => {
+  const real = await importOriginal<typeof import("./useFrappeAggregate")>();
+  return {
+    ...real,
+    useFrappeAggregate: () => ({
+      groups: [],
+      value: undefined,
+      isLoading: false,
+      isStale: false,
+      error: state.error,
+      isPermissionError: state.permission,
+    }),
+  };
+});
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  state.error = null;
+  state.permission = false;
+});
+
+afterEach(cleanup);
+
+const host = "https://refusals.mock.test";
+const messages = {
+  permissionMessage: "You do not have permission to view Customer",
+  genericMessage: "Error loading Customer",
+};
+const refused = () =>
+  toLiveLoadError(Object.assign(new Error("Not permitted"), { status: 403 }), messages);
+const unreachable = () => toLiveLoadError(new TypeError("Failed to fetch"), messages);
+
+function expectRefusal(container: HTMLElement, subject: string) {
+  const node = container.querySelector('[data-async-state="refused"]');
+  expect(node).not.toBeNull();
+  expect(container.querySelector('[data-empty-intent="neutral"]')).not.toBeNull();
+  expect(screen.getByText(`${subject} isn't open to this account`)).toBeTruthy();
+  expect(screen.queryByText(/Retry/)).toBeNull();
+  expect(container.textContent).not.toMatch(/Not permitted|do not have permission/);
+}
+
+const customerColumns = [{ id: "customer_name", header: "Name", accessorKey: "customer_name" }];
+
+function table() {
+  return renderWithProviders(
+    <FrappeProvider baseURL={host}>
+      <FrappeTable doctype="Customer" columns={customerColumns as never} />
+    </FrappeProvider>,
+  );
+}
+
+describe("failureReason (FZ-9227)", () => {
+  it.each([
+    [refused(), "permission_denied"],
+    [Object.assign(new Error("x"), { status: 504 }), "timeout"],
+    [new Error("Request timed out"), "timeout"],
+    [unreachable(), "unreachable"],
+    [Object.assign(new Error("x"), { status: 503 }), "down"],
+    [Object.assign(new Error("x"), { status: 429 }), "busy"],
+    [new Error("Customer CUST-1 not found"), undefined],
+    [null, undefined],
+  ])("%s -> %s", (error, reason) => {
+    expect(failureReason(error)).toBe(reason);
+  });
+});
+
+describe("frappe-ui refusals render LC-165's neutral state (FZ-9227)", () => {
+  it("FrappeTable: a 403 is a neutral refusal with no Retry and no server suffix", () => {
+    state.error = refused();
+    const { container } = table();
+    expectRefusal(container, "Customer");
+  });
+
+  it("FrappeTable: a network failure names the cause and offers Retry, with no exception type", () => {
+    state.error = unreachable();
+    const { container } = table();
+    expect(screen.getByText("Customer didn't load")).toBeTruthy();
+    expect(screen.getByText(/Can't reach the server\. Tap Retry to try again\./)).toBeTruthy();
+    expect(screen.getByText("Retry")).toBeTruthy();
+    expect(container.textContent).not.toMatch(/TypeError|Failed to fetch/);
+    fireEvent.click(screen.getByText("Retry"));
+  });
+
+  it("FrappeList: a refusal is neutral", () => {
+    state.error = refused();
+    const { container } = renderWithProviders(
+      <FrappeProvider baseURL={host}>
+        <FrappeList doctype="Customer" renderItem={() => null} onRetry={() => {}} />
+      </FrappeProvider>,
+    );
+    expectRefusal(container, "Customer");
+  });
+
+  it.each([
+    ["FrappeKPICard", FrappeKPICard],
+    ["FrappeChartCard", FrappeChartCard],
+  ] as const)("%s: a refusal is neutral", (_name, Card) => {
+    state.error = new Error("Not permitted");
+    state.permission = true;
+    const config = { id: "open", title: "Open ToDos", value: 0, format: "number" as const };
+    const { container } = renderWithProviders(
+      <FrappeProvider baseURL={host}>
+        <Card config={config as never} dataSource={{ doctype: "ToDo" } as never} />
+      </FrappeProvider>,
+    );
+    expectRefusal(container, "Open ToDos");
+  });
+
+  it("FrappeFormConnectionSection: a refusal is neutral", () => {
+    state.error = refused();
+    const { container } = renderWithProviders(
+      <FrappeFormConnectionSection
+        connection={{ baseURL: host } as never}
+        link={{ doctype: "Sales Invoice", fieldname: "customer" } as never}
+        name="CUST-1"
+      />,
+    );
+    expectRefusal(container, "Sales Invoice");
+  });
+});

package/src/list/listColumns.spec.tsx

@@ -69,11 +69,11 @@ describe("image field media column", () => {
     title_field: "pokemon_name",
     image_field: "sprite_front",
     fields: [
-      { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+      { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon name", in_list_view: 1 },
       {
         fieldname: "sprite_front",
         fieldtype: "Attach Image",
-        label: "Sprite (Front)",
+        label: "Sprite (front)",
         in_list_view: 1,
       },
     ],
@@ -84,7 +84,7 @@ describe("image field media column", () => {
     const image = columns.filter((column) => column.id === "sprite_front");
     expect(image).toHaveLength(1);
     expect(image[0].meta?.role).toBe("media");
-    expect(image[0].meta?.label).toBe("Sprite (Front)");
+    expect(image[0].meta?.label).toBe("Sprite (front)");
   });
 
   it("joins a relative file path to the site origin", () => {

package/src/list/listFields.spec.ts

@@ -153,8 +153,8 @@ describe("listFieldsToFetch image field", () => {
       title_field: "pokemon_name",
       image_field: "sprite_front",
       fields: [
-        { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
-        { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+        { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon name", in_list_view: 1 },
+        { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (front)" },
       ],
     };
     expect(listFieldsToFetch(withImage)).toContain("sprite_front");

package/src/liveErrors.ts

@@ -21,6 +21,28 @@ export function isPermissionError(error: unknown): boolean {
   return /permission|not permitted|forbidden/i.test(message);
 }
 
+/**
+ * The AsyncBoundary reason for a load failure (LC-204, LC-165): a refusal, or
+ * a failure family whose copy names the cause and the next step. Undefined
+ * when the error fits none, so the caller's own copy stands.
+ */
+export function failureReason(error: unknown): string | undefined {
+  if (!error || error === true) return undefined;
+  if (isPermissionError(error)) return "permission_denied";
+  const status = (error as { status?: number }).status;
+  const message = error instanceof Error ? error.message : String(error);
+  if (status === 408 || status === 504 || /timed? ?out|timeout/i.test(message)) return "timeout";
+  if (status === 413) return "too_large";
+  if (status === 429) return "busy";
+  if (status === 502 || status === 503) return "down";
+  if (
+    /failed to fetch|network ?error|network request failed|econnrefused|enotfound/i.test(message)
+  ) {
+    return "unreachable";
+  }
+  return undefined;
+}
+
 /** True when `detail` is a developer-mode python traceback, not a sentence. */
 function isTracebackDetail(detail: string): boolean {
   return /Traceback \(most recent call last\)/i.test(detail);

package/src/report/ReportGrid.phone.spec.tsx

@@ -15,7 +15,7 @@ import {
 const columns: ReportColumnDef[] = [
   {
     fieldname: "pokemon_name",
-    label: "Pokemon Name",
+    label: "Pokemon name",
     fieldtype: "Data",
     kind: "text",
     width: 160,
@@ -78,7 +78,7 @@ describe("ReportGrid on a phone", () => {
   it("drops the row numbers and the per-column filter row", () => {
     renderGrid();
     expect(screen.queryByLabelText("Row number")).toBeNull();
-    expect(screen.queryByLabelText("Filter Pokemon Name")).toBeNull();
+    expect(screen.queryByLabelText("Filter Pokemon name")).toBeNull();
   });
 
   it("heads a number column without its unit and puts the unit in the cell", () => {
@@ -115,13 +115,13 @@ describe("phoneReportFieldnames", () => {
         title_field: "pokemon_name",
         image_field: "sprite_front",
         fields: [
-          { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+          { 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: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+          { fieldname: "base_experience", fieldtype: "Int", label: "Base experience" },
+          { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (front)" },
         ],
       }),
     ).toEqual(["pokemon_name", "poke_id", "height", "weight"]);

package/src/report/ReportGrid.spec.tsx

@@ -13,7 +13,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { describe, expect, it, vi } from "vitest";
-import { ReportGrid, type ReportGridProps } from "./ReportGrid";
+import { ReportGrid, type ReportGridProps, stretchColumns } from "./ReportGrid";
 import { buildGridRows, type ReportColumnDef, type ReportRow } from "./reportViewModel";
 
 const columns: ReportColumnDef[] = [
@@ -173,3 +173,16 @@ describe("ReportGrid inner interactive content wins", () => {
     expect(body!.querySelectorAll('[role="button"], button')).toHaveLength(0);
   });
 });
+
+describe("a wide report fills its viewport (FZ-8907)", () => {
+  it("spreads spare width over the columns so the grid meets the viewport edge", () => {
+    const stretched = stretchColumns(columns, 56, 1056);
+    expect(stretched.reduce((sum, column) => sum + column.width, 0)).toBe(1000);
+    expect(stretched[0]!.width).toBeGreaterThan(columns[0]!.width);
+    expect(stretched[1]!.width / stretched[0]!.width).toBeCloseTo(120 / 160, 1);
+  });
+
+  it("keeps natural widths when the columns already overflow", () => {
+    expect(stretchColumns(columns, 56, 300).map((column) => column.width)).toEqual([160, 120, 160]);
+  });
+});

package/src/report/ReportGrid.tsx

@@ -67,8 +67,8 @@ function fitColumns(
       ...(column.fieldname === titleFieldname
         ? { width: { flex: 1, min: "$10" as const } }
         : REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)
-          ? { width: "$8" as const }
-          : { width: "$11" as const }),
+          ? { width: "$10" as const }
+          : { width: "$9" as const }),
     })),
     data as Array<Record<string, any>>,
     viewportWidth,
@@ -80,6 +80,25 @@ function fitColumns(
   }));
 }
 
+/**
+ * A wide report fills its viewport: spare width goes to every column in
+ * proportion, so the grid's right edge meets the toolbar's (FZ-8907).
+ */
+export function stretchColumns(
+  columns: readonly ReportColumnDef[],
+  fixedWidth: number,
+  viewportWidth: number,
+): ReportColumnDef[] {
+  const natural = columns.reduce((sum, column) => sum + column.width, 0);
+  const room = viewportWidth - fixedWidth;
+  if (natural <= 0 || room <= natural) return [...columns];
+  const scale = room / natural;
+  const widths = columns.map((column) => Math.floor(column.width * scale));
+  const last = widths.length - 1;
+  widths[last] = (widths[last] ?? 0) + room - widths.reduce((sum, width) => sum + width, 0);
+  return columns.map((column, index) => ({ ...column, width: widths[index] ?? column.width }));
+}
+
 // ── LC-49/LC-50 row keyboard contract ───────────────────────────────
 // Local mirror of the table package's `isInteractiveInnerTarget`
 // (public/table/src/utils/rowPress.ts — internal util, not on the
@@ -291,8 +310,10 @@ export function ReportGrid({
   const compact = useLayoutSizeClass() === "compact";
   const [viewportWidth, setViewportWidth] = useState(0);
   const titleFieldname = titleField ?? columnsIn[0]?.fieldname;
-  const columns = compact ? fitColumns(columnsIn, rows, titleFieldname, viewportWidth) : columnsIn;
   const rowNumberWidth = compact ? 0 : ROW_NUMBER_WIDTH;
+  const columns = compact
+    ? fitColumns(columnsIn, rows, titleFieldname, viewportWidth)
+    : stretchColumns(columnsIn, rowNumberWidth, viewportWidth);
 
   const handleSortPress = useCallback(
     (fieldname: string) => {