@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/src/list/sidebar-section.tsx

@@ -5,7 +5,16 @@
  * the per-section loading skeleton.
  */
 import { Accordion, SizableText, Skeleton, XStack, YStack } from "@multiplatform.one/components";
-import type { ReactNode } from "react";
+import {
+  GroupPositionContext,
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  hairline,
+  stackRadiusProps,
+  useGroupPosition,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { Children, Fragment, isValidElement, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
@@ -16,17 +25,37 @@ export interface SidebarSectionProps {
   children: ReactNode;
 }
 
-export function SidebarSection({ value, title, children }: SidebarSectionProps) {
+/** Trigger + facet stack. ListSidebar wraps this in Accordion.Item so the
+ *  Accordion root can count items (a custom Item wrapper is opaque). */
+export function SidebarSectionChrome({ title, children }: Omit<SidebarSectionProps, "value">) {
+  const rows = Children.toArray(children);
   return (
-    <Accordion.Item value={value}>
-      <Accordion.Trigger minHeight={36} paddingVertical="$2" paddingHorizontal="$2">
+    <>
+      <Accordion.Trigger minHeight={32} paddingVertical="$1.5" paddingHorizontal="$2">
         <SizableText size="$2" fontWeight="600" color="$color11" numberOfLines={1} flexShrink={1}>
           {title}
         </SizableText>
       </Accordion.Trigger>
-      <Accordion.Content paddingTop={0} paddingHorizontal="$2" paddingBottom="$2">
-        <YStack gap="$1">{children}</YStack>
+      <Accordion.Content padding={0}>
+        <YStack>
+          {rows.map((child, index) => (
+            <Fragment key={isValidElement(child) && child.key != null ? String(child.key) : index}>
+              {index > 0 ? <YStack {...hairline.line} /> : null}
+              <GroupPositionContext.Provider value={getGroupPosition(index, rows.length)}>
+                {child}
+              </GroupPositionContext.Provider>
+            </Fragment>
+          ))}
+        </YStack>
       </Accordion.Content>
+    </>
+  );
+}
+
+export function SidebarSection({ value, title, children }: SidebarSectionProps) {
+  return (
+    <Accordion.Item value={value}>
+      <SidebarSectionChrome title={title}>{children}</SidebarSectionChrome>
     </Accordion.Item>
   );
 }
@@ -40,6 +69,9 @@ export interface SidebarFacetRowProps {
 }
 
 export function SidebarFacetRow({ label, count, active, onPress }: SidebarFacetRowProps) {
+  const { knobProps } = useResolvedKnobs();
+  const position = useGroupPosition() ?? "only";
+  const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
   return (
     <XStack
       role="button"
@@ -50,18 +82,29 @@ export function SidebarFacetRow({ label, count, active, onPress }: SidebarFacetR
       gap="$2"
       paddingVertical="$1.5"
       paddingHorizontal="$2"
-      borderRadius="$2"
+      overflow="hidden"
+      {...corners}
+      {...{ "data-group-position": position }}
       cursor="pointer"
       backgroundColor={active ? "$color4" : "transparent"}
-      hoverStyle={{ backgroundColor: active ? "$color5" : "$color3" }}
-      pressStyle={{ backgroundColor: "$color5" }}
-      focusVisibleStyle={{
-        outlineColor: "$outlineColor",
-        outlineWidth: 2,
-        outlineStyle: "solid",
-        outlineOffset: -2,
+      hoverStyle={{
+        backgroundColor: active ? "$color5" : "$color3",
+        ...corners,
       }}
+      pressStyle={{ backgroundColor: "$color5", ...corners }}
+      tabIndex={0}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
       onPress={onPress}
+      onKeyDown={
+        ((e: { key?: string; preventDefault?: () => void }) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault?.();
+            onPress();
+          }
+        }) as unknown as () => void
+      }
     >
       <SizableText size="$3" numberOfLines={1} flexShrink={1} fontWeight={active ? "600" : "400"}>
         {label}

package/src/oneAdapter/index.tsx

@@ -57,7 +57,19 @@ export function useOneNavigator(): BackofficeNavigator {
           // URL-state mirror (list `?f=`/`?sort=`): one's setParams merges
           // into the focused route's params and lands as a history REPLACE
           // on web — desk's update_url_with_filters channel, no remount.
-          setParams: (nextParams) => routerRef.current.setParams(nextParams as never),
+          // Key removal rides one's OWN sentinel: its URL serializer drops
+          // params whose value is the literal string "undefined" but prints
+          // a real `undefined` into the query (`?sort=undefined`) — so
+          // removals are translated to the sentinel before the merge.
+          setParams: (nextParams) =>
+            routerRef.current.setParams(
+              Object.fromEntries(
+                Object.entries(nextParams).map(([key, value]) => [
+                  key,
+                  value === undefined ? "undefined" : value,
+                ]),
+              ) as never,
+            ),
         },
         { path: pathname, params },
       ),

package/src/quickEntry/quickEntryPlan.ts

@@ -14,6 +14,7 @@
  *   field (rendered as the synthetic `__newname` Data field).
  */
 
+import { formatCalendarDate } from "@multiplatform.one/theme";
 import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
 import type { FieldSchema, FormSchema } from "@multiplatform.one/frappe-ui";
 
@@ -50,12 +51,7 @@ export function planQuickEntry(meta: DoctypeMeta): QuickEntryPlan {
   };
 }
 
-function todayISO(): string {
-  const now = new Date();
-  const month = String(now.getMonth() + 1).padStart(2, "0");
-  const day = String(now.getDate()).padStart(2, "0");
-  return `${now.getFullYear()}-${month}-${day}`;
-}
+const todayISO = () => formatCalendarDate(new Date());
 
 /**
  * Seed a draft from simple meta field defaults ("Today" for Date/Datetime,

package/src/report/DoctypeReportView.tsx

@@ -1,9 +1,9 @@
 // Desk "report" view parity (audit punch #1). Replaces the old
 // FrappeReportBuilder composition (triple-stacked toolbars, 2-column
 // defaults, no filter row, no saved reports) with:
-//   - desk default columns: name + title field + in_list_view /
-//     in_standard_filter fields + modified (reportViewModel, desk
-//     set_default_fields parity)
+//   - desk default columns: name + status + title/image fields +
+//     in_list_view / in_standard_filter fields + currency sources +
+//     modified (reportViewModel, desk set_default_fields parity)
 //   - a column add/remove picker; the choice persists per doctype on this
 //     device (@multiplatform.one/store) while no saved report is selected
 //   - a per-column FILTER ROW driving the standard frappe filter pipeline

package/src/report/QueryReportScreen.spec.tsx

@@ -0,0 +1,74 @@
+/**
+ * QueryReportScreen filter URL round-trip (fixture — no bench RPC).
+ * Apply commits the draft into navigator.setParams(`?filters=`).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { QueryReportScreen } from "./QueryReportScreen";
+import type { QueryReportFixture } from "./reportShapes";
+import { parseQueryReportFiltersParam } from "./queryReportUrlState";
+
+const MOCK_HOST = "https://backoffice-query-report-filters.mock.test";
+
+const gatedFixture: QueryReportFixture = {
+  meta: {
+    report_name: "Team Workload",
+    ref_doctype: "ToDo",
+    filters: [{ fieldname: "owner", label: "Owner", fieldtype: "Data", mandatory: 1 }],
+  },
+  columns: [
+    { label: "ID", fieldname: "id", fieldtype: "Link", options: "ToDo", width: "120" },
+    { label: "Description", fieldname: "description", fieldtype: "Data", width: "260" },
+  ],
+  rows: [{ id: "TD-0001", description: "Confirm launch checklist" }],
+};
+
+describe("QueryReportScreen filter URL round-trip", () => {
+  it("writes applied filters into ?filters= and renders rows", async () => {
+    const navigation = createMemoryNavigator("/backoffice/query-report/Team%20Workload");
+    renderWithProviders(
+      <BackofficeProvider frappe={{ baseURL: MOCK_HOST }} navigation={navigation}>
+        <QueryReportScreen reportName="Team Workload" fixture={gatedFixture} />
+      </BackofficeProvider>,
+    );
+
+    await screen.findByText("Filters required");
+    const owner = await screen.findByRole("textbox", { name: /owner/i });
+    fireEvent.change(owner, { target: { value: "jane@example.com" } });
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Filters required")).toBeNull();
+      expect(screen.getByText("TD-0001")).toBeTruthy();
+    });
+
+    const raw = navigation.getLocation().params.filters;
+    const parsed = parseQueryReportFiltersParam(typeof raw === "string" ? raw : raw?.[0]);
+    expect(parsed).toMatchObject({ owner: "jane@example.com" });
+  });
+
+  it("hides the table Search chrome and offers CSV export (Desk query-report)", async () => {
+    const navigation = createMemoryNavigator("/backoffice/query-report/Team%20Workload");
+    renderWithProviders(
+      <BackofficeProvider frappe={{ baseURL: MOCK_HOST }} navigation={navigation}>
+        <QueryReportScreen reportName="Team Workload" fixture={gatedFixture} />
+      </BackofficeProvider>,
+    );
+
+    const owner = await screen.findByRole("textbox", { name: /owner/i });
+    fireEvent.change(owner, { target: { value: "jane@example.com" } });
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("TD-0001")).toBeTruthy();
+    });
+
+    expect(screen.queryByPlaceholderText(/search/i)).toBeNull();
+    expect(screen.queryByRole("searchbox")).toBeNull();
+    expect(screen.getByRole("button", { name: /export csv/i })).toBeTruthy();
+  });
+});

package/src/report/QueryReportScreen.tsx

@@ -1,9 +1,13 @@
 // Desk /app/query-report/<name> parity surface: report title header +
-// refresh, doc-level filter bar (when derivable from the Report doc), and
-// the query_report.run result in the catalog DataTable (client-side
-// sort/search/pagination — desk also loads query-report rows in one shot).
-// Standard reports declare filters in desk-side JS (not reachable via the
-// API), so those run unfiltered and failures surface a hint instead.
+// refresh, a sticky declared-filter band (queryReportFilterBar — Metabase /
+// Looker / Desk page-form / Linear insights), and the query_report.run
+// result in the catalog DataTable (client-side sort/search/pagination —
+// desk also loads query-report rows in one shot).
+//
+// Filters apply on change for discrete controls (select/link/date/check);
+// text waits for Enter/blur/Apply. Applied values mirror into `?filters=`
+// so reload/deep-link reproduces the run. Mandatory empties gate the run
+// behind an honest empty state; a filtered-empty grid offers Clear all.
 import React from "react";
 import {
   Button,
@@ -16,18 +20,29 @@ import {
   YStack,
   isWeb,
 } from "@multiplatform.one/components";
-import { Input, Select } from "@multiplatform.one/forms";
 import { DataTable, DataTablePagination } from "@multiplatform.one/table";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { downloadBlob } from "@multiplatform.one/platform";
+import { DownloadSimpleIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import {
+  useBackofficeLocation,
+  useBackofficeNavigator,
+  useBackofficePaths,
+} from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
-import { selectOptionsFromField } from "../list/filter-fields";
-import { buildQueryReportColumns } from "./queryReportColumns";
+import { buildQueryReportColumns, buildQueryReportCsv } from "./queryReportColumns";
+import { QueryReportFilterBar, queryReportFilterLabel } from "./queryReportFilterBar";
+import {
+  parseQueryReportFiltersParam,
+  serializeQueryReportFiltersParam,
+} from "./queryReportUrlState";
 import {
-  type QueryReportFilterMeta,
+  defaultFilterValues,
+  isEmptyFilterValue,
   type QueryReportFilters,
   type QueryReportFixture,
+  scrubFieldname,
   stripHtml,
   useQueryReport,
 } from "./useQueryReport";
@@ -37,7 +52,7 @@ export interface QueryReportScreenProps {
   reportName: string;
   /** Fixture override for stories/tests (skips bench RPCs). */
   fixture?: QueryReportFixture;
-  /** Doc-level filter values applied before the first run. */
+  /** Filter values applied before the first run (`?filters=` wins when both set). */
   initialFilters?: QueryReportFilters;
   /** Hide result columns by fieldname. */
   hiddenColumns?: readonly string[];
@@ -47,93 +62,6 @@ export interface QueryReportScreenProps {
 
 const PAGE_SIZES = [20, 100, 500];
 
-function draftFromFilters(
-  filterMeta: readonly QueryReportFilterMeta[],
-  filters: QueryReportFilters,
-): Record<string, string> {
-  const draft: Record<string, string> = {};
-  for (const filter of filterMeta) {
-    const value = filters[filter.fieldname] ?? filter.default;
-    draft[filter.fieldname] = value === undefined || value === null ? "" : String(value);
-  }
-  return draft;
-}
-
-/**
- * Minimal doc-level filter bar: one input per Report Filter row (Select
- * fieldtypes get the options picker, everything else free text) + Apply.
- */
-function ReportFilterBar({
-  filterMeta,
-  filters,
-  onApply,
-}: {
-  filterMeta: readonly QueryReportFilterMeta[];
-  filters: QueryReportFilters;
-  onApply: (next: QueryReportFilters) => void;
-}) {
-  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
-  const [draft, setDraft] = useState<Record<string, string>>(() =>
-    draftFromFilters(filterMeta, filters),
-  );
-  useEffect(() => {
-    setDraft(draftFromFilters(filterMeta, filters));
-  }, [filterMeta, filters]);
-
-  const apply = useCallback(() => {
-    const next: QueryReportFilters = {};
-    for (const [fieldname, value] of Object.entries(draft)) {
-      if (value !== "") next[fieldname] = value;
-    }
-    onApply(next);
-  }, [draft, onApply]);
-
-  return (
-    <XStack gap="$2" flexWrap="wrap" alignItems="flex-end">
-      {filterMeta.map((filter) => {
-        const label = filter.label || filter.fieldname;
-        const requiredMark = filter.mandatory === 1 ? " *" : "";
-        return (
-          <YStack key={filter.fieldname} gap="$1" minWidth={180}>
-            <Text fontSize="$2" color="$color10">
-              {label}
-              {requiredMark}
-            </Text>
-            {filter.fieldtype === "Select" && filter.options ? (
-              <Select
-                value={draft[filter.fieldname] ?? ""}
-                onChange={(next) => {
-                  if (typeof next === "string")
-                    setDraft((previous) => ({ ...previous, [filter.fieldname]: next }));
-                }}
-                options={selectOptionsFromField(filter.options)}
-                placeholder={t("queryReport.selectValue", "Select...")}
-                size="$3"
-                compact
-                aria-label={label}
-              />
-            ) : (
-              <Input
-                value={draft[filter.fieldname] ?? ""}
-                onChangeText={(next) =>
-                  setDraft((previous) => ({ ...previous, [filter.fieldname]: next }))
-                }
-                placeholder={filter.fieldtype === "Date" ? "YYYY-MM-DD" : undefined}
-                size="$3"
-                compact
-                aria-label={label}
-              />
-            )}
-          </YStack>
-        );
-      })}
-      <Button size="$3" theme="blue" onPress={apply}>
-        {t("queryReport.apply", "Apply")}
-      </Button>
-    </XStack>
-  );
-}
-
 export function QueryReportScreen({
   reportName,
   fixture,
@@ -144,7 +72,63 @@ export function QueryReportScreen({
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
-  const report = useQueryReport(reportName, { fixture, initialFilters });
+  const { params } = useBackofficeLocation();
+
+  // `?filters=` deep link (queryReportUrlState.ts): wins over the host's
+  // initialFilters prop at mount, mirrors applied changes back out, and
+  // inbound changes (back/forward, pasted links) are adopted below.
+  const rawFiltersParam =
+    typeof params.filters === "string"
+      ? params.filters
+      : Array.isArray(params.filters)
+        ? params.filters[0]
+        : undefined;
+  const initialFilterValues = useMemo(() => {
+    const fromParam = parseQueryReportFiltersParam(rawFiltersParam);
+    if (Object.keys(fromParam).length > 0) return fromParam;
+    return initialFilters;
+  }, [rawFiltersParam, initialFilters]);
+
+  const report = useQueryReport(reportName, { fixture, initialFilters: initialFilterValues });
+  const { setFilters } = report;
+
+  // URL round-trip, outbound half (desk update_url_with_filters parity):
+  // applied filters mirror into `?filters=` through the navigator's
+  // optional setParams — no history entry; hosts without the primitive
+  // skip silently and state stays local.
+  const applyFilters = useCallback(
+    (next: QueryReportFilters) => {
+      setFilters(next);
+      navigator.setParams?.({ filters: serializeQueryReportFiltersParam(next) });
+    },
+    [setFilters, navigator],
+  );
+
+  // Inbound half: a changed `?filters=` on the SAME report (back/forward,
+  // deep link) adopts into state; param removal restores declared defaults.
+  // Report swaps are the hook's job (it reseeds from initialFilters), and
+  // echoes of our own outbound writes no-op on the serialized comparison.
+  const filtersRef = useRef(report.filters);
+  filtersRef.current = report.filters;
+  const filterMetaRef = useRef(report.filterMeta);
+  filterMetaRef.current = report.filterMeta;
+  const lastAdopted = useRef({ report: reportName, param: rawFiltersParam });
+  useEffect(() => {
+    const last = lastAdopted.current;
+    const reportChanged = last.report !== reportName;
+    const paramChanged = last.param !== rawFiltersParam;
+    lastAdopted.current = { report: reportName, param: rawFiltersParam };
+    if (reportChanged || !paramChanged) return;
+    const parsed = parseQueryReportFiltersParam(rawFiltersParam);
+    const next =
+      Object.keys(parsed).length > 0 ? parsed : defaultFilterValues(filterMetaRef.current);
+    if (
+      serializeQueryReportFiltersParam(next) ===
+      serializeQueryReportFiltersParam(filtersRef.current)
+    )
+      return;
+    setFilters(next);
+  }, [reportName, rawFiltersParam, setFilters]);
 
   const handleOpenLink = useCallback(
     (doctype: string, name: string) => {
@@ -166,6 +150,28 @@ export function QueryReportScreen({
   }, [report.columns, handleOpenLink, hiddenColumns]);
 
   const title = report.meta?.report_name || reportName;
+  const hasVisibleFilters = report.filterMeta.some(
+    (filter) => filter.hidden !== 1 && !isEmptyFilterValue(report.filters[filter.fieldname]),
+  );
+  const clearVisibleFilters = useCallback(() => {
+    const next: QueryReportFilters = {};
+    for (const filter of report.filterMeta) {
+      if (filter.hidden === 1 && !isEmptyFilterValue(report.filters[filter.fieldname])) {
+        next[filter.fieldname] = report.filters[filter.fieldname];
+      }
+    }
+    applyFilters(next);
+  }, [report.filterMeta, report.filters, applyFilters]);
+
+  const handleExport = useCallback(() => {
+    if (!isWeb || report.rows.length === 0) return;
+    downloadBlob(
+      new Blob([buildQueryReportCsv(report.columns, report.rows)], {
+        type: "text/csv;charset=utf-8;",
+      }),
+      `${scrubFieldname(title)}.csv`,
+    );
+  }, [report.columns, report.rows, title]);
 
   const subtitle = useMemo(() => {
     if (report.loading) return undefined;
@@ -220,17 +226,19 @@ export function QueryReportScreen({
           })}
           description={report.error.message}
           action={
-            <Button theme="blue" onPress={report.reload}>
+            <Button theme="accent" onPress={report.reload}>
               {t("queryReport.retry", "Retry")}
             </Button>
           }
         />
-        <Text fontSize="$2" color="$color9" textAlign="center" paddingHorizontal="$4">
-          {t(
-            "queryReport.scriptFiltersHint",
-            "Some reports require filters that are declared in desk-side scripts and cannot be derived here yet",
-          )}
-        </Text>
+        {report.scriptFilterGap ? (
+          <Text fontSize="$2" color="$color9" textAlign="center" paddingHorizontal="$4">
+            {t(
+              "queryReport.scriptFiltersHint",
+              "Some of this report's filters are declared in desk-side scripts and could not be derived here",
+            )}
+          </Text>
+        ) : null}
       </YStack>
     );
   } else if (report.missingRequired.length > 0) {
@@ -240,7 +248,7 @@ export function QueryReportScreen({
         description={t("queryReport.filtersRequiredDescription", {
           defaultValue: "Set the required filter(s) to run this report: {{filters}}",
           filters: report.missingRequired
-            .map((filter) => filter.label || filter.fieldname)
+            .map((filter) => queryReportFilterLabel(filter))
             .join(", "),
         })}
       />
@@ -249,11 +257,21 @@ export function QueryReportScreen({
     body = (
       <EmptyState
         title={t("queryReport.emptyTitle", "No results")}
-        description={t("queryReport.emptyDescription", "The report ran but returned no rows")}
+        description={
+          hasVisibleFilters
+            ? t("queryReport.emptyFiltered", "No rows match the current filters")
+            : t("queryReport.emptyDescription", "The report ran but returned no rows")
+        }
         action={
-          <Button chromeless onPress={report.reload}>
-            {t("queryReport.refresh", "Refresh")}
-          </Button>
+          hasVisibleFilters ? (
+            <Button chromeless onPress={clearVisibleFilters}>
+              {t("queryReport.clearAllFilters", "Clear all filters")}
+            </Button>
+          ) : (
+            <Button chromeless onPress={report.reload}>
+              {t("queryReport.refresh", "Refresh")}
+            </Button>
+          )
         }
       />
     );
@@ -265,6 +283,7 @@ export function QueryReportScreen({
         columns={tableColumns}
         enableSorting
         enableFiltering={false}
+        enableGlobalSearch={false}
         enablePagination
         initialState={{ pagination: { pageIndex: 0, pageSize: PAGE_SIZES[0] } }}
         renderPagination={(paginationProps) => (
@@ -285,6 +304,15 @@ export function QueryReportScreen({
             <Button size="$2" chromeless onPress={report.reload} disabled={report.loading}>
               {t("queryReport.refresh", "Refresh")}
             </Button>
+            <Button
+              size="$2"
+              chromeless
+              icon={DownloadSimpleIcon}
+              onPress={handleExport}
+              disabled={report.loading || report.rows.length === 0}
+            >
+              {t("queryReport.exportCsv", "Export CSV")}
+            </Button>
           </XStack>
         }
       />
@@ -293,15 +321,25 @@ export function QueryReportScreen({
           {stripHtml(report.serverMessage)}
         </Text>
       ) : null}
-      {report.filterMeta.length > 0 ? (
-        <ReportFilterBar
-          filterMeta={report.filterMeta}
-          filters={report.filters}
-          onApply={report.setFilters}
-        />
-      ) : null}
-      <YStack flex={1} minWidth={0}>
-        {body}
+      <YStack flex={1} minWidth={0} borderWidth={1} borderColor="$borderColor" borderRadius="$4">
+        {report.filterMeta.length > 0 ? (
+          <QueryReportFilterBar
+            filterMeta={report.filterMeta}
+            filters={report.filters}
+            onApply={applyFilters}
+          />
+        ) : null}
+        {!report.loading && report.scriptFilterGap && !report.error ? (
+          <Text fontSize="$2" color="$color9" paddingHorizontal="$3" paddingVertical="$2">
+            {t(
+              "queryReport.scriptFiltersGap",
+              "Some of this report's filters are defined in code and aren't supported here yet",
+            )}
+          </Text>
+        ) : null}
+        <YStack flex={1} minWidth={0}>
+          {body}
+        </YStack>
       </YStack>
     </YStack>
   );

package/src/report/queryReportColumns.tsx

@@ -104,3 +104,20 @@ export function buildQueryReportColumns({
     cell: queryReportCell(column, onOpenLink),
   }));
 }
+
+function escapeCsvCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  const text = stripHtml(String(value));
+  return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+
+/** CSV over the full run result (Desk Export, not just the current page). */
+export function buildQueryReportCsv(
+  columns: readonly QueryReportColumn[],
+  rows: readonly QueryReportRow[],
+): string {
+  return [
+    columns.map((column) => escapeCsvCell(column.label)).join(","),
+    ...rows.map((row) => columns.map((column) => escapeCsvCell(row[column.fieldname])).join(",")),
+  ].join("\n");
+}