From a0a4e2f7f5eab4a7ac0a21cd8af2d0bc3bd825dd Mon Sep 17 00:00:00 2001
From: Yuriy Vasilyev <yuriy.vassilyev@gmail.com>
Date: Wed, 17 Jun 2026 18:03:57 +0200
Subject: [PATCH 01/41] feat: redesign the reports side panel on the V2
 endpoint

Replace the client-side aggregation of four V1 endpoints with a single
useGetComplianceReport call against GET computers/report, and redesign the
side panel to match the Figma: a status bar table, a time-to-patch donut
with a legend table, and clickable counts that deep-link to the filtered
instances list. "60+ days outstanding" is now the headline USN debt metric
(previously mislabelled "60 days").

- Snapshot the selection when the panel opens; warn and offer to
  regenerate when the live selection changes.
- Wire the CSV download form's "Report by CVE" and range controls to the
  request and fetch on submit; note what the legacy CSV contains.
- Gate the "View report" action behind the instance-reports feature flag
  from the features/ endpoint, removing the VITE_REPORT_VIEW_ENABLED
  build-time env var.
---
 .changeset/reports-side-panel.md              |   5 +
 .env.local.example                            |   1 -
 .env.production                               |   1 -
 .gitignore                                    |   2 +-
 src/constants.ts                              |   2 -
 .../hooks/useInstanceSearchHelpTerms.tsx      |  34 +++
 .../InstancesPageActions.test.tsx             |  23 +-
 .../InstancesPageActions.tsx                  |   5 +-
 src/features/instances/index.ts               |   5 +
 .../instances/selectedInstancesStore.ts       |  31 ++
 src/features/reports/api/index.ts             |   2 +
 .../reports/api/useGetComplianceReport.ts     |  36 +++
 .../MetricBarTable/MetricBarTable.module.scss |  26 ++
 .../MetricBarTable/MetricBarTable.test.tsx    |  70 +++++
 .../MetricBarTable/MetricBarTable.tsx         |  67 +++++
 .../components/MetricBarTable/index.ts        |   2 +
 .../ReportDonutChart.module.scss              | 101 +++++++
 .../ReportDonutChart.test.tsx                 | 124 ++++++++
 .../ReportDonutChart/ReportDonutChart.tsx     | 199 ++++++++++++
 .../components/ReportDonutChart/index.ts      |   2 +
 .../ReportForm/ReportForm.module.scss         |   0
 .../ReportForm/ReportForm.test.tsx            |  39 +++
 .../components}/ReportForm/ReportForm.tsx     |  44 ++-
 .../reports/components}/ReportForm/index.ts   |   0
 .../ReportLegendTable.module.scss             |  90 ++++++
 .../ReportLegendTable.test.tsx                | 138 +++++++++
 .../ReportLegendTable/ReportLegendTable.tsx   | 130 ++++++++
 .../components/ReportLegendTable/index.ts     |   2 +
 .../ReportView/ReportView.module.scss         |  10 +
 .../components/ReportView/ReportView.test.tsx | 284 ++++++++++++++++++
 .../components/ReportView/ReportView.tsx      | 277 +++++++++++++++++
 .../reports/components}/ReportView/index.ts   |   0
 src/features/reports/index.ts                 |   4 +
 src/features/reports/types.ts                 |  19 ++
 .../components/SavedSearchForm/constants.ts   |   7 +
 .../helpers/searchQueryLanguage.ts            |  11 +
 .../helpers/searchQueryValidation.ts          |  14 +
 src/hooks/useReports.ts                       |  80 +----
 .../instances/InstancesPage/InstancesPage.tsx |  24 +-
 .../instances/InstancesPage/helpers.test.ts   |   1 -
 .../ReportView/ReportView.module.scss         |  15 -
 .../instances/ReportView/ReportView.test.tsx  |  52 ----
 .../instances/ReportView/ReportView.tsx       | 172 -----------
 .../ReportWidget/ReportWidget.module.scss     |  21 --
 .../ReportWidget/ReportWidget.test.tsx        |  33 --
 .../instances/ReportWidget/ReportWidget.tsx   |  38 ---
 .../dashboard/instances/ReportWidget/index.ts |   1 -
 src/tests/mocks/features.ts                   |  11 +
 src/tests/server/handlers/features.ts         |  11 +-
 src/tests/server/handlers/instance.ts         |   8 +-
 src/tests/server/handlers/reports.ts          |  85 ++++--
 src/types/FeatureKey.ts                       |   1 +
 src/vite-env.d.ts                             |   1 -
 53 files changed, 1893 insertions(+), 468 deletions(-)
 create mode 100644 .changeset/reports-side-panel.md
 create mode 100644 src/features/instances/selectedInstancesStore.ts
 create mode 100644 src/features/reports/api/index.ts
 create mode 100644 src/features/reports/api/useGetComplianceReport.ts
 create mode 100644 src/features/reports/components/MetricBarTable/MetricBarTable.module.scss
 create mode 100644 src/features/reports/components/MetricBarTable/MetricBarTable.test.tsx
 create mode 100644 src/features/reports/components/MetricBarTable/MetricBarTable.tsx
 create mode 100644 src/features/reports/components/MetricBarTable/index.ts
 create mode 100644 src/features/reports/components/ReportDonutChart/ReportDonutChart.module.scss
 create mode 100644 src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
 create mode 100644 src/features/reports/components/ReportDonutChart/ReportDonutChart.tsx
 create mode 100644 src/features/reports/components/ReportDonutChart/index.ts
 rename src/{pages/dashboard/instances => features/reports/components}/ReportForm/ReportForm.module.scss (100%)
 rename src/{pages/dashboard/instances => features/reports/components}/ReportForm/ReportForm.test.tsx (60%)
 rename src/{pages/dashboard/instances => features/reports/components}/ReportForm/ReportForm.tsx (58%)
 rename src/{pages/dashboard/instances => features/reports/components}/ReportForm/index.ts (100%)
 create mode 100644 src/features/reports/components/ReportLegendTable/ReportLegendTable.module.scss
 create mode 100644 src/features/reports/components/ReportLegendTable/ReportLegendTable.test.tsx
 create mode 100644 src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
 create mode 100644 src/features/reports/components/ReportLegendTable/index.ts
 create mode 100644 src/features/reports/components/ReportView/ReportView.module.scss
 create mode 100644 src/features/reports/components/ReportView/ReportView.test.tsx
 create mode 100644 src/features/reports/components/ReportView/ReportView.tsx
 rename src/{pages/dashboard/instances => features/reports/components}/ReportView/index.ts (100%)
 create mode 100644 src/features/reports/index.ts
 create mode 100644 src/features/reports/types.ts
 delete mode 100644 src/pages/dashboard/instances/ReportView/ReportView.module.scss
 delete mode 100644 src/pages/dashboard/instances/ReportView/ReportView.test.tsx
 delete mode 100644 src/pages/dashboard/instances/ReportView/ReportView.tsx
 delete mode 100644 src/pages/dashboard/instances/ReportWidget/ReportWidget.module.scss
 delete mode 100644 src/pages/dashboard/instances/ReportWidget/ReportWidget.test.tsx
 delete mode 100644 src/pages/dashboard/instances/ReportWidget/ReportWidget.tsx
 delete mode 100644 src/pages/dashboard/instances/ReportWidget/index.ts

diff --git a/.changeset/reports-side-panel.md b/.changeset/reports-side-panel.md
new file mode 100644
index 0000000000..a09c48841a
--- /dev/null
+++ b/.changeset/reports-side-panel.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Redesign the instances reports side panel on a single V2 `computers/report` endpoint, with deep-linked counts and a working CSV download. Gated behind the `instance-reports` feature flag (on by default).
diff --git a/.env.local.example b/.env.local.example
index 11da589c46..0a23e7aa1a 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -3,7 +3,6 @@ VITE_API_URL_OLD=
 VITE_API_URL_DEB_ARCHIVE=
 VITE_ROOT_PATH=
 VITE_SELF_HOSTED_ENV=
-VITE_REPORT_VIEW_ENABLED=
 VITE_DETAILED_UPGRADES_VIEW_ENABLED=
 VITE_MSW_ENABLED=
 VITE_MSW_ENDPOINTS_TO_INTERCEPT=
diff --git a/.env.production b/.env.production
index 6b801982e9..c01e42dca8 100644
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,6 @@ VITE_API_URL=/api/v2/
 VITE_API_URL_OLD=/api/
 VITE_API_URL_DEB_ARCHIVE=/debarchive/v1beta1/
 VITE_ROOT_PATH=/new_dashboard/
-VITE_REPORT_VIEW_ENABLED=false
 VITE_DETAILED_UPGRADES_VIEW_ENABLED=false
 VITE_MSW_ENABLED=false
 VITE_MSW_ENDPOINTS_TO_INTERCEPT=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e030a7e585..cd15c44c85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,7 +15,7 @@ dist-ssr
 .venv
 .vite-node
 coverage
-reports
+/reports
 src/**/*.module.scss.d.ts
 
 # Cache
diff --git a/src/constants.ts b/src/constants.ts
index 708151a593..106672e3a9 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -16,8 +16,6 @@ export const NOT_AVAILABLE = "N/A";
 export const APP_VERSION = import.meta.env.VITE_APP_VERSION;
 export const APP_COMMIT = import.meta.env.VITE_APP_COMMIT;
 export const FEEDBACK_LINK = "https://bugs.launchpad.net/landscape";
-export const REPORT_VIEW_ENABLED =
-  import.meta.env.VITE_REPORT_VIEW_ENABLED === "true";
 export const CONTACT_SUPPORT_TEAM_MESSAGE =
   "Something went wrong. Please try again or contact our support team.";
 export const DETAILED_UPGRADES_VIEW_ENABLED =
diff --git a/src/features/instances/components/InstancesHeader/hooks/useInstanceSearchHelpTerms.tsx b/src/features/instances/components/InstancesHeader/hooks/useInstanceSearchHelpTerms.tsx
index 0e0f719c69..ecfa308468 100644
--- a/src/features/instances/components/InstancesHeader/hooks/useInstanceSearchHelpTerms.tsx
+++ b/src/features/instances/components/InstancesHeader/hooks/useInstanceSearchHelpTerms.tsx
@@ -347,6 +347,40 @@ const useInstanceSearchHelpTerms = () => {
         </span>
       ),
     },
+    {
+      term: "last-ping-minutes:<nr-of-minutes>",
+      description: (
+        <span>
+          Instances that were active in the last{" "}
+          <code>&lt;nr-of-minutes&gt;</code> minutes, where{" "}
+          <code>&lt;nr-of-minutes&gt;</code> is a value between 1 and 525600.
+        </span>
+      ),
+    },
+    {
+      term: "usn-outstanding:<nr-of-days>",
+      description: (
+        <span>
+          Instances with unresolved USNs released more than{" "}
+          <code>&lt;nr-of-days&gt;</code> days ago.
+        </span>
+      ),
+    },
+    {
+      term: "usn-applied-in:<nr-of-days>",
+      description: (
+        <span>
+          Instances which applied all recently released USNs within{" "}
+          <code>&lt;nr-of-days&gt;</code> days.
+        </span>
+      ),
+    },
+    {
+      term: "has:upgrade-profile",
+      description: (
+        <span>Instances covered by at least one upgrade profile.</span>
+      ),
+    },
     {
       term: "has-pro-management:<option>",
       description: (
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index c0c6d8e004..f24ce80c7d 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -1,4 +1,5 @@
-import * as Constants from "@/constants";
+import { API_URL } from "@/constants";
+import { features } from "@/tests/mocks/features";
 import { resetScreenSize, setScreenSize } from "@/tests/helpers";
 import {
   instances,
@@ -6,8 +7,11 @@ import {
   windowsInstance,
 } from "@/tests/mocks/instance";
 import { renderWithProviders } from "@/tests/render";
+import server from "@/tests/server";
+import { generatePaginatedResponse } from "@/tests/server/handlers/_helpers";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
 import { beforeEach } from "vitest";
 import InstancesPageActions from "./InstancesPageActions";
 import { pluralize } from "@/utils/_helpers";
@@ -38,7 +42,6 @@ const UBUNTU_PRO_LABELS = ["Attach token", "Detach token"];
 
 describe("InstancesPageActions", () => {
   beforeEach(() => {
-    vi.spyOn(Constants, "REPORT_VIEW_ENABLED", "get").mockReturnValue(true);
     setScreenSize("xxl");
     setEndpointStatus("default");
   });
@@ -126,7 +129,21 @@ describe("InstancesPageActions", () => {
     });
 
     it("'View report' menu item should not be visible when feature disabled", async () => {
-      vi.spyOn(Constants, "REPORT_VIEW_ENABLED", "get").mockReturnValue(false);
+      server.use(
+        http.get(`${API_URL}features`, () =>
+          HttpResponse.json(
+            generatePaginatedResponse({
+              data: features.map((feature) =>
+                feature.key === "instance-reports"
+                  ? { ...feature, enabled: false }
+                  : feature,
+              ),
+              offset: 0,
+              limit: 20,
+            }),
+          ),
+        ),
+      );
 
       renderWithProviders(
         <InstancesPageActions
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
index d4483d86b9..b49372792a 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
@@ -1,7 +1,6 @@
 import LoadingState from "@/components/layout/LoadingState";
 import { ResponsiveButtons } from "@/components/ui";
 import PluralizeWithBoldCount from "@/components/ui/PluralizeWithBoldCount";
-import { REPORT_VIEW_ENABLED } from "@/constants";
 import { DetachTokenModal } from "@/features/ubuntupro";
 import useAuth from "@/hooks/useAuth";
 import useSidePanel from "@/hooks/useSidePanel";
@@ -23,7 +22,7 @@ const Upgrades = lazy(
   async () => import("@/features/upgrades/components/Upgrades"),
 );
 const ReportView = lazy(
-  async () => import("@/pages/dashboard/instances/ReportView"),
+  async () => import("@/features/reports/components/ReportView"),
 );
 const AccessGroupChange = lazy(async () => import("../AccessGroupChange"));
 const DistributionUpgrades = lazy(
@@ -309,7 +308,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
         isGettingInstances ||
         !selectedInstances.some((instance) => instance.has_release_upgrades),
     },
-    REPORT_VIEW_ENABLED
+    isFeatureEnabled("instance-reports")
       ? {
           children: (
             <>
diff --git a/src/features/instances/index.ts b/src/features/instances/index.ts
index f128c88a0f..baa90e8dba 100644
--- a/src/features/instances/index.ts
+++ b/src/features/instances/index.ts
@@ -25,3 +25,8 @@ export type { Status, RecoveryKey, DistributionUpgradeTarget } from "./types";
 export { default as useInstanceSearchHelpTerms } from "./components/InstancesHeader/hooks/useInstanceSearchHelpTerms";
 export { default as RestartModal } from "./components/RestartModal";
 export { default as ShutDownModal } from "./components/ShutDownModal";
+export {
+  getSelectedInstanceIds,
+  setSelectedInstanceIds,
+  subscribeToSelectedInstanceIds,
+} from "./selectedInstancesStore";
diff --git a/src/features/instances/selectedInstancesStore.ts b/src/features/instances/selectedInstancesStore.ts
new file mode 100644
index 0000000000..de910fa264
--- /dev/null
+++ b/src/features/instances/selectedInstancesStore.ts
@@ -0,0 +1,31 @@
+/**
+ * A minimal external store mirroring the instances page selection, so that
+ * components living outside the page tree (such as side panel content, whose
+ * props are frozen when the panel opens) can observe the live selection via
+ * useSyncExternalStore.
+ */
+
+let selectedInstanceIds: readonly number[] = [];
+const listeners = new Set<() => void>();
+
+export const setSelectedInstanceIds = (ids: readonly number[]): void => {
+  // Copy and freeze so callers can't mutate the store's snapshot in place
+  // (which would change state without notifying useSyncExternalStore listeners).
+  // The readonly types make any such mutation a compile-time error.
+  selectedInstanceIds = Object.freeze([...ids]);
+  listeners.forEach((listener) => {
+    listener();
+  });
+};
+
+export const getSelectedInstanceIds = (): readonly number[] =>
+  selectedInstanceIds;
+
+export const subscribeToSelectedInstanceIds = (
+  listener: () => void,
+): (() => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
diff --git a/src/features/reports/api/index.ts b/src/features/reports/api/index.ts
new file mode 100644
index 0000000000..b76152b6a4
--- /dev/null
+++ b/src/features/reports/api/index.ts
@@ -0,0 +1,2 @@
+export { useGetComplianceReport } from "./useGetComplianceReport";
+export type { GetComplianceReportParams } from "./useGetComplianceReport";
diff --git a/src/features/reports/api/useGetComplianceReport.ts b/src/features/reports/api/useGetComplianceReport.ts
new file mode 100644
index 0000000000..ae3e442954
--- /dev/null
+++ b/src/features/reports/api/useGetComplianceReport.ts
@@ -0,0 +1,36 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { ComplianceReport } from "../types";
+
+export interface GetComplianceReportParams {
+  query: string;
+}
+
+export const useGetComplianceReport = (
+  params: GetComplianceReportParams,
+  options?: Omit<
+    UseQueryOptions<AxiosResponse<ComplianceReport>, AxiosError<ApiError>>,
+    "queryKey" | "queryFn"
+  >,
+) => {
+  const authFetch = useFetch();
+
+  const {
+    data: response,
+    isLoading,
+    isError,
+  } = useQuery<AxiosResponse<ComplianceReport>, AxiosError<ApiError>>({
+    queryKey: ["complianceReport", params],
+    queryFn: async () => authFetch.get("computers/report", { params }),
+    ...options,
+  });
+
+  return {
+    report: response?.data,
+    isGettingComplianceReport: isLoading,
+    isComplianceReportError: isError,
+  };
+};
diff --git a/src/features/reports/components/MetricBarTable/MetricBarTable.module.scss b/src/features/reports/components/MetricBarTable/MetricBarTable.module.scss
new file mode 100644
index 0000000000..4b7a557fe0
--- /dev/null
+++ b/src/features/reports/components/MetricBarTable/MetricBarTable.module.scss
@@ -0,0 +1,26 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+/* Track uses the Figma #f7f7f7 (background-alt, theme-aware) and the exact
+   Figma bar height of 24px. */
+.track {
+  background-color: $colors--theme--background-alt;
+  height: 1.5rem;
+  width: 100%;
+}
+
+.fill {
+  height: 100%;
+}
+
+.positive {
+  background-color: $color-positive;
+}
+
+.link {
+  background-color: $colors--theme--link-default;
+}
+
+.neutral {
+  background-color: $colors--theme--text-muted;
+}
diff --git a/src/features/reports/components/MetricBarTable/MetricBarTable.test.tsx b/src/features/reports/components/MetricBarTable/MetricBarTable.test.tsx
new file mode 100644
index 0000000000..eeed282af0
--- /dev/null
+++ b/src/features/reports/components/MetricBarTable/MetricBarTable.test.tsx
@@ -0,0 +1,70 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { MetricRow } from "./MetricBarTable";
+import MetricBarTable from "./MetricBarTable";
+
+const securelyPatched: MetricRow = {
+  key: "securely-patched",
+  label: "Securely patched",
+  count: 6,
+  total: 11,
+  color: "positive",
+  countHref: "/instances?query=id%3A1",
+  onCountActivate: vi.fn(),
+  countAriaLabel: "View securely patched",
+};
+const contacted: MetricRow = {
+  key: "contacted",
+  label: "Contacted",
+  count: 0,
+  total: 11,
+  color: "neutral",
+};
+const rows: MetricRow[] = [securelyPatched, contacted];
+
+const renderTable = () =>
+  renderWithProviders(
+    <MetricBarTable labelHeader="Status" countHeader="Instances" rows={rows} />,
+  );
+
+describe("MetricBarTable", () => {
+  it("renders a row per metric with its label and count", () => {
+    renderTable();
+    expect(screen.getByText("Securely patched")).toBeInTheDocument();
+    expect(screen.getByText("Contacted")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "View securely patched" }),
+    ).toBeInTheDocument();
+  });
+
+  it("sizes each bar fill proportionally to count/total", () => {
+    renderTable();
+    expect(screen.getByTestId("metric-bar-securely-patched")).toHaveStyle({
+      width: `${(securelyPatched.count / securelyPatched.total) * 100}%`,
+    });
+    expect(screen.getByTestId("metric-bar-contacted")).toHaveStyle({
+      width: "0%",
+    });
+  });
+
+  it("applies the metric color class to each fill", () => {
+    renderTable();
+    expect(
+      screen.getByTestId("metric-bar-securely-patched").getAttribute("class"),
+    ).toMatch(/positive/);
+    expect(
+      screen.getByTestId("metric-bar-contacted").getAttribute("class"),
+    ).toMatch(/neutral/);
+  });
+
+  it("links the count to the deep link and runs the activate handler", async () => {
+    const user = userEvent.setup();
+    renderTable();
+    const link = screen.getByRole("link", { name: "View securely patched" });
+    expect(link).toHaveAttribute("href", "/instances?query=id%3A1");
+    await user.click(link);
+    expect(securelyPatched.onCountActivate).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/reports/components/MetricBarTable/MetricBarTable.tsx b/src/features/reports/components/MetricBarTable/MetricBarTable.tsx
new file mode 100644
index 0000000000..e5a8e4fd0b
--- /dev/null
+++ b/src/features/reports/components/MetricBarTable/MetricBarTable.tsx
@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import type { FC } from "react";
+import type { ReportLegendRow } from "../ReportLegendTable";
+import ReportLegendTable from "../ReportLegendTable";
+import classes from "./MetricBarTable.module.scss";
+
+export type MetricColor = "positive" | "link" | "neutral";
+
+export interface MetricRow {
+  readonly key: string;
+  readonly label: string;
+  readonly count: number;
+  readonly total: number;
+  readonly color: MetricColor;
+  readonly countHref?: string;
+  readonly onCountActivate?: () => void;
+  readonly countAriaLabel?: string;
+}
+
+interface MetricBarTableProps {
+  readonly labelHeader: string;
+  readonly countHeader: string;
+  readonly rows: readonly MetricRow[];
+}
+
+const MetricBarTable: FC<MetricBarTableProps> = ({
+  labelHeader,
+  countHeader,
+  rows,
+}) => {
+  const legendRows: ReportLegendRow[] = rows.map((row) => {
+    const percentage =
+      row.total > 0
+        ? Math.min(100, Math.max(0, (row.count / row.total) * 100))
+        : 0;
+
+    return {
+      key: row.key,
+      marker: (
+        <div className={classes.track} aria-hidden="true">
+          <div
+            className={classNames(classes.fill, classes[row.color])}
+            style={{ width: `${percentage}%` }}
+            data-testid={`metric-bar-${row.key}`}
+          />
+        </div>
+      ),
+      label: row.label,
+      count: row.count,
+      countHref: row.countHref,
+      onCountActivate: row.onCountActivate,
+      countAriaLabel: row.countAriaLabel,
+    };
+  });
+
+  return (
+    <ReportLegendTable
+      variant="bar"
+      markerHeader="Proportion"
+      labelHeader={labelHeader}
+      countHeader={countHeader}
+      rows={legendRows}
+    />
+  );
+};
+
+export default MetricBarTable;
diff --git a/src/features/reports/components/MetricBarTable/index.ts b/src/features/reports/components/MetricBarTable/index.ts
new file mode 100644
index 0000000000..ae8d344af1
--- /dev/null
+++ b/src/features/reports/components/MetricBarTable/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./MetricBarTable";
+export type { MetricColor, MetricRow } from "./MetricBarTable";
diff --git a/src/features/reports/components/ReportDonutChart/ReportDonutChart.module.scss b/src/features/reports/components/ReportDonutChart/ReportDonutChart.module.scss
new file mode 100644
index 0000000000..0f22f83eac
--- /dev/null
+++ b/src/features/reports/components/ReportDonutChart/ReportDonutChart.module.scss
@@ -0,0 +1,101 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+/* Severity scale using only the Figma palette: green (#0E8420), green at 50%,
+   orange (#CC7900), orange at 50%, red (#C7162B). Red is the worst (60+ days)
+   bucket; grey is the unclassified remainder. The Vanilla tokens resolve to
+   the same Figma hex values. */
+$segment-green: $color-positive;
+$segment-green-light: rgba($color-positive, 0.5);
+$segment-orange: $color-caution;
+$segment-orange-light: rgba($color-caution, 0.5);
+$segment-red: $color-negative;
+
+.layout {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: $sp-medium;
+}
+
+.chart {
+  flex: 0 0 192px;
+  width: 192px;
+}
+
+.svg {
+  display: block;
+  height: 192px;
+  width: 192px;
+}
+
+.legend {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+
+/* The track matches the panel background so the gaps between segments read as
+   transparent rather than as a grey ring. */
+.track {
+  stroke: $colors--theme--background-default;
+}
+
+.centerNumber {
+  dominant-baseline: middle;
+  fill: $colors--theme--text-default;
+  font-size: 14px;
+  text-anchor: middle;
+}
+
+.centerSubLabel {
+  dominant-baseline: middle;
+  fill: $colors--theme--text-muted;
+  font-size: 6px;
+  text-anchor: middle;
+}
+
+.dot {
+  border-radius: 50%;
+  display: inline-block;
+  height: 0.5rem;
+  width: 0.5rem;
+}
+
+/* The hovered segment grows slightly to stand out. */
+.arc {
+  transition: stroke-width 120ms ease;
+}
+
+.arcActive {
+  stroke-width: 13px;
+}
+
+.green {
+  background-color: $segment-green;
+  stroke: $segment-green;
+}
+
+.greenLight {
+  background-color: $segment-green-light;
+  stroke: $segment-green-light;
+}
+
+.orangeLight {
+  background-color: $segment-orange-light;
+  stroke: $segment-orange-light;
+}
+
+.orange {
+  background-color: $segment-orange;
+  stroke: $segment-orange;
+}
+
+.red {
+  background-color: $segment-red;
+  stroke: $segment-red;
+}
+
+.grey {
+  background-color: $colors--theme--text-muted;
+  stroke: $colors--theme--text-muted;
+}
diff --git a/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx b/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
new file mode 100644
index 0000000000..37251afb77
--- /dev/null
+++ b/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
@@ -0,0 +1,124 @@
+import { renderWithProviders } from "@/tests/render";
+import { fireEvent, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { DonutSegment } from "./ReportDonutChart";
+import ReportDonutChart from "./ReportDonutChart";
+
+const overSixty: DonutSegment = {
+  key: "over-60",
+  label: "60+ days",
+  count: 5,
+  color: "red",
+  countHref: "/instances?query=id%3A7",
+  onCountActivate: vi.fn(),
+  countAriaLabel: "View 60+ days",
+};
+const segments: DonutSegment[] = [
+  overSixty,
+  { key: "30-60", label: "30–60 days", count: 0, color: "orange" },
+  { key: "within-2", label: "Within 2 days", count: 6, color: "green" },
+];
+
+const total = segments.reduce((sum, segment) => sum + segment.count, 0);
+
+const renderChart = () =>
+  renderWithProviders(
+    <ReportDonutChart
+      total={total}
+      segments={segments}
+      labelHeader="Time to patch USNs"
+      countHeader="Instances"
+    />,
+  );
+
+describe("ReportDonutChart", () => {
+  it("renders the total and unit in the centre, hidden from AT", () => {
+    renderChart();
+    const centre = screen.getByTestId("donut-total");
+    expect(centre.textContent).toBe(`${total}`);
+    expect(screen.getByTestId("donut-sublabel").textContent).toBe("instances");
+    expect(centre).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("shows the hovered segment's count in the centre", () => {
+    renderChart();
+
+    fireEvent.mouseEnter(screen.getByTestId("donut-arc-within-2"));
+    expect(screen.getByTestId("donut-total").textContent).toBe("6");
+    expect(screen.getByTestId("donut-sublabel").textContent).toBe(
+      `of ${total}`,
+    );
+
+    fireEvent.mouseLeave(screen.getByTestId("donut-arc-within-2"));
+    expect(screen.getByTestId("donut-total").textContent).toBe(`${total}`);
+    expect(screen.getByTestId("donut-sublabel").textContent).toBe("instances");
+  });
+
+  it("renders an aria-labelled svg describing the breakdown", () => {
+    const { container } = renderChart();
+    const svg = container.querySelector("svg[role='img']");
+    expect(svg?.querySelector("desc")?.textContent).toBe(
+      "11 instances total: 5 60+ days, 0 30–60 days, 6 within 2 days.",
+    );
+  });
+
+  it("draws an arc only for non-zero segments, with the segment colour", () => {
+    renderChart();
+    const arc = screen.getByTestId("donut-arc-over-60");
+    expect(arc.getAttribute("class")).toMatch(/red/);
+    const pct = (overSixty.count / total) * 100;
+    // The visible arc is shortened so a thin gap follows it before the next
+    // segment.
+    const parts = (arc.getAttribute("stroke-dasharray") ?? "").split(" ");
+    expect(Number(parts[0])).toBeLessThan(pct);
+    expect(Number(parts[0])).toBeGreaterThan(0);
+    expect(screen.queryByTestId("donut-arc-30-60")).not.toBeInTheDocument();
+    expect(screen.getByTestId("donut-arc-within-2")).toBeInTheDocument();
+  });
+
+  it("renders a legend row per segment with a clickable count", async () => {
+    const user = userEvent.setup();
+    renderChart();
+    const table = within(
+      screen.getByText("60+ days").closest("table") as HTMLElement,
+    );
+    expect(table.getByText("Within 2 days")).toBeInTheDocument();
+
+    const link = table.getByRole("link", { name: "View 60+ days" });
+    expect(link).toHaveAttribute("href", "/instances?query=id%3A7");
+    await user.click(link);
+    expect(overSixty.onCountActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("grows the arc and highlights the matching legend row on arc hover", () => {
+    renderChart();
+    const arc = screen.getByTestId("donut-arc-within-2");
+
+    fireEvent.mouseEnter(arc);
+    expect(arc.getAttribute("class")).toMatch(/arcActive/);
+    expect(
+      screen.getByText("Within 2 days").closest("tr")?.className,
+    ).toMatch(/rowActive/);
+    expect(screen.getByText("60+ days").closest("tr")?.className).toMatch(
+      /rowDimmed/,
+    );
+
+    fireEvent.mouseLeave(arc);
+    expect(arc.getAttribute("class")).not.toMatch(/arcActive/);
+    expect(
+      screen.getByText("Within 2 days").closest("tr")?.className,
+    ).not.toMatch(/rowActive/);
+  });
+
+  it("grows the matching arc when a legend row is hovered", () => {
+    renderChart();
+
+    fireEvent.mouseEnter(
+      screen.getByText("60+ days").closest("tr") as HTMLElement,
+    );
+    expect(screen.getByTestId("donut-arc-over-60").getAttribute("class")).toMatch(
+      /arcActive/,
+    );
+  });
+});
diff --git a/src/features/reports/components/ReportDonutChart/ReportDonutChart.tsx b/src/features/reports/components/ReportDonutChart/ReportDonutChart.tsx
new file mode 100644
index 0000000000..77c312d41e
--- /dev/null
+++ b/src/features/reports/components/ReportDonutChart/ReportDonutChart.tsx
@@ -0,0 +1,199 @@
+import classNames from "classnames";
+import type { FC } from "react";
+import { useId, useState } from "react";
+import type { ReportLegendRow } from "../ReportLegendTable";
+import ReportLegendTable from "../ReportLegendTable";
+import classes from "./ReportDonutChart.module.scss";
+
+export type DonutColor =
+  | "red"
+  | "orange"
+  | "orangeLight"
+  | "greenLight"
+  | "green"
+  | "grey";
+
+export interface DonutSegment {
+  readonly key: string;
+  readonly label: string;
+  readonly detail?: string;
+  readonly count: number;
+  readonly color: DonutColor;
+  readonly countHref?: string;
+  readonly onCountActivate?: () => void;
+  readonly countAriaLabel?: string;
+}
+
+interface ReportDonutChartProps {
+  readonly total: number;
+  readonly segments: readonly DonutSegment[];
+  readonly labelHeader: string;
+  readonly countHeader: string;
+}
+
+const VIEW_BOX = 100;
+const CENTER = VIEW_BOX / 2;
+const RADIUS = 40;
+const STROKE_WIDTH = 9;
+const FULL_PATH_LENGTH = 100;
+// Shifts the start of the first arc from 3 o'clock to 12 o'clock.
+const START_OFFSET = 25;
+// Each arc is shortened by this much so a thin gap shows between segments.
+const SEGMENT_GAP = 0.6;
+// Smallest visible arc, so a tiny non-zero segment still shows a sliver.
+const MIN_VISIBLE_ARC = 0.5;
+const CENTER_NUMBER_DY = -3;
+const CENTER_SUBLABEL_DY = 8;
+
+// Compact notation keeps the centre readable for any fleet size (200000 →
+// "200K"), matching the overview donut.
+const compactNumberFormatter = new Intl.NumberFormat(undefined, {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+const formatCount = (value: number): string =>
+  compactNumberFormatter.format(value);
+
+const ReportDonutChart: FC<ReportDonutChartProps> = ({
+  total,
+  segments,
+  labelHeader,
+  countHeader,
+}) => {
+  const titleId = useId();
+  const descId = useId();
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+
+  const activeSegment =
+    activeKey != null
+      ? segments.find((segment) => segment.key === activeKey)
+      : undefined;
+  const centerNumber = formatCount(activeSegment ? activeSegment.count : total);
+  const centerSubLabel = activeSegment
+    ? `of ${formatCount(total)}`
+    : "instances";
+
+  const description = `${total} instances total: ${segments
+    .map((segment) => `${segment.count} ${segment.label.toLowerCase()}`)
+    .join(", ")}.`;
+
+  const percentages = segments.map((segment) =>
+    total > 0 ? (segment.count / total) * FULL_PATH_LENGTH : 0,
+  );
+  const arcs = segments.map((segment, index) => {
+    const percentage = percentages[index] ?? 0;
+    return {
+      key: segment.key,
+      percentage,
+      // Shorten the visible arc so a thin gap follows it; tiny segments keep a
+      // sliver so they remain visible.
+      dash:
+        percentage > 0
+          ? Math.max(percentage - SEGMENT_GAP, MIN_VISIBLE_ARC)
+          : 0,
+      offset:
+        START_OFFSET -
+        percentages.slice(0, index).reduce((sum, value) => sum + value, 0),
+      color: segment.color,
+    };
+  });
+
+  const rows: ReportLegendRow[] = segments.map((segment) => ({
+    key: segment.key,
+    marker: (
+      <span
+        className={classNames(classes.dot, classes[segment.color])}
+        aria-hidden="true"
+      />
+    ),
+    label: segment.label,
+    detail: segment.detail,
+    count: segment.count,
+    countHref: segment.countHref,
+    onCountActivate: segment.onCountActivate,
+    countAriaLabel: segment.countAriaLabel,
+  }));
+
+  return (
+    <div className={classes.layout}>
+      <div className={classes.chart}>
+        <svg
+          role="img"
+          aria-labelledby={`${titleId} ${descId}`}
+          viewBox={`0 0 ${VIEW_BOX} ${VIEW_BOX}`}
+          className={classes.svg}
+        >
+          <title id={titleId}>Report breakdown</title>
+          <desc id={descId}>{description}</desc>
+          <circle
+            cx={CENTER}
+            cy={CENTER}
+            r={RADIUS}
+            fill="none"
+            strokeWidth={STROKE_WIDTH}
+            className={classes.track}
+          />
+          {arcs.map(
+            (arc) =>
+              arc.percentage > 0 && (
+                <circle
+                  key={arc.key}
+                  cx={CENTER}
+                  cy={CENTER}
+                  r={RADIUS}
+                  fill="none"
+                  strokeWidth={STROKE_WIDTH}
+                  strokeLinecap="butt"
+                  pathLength={FULL_PATH_LENGTH}
+                  strokeDasharray={`${arc.dash} ${FULL_PATH_LENGTH - arc.dash}`}
+                  strokeDashoffset={arc.offset}
+                  className={classNames(classes.arc, classes[arc.color], {
+                    [classes.arcActive]: activeKey === arc.key,
+                  })}
+                  data-testid={`donut-arc-${arc.key}`}
+                  onMouseEnter={() => {
+                    setActiveKey(arc.key);
+                  }}
+                  onMouseLeave={() => {
+                    setActiveKey(null);
+                  }}
+                />
+              ),
+          )}
+          <text
+            x={CENTER}
+            y={CENTER}
+            dy={CENTER_NUMBER_DY}
+            className={classes.centerNumber}
+            data-testid="donut-total"
+            aria-hidden="true"
+          >
+            {centerNumber}
+          </text>
+          <text
+            x={CENTER}
+            y={CENTER}
+            dy={CENTER_SUBLABEL_DY}
+            className={classes.centerSubLabel}
+            data-testid="donut-sublabel"
+            aria-hidden="true"
+          >
+            {centerSubLabel}
+          </text>
+        </svg>
+      </div>
+      <div className={classes.legend}>
+        <ReportLegendTable
+          variant="dot"
+          labelHeader={labelHeader}
+          countHeader={countHeader}
+          rows={rows}
+          activeKey={activeKey}
+          onRowHover={setActiveKey}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReportDonutChart;
diff --git a/src/features/reports/components/ReportDonutChart/index.ts b/src/features/reports/components/ReportDonutChart/index.ts
new file mode 100644
index 0000000000..99732935ff
--- /dev/null
+++ b/src/features/reports/components/ReportDonutChart/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ReportDonutChart";
+export type { DonutColor, DonutSegment } from "./ReportDonutChart";
diff --git a/src/pages/dashboard/instances/ReportForm/ReportForm.module.scss b/src/features/reports/components/ReportForm/ReportForm.module.scss
similarity index 100%
rename from src/pages/dashboard/instances/ReportForm/ReportForm.module.scss
rename to src/features/reports/components/ReportForm/ReportForm.module.scss
diff --git a/src/pages/dashboard/instances/ReportForm/ReportForm.test.tsx b/src/features/reports/components/ReportForm/ReportForm.test.tsx
similarity index 60%
rename from src/pages/dashboard/instances/ReportForm/ReportForm.test.tsx
rename to src/features/reports/components/ReportForm/ReportForm.test.tsx
index b31ff54fce..3ed49c41fc 100644
--- a/src/pages/dashboard/instances/ReportForm/ReportForm.test.tsx
+++ b/src/features/reports/components/ReportForm/ReportForm.test.tsx
@@ -1,7 +1,11 @@
+import { API_URL_OLD } from "@/constants";
 import { setEndpointStatus } from "@/tests/controllers/controller";
+import server from "@/tests/server";
+import { isAction } from "@/tests/server/handlers/_helpers";
 import { renderWithProviders } from "@/tests/render";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
 import { describe, expect, it, vi } from "vitest";
 import ReportForm from "./ReportForm";
 
@@ -41,6 +45,41 @@ describe("ReportForm", () => {
     createObjectUrl.mockRestore();
   });
 
+  it("sends the selected range and grouping to the server", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(
+      () => undefined,
+    );
+    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:report");
+
+    let requestUrl: URL | null = null;
+    server.use(
+      http.get(API_URL_OLD, ({ request }) => {
+        if (!isAction(request, "GetCSVComplianceData")) {
+          return;
+        }
+        requestUrl = new URL(request.url);
+        return HttpResponse.json("name,status\ninstance-1,ok");
+      }),
+    );
+
+    renderWithProviders(<ReportForm instanceIds={[3]} />);
+
+    const rangeInput = screen.getByLabelText("Range");
+    await user.clear(rangeInput);
+    await user.type(rangeInput, "7");
+    await user.click(screen.getByLabelText("Report by CVE")); // default true -> false
+
+    await user.click(screen.getByRole("button", { name: "Download" }));
+
+    const params = (requestUrl as unknown as URL).searchParams;
+    expect(params.get("query")).toBe("id:3");
+    expect(params.get("max_days")).toBe("7");
+    expect(params.get("by_cve")).toBe("false");
+
+    vi.restoreAllMocks();
+  });
+
   it("downloads empty CSV when endpoint is empty", async () => {
     const user = userEvent.setup();
     const createObjectUrl = vi
diff --git a/src/pages/dashboard/instances/ReportForm/ReportForm.tsx b/src/features/reports/components/ReportForm/ReportForm.tsx
similarity index 58%
rename from src/pages/dashboard/instances/ReportForm/ReportForm.tsx
rename to src/features/reports/components/ReportForm/ReportForm.tsx
index bd3cd41537..b96b5a368c 100644
--- a/src/pages/dashboard/instances/ReportForm/ReportForm.tsx
+++ b/src/features/reports/components/ReportForm/ReportForm.tsx
@@ -7,6 +7,8 @@ import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
 import classes from "./ReportForm.module.scss";
 import { getFormikError } from "@/utils/formikErrors";
 
+const DEFAULT_RANGE_DAYS = 30;
+
 const downloadCSV = (csvString: string, filename: string) => {
   // Create blob from string
   const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
@@ -30,28 +32,41 @@ const downloadCSV = (csvString: string, filename: string) => {
 };
 
 interface ReportFormProps {
-  readonly instanceIds: number[];
+  readonly instanceIds: readonly number[];
 }
 
 const ReportForm: FC<ReportFormProps> = ({ instanceIds }) => {
   const { getCsvComplianceData } = useReports();
 
-  const { data: getCsvComplianceDataResult } = getCsvComplianceData({
-    query: `id:${instanceIds.join(" OR id:")}`,
-  });
-
   const formik = useFormik({
-    initialValues: { range: 0, reportByCve: true },
+    initialValues: { range: DEFAULT_RANGE_DAYS, reportByCve: true },
     validationSchema: Yup.object({
-      range: Yup.number().required("This field is required"),
+      range: Yup.number()
+        .min(1, "Range must be at least 1 day")
+        .required("This field is required"),
       reportByCve: Yup.boolean(),
     }),
-    // todo: figure out how to use form values to submit
-    onSubmit: () => {
-      downloadCSV(getCsvComplianceDataResult?.data || "", "report.csv");
+    onSubmit: async () => {
+      // `refetch` is declared just below: the query must read the latest form
+      // values, so the hook is set up after the form it depends on.
+      // eslint-disable-next-line no-use-before-define
+      const { data } = await refetch();
+      downloadCSV(data?.data ?? "", "report.csv");
     },
   });
 
+  // Fetched on submit (not on mount) so the report reflects the chosen range
+  // and CVE/USN grouping, and so we make the heavy compliance query only when
+  // the user actually downloads.
+  const { refetch, isFetching } = getCsvComplianceData(
+    {
+      query: `id:${instanceIds.join(" OR id:")}`,
+      max_days: Number(formik.values.range),
+      by_cve: formik.values.reportByCve,
+    },
+    { enabled: false },
+  );
+
   return (
     <Form onSubmit={formik.handleSubmit} noValidate>
       <CheckboxInput
@@ -72,8 +87,15 @@ const ReportForm: FC<ReportFormProps> = ({ instanceIds }) => {
         <span>Days</span>
       </div>
 
+      <p className="p-text--small u-text--muted">
+        The CSV reports each instance against the USNs or CVEs released within
+        the selected range. USNs outstanding for longer than the range (such as
+        the &ldquo;60+ days outstanding&rdquo; metric in the report) are not
+        included.
+      </p>
+
       <SidePanelFormButtons
-        submitButtonDisabled={false}
+        submitButtonDisabled={isFetching}
         submitButtonText="Download"
       />
     </Form>
diff --git a/src/pages/dashboard/instances/ReportForm/index.ts b/src/features/reports/components/ReportForm/index.ts
similarity index 100%
rename from src/pages/dashboard/instances/ReportForm/index.ts
rename to src/features/reports/components/ReportForm/index.ts
diff --git a/src/features/reports/components/ReportLegendTable/ReportLegendTable.module.scss b/src/features/reports/components/ReportLegendTable/ReportLegendTable.module.scss
new file mode 100644
index 0000000000..e233c93392
--- /dev/null
+++ b/src/features/reports/components/ReportLegendTable/ReportLegendTable.module.scss
@@ -0,0 +1,90 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+/* Nest the element rules under the local `.table` class. CSS modules do not
+   scope bare element selectors, so a top-level `th`/`td` would compile to a
+   global rule and leak table styling across the whole app. */
+.table {
+  border-collapse: collapse;
+  width: 100%;
+
+  th {
+    color: $colors--theme--text-default;
+    font-size: 0.75rem;
+    font-weight: 550;
+    letter-spacing: 0.07em;
+    line-height: 1rem;
+    padding: 0 0.5rem 0.75rem;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  td {
+    padding: 0.5rem;
+    vertical-align: middle;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: 0;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: 0;
+  }
+}
+
+/* Fixed widths for the marker and count columns (count matches the Figma 96px
+   column and comfortably fits the values + the "INSTANCES" header, so the
+   global overflow:hidden never clips). The label column is auto, so it absorbs
+   the remaining space and the table is always exactly 100% wide — no horizontal
+   overflow — while long labels still truncate with the inherited ellipsis. */
+.markerCell {
+  white-space: nowrap;
+  width: 1.5rem;
+}
+
+.labelCell {
+  width: auto;
+}
+
+.labelWithHelp {
+  align-items: center;
+  display: inline-flex;
+  gap: $sp-x-small;
+}
+
+.countCell {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+  width: 6rem;
+}
+
+.bar .markerCell {
+  width: 40%;
+}
+
+.countZero {
+  color: $colors--theme--text-muted;
+}
+
+.countCell a {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Hover coordination: the hovered row stays full strength with a bolder label
+   while the rest dim, so the matching donut segment reads clearly. */
+.rowActive td {
+  transition: opacity 100ms ease;
+}
+
+.rowActive .labelCell {
+  font-weight: 500;
+}
+
+.rowDimmed {
+  opacity: 0.45;
+  transition: opacity 100ms ease;
+}
diff --git a/src/features/reports/components/ReportLegendTable/ReportLegendTable.test.tsx b/src/features/reports/components/ReportLegendTable/ReportLegendTable.test.tsx
new file mode 100644
index 0000000000..6f28418d5d
--- /dev/null
+++ b/src/features/reports/components/ReportLegendTable/ReportLegendTable.test.tsx
@@ -0,0 +1,138 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { ReportLegendRow } from "./ReportLegendTable";
+import ReportLegendTable from "./ReportLegendTable";
+
+const rowA: ReportLegendRow = {
+  key: "a",
+  marker: <span data-testid="marker-a" />,
+  label: "First",
+  count: 6,
+  countHref: "/instances?query=id%3A1",
+  onCountActivate: vi.fn(),
+  countAriaLabel: "View first",
+};
+const rowB: ReportLegendRow = {
+  key: "b",
+  marker: <span data-testid="marker-b" />,
+  label: "Second",
+  detail: "extra context",
+  count: 0,
+};
+const rows: ReportLegendRow[] = [rowA, rowB];
+
+describe("ReportLegendTable", () => {
+  it("renders the column headers", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={rows}
+      />,
+    );
+    const headers = screen
+      .getAllByRole("columnheader")
+      .map((header) => header.textContent);
+    expect(headers).toEqual(["", "Status", "Instances"]);
+  });
+
+  it("renders a marker, label and count for each row", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={rows}
+      />,
+    );
+    expect(screen.getByTestId("marker-a")).toBeInTheDocument();
+    expect(screen.getByText("First")).toBeInTheDocument();
+    expect(screen.getByText("Second")).toBeInTheDocument();
+  });
+
+  it("renders the count as a deep link when a href is provided", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={rows}
+      />,
+    );
+    const link = screen.getByRole("link", { name: "View first" });
+    expect(link).toHaveAttribute("href", "/instances?query=id%3A1");
+    await user.click(link);
+    expect(rowA.onCountActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders a plain count when no href is provided", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={[rowB]}
+      />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+
+  it("renders a zero count as plain text even when a href is provided", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={[
+          {
+            key: "z",
+            marker: <span />,
+            label: "Zero",
+            count: 0,
+            countHref: "/instances?query=id%3A9",
+            countAriaLabel: "zero",
+          },
+        ]}
+      />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+
+  it("exposes row detail through a help icon", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="dot"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={rows}
+      />,
+    );
+    // rowB carries a detail; rowA does not.
+    expect(screen.getByRole("img", { name: "extra context" })).toHaveClass(
+      "p-icon--help",
+    );
+    expect(screen.getAllByRole("img")).toHaveLength(1);
+  });
+
+  it("renders a header label for the marker column when given", () => {
+    renderWithProviders(
+      <ReportLegendTable
+        variant="bar"
+        markerHeader="Instances"
+        labelHeader="Status"
+        countHeader="Instances"
+        rows={rows}
+      />,
+    );
+    const [firstHeader] = screen.getAllByRole("columnheader");
+    expect(
+      within(firstHeader as HTMLElement).getByText("Instances"),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
new file mode 100644
index 0000000000..e7225f510c
--- /dev/null
+++ b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
@@ -0,0 +1,130 @@
+import { Tooltip } from "@canonical/react-components";
+import classNames from "classnames";
+import type { FC, ReactNode } from "react";
+import { Link } from "react-router";
+import classes from "./ReportLegendTable.module.scss";
+
+export interface ReportLegendRow {
+  readonly key: string;
+  readonly marker: ReactNode;
+  readonly label: string;
+  readonly detail?: string;
+  readonly count: number;
+  /** Deep-link URL the count navigates to (omitted, or with a zero count,
+   *  renders the count as plain text). */
+  readonly countHref?: string;
+  /** Side effect to run when the count link is activated, e.g. closing the
+   *  side panel. */
+  readonly onCountActivate?: () => void;
+  readonly countAriaLabel?: string;
+}
+
+interface ReportLegendTableProps {
+  readonly variant: "dot" | "bar";
+  readonly markerHeader?: string;
+  readonly labelHeader: string;
+  readonly countHeader: string;
+  readonly rows: readonly ReportLegendRow[];
+  readonly activeKey?: string | null;
+  readonly onRowHover?: (key: string | null) => void;
+}
+
+const ReportLegendTable: FC<ReportLegendTableProps> = ({
+  variant,
+  markerHeader,
+  labelHeader,
+  countHeader,
+  rows,
+  activeKey,
+  onRowHover,
+}) => (
+  <table className={classNames(classes.table, variant === "bar" && classes.bar)}>
+    <thead>
+      <tr>
+        <th scope="col" className={classes.markerCell}>
+          {markerHeader}
+        </th>
+        <th scope="col" className={classes.labelCell}>
+          {labelHeader}
+        </th>
+        <th scope="col" className={classes.countCell}>
+          {countHeader}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((row) => (
+        <tr
+          key={row.key}
+          className={classNames({
+            [classes.rowActive]: activeKey === row.key,
+            [classes.rowDimmed]: activeKey != null && activeKey !== row.key,
+          })}
+          onMouseEnter={
+            onRowHover
+              ? () => {
+                  onRowHover(row.key);
+                }
+              : undefined
+          }
+          onMouseLeave={
+            onRowHover
+              ? () => {
+                  onRowHover(null);
+                }
+              : undefined
+          }
+          onFocus={
+            onRowHover
+              ? () => {
+                  onRowHover(row.key);
+                }
+              : undefined
+          }
+          onBlur={
+            onRowHover
+              ? () => {
+                  onRowHover(null);
+                }
+              : undefined
+          }
+        >
+          <td className={classes.markerCell}>{row.marker}</td>
+          <td className={classes.labelCell}>
+            {row.detail ? (
+              <span className={classes.labelWithHelp}>
+                {row.label}
+                <Tooltip message={row.detail} position="top-center">
+                  <i
+                    className="p-icon--help"
+                    role="img"
+                    aria-label={row.detail}
+                  />
+                </Tooltip>
+              </span>
+            ) : (
+              <span>{row.label}</span>
+            )}
+          </td>
+          <td className={classes.countCell}>
+            {row.countHref && row.count > 0 ? (
+              <Link
+                to={row.countHref}
+                aria-label={row.countAriaLabel}
+                onClick={row.onCountActivate}
+              >
+                {row.count.toLocaleString()}
+              </Link>
+            ) : (
+              <span className={row.count === 0 ? classes.countZero : undefined}>
+                {row.count.toLocaleString()}
+              </span>
+            )}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default ReportLegendTable;
diff --git a/src/features/reports/components/ReportLegendTable/index.ts b/src/features/reports/components/ReportLegendTable/index.ts
new file mode 100644
index 0000000000..350aabbe12
--- /dev/null
+++ b/src/features/reports/components/ReportLegendTable/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ReportLegendTable";
+export type { ReportLegendRow } from "./ReportLegendTable";
diff --git a/src/features/reports/components/ReportView/ReportView.module.scss b/src/features/reports/components/ReportView/ReportView.module.scss
new file mode 100644
index 0000000000..a10014e27a
--- /dev/null
+++ b/src/features/reports/components/ReportView/ReportView.module.scss
@@ -0,0 +1,10 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+.section {
+  margin-bottom: $spv--large;
+}
+
+.heading {
+  margin-bottom: $spv--medium;
+}
diff --git a/src/features/reports/components/ReportView/ReportView.test.tsx b/src/features/reports/components/ReportView/ReportView.test.tsx
new file mode 100644
index 0000000000..f572ee348b
--- /dev/null
+++ b/src/features/reports/components/ReportView/ReportView.test.tsx
@@ -0,0 +1,284 @@
+import { API_URL } from "@/constants";
+import { setSelectedInstanceIds } from "@/features/instances";
+import useSidePanel from "@/hooks/useSidePanel";
+import { setEndpointStatus } from "@/tests/controllers/controller";
+import server from "@/tests/server";
+import { complianceReport } from "@/tests/server/handlers/reports";
+import { renderWithProviders } from "@/tests/render";
+import { act, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import type { Mock } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import ReportView from "./ReportView";
+
+vi.mock("@/hooks/useSidePanel");
+
+const instanceIds = [1, 2, 3];
+// Ids not present in the report fixture, used to prove the report ignores the
+// raw selection when deriving buckets.
+const UNACCOUNTED_ID_A = 98;
+const UNACCOUNTED_ID_B = 99;
+// An id placed only in the 60-day bucket so the 30–60 slice has a member.
+const THIRTY_SIXTY_ID = 17;
+
+describe("ReportView", () => {
+  beforeEach(() => {
+    setSelectedInstanceIds(instanceIds);
+    (useSidePanel as Mock).mockReturnValue({
+      closeSidePanel: vi.fn(),
+      setSidePanelContent: vi.fn(),
+      setSidePanelTitle: vi.fn(),
+    });
+  });
+
+  it("shows a loading state while the report is fetched", () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("renders the status bar table with labels and counts", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    const table = within(
+      (await screen.findByText("Securely patched")).closest(
+        "table",
+      ) as HTMLElement,
+    );
+    expect(table.getByText("Upgrade profiles")).toBeInTheDocument();
+    expect(table.getByText("Contacted in last 5 min")).toBeInTheDocument();
+    expect(table.getByTestId("metric-bar-securely-patched")).toHaveStyle({
+      width: `${(complianceReport.securely_patched.count / complianceReport.total) * 100}%`,
+    });
+    expect(
+      table.getByRole("link", {
+        name: "View the 6 securely patched instances",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders disjoint patch time buckets, worst first", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    await screen.findByText("Security upgrades");
+    const legend = within(
+      screen.getByText("60+ days outstanding").closest("table") as HTMLElement,
+    );
+    const labels = legend
+      .getAllByRole("row")
+      // Drop the header row.
+      .slice(1)
+      .map((row) => row.textContent);
+    expect(labels[0]).toContain("60+ days");
+    expect(labels[1]).toContain("30–60 days");
+    expect(labels[2]).toContain("14–30 days");
+    expect(labels[3]).toContain("2–14 days");
+    expect(labels[4]).toContain("Within 2 days");
+    expect(labels[5]).toContain("Other");
+
+    // From the fixture: pending [7, 8, 9, 10, 16] wins over the cumulative
+    // fixed_in buckets, leaving 4 within 2 days, 2 in 2-14 days and none in
+    // the middle buckets or in the unclassified remainder.
+    expect(
+      legend.getByRole("link", {
+        name: "View the 5 instances in the 60+ days outstanding bucket",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      legend.getByRole("link", {
+        name: "View the 4 instances in the Within 2 days bucket",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      legend.getByRole("link", {
+        name: "View the 2 instances in the 2–14 days bucket",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("derives Other from the report's instances, not the raw selection", async () => {
+    // A selection wider than the server-accounted set must not inflate Other
+    // (and so must not push the donut's segments past 100%).
+    renderWithProviders(
+      <ReportView
+        instanceIds={[
+          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 16, UNACCOUNTED_ID_A, UNACCOUNTED_ID_B,
+        ]}
+      />,
+    );
+
+    await screen.findByText("Security upgrades");
+    const otherRow = screen.getByText("Other").closest("tr") as HTMLElement;
+    expect(within(otherRow).getByText("0")).toBeInTheDocument();
+    expect(within(otherRow).queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("renders no over-60-days arc when nothing is outstanding", async () => {
+    server.use(
+      http.get(`${API_URL}computers/report`, () =>
+        HttpResponse.json({
+          ...complianceReport,
+          usn_pending_over_60_days: { count: 0, computer_ids: [] },
+        }),
+      ),
+    );
+
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    await screen.findByText("Security upgrades");
+    expect(screen.queryByTestId("donut-arc-over-60")).not.toBeInTheDocument();
+  });
+
+  it("shows an error notification when the report cannot be fetched", async () => {
+    setEndpointStatus({ status: "error", path: "computers/report" });
+
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    expect(
+      await screen.findByText(
+        "Something went wrong. Please try again or contact our support team.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("shows when the report was generated", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+    expect(await screen.findByText(/Report generated/)).toBeInTheDocument();
+  });
+
+  it("deep-links the over-60-days bucket to its exact instances", async () => {
+    const user = userEvent.setup();
+    const { closeSidePanel } = useSidePanel();
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    const link = await screen.findByRole("link", {
+      name: "View the 5 instances in the 60+ days outstanding bucket",
+    });
+    // The fixture's outstanding USN instances are ids 7, 8, 9, 10, 16.
+    expect(
+      decodeURIComponent(link.getAttribute("href") ?? "").replace(/\+/g, " "),
+    ).toContain("id:7 OR id:8 OR id:9 OR id:10 OR id:16");
+
+    await user.click(link);
+    expect(closeSidePanel).toHaveBeenCalled();
+  });
+
+  it("deep-links a status row to its exact instances", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    const link = await screen.findByRole("link", {
+      name: "View the 6 securely patched instances",
+    });
+    // The fixture's securely patched instances are ids 1–6.
+    expect(
+      decodeURIComponent(link.getAttribute("href") ?? "").replace(/\+/g, " "),
+    ).toContain("id:1 OR id:2 OR id:3 OR id:4 OR id:5 OR id:6");
+  });
+
+  it("deep-links a patch speed bucket to its exact instances", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    const link = await screen.findByRole("link", {
+      name: "View the 4 instances in the Within 2 days bucket",
+    });
+    // Within-2-days = fixed_in[2] (ids 1–4) minus the outstanding set.
+    expect(
+      decodeURIComponent(link.getAttribute("href") ?? "").replace(/\+/g, " "),
+    ).toContain("id:1 OR id:2 OR id:3 OR id:4");
+  });
+
+  it("deep-links the 30–60 days bucket to its exact instances", async () => {
+    // 30–60 days has no dedicated server bucket; the disjoint set is derived
+    // client-side. Give the bucket a member so it renders a link.
+    server.use(
+      http.get(`${API_URL}computers/report`, () =>
+        HttpResponse.json({
+          ...complianceReport,
+          usn_fixed_in: {
+            ...complianceReport.usn_fixed_in,
+            "60": {
+              count: 9,
+              computer_ids: [1, 2, 3, 4, 5, 6, 7, 8, THIRTY_SIXTY_ID],
+            },
+          },
+        }),
+      ),
+    );
+    renderWithProviders(
+      <ReportView instanceIds={[...instanceIds, THIRTY_SIXTY_ID]} />,
+    );
+
+    const link = await screen.findByRole("link", {
+      name: "View the 1 instances in the 30–60 days bucket",
+    });
+    expect(
+      decodeURIComponent(link.getAttribute("href") ?? "").replace(/\+/g, " "),
+    ).toContain(`id:${THIRTY_SIXTY_ID}`);
+  });
+
+  it("keeps the snapshot but warns when the selection changes", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+    await screen.findByText("Security upgrades");
+
+    expect(screen.queryByText("Selection has changed")).not.toBeInTheDocument();
+
+    act(() => {
+      setSelectedInstanceIds([1, 2]);
+    });
+
+    expect(screen.getByText("Selection has changed")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "This report still covers the 3 instances selected when it was generated.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("regenerates the report for the new selection on demand", async () => {
+    const user = userEvent.setup();
+    const { setSidePanelTitle } = useSidePanel();
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+    await screen.findByText("Security upgrades");
+
+    act(() => {
+      setSelectedInstanceIds([1, 2]);
+    });
+
+    await user.click(
+      screen.getByRole("button", { name: "Regenerate report" }),
+    );
+
+    expect(
+      screen.queryByText("Selection has changed"),
+    ).not.toBeInTheDocument();
+    expect(setSidePanelTitle).toHaveBeenCalledWith("Report for 2 instances");
+  });
+
+  it("offers no regenerate action when the selection is empty", async () => {
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+    await screen.findByText("Security upgrades");
+
+    act(() => {
+      setSelectedInstanceIds([]);
+    });
+
+    expect(screen.getByText("Selection has changed")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Regenerate report" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("handles download dialog", async () => {
+    const { setSidePanelContent } = useSidePanel();
+    renderWithProviders(<ReportView instanceIds={instanceIds} />);
+
+    const downloadButton = await screen.findByText("Download as CSV");
+    downloadButton.click();
+
+    expect(setSidePanelContent).toHaveBeenCalledWith(
+      "Download report as CSV",
+      expect.anything(),
+    );
+  });
+});
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
new file mode 100644
index 0000000000..d14e78023a
--- /dev/null
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -0,0 +1,277 @@
+import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
+import LoadingState from "@/components/layout/LoadingState";
+import {
+  CONTACT_SUPPORT_TEAM_MESSAGE,
+  DISPLAY_DATE_TIME_FORMAT,
+} from "@/constants";
+import {
+  getSelectedInstanceIds,
+  subscribeToSelectedInstanceIds,
+} from "@/features/instances";
+import { ROUTES } from "@/libs/routes";
+import useSidePanel from "@/hooks/useSidePanel";
+import { pluralize } from "@/utils/_helpers";
+import { Notification } from "@canonical/react-components";
+import classNames from "classnames";
+import moment from "moment";
+import type { FC } from "react";
+import { useState, useSyncExternalStore } from "react";
+import { useGetComplianceReport } from "../../api";
+import type { DonutSegment } from "../ReportDonutChart";
+import ReportDonutChart from "../ReportDonutChart";
+import ReportForm from "../ReportForm";
+import type { MetricRow } from "../MetricBarTable";
+import MetricBarTable from "../MetricBarTable";
+import classes from "./ReportView.module.scss";
+
+interface ReportViewProps {
+  readonly instanceIds: number[];
+}
+
+const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
+  const { closeSidePanel, setSidePanelContent, setSidePanelTitle } =
+    useSidePanel();
+
+  // The report is a snapshot of the selection at the time the panel was
+  // opened (or last regenerated); the live selection is only observed to
+  // tell the user when the snapshot has gone stale.
+  const [reportIds, setReportIds] = useState<readonly number[]>(instanceIds);
+  const currentIds = useSyncExternalStore(
+    subscribeToSelectedInstanceIds,
+    getSelectedInstanceIds,
+  );
+  const reportIdSet = new Set(reportIds);
+  const selectionChanged =
+    currentIds.length !== reportIds.length ||
+    !currentIds.every((id) => reportIdSet.has(id));
+
+  const { report, isGettingComplianceReport, isComplianceReportError } =
+    useGetComplianceReport({
+      query: `id:${reportIds.join(" OR id:")}`,
+    });
+
+  const regenerateReport = () => {
+    setReportIds(currentIds);
+    setSidePanelTitle(
+      `Report for ${pluralize(currentIds.length, ["instance"], "exact")}`,
+    );
+  };
+
+  // A shareable deep link to the instances list filtered to exactly these
+  // instances. We filter by id (not by a semantic term) so the result matches
+  // the report's selection-scoped count exactly.
+  const instancesHref = (ids: readonly number[]): string | undefined =>
+    ids.length > 0
+      ? ROUTES.instances.root({ query: `id:${ids.join(" OR id:")}` })
+      : undefined;
+
+  if (isGettingComplianceReport) {
+    return <LoadingState />;
+  }
+
+  if (isComplianceReportError || !report) {
+    return (
+      <Notification severity="negative" title="Error">
+        {CONTACT_SUPPORT_TEAM_MESSAGE}
+      </Notification>
+    );
+  }
+
+  const { total } = report;
+
+  // Every instance lands in exactly one bucket, worst first: instances with
+  // USNs outstanding for over 60 days take priority, the rest are split by the
+  // longest time they took to apply a USN (the fixed_in buckets are
+  // cumulative). Whatever the server cannot place in a named interval — USNs
+  // still unpatched for under 60 days, or patched after more than 60 days — is
+  // reported honestly as "Other". We carry the exact computer ids per bucket so
+  // the deep link matches the report's count precisely.
+  const pendingIds = report.usn_pending_over_60_days.computer_ids;
+  const withinTwoIds = report.usn_fixed_in["2"].computer_ids;
+  const withinFourteenIds = report.usn_fixed_in["14"].computer_ids;
+  const withinThirtyIds = report.usn_fixed_in["30"].computer_ids;
+  const withinSixtyIds = report.usn_fixed_in["60"].computer_ids;
+  const pendingSet = new Set(pendingIds);
+  const withinTwoSet = new Set(withinTwoIds);
+  const withinFourteenSet = new Set(withinFourteenIds);
+  const withinThirtySet = new Set(withinThirtyIds);
+
+  const sixtyPlusIds = pendingIds;
+  const withinTwoBucket = withinTwoIds.filter((id) => !pendingSet.has(id));
+  const twoToFourteenIds = withinFourteenIds.filter(
+    (id) => !withinTwoSet.has(id) && !pendingSet.has(id),
+  );
+  const fourteenToThirtyIds = withinThirtyIds.filter(
+    (id) => !withinFourteenSet.has(id) && !pendingSet.has(id),
+  );
+  const thirtyToSixtyIds = withinSixtyIds.filter(
+    (id) => !withinThirtySet.has(id) && !pendingSet.has(id),
+  );
+  const classified = new Set([
+    ...sixtyPlusIds,
+    ...withinTwoBucket,
+    ...twoToFourteenIds,
+    ...fourteenToThirtyIds,
+    ...thirtyToSixtyIds,
+  ]);
+  // "Other" is the accounted instances not in any named bucket. Derive the
+  // universe from the report's own id sets (every accounted instance appears
+  // in securely/not-securely-patched and/or the USN sets) rather than from the
+  // raw selection, which may include instances the server didn't account for.
+  const accountedIds = new Set<number>([
+    ...report.securely_patched.computer_ids,
+    ...report.not_securely_patched.computer_ids,
+    ...withinSixtyIds,
+    ...pendingIds,
+  ]);
+  const otherIds = [...accountedIds].filter((id) => !classified.has(id));
+
+  const segmentDefs: {
+    key: string;
+    label: string;
+    ids: readonly number[];
+    color: DonutSegment["color"];
+    detail?: string;
+  }[] = [
+    {
+      key: "over-60",
+      label: "60+ days outstanding",
+      ids: sixtyPlusIds,
+      color: "red",
+    },
+    {
+      key: "30-60",
+      label: "30–60 days",
+      ids: thirtyToSixtyIds,
+      color: "orange",
+    },
+    {
+      key: "14-30",
+      label: "14–30 days",
+      ids: fourteenToThirtyIds,
+      color: "orangeLight",
+    },
+    {
+      key: "2-14",
+      label: "2–14 days",
+      ids: twoToFourteenIds,
+      color: "greenLight",
+    },
+    {
+      key: "within-2",
+      label: "Within 2 days",
+      ids: withinTwoBucket,
+      color: "green",
+    },
+    {
+      key: "other",
+      label: "Other",
+      ids: otherIds,
+      color: "grey",
+      detail:
+        "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days.",
+    },
+  ];
+
+  const patchSegments: DonutSegment[] = segmentDefs.map((segment) => ({
+    key: segment.key,
+    label: segment.label,
+    detail: segment.detail,
+    count: segment.ids.length,
+    color: segment.color,
+    countHref: instancesHref(segment.ids),
+    onCountActivate: closeSidePanel,
+    countAriaLabel: `View the ${segment.ids.length} instances in the ${segment.label} bucket`,
+  }));
+
+  const statusRows: MetricRow[] = [
+    {
+      key: "securely-patched",
+      label: "Securely patched",
+      count: report.securely_patched.count,
+      total,
+      color: "positive",
+      countHref: instancesHref(report.securely_patched.computer_ids),
+      onCountActivate: closeSidePanel,
+      countAriaLabel: `View the ${report.securely_patched.count} securely patched instances`,
+    },
+    {
+      key: "upgrade-profiles",
+      label: "Upgrade profiles",
+      count: report.covered_by_upgrade_profiles.count,
+      total,
+      color: "link",
+      countHref: instancesHref(
+        report.covered_by_upgrade_profiles.computer_ids,
+      ),
+      onCountActivate: closeSidePanel,
+      countAriaLabel: `View the ${report.covered_by_upgrade_profiles.count} instances covered by upgrade profiles`,
+    },
+    {
+      key: "contacted",
+      label: "Contacted in last 5 min",
+      count: report.contacted_recently.count,
+      total,
+      color: "neutral",
+      countHref: instancesHref(report.contacted_recently.computer_ids),
+      onCountActivate: closeSidePanel,
+      countAriaLabel: `View the ${report.contacted_recently.count} instances contacted in the last 5 minutes`,
+    },
+  ];
+
+  const handleDownloadDialog = () => {
+    setSidePanelContent(
+      "Download report as CSV",
+      <ReportForm instanceIds={reportIds} />,
+    );
+  };
+
+  return (
+    <>
+      {selectionChanged && (
+        <Notification
+          severity="information"
+          title="Selection has changed"
+          actions={
+            currentIds.length > 0
+              ? [{ label: "Regenerate report", onClick: regenerateReport }]
+              : undefined
+          }
+        >
+          {`This report still covers the ${pluralize(reportIds.length, ["instance"], "exact")} selected when it was generated.`}
+        </Notification>
+      )}
+      <section className={classes.section}>
+        <p className={classNames("p-heading--5 u-no-margin", classes.heading)}>
+          Status
+        </p>
+        <MetricBarTable
+          labelHeader="Status"
+          countHeader="Instances"
+          rows={statusRows}
+        />
+      </section>
+      <section className={classes.section}>
+        <p className={classNames("p-heading--5 u-no-margin", classes.heading)}>
+          Security upgrades
+        </p>
+        <ReportDonutChart
+          total={total}
+          segments={patchSegments}
+          labelHeader="Time to patch USNs"
+          countHeader="Instances"
+        />
+      </section>
+      <p className="u-text--muted p-text--small">
+        {`Report generated ${moment(report.generated_at).format(DISPLAY_DATE_TIME_FORMAT)}`}
+      </p>
+      <SidePanelFormButtons
+        submitButtonDisabled={false}
+        submitButtonText="Download as CSV"
+        onSubmit={handleDownloadDialog}
+      />
+    </>
+  );
+};
+
+export default ReportView;
diff --git a/src/pages/dashboard/instances/ReportView/index.ts b/src/features/reports/components/ReportView/index.ts
similarity index 100%
rename from src/pages/dashboard/instances/ReportView/index.ts
rename to src/features/reports/components/ReportView/index.ts
diff --git a/src/features/reports/index.ts b/src/features/reports/index.ts
new file mode 100644
index 0000000000..12054ba41d
--- /dev/null
+++ b/src/features/reports/index.ts
@@ -0,0 +1,4 @@
+export * from "./api";
+export { default as ReportForm } from "./components/ReportForm";
+export { default as ReportView } from "./components/ReportView";
+export type * from "./types";
diff --git a/src/features/reports/types.ts b/src/features/reports/types.ts
new file mode 100644
index 0000000000..fa52fe015e
--- /dev/null
+++ b/src/features/reports/types.ts
@@ -0,0 +1,19 @@
+export interface ReportBucket {
+  count: number;
+  // The V2 computers/report endpoint always returns the ids per bucket (an
+  // empty array when the count is zero), so this is required, not optional.
+  computer_ids: number[];
+}
+
+export type UsnFixedInDays = "2" | "14" | "30" | "60";
+
+export interface ComplianceReport {
+  generated_at: string;
+  total: number;
+  securely_patched: ReportBucket;
+  not_securely_patched: ReportBucket;
+  covered_by_upgrade_profiles: ReportBucket;
+  contacted_recently: ReportBucket;
+  usn_fixed_in: Record<UsnFixedInDays, ReportBucket>;
+  usn_pending_over_60_days: ReportBucket;
+}
diff --git a/src/features/saved-searches/components/SavedSearchForm/constants.ts b/src/features/saved-searches/components/SavedSearchForm/constants.ts
index bd02d53f63..8fd4823f96 100644
--- a/src/features/saved-searches/components/SavedSearchForm/constants.ts
+++ b/src/features/saved-searches/components/SavedSearchForm/constants.ts
@@ -37,6 +37,10 @@ export const VALID_ROOT_KEYS = [
   "ami-id",
   "availability-zone",
   "last-ping",
+  "last-ping-minutes",
+  "usn-outstanding",
+  "usn-applied-in",
+  "has",
 ] as const;
 export const PROFILE_TYPES = [
   "usg",
@@ -76,6 +80,9 @@ export const NUMERIC_KEYS: ValidRootKey[] = [
   "contract-expires-within-days",
   "license-expires-within-days",
   "last-ping",
+  "last-ping-minutes",
+  "usn-outstanding",
+  "usn-applied-in",
 ];
 
 export const INTEGER_REGEX = /^\d+$/;
diff --git a/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryLanguage.ts b/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryLanguage.ts
index 915dbd261b..03b0bb8ce7 100644
--- a/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryLanguage.ts
+++ b/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryLanguage.ts
@@ -196,6 +196,17 @@ const getDeepSuggestions = (
       }
       return [];
 
+    case "has":
+      if (depth === 1) {
+        return getSimpleEnumSuggestions(
+          ["upgrade-profile"],
+          "Feature",
+          range,
+          monaco,
+        );
+      }
+      return [];
+
     case "has-pro-management":
       if (depth === 1) {
         return getSimpleEnumSuggestions(BOOLEANS, "Boolean", range, monaco);
diff --git a/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryValidation.ts b/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryValidation.ts
index 916c7ad9ec..f48311d177 100644
--- a/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryValidation.ts
+++ b/src/features/saved-searches/components/SavedSearchForm/helpers/searchQueryValidation.ts
@@ -133,6 +133,14 @@ const validateNeedsToken = (val: string): ValidationResult => {
   return keyError("needs", `has invalid value "${val}".`);
 };
 
+const validateHasToken = (val: string): ValidationResult => {
+  if (val === "upgrade-profile") {
+    return undefined;
+  }
+
+  return keyError("has", `has invalid value "${val}".`);
+};
+
 const validateProfileToken = (
   [, type, id, status]: [unknown, string, string?, string?],
   config: ValidationConfig,
@@ -272,6 +280,9 @@ const validateKeyToken = (
     case "needs":
       return validateNeedsToken(val);
 
+    case "has":
+      return validateHasToken(val);
+
     case "profile":
       return validateProfileToken(parts, config);
 
@@ -286,6 +297,9 @@ const validateKeyToken = (
     case "contract-expires-within-days":
     case "license-expires-within-days":
     case "last-ping":
+    case "last-ping-minutes":
+    case "usn-outstanding":
+    case "usn-applied-in":
       return validateNumericKeyToken(key, val);
 
     default:
diff --git a/src/hooks/useReports.ts b/src/hooks/useReports.ts
index 48a309bef9..ebdd5862d2 100644
--- a/src/hooks/useReports.ts
+++ b/src/hooks/useReports.ts
@@ -1,4 +1,3 @@
-import type { UseQueryOptions } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import useFetchOld from "@/hooks/useFetchOld";
 import type { QueryFnType } from "@/types/api/QueryFnType";
@@ -7,16 +6,10 @@ import type { ApiError } from "@/types/api/ApiError";
 
 interface CommonGetParams {
   query?: string;
-}
-
-interface GetNotPingingInstancesParams extends CommonGetParams {
-  since_minutes: number;
-}
-
-interface GetUsnTimeToFixParams extends CommonGetParams {
-  fixed_in_days?: number[];
-  in_last?: number;
-  pending_in_days?: number;
+  /** Only include USN/CVE issues released within this many days. */
+  max_days?: number;
+  /** Key the CSV columns by CVE instead of by USN. */
+  by_cve?: boolean;
 }
 
 export default function useReports() {
@@ -35,72 +28,7 @@ export default function useReports() {
       ...config,
     });
 
-  const getInstancesNotUpgraded: QueryFnType<
-    AxiosResponse<number[]>,
-    CommonGetParams
-  > = (queryParams = {}, config = {}) =>
-    useQuery<AxiosResponse<number[]>, AxiosError<ApiError>>({
-      queryKey: ["instancesNotUpgraded", queryParams],
-      queryFn: async () =>
-        authFetchOld.get("GetComputersNotUpgraded", {
-          params: queryParams,
-        }),
-      ...config,
-    });
-
-  const getNotPingingInstances = (
-    queryParams: GetNotPingingInstancesParams,
-    config: Omit<
-      UseQueryOptions<AxiosResponse<number[]>, AxiosError<ApiError>>,
-      "queryKey" | "queryFn"
-    > = {},
-  ) =>
-    useQuery<AxiosResponse<number[]>, AxiosError<ApiError>>({
-      queryKey: ["notPingingInstances", queryParams],
-      queryFn: async () =>
-        authFetchOld.get("GetNotPingingComputers", {
-          params: queryParams,
-        }),
-      ...config,
-    });
-
-  const getUsnTimeToFix: QueryFnType<
-    AxiosResponse<Record<`${number}` | "pending", number[]>>,
-    GetUsnTimeToFixParams
-  > = (queryParams = {}, config = {}) =>
-    useQuery<
-      AxiosResponse<Record<string | "pending", number[]>>,
-      AxiosError<ApiError>
-    >({
-      queryKey: ["usnTimeToFix", queryParams],
-      queryFn: async () =>
-        authFetchOld.get("GetUSNTimeToFix", {
-          params: queryParams,
-        }),
-      ...config,
-    });
-
-  const getUpgradedInstancesByFrequency: QueryFnType<
-    AxiosResponse<{ "Every hour at 30 minutes past the hour": number[] }>,
-    CommonGetParams
-  > = (queryParams = {}, config = {}) =>
-    useQuery<
-      AxiosResponse<{ "Every hour at 30 minutes past the hour": number[] }>,
-      AxiosError<ApiError>
-    >({
-      queryKey: ["upgradedInstancesByFrequency", queryParams],
-      queryFn: async () =>
-        authFetchOld.get("GetUpgradedComputersByFrequency", {
-          params: queryParams,
-        }),
-      ...config,
-    });
-
   return {
     getCsvComplianceData,
-    getInstancesNotUpgraded,
-    getNotPingingInstances,
-    getUsnTimeToFix,
-    getUpgradedInstancesByFrequency,
   };
 }
diff --git a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
index 996732b9fd..b6c861f135 100644
--- a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
+++ b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
@@ -2,15 +2,20 @@ import PageContent from "@/components/layout/PageContent";
 import PageHeader from "@/components/layout/PageHeader";
 import PageMain from "@/components/layout/PageMain";
 import { DETAILED_UPGRADES_VIEW_ENABLED } from "@/constants";
-import { InstancesPageActions, useGetInstances } from "@/features/instances";
+import {
+  InstancesPageActions,
+  setSelectedInstanceIds,
+  useGetInstances,
+} from "@/features/instances";
 import usePageParams from "@/hooks/usePageParams";
 import type { Instance } from "@/types/Instance";
-import { useCallback, useState, type FC } from "react";
+import { useCallback, useEffect, useState, type FC } from "react";
 import InstancesContainer from "../InstancesContainer";
 import { getQuery } from "./helpers";
 
 const InstancesPage: FC = () => {
   const { currentPage, pageSize, wsl, ...filters } = usePageParams();
+  const { query } = filters;
 
   const { instances, instancesCount, isGettingInstances } = useGetInstances({
     query: getQuery(filters),
@@ -26,6 +31,21 @@ const InstancesPage: FC = () => {
 
   const [selectedInstances, setSelectedInstances] = useState<Instance[]>([]);
 
+  // Clear the selection when the search query changes (e.g. following a report
+  // deep link), matching how header filter changes reset it. Resetting state
+  // during render (React's documented pattern) avoids an extra commit.
+  const [trackedQuery, setTrackedQuery] = useState(query);
+  if (trackedQuery !== query) {
+    setTrackedQuery(query);
+    setSelectedInstances([]);
+  }
+
+  // Mirror the selection into an external store so side panel content (whose
+  // props are frozen when the panel opens) can detect selection changes.
+  useEffect(() => {
+    setSelectedInstanceIds(selectedInstances.map(({ id }) => id));
+  }, [selectedInstances]);
+
   const clearSelection = useCallback(() => {
     setSelectedInstances([]);
   }, []);
diff --git a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts b/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
index bfa5c64e8b..49010c8af4 100644
--- a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
+++ b/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
@@ -11,7 +11,6 @@ const offlineStatusOption = FILTERS.status.options.find(
 const contractOption = FILTERS.contractExpiryDays.options.find(
   (option) => option.value === "30",
 );
-
 assert(windowsOption);
 assert(offlineStatusOption);
 assert(contractOption);
diff --git a/src/pages/dashboard/instances/ReportView/ReportView.module.scss b/src/pages/dashboard/instances/ReportView/ReportView.module.scss
deleted file mode 100644
index fcbd0f7017..0000000000
--- a/src/pages/dashboard/instances/ReportView/ReportView.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "vanilla-framework/scss/settings_colors";
-@import "vanilla-framework/scss/settings_spacing";
-
-.rowContainer {
-  margin-bottom: $sp-xx-large;
-
-  &:not(:first-child) {
-    border-top: 1px solid $colors--theme--border-low-contrast;
-    padding-top: $spv--large;
-  }
-}
-
-.row {
-  row-gap: $spv--x-large;
-}
diff --git a/src/pages/dashboard/instances/ReportView/ReportView.test.tsx b/src/pages/dashboard/instances/ReportView/ReportView.test.tsx
deleted file mode 100644
index bd8657d46e..0000000000
--- a/src/pages/dashboard/instances/ReportView/ReportView.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { renderWithProviders } from "@/tests/render";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-import ReportView from "./ReportView";
-
-describe("ReportView", () => {
-  const instanceIds = [1, 2, 3];
-
-  it("renders ReportView component", async () => {
-    renderWithProviders(<ReportView instanceIds={instanceIds} />);
-
-    expect(await screen.findByText("Securely patched")).toBeInTheDocument();
-    expect(screen.getByText("Upgrade profiles")).toBeInTheDocument();
-    expect(screen.getByText("Contacted")).toBeInTheDocument();
-    expect(screen.getByText("Security upgrades")).toBeInTheDocument();
-  });
-
-  it("handles download dialog", async () => {
-    const user = userEvent.setup();
-
-    renderWithProviders(<ReportView instanceIds={instanceIds} />);
-
-    await user.click(await screen.findByText("Download as CSV"));
-
-    expect(
-      await screen.findByRole("heading", { name: "Download report as CSV" }),
-    ).toBeInTheDocument();
-  });
-
-  it("displays the correct contacted description", async () => {
-    renderWithProviders(<ReportView instanceIds={instanceIds} />);
-
-    expect(
-      await screen.findByText(/0 instances have not contacted/i),
-    ).toBeInTheDocument();
-  });
-
-  it("displays the expected USN periods", async () => {
-    renderWithProviders(<ReportView instanceIds={instanceIds} />);
-
-    expect(await screen.findAllByText(/2 days/i)).not.toHaveLength(0);
-    expect(screen.getAllByText(/14 days/i)).not.toHaveLength(0);
-    expect(screen.getAllByText(/30 days/i)).not.toHaveLength(0);
-  });
-
-  it("displays securely patched widgets", async () => {
-    renderWithProviders(<ReportView instanceIds={instanceIds} />);
-
-    expect(await screen.findAllByText(/Securely patched/i)).not.toHaveLength(0);
-  });
-});
diff --git a/src/pages/dashboard/instances/ReportView/ReportView.tsx b/src/pages/dashboard/instances/ReportView/ReportView.tsx
deleted file mode 100644
index 5d1a55281b..0000000000
--- a/src/pages/dashboard/instances/ReportView/ReportView.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
-import useReports from "@/hooks/useReports";
-import useSidePanel from "@/hooks/useSidePanel";
-import ReportForm from "@/pages/dashboard/instances/ReportForm";
-import ReportWidget from "@/pages/dashboard/instances/ReportWidget";
-import { pluralize } from "@/utils/_helpers";
-import { Col, Row } from "@canonical/react-components";
-import classNames from "classnames";
-import type { FC } from "react";
-import classes from "./ReportView.module.scss";
-
-interface ReportViewProps {
-  readonly instanceIds: number[];
-}
-
-const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
-  const { setSidePanelContent } = useSidePanel();
-  const { getNotPingingInstances, getInstancesNotUpgraded, getUsnTimeToFix } =
-    useReports();
-
-  const {
-    data: getNotPingingInstancesResult,
-    isLoading: getNotPingingInstancesLoading,
-  } = getNotPingingInstances({
-    since_minutes: 5,
-    query: `id:${instanceIds.join(" OR id:")}`,
-  });
-
-  const pingingInstancesCount = getNotPingingInstancesResult
-    ? instanceIds.length - getNotPingingInstancesResult.data.length
-    : 0;
-
-  const {
-    data: getInstancesNotUpgradedResult,
-    isLoading: getInstancesNotUpgradedLoading,
-  } = getInstancesNotUpgraded({
-    query: `id:${instanceIds.join(" OR id:")}`,
-  });
-
-  const upgradedInstanceCount = getInstancesNotUpgradedResult
-    ? instanceIds.length - getInstancesNotUpgradedResult.data.length
-    : 0;
-
-  const { data: getUsnTimeToFixResult, isLoading: getUsnTimeToFixLoading } =
-    getUsnTimeToFix({
-      query: `id:${instanceIds.join(" OR id:")}`,
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      fixed_in_days: [2, 14, 30, 60],
-    });
-
-  const securityUpgradesInstanceCount = {
-    month: getUsnTimeToFixResult?.data["30"]?.length || 0,
-    old: getUsnTimeToFixResult?.data["60"]?.length || 0,
-    pending: getUsnTimeToFixResult?.data.pending.length || 0,
-    recent: getUsnTimeToFixResult?.data["2"]?.length || 0,
-    twoWeeks: getUsnTimeToFixResult?.data["14"]?.length || 0,
-  };
-
-  const periodToDays = {
-    recent: 2,
-    twoWeeks: 14,
-    month: 30,
-    old: 60,
-  };
-
-  const getSecurityUpgradesReportDescription = (
-    period: keyof Omit<typeof securityUpgradesInstanceCount, "pending">,
-    type: "positive" | "negative",
-  ) => {
-    const count =
-      type === "positive"
-        ? securityUpgradesInstanceCount[period]
-        : instanceIds.length - securityUpgradesInstanceCount[period];
-
-    return `${pluralize(count, ["instance has", "instances have"], "exact")} ${type === "negative" ? " not" : ""} applied USNs in ${periodToDays[period]} days or less.`;
-  };
-
-  const handleDownloadDialog = () => {
-    setSidePanelContent(
-      "Download report as CSV",
-      <ReportForm instanceIds={instanceIds} />,
-    );
-  };
-
-  return (
-    <>
-      <div className={classes.rowContainer}>
-        <Row
-          className={classNames(
-            "u-no-padding--left u-no-padding--right",
-            classes.row,
-          )}
-        >
-          <Col size={6}>
-            {!getUsnTimeToFixLoading && (
-              <ReportWidget
-                currentCount={
-                  instanceIds.length - securityUpgradesInstanceCount.pending
-                }
-                negativeDescription={`${pluralize(securityUpgradesInstanceCount.pending, ["instance is", "instances are"], "exact")} not yet patched.`}
-                positiveDescription={`${pluralize(instanceIds.length - securityUpgradesInstanceCount.pending, ["instance is", "instances are"], "exact")} securely patched.`}
-                title="Securely patched"
-                totalCount={instanceIds.length}
-              />
-            )}
-          </Col>
-          <Col size={6}>
-            {!getInstancesNotUpgradedLoading && (
-              <ReportWidget
-                currentCount={upgradedInstanceCount}
-                negativeDescription={`${pluralize(Number(getInstancesNotUpgradedResult?.data.length ?? 0), ["instance is", "instances are"], "exact")} not covered by upgrade profiles.`}
-                positiveDescription={`${pluralize(upgradedInstanceCount, ["instance is", "instances are"], "exact")} covered by upgrade profiles.`}
-                title="Upgrade profiles"
-                totalCount={instanceIds.length}
-              />
-            )}
-          </Col>
-          <Col size={6}>
-            {!getNotPingingInstancesLoading && (
-              <ReportWidget
-                currentCount={pingingInstancesCount}
-                negativeDescription={`${pluralize(Number(getNotPingingInstancesResult?.data.length ?? 0), ["instance has", "instances have"], "exact")} not contacted the server within the last 5 minutes.`}
-                positiveDescription={`${pluralize(pingingInstancesCount, ["instance has", "instances have"], "exact")} contacted the server within the last 5 minutes.`}
-                title="Contacted"
-                totalCount={instanceIds.length}
-              />
-            )}
-          </Col>
-        </Row>
-      </div>
-      {!getUsnTimeToFixLoading && (
-        <div className={classes.rowContainer}>
-          <h4>Security upgrades</h4>
-          <Row
-            className={classNames(
-              "u-no-padding--left u-no-padding--right",
-              classes.row,
-            )}
-          >
-            {Object.entries(periodToDays).map(([key, days]) => {
-              const period = key as keyof typeof periodToDays;
-              return (
-                <Col size={6} key={period}>
-                  <ReportWidget
-                    currentCount={securityUpgradesInstanceCount[period]}
-                    negativeDescription={getSecurityUpgradesReportDescription(
-                      period,
-                      "negative",
-                    )}
-                    positiveDescription={getSecurityUpgradesReportDescription(
-                      period,
-                      "positive",
-                    )}
-                    title={`${days} days`}
-                    totalCount={instanceIds.length}
-                  />
-                </Col>
-              );
-            })}
-          </Row>
-        </div>
-      )}
-      <SidePanelFormButtons
-        submitButtonDisabled={false}
-        submitButtonText="Download as CSV"
-        onSubmit={handleDownloadDialog}
-      />
-    </>
-  );
-};
-
-export default ReportView;
diff --git a/src/pages/dashboard/instances/ReportWidget/ReportWidget.module.scss b/src/pages/dashboard/instances/ReportWidget/ReportWidget.module.scss
deleted file mode 100644
index db4ab5a4f8..0000000000
--- a/src/pages/dashboard/instances/ReportWidget/ReportWidget.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "vanilla-framework/scss/settings_colors";
-@import "vanilla-framework/scss/settings_spacing";
-
-.header {
-  display: flex;
-  font-weight: 550;
-  justify-content: space-between;
-  margin-bottom: $spv--medium;
-}
-
-.lineContainer {
-  background-color: $colors--theme--background-default;
-  border: 1px solid $colors--theme--border-default;
-  border-radius: 5px;
-  margin-bottom: $spv--medium;
-}
-
-.line {
-  background-color: $color-link;
-  height: $spv--small;
-}
diff --git a/src/pages/dashboard/instances/ReportWidget/ReportWidget.test.tsx b/src/pages/dashboard/instances/ReportWidget/ReportWidget.test.tsx
deleted file mode 100644
index e37c5e8623..0000000000
--- a/src/pages/dashboard/instances/ReportWidget/ReportWidget.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import ReportWidget from "./ReportWidget";
-import { describe, expect, it } from "vitest";
-
-describe("ReportWidget", () => {
-  const defaultProps = {
-    currentCount: 50,
-    negativeDescription: "Negative description",
-    positiveDescription: "Positive description",
-    title: "Test Title",
-    totalCount: 100,
-  };
-
-  it("renders the title", () => {
-    render(<ReportWidget {...defaultProps} />);
-    expect(screen.getByText("Test Title")).toBeInTheDocument();
-  });
-
-  it("renders the positive description", () => {
-    render(<ReportWidget {...defaultProps} />);
-    expect(screen.getByText("Positive description")).toBeInTheDocument();
-  });
-
-  it("renders the negative description", () => {
-    render(<ReportWidget {...defaultProps} />);
-    expect(screen.getByText("Negative description")).toBeInTheDocument();
-  });
-
-  it("calculates and displays the correct percentage", () => {
-    render(<ReportWidget {...defaultProps} />);
-    expect(screen.getByText("50%")).toBeInTheDocument();
-  });
-});
diff --git a/src/pages/dashboard/instances/ReportWidget/ReportWidget.tsx b/src/pages/dashboard/instances/ReportWidget/ReportWidget.tsx
deleted file mode 100644
index 72c015f20d..0000000000
--- a/src/pages/dashboard/instances/ReportWidget/ReportWidget.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { FC } from "react";
-import classes from "./ReportWidget.module.scss";
-
-interface ReportWidgetProps {
-  readonly currentCount: number;
-  readonly negativeDescription: string;
-  readonly positiveDescription: string;
-  readonly title: string;
-  readonly totalCount: number;
-}
-
-const ReportWidget: FC<ReportWidgetProps> = ({
-  currentCount,
-  negativeDescription,
-  positiveDescription,
-  title,
-  totalCount,
-}) => {
-  const percentage = ((100 * currentCount) / totalCount).toFixed();
-
-  return (
-    <>
-      <div className={classes.header}>
-        <span>{title}</span>
-        <span>{`${percentage}%`}</span>
-      </div>
-      <div className={classes.lineContainer}>
-        <div className={classes.line} style={{ width: `${percentage}%` }} />
-      </div>
-      <p className="u-text--muted p-text--small">{positiveDescription}</p>
-      <p className="u-text--muted p-text--small u-no-margin--bottom">
-        {negativeDescription}
-      </p>
-    </>
-  );
-};
-
-export default ReportWidget;
diff --git a/src/pages/dashboard/instances/ReportWidget/index.ts b/src/pages/dashboard/instances/ReportWidget/index.ts
deleted file mode 100644
index 9f3330efc1..0000000000
--- a/src/pages/dashboard/instances/ReportWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ReportWidget";
diff --git a/src/tests/mocks/features.ts b/src/tests/mocks/features.ts
index 936af19087..1eff910b8d 100644
--- a/src/tests/mocks/features.ts
+++ b/src/tests/mocks/features.ts
@@ -102,4 +102,15 @@ export const features: Feature[] = [
       account: true,
     },
   },
+  {
+    name: "Instance Reports",
+    description:
+      "View a compliance and security report for a selection of instances from the instances list.",
+    key: "instance-reports",
+    database_key: 15,
+    enabled: true,
+    details: {
+      configuration: true,
+    },
+  },
 ];
diff --git a/src/tests/server/handlers/features.ts b/src/tests/server/handlers/features.ts
index 5c3d13c68e..687a93bacf 100644
--- a/src/tests/server/handlers/features.ts
+++ b/src/tests/server/handlers/features.ts
@@ -9,6 +9,15 @@ import { createEndpointStatusNetworkError } from "./_constants";
 const matchesFeaturesPath = (endpointPath?: string) =>
   !endpointPath || endpointPath.includes("features");
 
+// The reports side panel ships on by default in production, so the MSW mock
+// always reports `instance-reports` as enabled — even when the features
+// endpoint is otherwise emptied — so "View report" is available whenever
+// developing or testing against MSW. To test the disabled state, override the
+// features endpoint with `server.use(...)` returning the feature as disabled.
+const alwaysEnabledFeatures = features.filter(
+  (feature) => feature.key === "instance-reports",
+);
+
 export default [
   http.get(`${API_URL}features`, () => {
     const endpointStatus = getEndpointStatus();
@@ -19,7 +28,7 @@ export default [
     ) {
       return HttpResponse.json(
         generatePaginatedResponse<Feature>({
-          data: [],
+          data: alwaysEnabledFeatures,
           offset: 0,
           limit: 20,
         }),
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index 6f0afbd652..e5f5fcfd38 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -362,7 +362,13 @@ export default [
     return HttpResponse.json(activities[0]);
   }),
 
-  http.get(`${API_URL}computers/:computerId`, async ({ request }) => {
+  http.get(`${API_URL}computers/:computerId`, async ({ params, request }) => {
+    // The real route only matches integer ids (`/computers/<int:computer_id>`),
+    // letting static paths like `computers/report` reach their own handlers.
+    if (!/^\d+$/.test(String(params.computerId))) {
+      return;
+    }
+
     if (shouldApplyEndpointStatus("computers/:computerId")) {
       const { status } = getEndpointStatus();
       if (status === "error") {
diff --git a/src/tests/server/handlers/reports.ts b/src/tests/server/handlers/reports.ts
index 76e0f465d5..081b6607d9 100644
--- a/src/tests/server/handlers/reports.ts
+++ b/src/tests/server/handlers/reports.ts
@@ -1,54 +1,75 @@
-import { API_URL_OLD } from "@/constants";
+import { API_URL, API_URL_OLD } from "@/constants";
+import type { ComplianceReport } from "@/features/reports";
 import { getEndpointStatus } from "@/tests/controllers/controller";
 import { http, HttpResponse } from "msw";
+import { createEndpointStatusNetworkError } from "./_constants";
 import { isAction, shouldApplyEndpointStatus } from "./_helpers";
 
-const usnTimeToFix = {
-  "2": [],
-  "14": [],
-  "30": [],
-  "60": [],
-  pending: [],
+export const complianceReport: ComplianceReport = {
+  generated_at: "2026-06-11T10:38:00Z",
+  total: 11,
+  securely_patched: { count: 6, computer_ids: [1, 2, 3, 4, 5, 6] },
+  not_securely_patched: { count: 5, computer_ids: [7, 8, 9, 10, 16] },
+  covered_by_upgrade_profiles: { count: 1, computer_ids: [1] },
+  contacted_recently: { count: 0, computer_ids: [] },
+  usn_fixed_in: {
+    "2": { count: 4, computer_ids: [1, 2, 3, 4] },
+    "14": { count: 6, computer_ids: [1, 2, 3, 4, 5, 6] },
+    "30": { count: 8, computer_ids: [1, 2, 3, 4, 5, 6, 7, 8] },
+    "60": { count: 8, computer_ids: [1, 2, 3, 4, 5, 6, 7, 8] },
+  },
+  usn_pending_over_60_days: { count: 5, computer_ids: [7, 8, 9, 10, 16] },
 };
 
-export default [
-  http.get(API_URL_OLD, ({ request }) => {
-    if (!isAction(request, "GetCSVComplianceData")) {
-      return;
-    }
+// A report for a selection the server accounted for but with nothing to show,
+// so the "empty" endpoint status can be simulated for this endpoint too.
+const emptyBucket = { count: 0, computer_ids: [] };
+export const emptyComplianceReport: ComplianceReport = {
+  generated_at: complianceReport.generated_at,
+  total: 0,
+  securely_patched: emptyBucket,
+  not_securely_patched: emptyBucket,
+  covered_by_upgrade_profiles: emptyBucket,
+  contacted_recently: emptyBucket,
+  usn_fixed_in: {
+    "2": emptyBucket,
+    "14": emptyBucket,
+    "30": emptyBucket,
+    "60": emptyBucket,
+  },
+  usn_pending_over_60_days: emptyBucket,
+};
 
-    if (shouldApplyEndpointStatus("reports")) {
-      const endpointStatus = getEndpointStatus();
+export default [
+  http.get(`${API_URL}computers/report`, () => {
+    if (shouldApplyEndpointStatus("computers/report")) {
+      const { status } = getEndpointStatus();
 
-      if (endpointStatus.status === "empty") {
-        return HttpResponse.json("");
+      if (status === "error") {
+        throw createEndpointStatusNetworkError();
       }
-    }
-
-    return HttpResponse.json("name,status\ninstance-1,ok");
-  }),
 
-  http.get(API_URL_OLD, ({ request }) => {
-    if (!isAction(request, "GetComputersNotUpgraded")) {
-      return;
+      if (status === "empty") {
+        return HttpResponse.json(emptyComplianceReport);
+      }
     }
 
-    return HttpResponse.json([]);
+    return HttpResponse.json(complianceReport);
   }),
-
   http.get(API_URL_OLD, ({ request }) => {
-    if (!isAction(request, "GetNotPingingComputers")) {
+    if (!isAction(request, "GetCSVComplianceData")) {
       return;
     }
 
-    return HttpResponse.json([]);
-  }),
+    const endpointStatus = getEndpointStatus();
 
-  http.get(API_URL_OLD, ({ request }) => {
-    if (!isAction(request, "GetUSNTimeToFix")) {
-      return;
+    if (
+      endpointStatus.status === "empty" &&
+      (!endpointStatus.path || endpointStatus.path === "reports")
+    ) {
+      return HttpResponse.json("");
     }
 
-    return HttpResponse.json(usnTimeToFix);
+    return HttpResponse.json("name,status\ninstance-1,ok");
   }),
 ];
diff --git a/src/types/FeatureKey.ts b/src/types/FeatureKey.ts
index 0e3cad041d..79998f4443 100644
--- a/src/types/FeatureKey.ts
+++ b/src/types/FeatureKey.ts
@@ -1,6 +1,7 @@
 export type FeatureKey =
   | "computer-soft-deletion"
   | "employee-management"
+  | "instance-reports"
   | "oidc-configuration"
   | "script-profiles"
   | "spa-dashboard"
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 392356083b..9df250111e 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -7,7 +7,6 @@ interface ImportMetaEnv {
   readonly VITE_API_URL_DEB_ARCHIVE: string;
   readonly VITE_ROOT_PATH: string;
   readonly VITE_SELF_HOSTED_ENV: string | undefined;
-  readonly VITE_REPORT_VIEW_ENABLED: string;
   readonly VITE_DETAILED_UPGRADES_VIEW_ENABLED: string;
   readonly VITE_MSW_ENABLED: string;
   readonly VITE_MSW_ENDPOINTS_TO_INTERCEPT: string;

From 4c615d2b825ee218c29918b29380153fcec7cef2 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Tue, 9 Jun 2026 13:59:48 +0200
Subject: [PATCH 02/41] initial tsv exports

---
 src/features/instances/api/index.ts           |   6 +
 .../api/instancesExportJobsShared.ts          |  78 +++
 .../api/useCancelInstancesExportJob.ts        |  46 ++
 .../api/useDiscardInstancesExportJob.ts       |  38 ++
 .../useDownloadInstancesExportJob.test.tsx    | 126 ++++
 .../api/useDownloadInstancesExportJob.ts      |  84 +++
 .../instances/api/useExportInstancesCsv.ts    |  45 ++
 .../api/useGetExportAnnotationFields.ts       |  65 ++
 .../api/useGetInstancesExportJobs.ts          |  44 ++
 .../InstancesExportDetailsPanel.module.scss   |   7 +
 .../InstancesExportDetailsPanel.test.tsx      | 161 +++++
 .../InstancesExportDetailsPanel.tsx           | 284 +++++++++
 .../ExportProgressBar.module.scss             |  57 ++
 .../ExportProgressBar.test.tsx                |  63 ++
 .../ExportProgressBar/ExportProgressBar.tsx   |  66 +++
 .../components/ExportProgressBar/index.ts     |   1 +
 .../InstancesExportDetailsPanel/index.ts      |   1 +
 .../InstancesExportForm.module.scss           |  38 ++
 .../InstancesExportForm.test.tsx              | 295 +++++++++
 .../InstancesExportForm.tsx                   | 271 +++++++++
 ...nstancesExportAnnotationFields.module.scss |   5 +
 .../InstancesExportAnnotationFields.tsx       |  78 +++
 .../InstancesExportAnnotationFields/index.ts  |   1 +
 .../SortableFieldList.module.scss             | 118 ++++
 .../SortableFieldList/SortableFieldList.tsx   | 558 ++++++++++++++++++
 .../components/SortableFieldList/index.ts     |   1 +
 .../InstancesExportForm/constants.ts          | 143 +++++
 .../InstancesExportForm/helpers.test.ts       |  30 +
 .../components/InstancesExportForm/helpers.ts | 201 +++++++
 .../components/InstancesExportForm/index.ts   |   1 +
 .../components/InstancesExportForm/types.ts   |  18 +
 .../InstancesExportNotification.module.scss   |   3 +
 .../InstancesExportNotification.test.tsx      |  69 +++
 .../InstancesExportNotification.tsx           |  71 +++
 .../InstancesExportNotification/index.ts      |   1 +
 .../InstancesHeader.module.scss               |   7 +
 .../InstancesHeader/InstancesHeader.test.tsx  |   6 +-
 .../InstancesHeader/InstancesHeader.tsx       |   6 +-
 .../InstancesPageActions.test.tsx             | 230 ++++----
 .../InstancesPageActions.tsx                  |  59 +-
 src/features/instances/helpers.test.ts        |  32 +
 src/features/instances/helpers.ts             | 139 +++++
 src/features/instances/index.ts               |   4 +
 .../instances/types/InstancesExportJob.ts     |  20 +
 .../InstancesContainer.test.tsx               |   2 +-
 .../instances/InstancesPage/InstancesPage.tsx |  20 +-
 .../instances/InstancesPage/helpers.test.ts   |  24 +-
 .../instances/InstancesPage/helpers.ts        |  68 +--
 src/styles/partials/icons.scss                |   2 +
 src/tests/mocks/instancesExport.ts            |  41 ++
 src/tests/render.tsx                          |   4 +-
 src/tests/server/handlers/index.ts            |   2 +
 src/tests/server/handlers/instancesExport.ts  | 104 ++++
 53 files changed, 3652 insertions(+), 192 deletions(-)
 create mode 100644 src/features/instances/api/instancesExportJobsShared.ts
 create mode 100644 src/features/instances/api/useCancelInstancesExportJob.ts
 create mode 100644 src/features/instances/api/useDiscardInstancesExportJob.ts
 create mode 100644 src/features/instances/api/useDownloadInstancesExportJob.test.tsx
 create mode 100644 src/features/instances/api/useDownloadInstancesExportJob.ts
 create mode 100644 src/features/instances/api/useExportInstancesCsv.ts
 create mode 100644 src/features/instances/api/useGetExportAnnotationFields.ts
 create mode 100644 src/features/instances/api/useGetInstancesExportJobs.ts
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
 create mode 100644 src/features/instances/components/InstancesExportDetailsPanel/index.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
 create mode 100644 src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
 create mode 100644 src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
 create mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
 create mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
 create mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss
 create mode 100644 src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx
 create mode 100644 src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/constants.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/helpers.test.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/helpers.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/index.ts
 create mode 100644 src/features/instances/components/InstancesExportForm/types.ts
 create mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
 create mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
 create mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
 create mode 100644 src/features/instances/components/InstancesExportNotification/index.ts
 create mode 100644 src/features/instances/helpers.test.ts
 create mode 100644 src/features/instances/types/InstancesExportJob.ts
 create mode 100644 src/tests/mocks/instancesExport.ts
 create mode 100644 src/tests/server/handlers/instancesExport.ts

diff --git a/src/features/instances/api/index.ts b/src/features/instances/api/index.ts
index e4edf417e3..305a1c66d5 100644
--- a/src/features/instances/api/index.ts
+++ b/src/features/instances/api/index.ts
@@ -2,14 +2,20 @@ export * from "./useAcceptPendingInstances";
 export * from "./useAddTagsToInstances";
 export * from "./useCreateDistributionUpgrades";
 export * from "./useEditInstance";
+export * from "./useCancelInstancesExportJob";
+export * from "./useDiscardInstancesExportJob";
+export * from "./useDownloadInstancesExportJob";
+export * from "./useExportInstancesCsv";
 export * from "./useGenerateRecoveryKey";
 export * from "./useGetAvailabilityZones";
+export * from "./useGetInstancesExportJobs";
 export * from "./useGetRecoveryKey";
 export * from "./useGetInstance";
 export * from "./useGetInstanceChildren";
 export * from "./useGetInstances";
 export * from "./useGetDistributionUpgradeTargets";
 export * from "./useGetPendingInstances";
+export * from "./useGetExportAnnotationFields";
 export * from "./useRejectPendingInstances";
 export * from "./useRemoveInstancesFromLandscape";
 export * from "./useRestartInstance";
diff --git a/src/features/instances/api/instancesExportJobsShared.ts b/src/features/instances/api/instancesExportJobsShared.ts
new file mode 100644
index 0000000000..1dc896c9cf
--- /dev/null
+++ b/src/features/instances/api/instancesExportJobsShared.ts
@@ -0,0 +1,78 @@
+import type { InstanceListParams } from "../helpers";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import type { AxiosResponse, InternalAxiosRequestConfig } from "axios";
+
+export interface CreateInstancesExportJobParams extends InstanceListParams {
+  readonly name: string;
+  readonly selected_field_ids: string[];
+}
+
+export interface InstancesExportJobsResponse {
+  readonly count: number;
+  readonly results: InstancesExportJob[];
+}
+
+export const EXPORT_JOBS_QUERY_KEY = ["instances-export-jobs"];
+export const EXPORT_JOBS_POLL_INTERVAL_MS = 5000;
+const HTTP_STATUS_OK = 200;
+
+const EXPORT_JOB_STATUS_ORDER: Record<InstancesExportJob["status"], number> = {
+  processing: 0,
+  completed: 1,
+  failed: 2,
+  canceled: 3,
+};
+
+const isVisibleExportJob = (job: InstancesExportJob) =>
+  job.status === "processing" ||
+  job.status === "completed" ||
+  job.status === "failed";
+
+export const hasProcessingExportJobs = (jobs: InstancesExportJob[]) =>
+  jobs.some((job) => job.status === "processing");
+
+export const getSortedExportJobs = (jobs: InstancesExportJob[]) =>
+  [...jobs]
+    .filter(isVisibleExportJob)
+    .sort((left, right) => {
+      if (left.status !== right.status) {
+        return EXPORT_JOB_STATUS_ORDER[left.status] -
+          EXPORT_JOB_STATUS_ORDER[right.status];
+      }
+
+      return (
+        new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()
+      );
+    });
+
+export const setExportJobsCache = (
+  current: InstancesExportJobsResponse | undefined,
+  jobs: InstancesExportJob[],
+): InstancesExportJobsResponse => {
+  const sortedJobs = getSortedExportJobs(jobs);
+
+  return {
+    ...(current ?? {}),
+    count: sortedJobs.length,
+    results: sortedJobs,
+  };
+};
+
+export const getExportJobsFromResponse = (
+  response: AxiosResponse<InstancesExportJobsResponse> | undefined,
+) => response?.data.results ?? [];
+
+export const setExportJobsResponseCache = (
+  current: AxiosResponse<InstancesExportJobsResponse> | undefined,
+  jobs: InstancesExportJob[],
+): AxiosResponse<InstancesExportJobsResponse> => ({
+  data: setExportJobsCache(current?.data, jobs),
+  status: current?.status ?? HTTP_STATUS_OK,
+  statusText: current?.statusText ?? "OK",
+  headers: current?.headers ?? {},
+  config:
+    current?.config ??
+    ({
+      headers: {},
+    } as InternalAxiosRequestConfig),
+});
diff --git a/src/features/instances/api/useCancelInstancesExportJob.ts b/src/features/instances/api/useCancelInstancesExportJob.ts
new file mode 100644
index 0000000000..2d3fe46ea9
--- /dev/null
+++ b/src/features/instances/api/useCancelInstancesExportJob.ts
@@ -0,0 +1,46 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import {
+  EXPORT_JOBS_QUERY_KEY,
+  getExportJobsFromResponse,
+  setExportJobsResponseCache,
+  type InstancesExportJobsResponse,
+} from "./instancesExportJobsShared";
+
+export const useCancelInstancesExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<
+    InstancesExportJob,
+    AxiosError<ApiError>,
+    string
+  >({
+    mutationFn: async (jobId) =>
+      (
+        await authFetch.post<InstancesExportJob>(
+          `computers/exports/${jobId}/cancel`,
+        )
+      ).data,
+    onSuccess: (_job, jobId) => {
+      queryClient.setQueryData<
+        AxiosResponse<InstancesExportJobsResponse> | undefined
+      >(
+        EXPORT_JOBS_QUERY_KEY,
+        (current) =>
+          setExportJobsResponseCache(
+            current,
+            getExportJobsFromResponse(current).filter((job) => job.id !== jobId),
+          ),
+      );
+      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+    },
+  });
+
+  return {
+    cancelInstancesExportJob: mutateAsync,
+  };
+};
diff --git a/src/features/instances/api/useDiscardInstancesExportJob.ts b/src/features/instances/api/useDiscardInstancesExportJob.ts
new file mode 100644
index 0000000000..be152c3b2e
--- /dev/null
+++ b/src/features/instances/api/useDiscardInstancesExportJob.ts
@@ -0,0 +1,38 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import {
+  EXPORT_JOBS_QUERY_KEY,
+  getExportJobsFromResponse,
+  setExportJobsResponseCache,
+  type InstancesExportJobsResponse,
+} from "./instancesExportJobsShared";
+
+export const useDiscardInstancesExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<unknown, AxiosError<ApiError>, string>({
+    mutationFn: async (jobId) => {
+      await authFetch.delete(`computers/exports/${jobId}`);
+    },
+    onSuccess: (_result, jobId) => {
+      queryClient.setQueryData<
+        AxiosResponse<InstancesExportJobsResponse> | undefined
+      >(
+        EXPORT_JOBS_QUERY_KEY,
+        (current) =>
+          setExportJobsResponseCache(
+            current,
+            getExportJobsFromResponse(current).filter((job) => job.id !== jobId),
+          ),
+      );
+      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+    },
+  });
+
+  return {
+    discardInstancesExportJob: mutateAsync,
+  };
+};
diff --git a/src/features/instances/api/useDownloadInstancesExportJob.test.tsx b/src/features/instances/api/useDownloadInstancesExportJob.test.tsx
new file mode 100644
index 0000000000..fbfc88b41f
--- /dev/null
+++ b/src/features/instances/api/useDownloadInstancesExportJob.test.tsx
@@ -0,0 +1,126 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import server from "@/tests/server";
+import { renderHookWithProviders } from "@/tests/render";
+import { API_URL } from "@/constants";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import { useDownloadInstancesExportJob } from "./useDownloadInstancesExportJob";
+import { http, HttpResponse } from "msw";
+import { setEndpointStatus } from "@/tests/controllers/controller";
+
+const job = {
+  id: "42",
+  filename: "instances-export-2026-06-08-120000.tsv",
+  name: "My export",
+  status: "completed",
+  progress: 100,
+  downloadReady: true,
+} as unknown as InstancesExportJob;
+
+const removeSaveFilePicker = () => {
+  delete (window as unknown as Record<string, unknown>).showSaveFilePicker;
+};
+
+const renderDownloadHook = () =>
+  renderHook(() => useDownloadInstancesExportJob(), {
+    wrapper: renderHookWithProviders(),
+  }).result;
+
+describe("useDownloadInstancesExportJob", () => {
+  beforeEach(() => {
+    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:mock-url");
+    vi.spyOn(URL, "revokeObjectURL").mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    removeSaveFilePicker();
+  });
+
+  it("saves to file via showSaveFilePicker when the File System Access API is available", async () => {
+    const write = vi.fn().mockResolvedValue(undefined);
+    const close = vi.fn().mockResolvedValue(undefined);
+    const createWritable = vi.fn().mockResolvedValue({ write, close });
+    const showSaveFilePicker = vi.fn().mockResolvedValue({ createWritable });
+    (window as unknown as Record<string, unknown>).showSaveFilePicker =
+      showSaveFilePicker;
+
+    const result = renderDownloadHook();
+    await result.current.downloadInstancesExportJob(job);
+
+    expect(showSaveFilePicker).toHaveBeenCalledWith({
+      suggestedName: job.filename,
+    });
+    expect(write).toHaveBeenCalledTimes(1);
+    expect(close).toHaveBeenCalledTimes(1);
+    expect(URL.createObjectURL).not.toHaveBeenCalled();
+  });
+
+  it("falls back to a blob download when the File System Access API is unavailable", async () => {
+    removeSaveFilePicker();
+
+    const result = renderDownloadHook();
+    await result.current.downloadInstancesExportJob(job);
+
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:mock-url");
+  });
+
+  it("rejects without downloading when the save dialog is cancelled", async () => {
+    const showSaveFilePicker = vi
+      .fn()
+      .mockRejectedValue(new DOMException("The user aborted", "AbortError"));
+    (window as unknown as Record<string, unknown>).showSaveFilePicker =
+      showSaveFilePicker;
+
+    const result = renderDownloadHook();
+
+    await expect(
+      result.current.downloadInstancesExportJob(job),
+    ).rejects.toMatchObject({ name: "AbortError" });
+    expect(URL.createObjectURL).not.toHaveBeenCalled();
+  });
+
+  it("throws when the server request fails", async () => {
+    setEndpointStatus({
+      status: "error",
+      path: "computers/exports/:jobId/download",
+    });
+
+    const result = renderDownloadHook();
+
+    await expect(
+      result.current.downloadInstancesExportJob(job),
+    ).rejects.toThrow();
+    expect(URL.createObjectURL).not.toHaveBeenCalled();
+  });
+
+  it("uses the job filename as the suggested save name", async () => {
+    const showSaveFilePicker = vi.fn().mockResolvedValue({
+      createWritable: vi.fn().mockResolvedValue({
+        write: vi.fn().mockResolvedValue(undefined),
+        close: vi.fn().mockResolvedValue(undefined),
+      }),
+    });
+    (window as unknown as Record<string, unknown>).showSaveFilePicker =
+      showSaveFilePicker;
+
+    server.use(
+      http.get(`${API_URL}computers/exports/:jobId/download`, () =>
+        new HttpResponse("data", {
+          headers: {
+            "Content-Disposition": `attachment; filename="${job.filename}"`,
+            "Content-Type": "text/tab-separated-values",
+          },
+        }),
+      ),
+    );
+
+    const result = renderDownloadHook();
+    await result.current.downloadInstancesExportJob(job);
+
+    expect(showSaveFilePicker).toHaveBeenCalledWith({
+      suggestedName: job.filename,
+    });
+  });
+});
diff --git a/src/features/instances/api/useDownloadInstancesExportJob.ts b/src/features/instances/api/useDownloadInstancesExportJob.ts
new file mode 100644
index 0000000000..4c35c03cb8
--- /dev/null
+++ b/src/features/instances/api/useDownloadInstancesExportJob.ts
@@ -0,0 +1,84 @@
+import { downloadInstancesCsv } from "../helpers";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import useFetch from "@/hooks/useFetch";
+import {
+  EXPORT_JOBS_QUERY_KEY,
+  getExportJobsFromResponse,
+  setExportJobsResponseCache,
+  type InstancesExportJobsResponse,
+} from "./instancesExportJobsShared";
+import type { AxiosResponse } from "axios";
+
+const DEFAULT_EXPORT_FILENAME = "instances-export.tsv";
+
+interface SaveFilePickerHandle {
+  createWritable: () => Promise<{
+    write: (data: Blob) => Promise<void>;
+    close: () => Promise<void>;
+  }>;
+}
+
+interface SaveFilePickerWindow {
+  showSaveFilePicker: (options?: {
+    suggestedName?: string;
+  }) => Promise<SaveFilePickerHandle>;
+}
+
+const supportsNativeSave = (
+  candidate: typeof window,
+): candidate is typeof window & SaveFilePickerWindow =>
+  "showSaveFilePicker" in candidate;
+
+export const useDownloadInstancesExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<
+    InstancesExportJob,
+    Error,
+    InstancesExportJob
+  >({
+    mutationFn: async (job) => {
+      const filename = job.filename || DEFAULT_EXPORT_FILENAME;
+
+      const response = await authFetch.get<Blob>(
+        `computers/exports/${job.id}/download`,
+        { responseType: "blob" },
+      );
+      const blob = response.data;
+
+      if (supportsNativeSave(window)) {
+        const handle = await window.showSaveFilePicker({
+          suggestedName: filename,
+        });
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return job;
+      }
+
+      downloadInstancesCsv({ blob, filename });
+      return job;
+    },
+    onSuccess: (_data, job) => {
+      queryClient.setQueryData<
+        AxiosResponse<InstancesExportJobsResponse> | undefined
+      >(
+        EXPORT_JOBS_QUERY_KEY,
+        (current) =>
+          setExportJobsResponseCache(
+            current,
+            getExportJobsFromResponse(current).filter(
+              (item) => item.id !== job.id,
+            ),
+          ),
+      );
+      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+    },
+  });
+
+  return {
+    downloadInstancesExportJob: mutateAsync,
+  };
+};
diff --git a/src/features/instances/api/useExportInstancesCsv.ts b/src/features/instances/api/useExportInstancesCsv.ts
new file mode 100644
index 0000000000..5a34ff8224
--- /dev/null
+++ b/src/features/instances/api/useExportInstancesCsv.ts
@@ -0,0 +1,45 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import {
+  EXPORT_JOBS_QUERY_KEY,
+  getExportJobsFromResponse,
+  setExportJobsResponseCache,
+  type CreateInstancesExportJobParams,
+  type InstancesExportJobsResponse,
+} from "./instancesExportJobsShared";
+
+export const useExportInstancesCsv = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { isPending, mutateAsync } = useMutation<
+    InstancesExportJob,
+    AxiosError<ApiError>,
+    CreateInstancesExportJobParams
+  >({
+    mutationFn: async (params) =>
+      (await authFetch.post<InstancesExportJob>("computers/export/csv", params))
+        .data,
+    onSuccess: (job) => {
+      queryClient.setQueryData<
+        AxiosResponse<InstancesExportJobsResponse> | undefined
+      >(
+        EXPORT_JOBS_QUERY_KEY,
+        (current) =>
+          setExportJobsResponseCache(current, [
+            job,
+            ...getExportJobsFromResponse(current),
+          ]),
+      );
+      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+    },
+  });
+
+  return {
+    exportInstancesCsv: mutateAsync,
+    isExportInstancesCsvLoading: isPending,
+  };
+};
diff --git a/src/features/instances/api/useGetExportAnnotationFields.ts b/src/features/instances/api/useGetExportAnnotationFields.ts
new file mode 100644
index 0000000000..338925cf15
--- /dev/null
+++ b/src/features/instances/api/useGetExportAnnotationFields.ts
@@ -0,0 +1,65 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { InstanceListParams } from "../helpers";
+
+export interface ExportAnnotationFieldOption {
+  readonly id: string;
+  readonly label: string;
+  readonly annotation_key: string;
+}
+
+const buildAnnotationFieldParams = ({
+  params,
+}: {
+  params: InstanceListParams;
+}) => {
+  const searchParams = new URLSearchParams();
+
+  if (params.query) {
+    searchParams.set("query", params.query);
+  }
+  if (params.archived_only !== undefined) {
+    searchParams.set("archived_only", String(params.archived_only));
+  }
+  if (params.wsl_children !== undefined) {
+    searchParams.set("wsl_children", String(params.wsl_children));
+  }
+  if (params.wsl_parents !== undefined) {
+    searchParams.set("wsl_parents", String(params.wsl_parents));
+  }
+
+  return searchParams;
+};
+
+interface ExportAnnotationFieldResponse {
+  readonly results: ExportAnnotationFieldOption[];
+}
+
+export const useGetExportAnnotationFields = (params: InstanceListParams) => {
+  const authFetch = useFetch();
+
+  const { data: response, error, isError, isPending } = useQuery<
+    AxiosResponse<ExportAnnotationFieldResponse>,
+    AxiosError<ApiError>
+  >({
+    queryKey: ["instance-export-annotation-fields", params],
+    queryFn: ({ signal }) =>
+      authFetch.get<ExportAnnotationFieldResponse>(
+        "computers/export/annotations",
+        {
+          params,
+          paramsSerializer: () => buildAnnotationFieldParams({ params }).toString(),
+          signal,
+        },
+      ),
+  });
+
+  return {
+    exportAnnotationFields: response?.data.results ?? [],
+    exportAnnotationFieldsError: error,
+    isErrorExportAnnotationFields: isError,
+    isGettingExportAnnotationFields: isPending,
+  };
+};
diff --git a/src/features/instances/api/useGetInstancesExportJobs.ts b/src/features/instances/api/useGetInstancesExportJobs.ts
new file mode 100644
index 0000000000..a161e55ce4
--- /dev/null
+++ b/src/features/instances/api/useGetInstancesExportJobs.ts
@@ -0,0 +1,44 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import {
+  EXPORT_JOBS_POLL_INTERVAL_MS,
+  EXPORT_JOBS_QUERY_KEY,
+  getExportJobsFromResponse,
+  getSortedExportJobs,
+  hasProcessingExportJobs,
+  type InstancesExportJobsResponse,
+} from "./instancesExportJobsShared";
+
+export const useGetInstancesExportJobs = () => {
+  const authFetch = useFetch();
+
+  const { data: response, dataUpdatedAt } = useQuery<
+    AxiosResponse<InstancesExportJobsResponse>,
+    AxiosError<ApiError>
+  >({
+    queryKey: EXPORT_JOBS_QUERY_KEY,
+    queryFn: async () =>
+      authFetch.get<InstancesExportJobsResponse>("computers/exports"),
+    refetchInterval: (query) =>
+      hasProcessingExportJobs(getExportJobsFromResponse(query.state.data))
+        ? EXPORT_JOBS_POLL_INTERVAL_MS
+        : false,
+    refetchIntervalInBackground: true,
+  });
+
+  const exportJobs = getSortedExportJobs(getExportJobsFromResponse(response));
+
+  return {
+    exportJobs,
+    // Timestamp (ms) of the last successful fetch — used as the anchor for the
+    // client-side ETA countdown between polls.
+    dataUpdatedAt,
+    processingExportJobsCount: exportJobs.filter(
+      (job) => job.status === "processing",
+    ).length,
+    readyExportJobsCount: exportJobs.filter((job) => job.status === "completed")
+      .length,
+  };
+};
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
new file mode 100644
index 0000000000..9c4f63c51d
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
@@ -0,0 +1,7 @@
+.table {
+  margin-top: 1rem;
+}
+
+.emptyState {
+  margin-top: 1rem;
+}
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
new file mode 100644
index 0000000000..845cb6d7ef
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
@@ -0,0 +1,161 @@
+import server from "@/tests/server";
+import { renderWithProviders } from "@/tests/render";
+import { API_URL } from "@/constants";
+import {
+  completedExportJob,
+  failedExportJob,
+  processingExportJob,
+} from "@/tests/mocks/instancesExport";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import InstancesExportDetailsPanel from "./InstancesExportDetailsPanel";
+
+describe("InstancesExportDetailsPanel", () => {
+  it("renders an empty state when there are no export jobs", async () => {
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    expect(
+      await screen.findByText(/no tsv exports in progress/i),
+    ).toBeInTheDocument();
+  });
+
+  it("renders tracked processing and completed exports", async () => {
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({
+          count: 2,
+          results: [processingExportJob, completedExportJob],
+        }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    expect(
+      await screen.findByText(processingExportJob.name),
+    ).toBeInTheDocument();
+    expect(screen.getByText(completedExportJob.name)).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    expect(screen.getByText("35%")).toBeInTheDocument();
+    expect(screen.getByText("Estimating...")).toBeInTheDocument();
+    expect(screen.getByText(/^ready$/i)).toBeInTheDocument();
+  });
+
+  it("renders failed exports and hides canceled exports", async () => {
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [failedExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    expect(await screen.findByText(failedExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText(/^failed$/i)).toBeInTheDocument();
+    expect(
+      screen.queryByText(/generating \(100%\)/i),
+    ).not.toBeInTheDocument();
+  });
+
+  it("discards a failed export and shows a confirmation notification", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [failedExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    await user.click(
+      await screen.findByRole("button", {
+        name: new RegExp(`actions for ${failedExportJob.name}`, "i"),
+      }),
+    );
+    await user.click(screen.getByRole("menuitem", { name: /discard/i }));
+
+    expect(
+      await screen.findByText(/tsv discarded/i),
+    ).toBeInTheDocument();
+  });
+
+  it("cancels an in-progress export and shows a confirmation notification", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [processingExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    await user.click(
+      await screen.findByRole("button", {
+        name: new RegExp(`actions for ${processingExportJob.name}`, "i"),
+      }),
+    );
+    await user.click(screen.getByRole("menuitem", { name: /cancel/i }));
+
+    expect(
+      await screen.findByText(/tsv generation cancelled/i),
+    ).toBeInTheDocument();
+  });
+
+  it("downloads a completed export and shows a confirmation notification", async () => {
+    const user = userEvent.setup();
+    const write = vi.fn().mockResolvedValue(undefined);
+    const close = vi.fn().mockResolvedValue(undefined);
+    const showSaveFilePicker = vi
+      .fn()
+      .mockResolvedValue({ createWritable: vi.fn().mockResolvedValue({ write, close }) });
+    (window as unknown as Record<string, unknown>).showSaveFilePicker =
+      showSaveFilePicker;
+
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [completedExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    await user.click(
+      await screen.findByRole("button", {
+        name: new RegExp(`actions for ${completedExportJob.name}`, "i"),
+      }),
+    );
+    await user.click(screen.getByRole("menuitem", { name: /download/i }));
+
+    await waitFor(() => {
+      expect(write).toHaveBeenCalledTimes(1);
+    });
+    expect(
+      await screen.findByText(/tsv download started/i),
+    ).toBeInTheDocument();
+
+    delete (window as unknown as Record<string, unknown>).showSaveFilePicker;
+  });
+
+  it("discards a completed export without downloading it", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [completedExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportDetailsPanel />);
+
+    await user.click(
+      await screen.findByRole("button", {
+        name: new RegExp(`actions for ${completedExportJob.name}`, "i"),
+      }),
+    );
+    await user.click(screen.getByRole("menuitem", { name: /discard/i }));
+
+    expect(
+      await screen.findByText(/tsv discarded/i),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
new file mode 100644
index 0000000000..8e4ecd792e
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
@@ -0,0 +1,284 @@
+import {
+  useCancelInstancesExportJob,
+  useDiscardInstancesExportJob,
+  useDownloadInstancesExportJob,
+  useGetInstancesExportJobs,
+} from "../../api";
+import ListActions, {
+  LIST_ACTIONS_COLUMN_PROPS,
+} from "@/components/layout/ListActions";
+import TruncatedCell from "@/components/layout/TruncatedCell";
+import { useExpandableRow } from "@/hooks/useExpandableRow";
+import useNotify from "@/hooks/useNotify";
+import { ModularTable, Notification } from "@canonical/react-components";
+import { useEffect, useMemo, useState, type FC } from "react";
+import type { CellProps, Column } from "react-table";
+import { createTablePropGetters } from "@/utils/table";
+import type { InstancesExportJob } from "../../types/InstancesExportJob";
+import ExportProgressBar from "./components/ExportProgressBar";
+import classes from "./InstancesExportDetailsPanel.module.scss";
+
+const MS_PER_SECOND = 1000;
+
+interface RowData extends Record<string, unknown> {
+  readonly job: InstancesExportJob;
+  readonly title: string;
+  readonly name: string;
+  readonly statusLabel: string;
+  readonly secondsRemaining: number | null;
+  readonly instanceCount: number;
+  readonly attributes: string[];
+}
+
+const { getCellProps, getRowProps } = createTablePropGetters<RowData>({
+  itemTypeName: "export row",
+  headerColumnId: "name",
+});
+
+const getExportJobStatusLabel = (job: InstancesExportJob) => {
+  switch (job.status) {
+    case "completed":
+      return "Ready";
+    case "failed":
+      return "Failed";
+    case "canceled":
+      return "Canceled";
+    case "processing":
+    default:
+      return `Generating (${job.progress}%)`;
+  }
+};
+
+const getExportJobStatusIcon = (job: InstancesExportJob): string | false => {
+  switch (job.status) {
+    case "completed":
+      return "status-succeeded-small";
+    case "failed":
+      return "status-failed-small";
+    case "canceled":
+      return "status-queued-small";
+    case "processing":
+    default:
+      // Processing rows render a progress bar instead of an icon + label.
+      return false;
+  }
+};
+
+const InstancesExportDetailsPanel: FC = () => {
+  const { notify } = useNotify();
+  const { expandedColumnId, expandedRowIndex, getTableRowsRef, handleExpand } =
+    useExpandableRow<HTMLTableRowElement>();
+  const { exportJobs, dataUpdatedAt, processingExportJobsCount } =
+    useGetInstancesExportJobs();
+  const { cancelInstancesExportJob } = useCancelInstancesExportJob();
+  const { discardInstancesExportJob } = useDiscardInstancesExportJob();
+  const { downloadInstancesExportJob } = useDownloadInstancesExportJob();
+
+  // Tick once a second so the ETA counts down between the 5s server polls.
+  // Anchored to dataUpdatedAt (last fetch) to stay correct without relying on
+  // server/client clock alignment. Only runs while something is processing.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (processingExportJobsCount === 0) {
+      return;
+    }
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, MS_PER_SECOND);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [processingExportJobsCount]);
+
+  const columns = useMemo<Column<RowData>[]>(
+    () => [
+      {
+        Header: "Name",
+        accessor: "name",
+      },
+      {
+        Header: "Status",
+        accessor: "statusLabel",
+        Cell: ({ row }: CellProps<RowData>) => {
+          const { job, statusLabel, secondsRemaining } = row.original;
+          if (job.status === "processing") {
+            return (
+              <ExportProgressBar
+                progress={job.progress}
+                secondsRemaining={secondsRemaining}
+              />
+            );
+          }
+          return statusLabel;
+        },
+        getCellIcon: ({ row }: CellProps<RowData>) =>
+          getExportJobStatusIcon(row.original.job),
+      },
+      {
+        Header: "Attributes",
+        accessor: "attributes",
+        meta: {
+          ariaLabel: "Attributes",
+          isExpandable: true,
+        },
+        Cell: ({ row }: CellProps<RowData>) => (
+          <TruncatedCell
+            content={row.original.attributes.map((attribute) => (
+              <span className="truncatedItem" key={attribute}>
+                {attribute}
+              </span>
+            ))}
+            isExpanded={
+              row.index === expandedRowIndex &&
+              expandedColumnId === "attributes"
+            }
+            onExpand={() => {
+              handleExpand(row.index, "attributes");
+            }}
+            showCount
+          />
+        ),
+      },
+      {
+        Header: "Instances",
+        accessor: "instanceCount",
+      },
+      {
+        ...LIST_ACTIONS_COLUMN_PROPS,
+        accessor: "job.id",
+        Cell: ({ row }: CellProps<RowData>) => {
+          const { job } = row.original;
+          const actions =
+            job.status === "completed"
+              ? [
+                  {
+                    icon: "begin-downloading",
+                    label: "Download",
+                    onClick: async () => {
+                      try {
+                        await downloadInstancesExportJob(job);
+                      } catch (error) {
+                        if (
+                          error instanceof DOMException &&
+                          error.name === "AbortError"
+                        ) {
+                          // The user cancelled the save dialog; nothing was downloaded.
+                          return;
+                        }
+                        throw error;
+                      }
+
+                      notify.success({
+                        title: "TSV download started",
+                        message: `${job.name} has been downloaded and removed from the export list.`,
+                      });
+                    },
+                  },
+                ]
+              : [];
+          const destructiveActions =
+            job.status === "processing"
+              ? [
+                  {
+                    icon: "close",
+                    label: "Cancel",
+                    onClick: async () => {
+                      await cancelInstancesExportJob(job.id);
+                      notify.info({
+                        title: "TSV generation cancelled",
+                        message: `${job.name} has been cancelled and removed from the export list.`,
+                      });
+                    },
+                  },
+                ]
+              : [
+                  {
+                    icon: "delete",
+                    label: "Discard",
+                    onClick: async () => {
+                      await discardInstancesExportJob(job.id);
+                      notify.info({
+                        title: "TSV discarded",
+                        message: `${job.name} has been discarded and removed from the export list.`,
+                      });
+                    },
+                  },
+                ];
+
+          return (
+            <ListActions
+              actions={actions}
+              destructiveActions={destructiveActions}
+              toggleAriaLabel={`Actions for ${job.name}`}
+            />
+          );
+        },
+      },
+    ],
+    [
+      cancelInstancesExportJob,
+      discardInstancesExportJob,
+      downloadInstancesExportJob,
+      expandedColumnId,
+      expandedRowIndex,
+      handleExpand,
+      notify,
+    ],
+  );
+
+  const data = useMemo<RowData[]>(
+    () =>
+      exportJobs.map((job) => {
+        // Count the ETA down locally from the value captured at the last fetch.
+        const secondsRemaining =
+          job.estimatedSecondsRemaining == null
+            ? null
+            : Math.max(
+                0,
+                job.estimatedSecondsRemaining -
+                  (now - dataUpdatedAt) / MS_PER_SECOND,
+              );
+
+        return {
+          job,
+          title: job.name,
+          name: job.name,
+          statusLabel: getExportJobStatusLabel(job),
+          secondsRemaining,
+          instanceCount: job.instanceCount,
+          attributes: job.attributeLabels,
+        };
+      }),
+    [exportJobs, now, dataUpdatedAt],
+  );
+
+  return (
+    <>
+      <Notification
+        inline
+        severity="caution"
+        title="TSV downloads are single-use:"
+      >
+        Once you download a TSV, it is discarded and cannot be downloaded again.
+      </Notification>
+      {exportJobs.length ? (
+        <div ref={getTableRowsRef}>
+          <ModularTable
+            className={classes.table}
+            columns={columns}
+            data={data}
+            getCellProps={getCellProps(expandedRowIndex, expandedColumnId)}
+            getRowProps={getRowProps(expandedRowIndex)}
+            sortable={false}
+          />
+        </div>
+      ) : (
+        <p className={classes.emptyState}>
+          You have no TSV exports in progress or waiting to be downloaded.
+        </p>
+      )}
+    </>
+  );
+};
+
+export default InstancesExportDetailsPanel;
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
new file mode 100644
index 0000000000..1d716d776f
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
@@ -0,0 +1,57 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  gap: $sph--small;
+  min-width: 16rem;
+  width: 100%;
+}
+
+// Track for the unfilled remainder: a light base with subtle diagonal hatching.
+.bar {
+  background-color: #f2f3f5;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 6px,
+    rgba(0, 0, 0, 0.05) 6px,
+    rgba(0, 0, 0, 0.05) 12px
+  );
+  border-radius: 4px;
+  flex: 1 1 auto;
+  height: 1.5rem;
+  overflow: hidden;
+  position: relative;
+}
+
+// Filled portion. Width is set inline from the progress percentage.
+.fill {
+  align-items: center;
+  background-color: $color-positive;
+  border-radius: 4px;
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  min-width: 2.5rem;
+  transition: width 0.3s ease;
+}
+
+// The percentage label, rendered as a lighter rounded "thumb" at the fill edge.
+.percentage {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  margin-right: 0.25rem;
+  padding: 0.2rem 0.4rem;
+}
+
+.eta {
+  color: $color-mid-dark;
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
new file mode 100644
index 0000000000..c49e82ec31
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import ExportProgressBar, { formatSecondsRemaining } from "./ExportProgressBar";
+
+describe("ExportProgressBar", () => {
+  it("renders the percentage inside the bar and reflects it on the progressbar role", () => {
+    render(<ExportProgressBar progress={35} secondsRemaining={120} />);
+
+    expect(screen.getByText("35%")).toBeInTheDocument();
+    const bar = screen.getByRole("progressbar");
+    expect(bar).toHaveAttribute("aria-valuenow", "35");
+    expect(bar).toHaveAttribute("aria-valuemin", "0");
+    expect(bar).toHaveAttribute("aria-valuemax", "100");
+  });
+
+  it("clamps out-of-range progress values", () => {
+    const { rerender } = render(
+      <ExportProgressBar progress={-10} secondsRemaining={null} />,
+    );
+    expect(screen.getByText("0%")).toBeInTheDocument();
+
+    rerender(<ExportProgressBar progress={150} secondsRemaining={null} />);
+    expect(screen.getByText("100%")).toBeInTheDocument();
+  });
+
+  it("shows 'Estimating...' when there is no estimate yet", () => {
+    render(<ExportProgressBar progress={0} secondsRemaining={null} />);
+    expect(screen.getByText("Estimating...")).toBeInTheDocument();
+  });
+
+  it("shows 'Almost done' for very small estimates", () => {
+    render(<ExportProgressBar progress={98} secondsRemaining={3} />);
+    expect(screen.getByText("Almost done")).toBeInTheDocument();
+  });
+
+  it("formats the remaining time to the right of the bar", () => {
+    render(<ExportProgressBar progress={50} secondsRemaining={150} />);
+    expect(screen.getByText("2m 30s left")).toBeInTheDocument();
+  });
+});
+
+const FORTY_FIVE_SECONDS = 45;
+const TWO_MINUTES = 120;
+const TWO_AND_A_HALF_MINUTES = 150;
+const NEGATIVE_DURATION = -30;
+
+describe("formatSecondsRemaining", () => {
+  it("formats sub-minute durations in seconds", () => {
+    expect(formatSecondsRemaining(0)).toBe("0s left");
+    expect(formatSecondsRemaining(FORTY_FIVE_SECONDS)).toBe("45s left");
+  });
+
+  it("formats whole minutes without trailing seconds", () => {
+    expect(formatSecondsRemaining(TWO_MINUTES)).toBe("2m left");
+  });
+
+  it("formats minutes with remaining seconds", () => {
+    expect(formatSecondsRemaining(TWO_AND_A_HALF_MINUTES)).toBe("2m 30s left");
+  });
+
+  it("never returns a negative duration", () => {
+    expect(formatSecondsRemaining(NEGATIVE_DURATION)).toBe("0s left");
+  });
+});
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
new file mode 100644
index 0000000000..23d0c13609
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
@@ -0,0 +1,66 @@
+import type { FC } from "react";
+import classes from "./ExportProgressBar.module.scss";
+
+const SECONDS_PER_MINUTE = 60;
+// Below this, a precise countdown reads as noise — show "Almost done" instead.
+const ALMOST_DONE_THRESHOLD_SECONDS = 5;
+const MAX_PROGRESS = 100;
+
+export const formatSecondsRemaining = (seconds: number): string => {
+  const safe = Math.max(0, Math.round(seconds));
+
+  if (safe < SECONDS_PER_MINUTE) {
+    return `${safe}s left`;
+  }
+
+  const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
+  const remainderSeconds = safe % SECONDS_PER_MINUTE;
+
+  return remainderSeconds
+    ? `${minutes}m ${remainderSeconds}s left`
+    : `${minutes}m left`;
+};
+
+const getEtaLabel = (secondsRemaining: number | null): string => {
+  if (secondsRemaining === null) {
+    return "Estimating...";
+  }
+
+  if (secondsRemaining <= ALMOST_DONE_THRESHOLD_SECONDS) {
+    return "Almost done";
+  }
+
+  return formatSecondsRemaining(secondsRemaining);
+};
+
+interface ExportProgressBarProps {
+  readonly progress: number;
+  readonly secondsRemaining: number | null;
+}
+
+const ExportProgressBar: FC<ExportProgressBarProps> = ({
+  progress,
+  secondsRemaining,
+}) => {
+  const clampedProgress = Math.min(MAX_PROGRESS, Math.max(0, Math.round(progress)));
+
+  return (
+    <div className={classes.wrapper}>
+      <div
+        className={classes.bar}
+        role="progressbar"
+        aria-valuenow={clampedProgress}
+        aria-valuemin={0}
+        aria-valuemax={MAX_PROGRESS}
+        aria-label="Export progress"
+      >
+        <div className={classes.fill} style={{ width: `${clampedProgress}%` }}>
+          <span className={classes.percentage}>{clampedProgress}%</span>
+        </div>
+      </div>
+      <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
+    </div>
+  );
+};
+
+export default ExportProgressBar;
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
new file mode 100644
index 0000000000..d5f2ddaf0a
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportProgressBar";
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/index.ts b/src/features/instances/components/InstancesExportDetailsPanel/index.ts
new file mode 100644
index 0000000000..20d402ae51
--- /dev/null
+++ b/src/features/instances/components/InstancesExportDetailsPanel/index.ts
@@ -0,0 +1 @@
+export { default } from "./InstancesExportDetailsPanel";
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss b/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
new file mode 100644
index 0000000000..77b9e12dfd
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
@@ -0,0 +1,38 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+.description {
+  margin-bottom: $spv--large;
+}
+
+.stepOneFields {
+  display: grid;
+  gap: $spv--medium;
+  margin-bottom: $spv--large;
+}
+
+.optionList {
+  display: grid;
+  gap: $sph--small;
+}
+
+.emptyState {
+  color: $colors--theme--text-muted;
+  margin-top: $spv--small;
+}
+
+:global(.p-accordion__tab) {
+  padding-right: $sph--x-large !important;
+}
+
+:global(.p-accordion__tab)::before {
+  margin-right: 0 !important;
+  position: absolute !important;
+  right: 1.5rem !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+}
+
+:global(.p-accordion__tab[aria-expanded="false"])::before {
+  transform: translateY(-50%) rotate(-90deg) !important;
+}
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
new file mode 100644
index 0000000000..97518966b3
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -0,0 +1,295 @@
+import server from "@/tests/server";
+import useSidePanel from "@/hooks/useSidePanel";
+import useNotify from "@/hooks/useNotify";
+import { API_URL } from "@/constants";
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { http, HttpResponse } from "msw";
+import InstancesExportForm from "./InstancesExportForm";
+
+const closeSidePanel = vi.fn();
+const notify = {
+  clear: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  success: vi.fn(),
+  notification: null,
+};
+
+vi.mock("@/hooks/useSidePanel");
+vi.mock("@/hooks/useNotify");
+
+describe("InstancesExportForm", () => {
+  beforeEach(() => {
+    closeSidePanel.mockReset();
+    vi.mocked(useSidePanel, { partial: true }).mockReturnValue({
+      closeSidePanel,
+    });
+    vi.mocked(useNotify).mockReturnValue({
+      notify,
+      sidePanel: {
+        open: false,
+        setOpen: vi.fn(),
+      },
+    });
+    notify.info.mockReset();
+    notify.success.mockReset();
+    notify.error.mockReset();
+    notify.clear.mockReset();
+  });
+
+  it("shows step 1 with attribute groups in accordions", () => {
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    expect(
+      screen.getByText(/select the attributes you want to include/i),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Export name")).toBeInTheDocument();
+    expect(screen.getByLabelText("Search attributes")).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: /primary identity/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", {
+        name: /granular metadata & deep diagnostics/i,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Annotations")).toBeInTheDocument();
+  });
+
+  it("disables Next button when no fields are selected", () => {
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Next" })).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+
+    expect(screen.getByLabelText("Export name")).toHaveValue("");
+  });
+
+  it("filters attributes in step 1", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Search attributes"), "host");
+
+    expect(screen.getByLabelText("Hostname")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Instance name")).not.toBeInTheDocument();
+  });
+
+  it("does not match parent group titles when filtering attributes", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Search attributes"), "primary");
+
+    expect(
+      screen.getByText("No attributes match your search."),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("tab", { name: /primary identity/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows attribute validation with error styling", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Export name"), "Weekly export");
+    await user.click(screen.getByLabelText("Instance name"));
+    await user.click(screen.getByLabelText("Instance name"));
+
+    expect(screen.getByText("Select at least one attribute")).toHaveClass(
+      "p-form-validation__message",
+    );
+  });
+
+  it("moves to step 2 showing reorder table when Next is clicked", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Export name"), "Weekly export");
+    await user.click(screen.getByLabelText("Instance name"));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(
+      screen.getByText(/review and reorder the columns/i),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Order for Instance name")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
+  });
+
+  it("allows going back from step 2 to step 1", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Export name"), "Weekly export");
+    await user.click(screen.getByLabelText("Instance name"));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(
+      screen.getByRole("button", { name: "Next" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps the order input focused while typing", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Export name"), "Weekly export");
+    await user.click(screen.getByLabelText("Instance name"));
+    await user.click(screen.getByLabelText("Hostname"));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    const orderInput = screen.getByLabelText("Order for Hostname");
+
+    await user.click(orderInput);
+    await user.keyboard("{Backspace}1");
+
+    expect(orderInput).toHaveFocus();
+    expect(orderInput).toHaveValue(1);
+  });
+
+  it("queues an export, closes the side panel, and shows a toast", async () => {
+    const user = userEvent.setup();
+    let capturedBody: unknown = null;
+    server.use(
+      http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
+        capturedBody = await request.json();
+        return HttpResponse.json(
+          {
+            id: "job-1",
+            name: "Weekly export",
+            filename: "instances-export.tsv",
+            instanceCount: 8,
+            attributeLabels: ["Instance name"],
+            selectedFieldIds: ["title"],
+            createdAt: "2026-06-03T12:10:00.000Z",
+            status: "processing",
+            progress: 0,
+            downloadReady: false,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={8}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Export name"), "Weekly export");
+    await user.click(screen.getByLabelText("Instance name"));
+    await user.click(screen.getByLabelText("Annotations"));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    expect(closeSidePanel).toHaveBeenCalled();
+    expect(notify.info).toHaveBeenCalledWith(
+      expect.objectContaining({ title: "TSV export in progress" }),
+    );
+    expect(capturedBody).toMatchObject({
+      name: "Weekly export",
+      query: "name:prod",
+      selected_field_ids: ["title", "annotations"],
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
new file mode 100644
index 0000000000..19021e22a7
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -0,0 +1,271 @@
+import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
+import useDebug from "@/hooks/useDebug";
+import useNotify from "@/hooks/useNotify";
+import useSidePanel from "@/hooks/useSidePanel";
+import { getFormikError } from "@/utils/formikErrors";
+import {
+  Accordion,
+  CheckboxInput,
+  Form,
+  Input,
+} from "@canonical/react-components";
+import { useFormik } from "formik";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  type FC,
+} from "react";
+import { useExportInstancesCsv } from "../../api/useExportInstancesCsv";
+import type { InstanceListParams } from "../../helpers";
+import classes from "./InstancesExportForm.module.scss";
+import { INITIAL_VALUES, VALIDATION_SCHEMA } from "./constants";
+import { EXPORT_FIELD_GROUPS } from "./constants";
+import { buildExportQuery } from "./helpers";
+import type {
+  ExportField,
+  InstancesExportFormValues,
+  StepIndex,
+} from "./types";
+import classNames from "classnames";
+import SortableFieldList from "./components/SortableFieldList";
+
+interface InstancesExportFormProps {
+  readonly exportParams: InstanceListParams;
+  readonly instanceCount: number | undefined;
+  readonly selectedInstanceCount?: number;
+  readonly selectedInstanceIds?: number[];
+}
+
+const InstancesExportForm: FC<InstancesExportFormProps> = ({
+  exportParams,
+  instanceCount: _instanceCount,
+  selectedInstanceCount: _selectedInstanceCount,
+  selectedInstanceIds,
+}) => {
+  const { closeSidePanel } = useSidePanel();
+  const { notify } = useNotify();
+  const debug = useDebug();
+  const { exportInstancesCsv, isExportInstancesCsvLoading } =
+    useExportInstancesCsv();
+  const [step, setStep] = useState<StepIndex>(0);
+  const [attributeSearch, setAttributeSearch] = useState("");
+  const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
+
+  const formik = useFormik<InstancesExportFormValues>({
+    initialValues: INITIAL_VALUES,
+    validationSchema: VALIDATION_SCHEMA,
+    onSubmit: async (values) => {
+      const selectedFields = EXPORT_FIELD_GROUPS.flatMap(
+        (group) => group.fields,
+      ).filter((field) => values.selectedFieldIds.includes(field.id));
+
+      if (step === 0) {
+        setOrderedFields(selectedFields);
+        setStep(1);
+        return;
+      }
+
+      const fieldsToExport = orderedFields.length
+        ? orderedFields
+        : selectedFields;
+      const query = buildExportQuery({
+        query: exportParams.query,
+        selectedInstanceIds,
+      });
+
+      try {
+        await exportInstancesCsv({
+          name: values.name.trim(),
+          query,
+          archived_only: exportParams.archived_only,
+          wsl_children: exportParams.wsl_children,
+          wsl_parents: exportParams.wsl_parents,
+          selected_field_ids: fieldsToExport.map((field) => field.id),
+        });
+
+        closeSidePanel();
+        notify.info({
+          title: "TSV export in progress",
+          message: `Your instances export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated. You can track it from the instances page.`,
+        });
+      } catch (error) {
+        debug(error);
+      }
+    },
+  });
+
+  const toggleField = useCallback(
+    (fieldId: string) => {
+      const nextSelectedFieldIds = formik.values.selectedFieldIds.includes(
+        fieldId,
+      )
+        ? formik.values.selectedFieldIds.filter((id) => id !== fieldId)
+        : [...formik.values.selectedFieldIds, fieldId];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const toggleGroupSelect = useCallback(
+    (groupFields: readonly ExportField[]) => {
+      const groupIds = groupFields.map((field) => field.id);
+      const allSelected = groupIds.every((id) =>
+        formik.values.selectedFieldIds.includes(id),
+      );
+
+      const nextSelectedFieldIds = allSelected
+        ? formik.values.selectedFieldIds.filter((id) => !groupIds.includes(id))
+        : [...new Set([...formik.values.selectedFieldIds, ...groupIds])];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const filteredFieldGroups = useMemo(() => {
+    const normalizedSearch = attributeSearch.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return EXPORT_FIELD_GROUPS;
+    }
+
+    return EXPORT_FIELD_GROUPS.flatMap((group) => {
+      const matchingFields = group.fields.filter((field) =>
+        field.label.toLowerCase().includes(normalizedSearch),
+      );
+
+      if (!matchingFields.length) {
+        return [];
+      }
+
+      return [{ ...group, fields: matchingFields }];
+    });
+  }, [attributeSearch]);
+
+  const accordionSections = filteredFieldGroups.map((group) => {
+    const groupIds = group.fields.map((field) => field.id);
+    const allSelected = groupIds.every((id) =>
+      formik.values.selectedFieldIds.includes(id),
+    );
+    const someSelected =
+      !allSelected &&
+      groupIds.some((id) => formik.values.selectedFieldIds.includes(id));
+
+    return {
+      key: group.key,
+      title: (
+        <CheckboxInput
+          label={group.title}
+          checked={allSelected}
+          indeterminate={someSelected}
+          aria-label={`${group.title} select all`}
+          onChange={() => {
+            toggleGroupSelect(group.fields);
+          }}
+        />
+      ),
+      content: (
+        <div className={classes.optionList}>
+          {group.fields.map((field) => (
+            <CheckboxInput
+              key={field.id}
+              checked={formik.values.selectedFieldIds.includes(field.id)}
+              label={field.label}
+              onChange={() => {
+                toggleField(field.id);
+              }}
+            />
+          ))}
+        </div>
+      ),
+    };
+  });
+
+  const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
+
+  const stepContent =
+    step === 0 ? (
+      <>
+        <div className={classes.stepOneFields}>
+          <Input
+            type="text"
+            label="Export name"
+            required
+            error={getFormikError(formik, "name")}
+            {...formik.getFieldProps("name")}
+          />
+          <Input
+            type="search"
+            label="Search attributes"
+            placeholder="Search attributes"
+            value={attributeSearch}
+            onChange={(event) => {
+              setAttributeSearch(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+              }
+            }}
+          />
+        </div>
+        <div className={classNames({ "is-error": !!selectedFieldIdsError })}>
+          {!!selectedFieldIdsError && (
+            <p className="p-form-validation__message">
+              {selectedFieldIdsError}
+            </p>
+          )}
+          {filteredFieldGroups.length ? (
+            <Accordion sections={accordionSections} titleElement="h5" />
+          ) : (
+            <p className={classes.emptyState}>
+              No attributes match your search.
+            </p>
+          )}
+        </div>
+      </>
+    ) : (
+      <SortableFieldList
+        fields={orderedFields}
+        onOrderChange={setOrderedFields}
+      />
+    );
+
+  return (
+    <Form noValidate onSubmit={formik.handleSubmit}>
+      <p className={classes.description}>
+        {step === 0
+          ? "Name your export, select the attributes you want to include, and filter the list if needed."
+          : "Review your selected columns before generating the export."}
+      </p>
+
+      {stepContent}
+
+      <SidePanelFormButtons
+        hasBackButton={step === 1}
+        onBackButtonPress={
+          step === 1
+            ? () => {
+                setStep(0);
+              }
+            : undefined
+        }
+        submitButtonDisabled={
+          (step === 0 &&
+            (!formik.values.name.trim() ||
+              formik.values.selectedFieldIds.length === 0)) ||
+          isExportInstancesCsvLoading ||
+          formik.isSubmitting
+        }
+        submitButtonText={step === 0 ? "Next" : "Generate TSV"}
+        onCancel={closeSidePanel}
+      />
+    </Form>
+  );
+};
+
+export default InstancesExportForm;
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
new file mode 100644
index 0000000000..808a93d9a9
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
@@ -0,0 +1,5 @@
+@import "vanilla-framework/scss/settings_spacing";
+
+.helperText {
+  margin-top: $spv--small;
+}
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
new file mode 100644
index 0000000000..4ddd1fb827
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
@@ -0,0 +1,78 @@
+import { TableFilter } from "@/components/filter";
+import LoadingState from "@/components/layout/LoadingState";
+import { useGetExportAnnotationFields } from "../../../../api";
+import type { FC } from "react";
+import { useState } from "react";
+import type { InstanceListParams } from "../../../../helpers";
+import classes from "./InstancesExportAnnotationFields.module.scss";
+
+interface InstancesExportAnnotationFieldsProps {
+  readonly exportParams: InstanceListParams;
+  readonly selectedAnnotationFieldIds: string[];
+  readonly onSelectedAnnotationFieldIdsChange: (
+    nextAnnotationFieldIds: string[],
+  ) => void;
+}
+
+const InstancesExportAnnotationFields: FC<
+  InstancesExportAnnotationFieldsProps
+> = ({
+  exportParams,
+  selectedAnnotationFieldIds,
+  onSelectedAnnotationFieldIdsChange,
+}) => {
+  const [searchText, setSearchText] = useState("");
+  const {
+    exportAnnotationFields,
+    isErrorExportAnnotationFields,
+    isGettingExportAnnotationFields,
+  } = useGetExportAnnotationFields(exportParams);
+
+  const filteredAnnotationFields = exportAnnotationFields.filter(({ label }) =>
+    label.toLowerCase().includes(searchText.trim().toLowerCase()),
+  );
+
+  if (isGettingExportAnnotationFields && exportAnnotationFields.length === 0) {
+    return (
+      <p className={classes.helperText}>
+        <LoadingState inline /> Loading available annotation columns…
+      </p>
+    );
+  }
+
+  if (isErrorExportAnnotationFields) {
+    return (
+      <p className={classes.helperText}>
+        We couldn’t load annotation columns. You can still export the built-in
+        instance attributes.
+      </p>
+    );
+  }
+
+  if (exportAnnotationFields.length === 0) {
+    return (
+      <p className={classes.helperText}>
+        No annotations were found for the current filtered instances.
+      </p>
+    );
+  }
+
+  return (
+    <TableFilter
+      type="multiple"
+      label="Select annotation columns"
+      hasToggleIcon
+      hasBadge
+      options={filteredAnnotationFields.map((field) => ({
+        label: field.label,
+        value: field.id,
+      }))}
+      selectedItems={selectedAnnotationFieldIds}
+      onItemsSelect={onSelectedAnnotationFieldIdsChange}
+      onSearch={setSearchText}
+      showSelectedItemCount
+    />
+  );
+};
+
+export default InstancesExportAnnotationFields;
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
new file mode 100644
index 0000000000..1fc65c0588
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
@@ -0,0 +1 @@
+export { default } from "./InstancesExportAnnotationFields";
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss
new file mode 100644
index 0000000000..050b5a7bbe
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss
@@ -0,0 +1,118 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+.selectedColumns {
+  padding-top: $spv--small;
+}
+
+.selectedColumnsIntro {
+  margin-bottom: $spv--medium;
+}
+
+.nameCell {
+  align-items: center;
+  display: flex;
+  gap: $sph--small;
+}
+
+.dragHandle {
+  cursor: grab;
+  flex-shrink: 0;
+}
+
+.orderColumn {
+  text-align: right;
+  white-space: nowrap;
+  width: 12rem;
+}
+
+.orderControls {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  gap: $sph--small;
+}
+
+.orderInput {
+  width: 3.5rem;
+  text-align: center;
+  min-width: 0;
+}
+
+.orderInputWrapper {
+  margin-bottom: 0 !important;
+}
+
+.dragging {
+  opacity: 0.6;
+
+  > :global(td) {
+    background-color: rgba(0, 102, 204, 0.06);
+    box-shadow:
+      inset 0 2px 0 0 #0066cc,
+      inset 0 -2px 0 0 #0066cc;
+  }
+}
+
+// Smooth opacity transitions when dragging starts/ends or rows are dimmed.
+.selectedColumns :global(tr) {
+  transition: opacity 0.15s ease;
+}
+
+// Smooth the blue outline appearing/disappearing on the dragged row's cells.
+// background-color is intentionally excluded — including it conflicts with the
+// flashBlue @keyframes animation on .justMoved > td, causing a double-flash.
+.selectedColumns :global(td) {
+  transition: box-shadow 0.15s ease;
+}
+
+// Fully-opaque card overlay that follows the cursor during drag.
+// Anchored at the top-left; its `transform` is set imperatively per rAF frame
+// (see positionOverlay) to follow the cursor without re-rendering React.
+// Rendered via React portal on document.body to escape any parent transform/overflow.
+.dragOverlay {
+  align-items: center;
+  background: #fff;
+  border: 2px solid #0066cc;
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  display: inline-flex;
+  font-size: 0.875rem;
+  gap: $sph--small;
+  left: 0;
+  padding: $spv--small $sph--large;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  white-space: nowrap;
+  z-index: 9999;
+}
+
+.dragOverlayBadge {
+  background: #f0f6ff;
+  border: 1px solid #b3d1f5;
+  border-radius: 2px;
+  color: #0066cc;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 1.25rem;
+  padding: 0 $sph--x-small;
+  text-align: center;
+}
+
+// Brief blue flash on cells after a row is moved via arrows or number input.
+@keyframes flashBlue {
+  0% {
+    background-color: rgba(0, 102, 204, 0.2);
+  }
+  30% {
+    background-color: rgba(0, 102, 204, 0.2);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.justMoved > :global(td) {
+  animation: flashBlue 1.5s ease-out forwards;
+}
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx
new file mode 100644
index 0000000000..90696f1272
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx
@@ -0,0 +1,558 @@
+import { Button, Icon, Input, ModularTable } from "@canonical/react-components";
+import classNames from "classnames";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type HTMLProps,
+} from "react";
+import { createPortal } from "react-dom";
+import type { CellProps, Column, Row, TableRowProps } from "react-table";
+import classes from "./SortableFieldList.module.scss";
+import type { ExportField } from "../../types";
+
+interface ReorderRowData extends Record<string, unknown> {
+  index: number;
+  fieldId: string;
+  label: string;
+  currentOrder: string;
+}
+
+// Horizontal gap between the cursor and the drag overlay card, in pixels.
+const OVERLAY_CURSOR_OFFSET_PX = 12;
+const JUST_MOVED_HIGHLIGHT_MS = 1500;
+const FLIP_TRANSITION_CLEANUP_MS = 300;
+
+interface SortableFieldListProps {
+  readonly fields: ExportField[];
+  readonly onOrderChange: (fields: ExportField[]) => void;
+}
+
+const SortableFieldList: FC<SortableFieldListProps> = ({
+  fields,
+  onOrderChange,
+}) => {
+  const [orderedFields, setOrderedFields] = useState<ExportField[]>(
+    () => fields,
+  );
+  const [draggingFieldId, setDraggingFieldId] = useState<string | null>(null);
+  const originalOrderRef = useRef<ExportField[]>([]);
+  const dropSucceededRef = useRef(false);
+  const [orderDrafts, setOrderDrafts] = useState<Record<number, string>>({});
+  const [justMovedFieldId, setJustMovedFieldId] = useState<string | null>(null);
+  const justMovedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rowRefsMap = useRef<Map<string, HTMLTableRowElement>>(new Map());
+  const pendingScrollRef = useRef<string | null>(null);
+  const flipPositionsRef = useRef<Map<string, number>>(new Map());
+  const pendingFlipRef = useRef(false);
+  const flipRafIdsRef = useRef<number[]>([]);
+  const flipTimerIdsRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  // Drag overlay positioning is done imperatively (no per-frame re-render):
+  // dragover writes the cursor position to a ref and the overlay's transform
+  // is updated inside a single coalesced rAF per frame.
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const dragCursorPosRef = useRef<{ x: number; y: number } | null>(null);
+  const dragOverRafRef = useRef<number | null>(null);
+
+  // Live mirrors of state read inside stable drag handlers, so those handlers
+  // (and therefore getReorderRowProps) keep a constant identity across renders.
+  // The passive effect is a backstop for the general case; the drag path keeps
+  // orderedFieldsRef current synchronously inside the state updater (see
+  // handleDragEnter) so handleDrop never depends on passive-effect flush timing.
+  const orderedFieldsRef = useRef(orderedFields);
+  const draggingFieldIdRef = useRef(draggingFieldId);
+  useEffect(() => {
+    orderedFieldsRef.current = orderedFields;
+    draggingFieldIdRef.current = draggingFieldId;
+  });
+
+  // Stable per-row ref callbacks, cached by fieldId, so the row's ref doesn't
+  // churn (null then re-set) on every render.
+  const rowRefCallbacksRef = useRef<
+    Map<string, (el: HTMLTableRowElement | null) => void>
+  >(new Map());
+
+  // Keep internal order in sync with the fields prop. Seeding state once with
+  // useState(() => fields) ignores later prop changes; this re-syncs when the
+  // parent updates the selection. Skip while a drag is active: an unrelated
+  // parent re-render mid-drag must not clobber the live handleDragEnter preview
+  // with the (stale) prop order. (draggingFieldIdRef is synced by the effect
+  // above, which is declared — and therefore runs — before this one.)
+  useEffect(() => {
+    if (draggingFieldIdRef.current) return;
+    // Intentional prop->state sync: setState in this effect is the deliberate
+    // mechanism, not an accident. Reading draggingFieldIdRef during render (to
+    // avoid the effect) would instead trip react-hooks/refs.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setOrderedFields(fields);
+  }, [fields]);
+
+  // Cleanup animation resources on unmount.
+  useEffect(() => {
+    return () => {
+      if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
+      if (dragOverRafRef.current !== null) {
+        cancelAnimationFrame(dragOverRafRef.current);
+      }
+      for (const id of flipRafIdsRef.current) cancelAnimationFrame(id);
+      for (const id of flipTimerIdsRef.current) clearTimeout(id);
+    };
+  }, []);
+
+  // After orderedFields updates, scroll the pending field into view.
+  // Delayed by 270ms so it fires after the FLIP animation (250ms) completes —
+  // getBoundingClientRect includes CSS transforms, so calling scrollIntoView
+  // while the FLIP translateY is active would measure the wrong position.
+  useEffect(() => {
+    if (!pendingScrollRef.current) return;
+    const fieldId = pendingScrollRef.current;
+    pendingScrollRef.current = null;
+    const timer = setTimeout(() => {
+      rowRefsMap.current
+        .get(fieldId)
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 270);
+    return () => { clearTimeout(timer); };
+  }, [orderedFields]);
+
+  const triggerMoveEffect = useCallback((fieldId: string) => {
+    if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
+    setJustMovedFieldId(fieldId);
+    pendingScrollRef.current = fieldId;
+    justMovedTimerRef.current = setTimeout(
+      () => { setJustMovedFieldId(null); },
+      JUST_MOVED_HIGHLIGHT_MS,
+    );
+  }, []);
+
+  // Snapshot row y-positions before a reorder so FLIP can animate the move.
+  // Cancels any in-flight FLIP and resets transforms before measuring.
+  const capturePositionsForFlip = useCallback(() => {
+    for (const id of flipRafIdsRef.current) cancelAnimationFrame(id);
+    flipRafIdsRef.current = [];
+    for (const id of flipTimerIdsRef.current) clearTimeout(id);
+    flipTimerIdsRef.current = [];
+    rowRefsMap.current.forEach((el) => {
+      el.style.transform = "";
+      el.style.transition = "";
+    });
+    const positions = new Map<string, number>();
+    rowRefsMap.current.forEach((el, id) => {
+      positions.set(id, el.getBoundingClientRect().top);
+    });
+    flipPositionsRef.current = positions;
+    pendingFlipRef.current = true;
+  }, []);
+
+  // FLIP animation: after orderedFields changes, animate rows from their old
+  // viewport positions to their new ones. Only runs when pendingFlipRef is set
+  // (i.e. arrow/number moves — NOT drag reorders).
+  useLayoutEffect(() => {
+    if (!pendingFlipRef.current) return;
+    pendingFlipRef.current = false;
+
+    const oldPositions = flipPositionsRef.current;
+
+    rowRefsMap.current.forEach((el, id) => {
+      const oldTop = oldPositions.get(id);
+      if (oldTop === undefined) return;
+      const newTop = el.getBoundingClientRect().top;
+      const delta = oldTop - newTop;
+      if (delta === 0) return;
+
+      el.style.transform = `translateY(${delta}px)`;
+      el.style.transition = "transform 0s";
+
+      const raf1 = requestAnimationFrame(() => {
+        const raf2 = requestAnimationFrame(() => {
+          el.style.transition = "transform 0.25s ease, opacity 0.15s ease";
+          el.style.transform = "";
+          const timer = setTimeout(() => {
+            el.style.transition = "";
+          }, FLIP_TRANSITION_CLEANUP_MS);
+          flipTimerIdsRef.current.push(timer);
+        });
+        flipRafIdsRef.current.push(raf2);
+      });
+      flipRafIdsRef.current.push(raf1);
+    });
+  }, [orderedFields]);
+
+  // Apply the latest cursor position to the overlay imperatively. Called from a
+  // single rAF per frame so a burst of dragover events does no extra layout.
+  const positionOverlay = useCallback(() => {
+    dragOverRafRef.current = null;
+    const pos = dragCursorPosRef.current;
+    const el = overlayRef.current;
+    if (!pos || !el) return;
+    // 12px right of / vertically centred on the cursor (matches the prior
+    // CSS `transform: translate(12px, -50%)`, now driven entirely from JS).
+    el.style.transform = `translate3d(${pos.x + OVERLAY_CURSOR_OFFSET_PX}px, ${pos.y}px, 0) translateY(-50%)`;
+  }, []);
+
+  // Position the overlay as soon as it mounts, using the cursor position
+  // captured at drag start, so it doesn't flash at the top-left before the
+  // first dragover fires.
+  useLayoutEffect(() => {
+    if (draggingFieldId) positionOverlay();
+  }, [draggingFieldId, positionOverlay]);
+
+  const handleDragStart = useCallback(
+    (fieldId: string, e: React.DragEvent) => {
+      originalOrderRef.current = [...orderedFieldsRef.current];
+      dropSucceededRef.current = false;
+      dragCursorPosRef.current = { x: e.clientX, y: e.clientY };
+      setDraggingFieldId(fieldId);
+      e.dataTransfer.effectAllowed = "move";
+
+      // Replace the browser's native (always semi-transparent) drag ghost with a
+      // 1×1 transparent canvas. We render our own fully-opaque overlay instead.
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      e.dataTransfer.setDragImage(canvas, 0, 0);
+    },
+    [],
+  );
+
+  const handleDragEnter = useCallback((index: number) => {
+    const draggingId = draggingFieldIdRef.current;
+    if (!draggingId) return;
+    // Functional update: never read the mirror to compute the next order, so
+    // there's no dependence on passive-effect flush timing.
+    setOrderedFields((current) => {
+      const sourceIndex = current.findIndex((f) => f.id === draggingId);
+      if (sourceIndex === -1 || sourceIndex === index) return current;
+      const newOrder = [...current];
+      const [item] = newOrder.splice(sourceIndex, 1);
+      if (!item) return current;
+      newOrder.splice(index, 0, item);
+      // Keep the mirror current synchronously so handleDrop reads the final
+      // order regardless of when the passive effect runs. Idempotent under
+      // StrictMode's double-invoke (same contents each pass).
+      orderedFieldsRef.current = newOrder;
+      return newOrder;
+    });
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      // Track cursor position here — dragover fires reliably with correct
+      // coordinates, unlike the drag event on the source element which can fire
+      // at (0,0). Write to a ref and coalesce overlay updates into one rAF per
+      // frame instead of re-rendering on every event.
+      dragCursorPosRef.current = { x: e.clientX, y: e.clientY };
+      if (dragOverRafRef.current === null) {
+        dragOverRafRef.current = requestAnimationFrame(positionOverlay);
+      }
+    },
+    [positionOverlay],
+  );
+
+  const handleDrop = useCallback(() => {
+    dropSucceededRef.current = true;
+    setDraggingFieldId(null);
+    setOrderDrafts({});
+    onOrderChange(orderedFieldsRef.current);
+  }, [onOrderChange]);
+
+  const handleDragEnd = useCallback(() => {
+    if (dragOverRafRef.current !== null) {
+      cancelAnimationFrame(dragOverRafRef.current);
+      dragOverRafRef.current = null;
+    }
+    if (!dropSucceededRef.current) {
+      setOrderedFields(originalOrderRef.current);
+    }
+    dropSucceededRef.current = false;
+    setDraggingFieldId(null);
+  }, []);
+
+  const moveUp = useCallback(
+    (index: number) => {
+      if (index === 0) return;
+      const newOrder = [...orderedFields];
+      const prev = newOrder[index - 1];
+      const curr = newOrder[index];
+      if (!prev || !curr) return;
+      capturePositionsForFlip();
+      newOrder[index - 1] = curr;
+      newOrder[index] = prev;
+      setOrderedFields(newOrder);
+      setOrderDrafts({});
+      triggerMoveEffect(curr.id);
+      onOrderChange(newOrder);
+    },
+    [orderedFields, triggerMoveEffect, capturePositionsForFlip, onOrderChange],
+  );
+
+  const moveDown = useCallback(
+    (index: number) => {
+      if (index === orderedFields.length - 1) return;
+      const newOrder = [...orderedFields];
+      const curr = newOrder[index];
+      const next = newOrder[index + 1];
+      if (!curr || !next) return;
+      capturePositionsForFlip();
+      newOrder[index] = next;
+      newOrder[index + 1] = curr;
+      setOrderedFields(newOrder);
+      setOrderDrafts({});
+      triggerMoveEffect(curr.id);
+      onOrderChange(newOrder);
+    },
+    [orderedFields, triggerMoveEffect, capturePositionsForFlip, onOrderChange],
+  );
+
+  const handleOrderInputChange = useCallback(
+    (fieldIndex: number, value: string) => {
+      setOrderDrafts((prev) => ({ ...prev, [fieldIndex]: value }));
+    },
+    [],
+  );
+
+  const clearOrderDraft = useCallback((fieldIndex: number) => {
+    setOrderDrafts((prev) =>
+      Object.fromEntries(
+        Object.entries(prev).filter(([key]) => Number(key) !== fieldIndex),
+      ),
+    );
+  }, []);
+
+  const handleOrderInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<Element>, fieldIndex: number) => {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      if (!(e.currentTarget instanceof HTMLInputElement)) return;
+
+      const raw = e.currentTarget.value;
+      const newOrder = Number.parseInt(raw, 10);
+
+      if (Number.isNaN(newOrder)) {
+        clearOrderDraft(fieldIndex);
+        return;
+      }
+
+      const targetIndex = newOrder - 1;
+      const movedFieldId = orderedFields[fieldIndex]?.id;
+      const willMove =
+        newOrder >= 1 &&
+        newOrder <= orderedFields.length &&
+        targetIndex !== fieldIndex &&
+        !!movedFieldId;
+
+      if (willMove) {
+        capturePositionsForFlip();
+      }
+
+      setOrderedFields((current) => {
+        if (newOrder < 1 || newOrder > current.length) return current;
+        if (targetIndex === fieldIndex) return current;
+        const updated = [...current];
+        const [item] = updated.splice(fieldIndex, 1);
+        if (!item) return current;
+        updated.splice(targetIndex, 0, item);
+        onOrderChange(updated);
+        return updated;
+      });
+      clearOrderDraft(fieldIndex);
+
+      if (willMove && movedFieldId) {
+        triggerMoveEffect(movedFieldId);
+      }
+    },
+    [
+      clearOrderDraft,
+      orderedFields,
+      triggerMoveEffect,
+      capturePositionsForFlip,
+      onOrderChange,
+    ],
+  );
+
+  const handleOrderInputBlur = useCallback(
+    (fieldIndex: number) => {
+      clearOrderDraft(fieldIndex);
+    },
+    [clearOrderDraft],
+  );
+
+  const reorderColumns = useMemo<Column<ReorderRowData>[]>(
+    () => [
+      {
+        Header: "Attribute name",
+        accessor: "fieldId",
+        Cell: ({ row }: CellProps<ReorderRowData>) => {
+          const { label } = row.original;
+          return (
+            <div className={classes.nameCell}>
+              <i className={"p-icon--drag " + classes.dragHandle} />
+              <span>{label}</span>
+            </div>
+          );
+        },
+      },
+      {
+        Header: "Order",
+        accessor: "currentOrder",
+        className: classes.orderColumn,
+        Cell: ({ row }: CellProps<ReorderRowData>) => {
+          const { currentOrder, index, label } = row.original;
+          return (
+            <div className={classes.orderControls}>
+              <Button
+                type="button"
+                appearance="base"
+                className="u-no-margin--bottom has-icon u-no-margin--right"
+                disabled={index === orderedFields.length - 1}
+                onClick={() => { moveDown(index); }}
+                aria-label={`Move ${label} down`}
+              >
+                <Icon name="arrow-down" />
+              </Button>
+              <Input
+                type="number"
+                className={classNames(
+                  "u-no-margin--bottom",
+                  classes.orderInput,
+                )}
+                min={1}
+                max={orderedFields.length}
+                value={currentOrder}
+                onChange={(e) => { handleOrderInputChange(index, e.target.value); }}
+                onKeyDown={(e: React.KeyboardEvent) =>
+                  { handleOrderInputKeyDown(e, index); }
+                }
+                onBlur={() => { handleOrderInputBlur(index); }}
+                aria-label={`Order for ${label}`}
+                wrapperClassName={classes.orderInputWrapper}
+              />
+              <Button
+                type="button"
+                appearance="base"
+                className="u-no-margin--bottom has-icon"
+                disabled={index === 0}
+                onClick={() => { moveUp(index); }}
+                aria-label={`Move ${label} up`}
+              >
+                <Icon name="arrow-up" />
+              </Button>
+            </div>
+          );
+        },
+      },
+    ],
+    [
+      handleOrderInputBlur,
+      handleOrderInputChange,
+      handleOrderInputKeyDown,
+      moveDown,
+      moveUp,
+      orderedFields.length,
+    ],
+  );
+
+  const reorderData = useMemo<ReorderRowData[]>(
+    () =>
+      orderedFields.map((field, index) => ({
+        index,
+        fieldId: field.id,
+        label: field.label,
+        currentOrder: orderDrafts[index] ?? String(index + 1),
+      })),
+    [orderDrafts, orderedFields],
+  );
+
+  // Return a stable ref callback per fieldId so React doesn't tear down and
+  // re-attach the row's ref (null then re-set) on every render.
+  const getRowRefCallback = useCallback((fieldId: string) => {
+    const cache = rowRefCallbacksRef.current;
+    let cb = cache.get(fieldId);
+    if (!cb) {
+      cb = (el: HTMLTableRowElement | null) => {
+        if (el) {
+          rowRefsMap.current.set(fieldId, el);
+        } else {
+          rowRefsMap.current.delete(fieldId);
+        }
+      };
+      cache.set(fieldId, cb);
+    }
+    return cb;
+  }, []);
+
+  const getReorderRowProps = useCallback(
+    ({
+      original,
+      index,
+    }: Row<ReorderRowData>): Partial<
+      TableRowProps & HTMLProps<HTMLTableRowElement>
+    > => {
+      return {
+        draggable: true,
+        "data-row-key": original.fieldId,
+        ref: getRowRefCallback(original.fieldId),
+        onDragStart: (e: React.DragEvent<HTMLTableRowElement>) => {
+          handleDragStart(original.fieldId, e);
+        },
+        onDragEnter: () => {
+          handleDragEnter(index);
+        },
+        onDragOver: handleDragOver,
+        onDragEnd: handleDragEnd,
+        onDrop: handleDrop,
+        className: classNames(
+          original.fieldId === draggingFieldId && classes.dragging,
+          original.fieldId === justMovedFieldId && classes.justMoved,
+        ),
+      } as Partial<TableRowProps & HTMLProps<HTMLTableRowElement>>;
+    },
+    [
+      draggingFieldId,
+      getRowRefCallback,
+      handleDragEnd,
+      handleDragEnter,
+      handleDragOver,
+      handleDragStart,
+      handleDrop,
+      justMovedFieldId,
+    ],
+  );
+
+  return (
+    <div className={classes.selectedColumns}>
+      <p className={classes.selectedColumnsIntro}>
+        Review and reorder the columns for your export. Drag rows or use the
+        controls to change the order.
+      </p>
+      <ModularTable
+        columns={reorderColumns}
+        data={reorderData}
+        getRowProps={getReorderRowProps}
+        sortable={false}
+      />
+      {draggingFieldId &&
+        createPortal(
+          <div ref={overlayRef} className={classes.dragOverlay} aria-hidden>
+            <i className="p-icon--drag" />
+            <span>
+              {orderedFields.find((f) => f.id === draggingFieldId)?.label}
+            </span>
+            <span className={classes.dragOverlayBadge}>
+              {orderedFields.findIndex((f) => f.id === draggingFieldId) + 1}
+            </span>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+};
+
+export default SortableFieldList;
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts
new file mode 100644
index 0000000000..d680ec310e
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts
@@ -0,0 +1 @@
+export { default } from "./SortableFieldList";
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
new file mode 100644
index 0000000000..602c6937df
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -0,0 +1,143 @@
+import type { ExportFieldGroup, InstancesExportFormValues } from "./types";
+import * as Yup from "yup";
+
+export const INITIAL_VALUES: InstancesExportFormValues = {
+  name: "",
+  selectedFieldIds: [],
+};
+
+export const VALIDATION_SCHEMA = Yup.object().shape({
+  name: Yup.string().trim().required("This field is required"),
+  selectedFieldIds: Yup.array()
+    .of(Yup.string().required())
+    .min(1, "Select at least one attribute"),
+});
+
+export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
+  {
+    title: "Primary Identity",
+    key: "primary-identity",
+    fields: [
+      { id: "hostname", label: "Hostname", defaultSelected: true },
+      { id: "title", label: "Instance name", defaultSelected: true },
+      { id: "os", label: "OS", defaultSelected: true },
+      { id: "id", label: "ID", defaultSelected: true },
+      { id: "status", label: "Status", defaultSelected: true },
+    ],
+  },
+  {
+    title: "Connectivity",
+    key: "connectivity",
+    fields: [
+      { id: "network_ip_address", label: "IP address" },
+      { id: "network_interface", label: "Interface" },
+      { id: "network_mac_address", label: "MAC address" },
+    ],
+  },
+  {
+    title: "Health & Updates",
+    key: "health-updates",
+    fields: [
+      { id: "reboot_required_flag", label: "Reboot required" },
+      { id: "alert_count", label: "Alert count" },
+      { id: "upgrades_security", label: "Security upgrades count" },
+      { id: "livepatch_info", label: "Livepatch status" },
+    ],
+  },
+  {
+    title: "Compute & Storage",
+    key: "compute-storage",
+    fields: [
+      { id: "hardware_cpu_cores", label: "CPU cores" },
+      { id: "total_memory", label: "Total memory" },
+      { id: "hardware_disk_size", label: "Total disk size" },
+      { id: "computer_type", label: "Computer type" },
+    ],
+  },
+  {
+    title: "Business Logic",
+    key: "business-logic",
+    fields: [
+      { id: "tags", label: "Tags", defaultSelected: true },
+      { id: "access_group", label: "Access group", defaultSelected: true },
+      { id: "annotations", label: "Annotations" },
+      { id: "ubuntu_pro", label: "Ubuntu Pro expiration" },
+      { id: "license_type", label: "License type" },
+    ],
+  },
+  {
+    title: "Granular Metadata & Deep Diagnostics",
+    key: "granular-metadata-diagnostics",
+    fields: [
+      { id: "last_ping_time", label: "Last ping", defaultSelected: true },
+      { id: "juju_machine_id", label: "Juju machine ID" },
+      { id: "cloud_instance_metadata", label: "Cloud instance metadata" },
+      { id: "hostagent_uid", label: "Host agent UID" },
+      { id: "machine_id", label: "Machine ID" },
+      { id: "secure_id", label: "Secure ID" },
+      { id: "insecure_id", label: "Insecure ID" },
+      { id: "current_api", label: "Client API version" },
+      { id: "current_version", label: "Client version" },
+      { id: "comment", label: "Comment" },
+      { id: "archived", label: "Archived" },
+      { id: "account_id", label: "Account ID" },
+      { id: "employee_id", label: "Employee ID" },
+      { id: "profiles", label: "Associated profiles" },
+      { id: "alerts", label: "Active alerts" },
+      { id: "reboot_packages", label: "Packages needing reboot" },
+      { id: "update_manager_prompt", label: "Update manager prompt" },
+      { id: "upgrades_regular", label: "Regular upgrades count" },
+      { id: "has_release_upgrades", label: "Release upgrade available" },
+      { id: "consecutive_errors", label: "Consecutive errors" },
+      { id: "is_inconsistent", label: "Inconsistent" },
+      {
+        id: "ubuntu_pro_subscription_type",
+        label: "Ubuntu Pro subscription type",
+      },
+      { id: "ubuntu_pro_reboot_required_info", label: "Pro reboot info" },
+      { id: "vm_info", label: "VM type" },
+      { id: "container_info", label: "Container type" },
+      { id: "wsl", label: "WSL instance" },
+      { id: "wsl_profiles", label: "WSL profiles" },
+      { id: "parent", label: "Parent instance" },
+      { id: "children", label: "Child instances" },
+      { id: "num_child", label: "Child instance count" },
+      { id: "default_child", label: "Default child" },
+      { id: "is_default_child", label: "Is default child" },
+      { id: "create_instance_supported", label: "Instance creation supported" },
+      { id: "clone_id", label: "Clone ID" },
+      { id: "hardware_cpu_model", label: "CPU model" },
+      { id: "hardware_cpu_vendor", label: "CPU vendor" },
+      { id: "hardware_memory_size", label: "Memory size (Hardware)" },
+      { id: "total_swap", label: "Total swap" },
+      { id: "hardware_system_serial", label: "System serial" },
+      { id: "hardware_system_vendor", label: "System vendor" },
+      { id: "hardware_system_model", label: "System model" },
+      { id: "mount_device", label: "Mount device" },
+      { id: "mount_point", label: "Mount point" },
+      { id: "mount_filesystem", label: "Filesystem type" },
+      { id: "mount_total_space", label: "Total space" },
+      { id: "network_broadcast_address", label: "Broadcast address" },
+      { id: "network_netmask", label: "Netmask" },
+      { id: "network_speed", label: "Speed" },
+      { id: "network_duplex", label: "Duplex" },
+      { id: "registered_at", label: "Registered at" },
+      { id: "last_exchange_time", label: "Last exchange time" },
+      { id: "last_exchange_duration", label: "Last exchange duration" },
+      { id: "last_exchange_size", label: "Last exchange size" },
+      { id: "availability_zone", label: "Availability zone" },
+      { id: "juju_model_uuid", label: "Juju model UUID" },
+    ],
+  },
+];
+
+export const ALL_EXPORT_FIELD_IDS = EXPORT_FIELD_GROUPS.flatMap((group) =>
+  group.fields.map((field) => field.id),
+);
+
+export const DEFAULT_ASYNC_EXPORT_FIELD_IDS = EXPORT_FIELD_GROUPS.flatMap(
+  (group) =>
+    group.fields
+      .filter((field) => field.defaultSelected)
+      .map((field) => field.id),
+);
diff --git a/src/features/instances/components/InstancesExportForm/helpers.test.ts b/src/features/instances/components/InstancesExportForm/helpers.test.ts
new file mode 100644
index 0000000000..78973a56a0
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/helpers.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { buildExportQuery } from "./helpers";
+
+const FIRST_INSTANCE_ID = 11;
+const SECOND_INSTANCE_ID = 42;
+
+describe("buildExportQuery", () => {
+  it("returns the original query when there is no row selection", () => {
+    expect(buildExportQuery({ query: "name:prod", selectedInstanceIds: [] })).toBe(
+      "name:prod",
+    );
+  });
+
+  it("builds an id-only query when there is no base query", () => {
+    expect(buildExportQuery({ selectedInstanceIds: [1, 2, 3] })).toBe(
+      "id:1 OR id:2 OR id:3",
+    );
+  });
+
+  it("combines the current query with the selected instance ids", () => {
+    expect(
+      buildExportQuery({
+        query: "tag:server archived:false",
+        selectedInstanceIds: [FIRST_INSTANCE_ID, SECOND_INSTANCE_ID],
+      }),
+    ).toBe(
+      `(tag:server archived:false) AND (id:${FIRST_INSTANCE_ID} OR id:${SECOND_INSTANCE_ID})`,
+    );
+  });
+});
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
new file mode 100644
index 0000000000..3a6db70831
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -0,0 +1,201 @@
+import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import type { Instance } from "@/types/Instance";
+import moment from "moment";
+
+export const EXPORT_ASYNC_THRESHOLD_MS = 1500;
+
+export interface ExportFieldOption {
+  readonly id: string;
+  readonly label: string;
+  readonly defaultSelected?: boolean;
+  readonly getValue: (instance: Instance) => string;
+}
+
+export interface AnnotationFieldOption extends ExportFieldOption {
+  readonly annotationKey: string;
+}
+
+const formatDate = (value: string | null | undefined) =>
+  moment(value).isValid() ? moment(value).format(DISPLAY_DATE_TIME_FORMAT) : "";
+
+const getStatusLabel = (instance: Instance) => {
+  if (instance.archived) {
+    return "Archived";
+  }
+
+  const filteredAlerts = (instance.alerts ?? []).filter(
+    ({ type }) =>
+      !["PackageUpgradesAlert", "SecurityUpgradesAlert"].includes(type),
+  );
+
+  if (!filteredAlerts.length) {
+    return "Online";
+  }
+
+  return filteredAlerts.map(({ summary, type }) => summary || type).join("; ");
+};
+
+export const BUILTIN_EXPORT_FIELDS: ExportFieldOption[] = [
+  {
+    id: "title",
+    label: "Instance name",
+    defaultSelected: true,
+    getValue: (instance) => instance.title,
+  },
+  {
+    id: "hostname",
+    label: "Hostname",
+    defaultSelected: true,
+    getValue: (instance) => instance.hostname ?? "",
+  },
+  {
+    id: "status",
+    label: "Status",
+    defaultSelected: true,
+    getValue: getStatusLabel,
+  },
+  {
+    id: "os",
+    label: "OS",
+    defaultSelected: true,
+    getValue: (instance) => instance.distribution_info?.description ?? "",
+  },
+  {
+    id: "access_group",
+    label: "Access group",
+    defaultSelected: true,
+    getValue: (instance) => instance.access_group,
+  },
+  {
+    id: "tags",
+    label: "Tags",
+    defaultSelected: true,
+    getValue: (instance) =>
+      instance.tags.length ? JSON.stringify(instance.tags) : "",
+  },
+  {
+    id: "availability_zone",
+    label: "Availability zone",
+    getValue: (instance) => instance.cloud_init?.availability_zone ?? "",
+  },
+  {
+    id: "ubuntu_pro",
+    label: "Ubuntu Pro expiration",
+    getValue: (instance) =>
+      instance.ubuntu_pro_info?.attached
+        ? formatDate(instance.ubuntu_pro_info.expires)
+        : "",
+  },
+  {
+    id: "last_ping",
+    label: "Last ping",
+    defaultSelected: true,
+    getValue: (instance) => formatDate(instance.last_ping_time),
+  },
+  {
+    id: "registered_at",
+    label: "Registered at",
+    getValue: (instance) => formatDate(instance.registered_at),
+  },
+  {
+    id: "parent",
+    label: "Parent instance",
+    getValue: (instance) => instance.parent?.title ?? "",
+  },
+  {
+    id: "comment",
+    label: "Comment",
+    getValue: (instance) => instance.comment,
+  },
+  {
+    id: "employee_id",
+    label: "Employee ID",
+    getValue: (instance) =>
+      instance.employee_id === null ? "" : String(instance.employee_id),
+  },
+  {
+    id: "archived",
+    label: "Archived",
+    getValue: (instance) => (instance.archived ? "Yes" : "No"),
+  },
+  {
+    id: "wsl",
+    label: "WSL instance",
+    getValue: (instance) => (instance.is_wsl_instance ? "Yes" : "No"),
+  },
+];
+
+const builtinFieldMap = new Map(
+  BUILTIN_EXPORT_FIELDS.map((field) => [field.id, field]),
+);
+
+export const DEFAULT_EXPORT_FIELD_IDS = BUILTIN_EXPORT_FIELDS.filter(
+  ({ defaultSelected }) => defaultSelected,
+).map(({ id }) => id);
+
+export const getAnnotationFieldOptions = (
+  instances: Instance[],
+): AnnotationFieldOption[] => {
+  const annotationKeys = new Set<string>();
+
+  instances.forEach((instance) => {
+    Object.keys(instance.annotations ?? {}).forEach((annotationKey) => {
+      annotationKeys.add(annotationKey);
+    });
+  });
+
+  return [...annotationKeys].sort((left, right) => left.localeCompare(right)).map(
+    (annotationKey) => ({
+      id: `annotation:${annotationKey}`,
+      label: `Annotation: ${annotationKey}`,
+      annotationKey,
+      getValue: (instance) => instance.annotations?.[annotationKey] ?? "",
+    }),
+  );
+};
+
+export const getSelectedExportFields = ({
+  annotationFieldOptions,
+  selectedFieldIds,
+}: {
+  annotationFieldOptions: AnnotationFieldOption[];
+  selectedFieldIds: string[];
+}) => {
+  const effectiveFieldIds = selectedFieldIds.length
+    ? selectedFieldIds
+    : DEFAULT_EXPORT_FIELD_IDS;
+  const annotationFieldMap = new Map(
+    annotationFieldOptions.map((field) => [field.id, field]),
+  );
+
+  return effectiveFieldIds.flatMap((fieldId) => {
+    const field =
+      builtinFieldMap.get(fieldId) ?? annotationFieldMap.get(fieldId);
+
+    return field ? [field] : [];
+  });
+};
+
+export const buildExportQuery = ({
+  query,
+  selectedInstanceIds,
+}: {
+  query?: string;
+  selectedInstanceIds?: number[];
+}) => {
+  const baseQuery = query?.trim();
+  const selectionQuery = selectedInstanceIds?.length
+    ? `id:${selectedInstanceIds.join(" OR id:")}`
+    : "";
+
+  if (!selectionQuery) {
+    return baseQuery;
+  }
+
+  if (!baseQuery) {
+    return selectionQuery;
+  }
+
+  return `(${baseQuery}) AND (${selectionQuery})`;
+};
+
diff --git a/src/features/instances/components/InstancesExportForm/index.ts b/src/features/instances/components/InstancesExportForm/index.ts
new file mode 100644
index 0000000000..ddb406e2ad
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./InstancesExportForm";
diff --git a/src/features/instances/components/InstancesExportForm/types.ts b/src/features/instances/components/InstancesExportForm/types.ts
new file mode 100644
index 0000000000..f1b5493083
--- /dev/null
+++ b/src/features/instances/components/InstancesExportForm/types.ts
@@ -0,0 +1,18 @@
+export type StepIndex = 0 | 1;
+
+export interface ExportField {
+  readonly id: string;
+  readonly label: string;
+  readonly defaultSelected?: boolean;
+}
+
+export interface ExportFieldGroup {
+  readonly title: string;
+  readonly key: string;
+  readonly fields: readonly ExportField[];
+}
+
+export interface InstancesExportFormValues {
+  readonly name: string;
+  readonly selectedFieldIds: string[];
+}
\ No newline at end of file
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
new file mode 100644
index 0000000000..8cebab3885
--- /dev/null
+++ b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
@@ -0,0 +1,3 @@
+.notification::before {
+  z-index: var(--z-below) !important;
+}
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
new file mode 100644
index 0000000000..c63c72e1be
--- /dev/null
+++ b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
@@ -0,0 +1,69 @@
+import server from "@/tests/server";
+import { renderWithProviders } from "@/tests/render";
+import { API_URL } from "@/constants";
+import {
+  completedExportJob,
+  processingExportJob,
+} from "@/tests/mocks/instancesExport";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import InstancesExportNotification from "./InstancesExportNotification";
+
+describe("InstancesExportNotification", () => {
+  it("does not render when there are no exports", async () => {
+    renderWithProviders(<InstancesExportNotification />);
+
+    // Wait for the initial fetch to settle, then assert nothing rendered.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(
+      screen.queryByRole("heading", { name: /tsv exports/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders an in-progress message for active exports", async () => {
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({ count: 1, results: [processingExportJob] }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportNotification />);
+
+    expect(
+      await screen.findByRole("heading", { name: /tsv exports/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/your tsv export is being generated/i),
+    ).toBeInTheDocument();
+  });
+
+  it("opens the export details side panel", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get(`${API_URL}computers/exports`, () =>
+        HttpResponse.json({
+          count: 2,
+          results: [processingExportJob, completedExportJob],
+        }),
+      ),
+    );
+
+    renderWithProviders(<InstancesExportNotification />);
+
+    await user.click(
+      await screen.findByRole("button", { name: /view export details/i }),
+    );
+
+    expect(screen.getByRole("complementary")).toBeInTheDocument();
+    expect(
+      await screen.findByRole("heading", {
+        name: /tsv exports/i,
+        level: 3,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/once you download a tsv, it is discarded/i),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
new file mode 100644
index 0000000000..d38603c2e4
--- /dev/null
+++ b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
@@ -0,0 +1,71 @@
+import { useGetInstancesExportJobs } from "../../api";
+import LoadingState from "@/components/layout/LoadingState";
+import useSidePanel from "@/hooks/useSidePanel";
+import { Button, Notification } from "@canonical/react-components";
+import { lazy, Suspense, useEffect, useMemo, useRef, type FC } from "react";
+import { useBoolean } from "usehooks-ts";
+import classes from "./InstancesExportNotification.module.scss";
+
+const InstancesExportDetailsPanel = lazy(
+  async () => import("../InstancesExportDetailsPanel"),
+);
+
+const InstancesExportNotification: FC = () => {
+  const { setSidePanelContent } = useSidePanel();
+  const { exportJobs, processingExportJobsCount, readyExportJobsCount } =
+    useGetInstancesExportJobs();
+  const previousJobsCountRef = useRef(exportJobs.length);
+  const { value: dismissed, setFalse: show, setTrue: dismiss } = useBoolean();
+
+  useEffect(() => {
+    if (exportJobs.length > previousJobsCountRef.current) {
+      show();
+    }
+
+    previousJobsCountRef.current = exportJobs.length;
+  }, [exportJobs.length, show]);
+
+  const message = useMemo(() => {
+    if (processingExportJobsCount && readyExportJobsCount) {
+      return `You have ${processingExportJobsCount} TSV export${processingExportJobsCount === 1 ? "" : "s"} in progress and ${readyExportJobsCount} ready to download.`;
+    }
+
+    if (processingExportJobsCount) {
+      return `Your TSV export${processingExportJobsCount === 1 ? " is" : "s are"} being generated.`;
+    }
+
+    return `Your TSV export${readyExportJobsCount === 1 ? " is" : "s are"} ready to download.`;
+  }, [processingExportJobsCount, readyExportJobsCount]);
+
+  if (!exportJobs.length || dismissed) {
+    return null;
+  }
+
+  return (
+    <Notification
+      severity="information"
+      title="TSV exports"
+      className={classes.notification}
+      onDismiss={dismiss}
+    >
+      <span>{message} </span>
+      <Button
+        type="button"
+        appearance="link"
+        onClick={() => {
+          setSidePanelContent(
+            "TSV exports",
+            <Suspense fallback={<LoadingState />}>
+              <InstancesExportDetailsPanel />
+            </Suspense>,
+            "large",
+          );
+        }}
+      >
+        View export details
+      </Button>
+    </Notification>
+  );
+};
+
+export default InstancesExportNotification;
diff --git a/src/features/instances/components/InstancesExportNotification/index.ts b/src/features/instances/components/InstancesExportNotification/index.ts
new file mode 100644
index 0000000000..32abb4c42d
--- /dev/null
+++ b/src/features/instances/components/InstancesExportNotification/index.ts
@@ -0,0 +1 @@
+export { default } from "./InstancesExportNotification";
diff --git a/src/features/instances/components/InstancesHeader/InstancesHeader.module.scss b/src/features/instances/components/InstancesHeader/InstancesHeader.module.scss
index f6c5609a6e..7ac8c8e221 100644
--- a/src/features/instances/components/InstancesHeader/InstancesHeader.module.scss
+++ b/src/features/instances/components/InstancesHeader/InstancesHeader.module.scss
@@ -12,3 +12,10 @@
 .searchContainer {
   flex-basis: 30rem;
 }
+
+.actions {
+  align-items: center;
+  display: flex;
+  gap: $sph--small;
+  margin-left: auto;
+}
diff --git a/src/features/instances/components/InstancesHeader/InstancesHeader.test.tsx b/src/features/instances/components/InstancesHeader/InstancesHeader.test.tsx
index 75060c99aa..8091cbcb9d 100644
--- a/src/features/instances/components/InstancesHeader/InstancesHeader.test.tsx
+++ b/src/features/instances/components/InstancesHeader/InstancesHeader.test.tsx
@@ -16,9 +16,7 @@ const props: ComponentProps<typeof InstancesHeader> = {
   onChangeFilter: vi.fn(),
 };
 
-describe("InstancesHeader", async () => {
-  const user = userEvent.setup();
-
+describe("InstancesHeader", () => {
   it("should render without crashing", () => {
     renderWithProviders(<InstancesHeader {...props} />);
 
@@ -27,6 +25,7 @@ describe("InstancesHeader", async () => {
   });
 
   it("should display all filter options", async () => {
+    const user = userEvent.setup();
     renderWithProviders(<InstancesHeader {...props} />);
 
     await user.click(screen.getByRole("button", { name: /filters/i }));
@@ -61,6 +60,7 @@ describe("InstancesHeader", async () => {
   });
 
   it("shows search help when help button is clicked", async () => {
+    const user = userEvent.setup();
     renderWithProviders(<InstancesHeader {...props} />);
 
     const helpButton = screen.getByRole("button", { name: /search help/i });
diff --git a/src/features/instances/components/InstancesHeader/InstancesHeader.tsx b/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
index 8168babbf1..b6b77d7ad5 100644
--- a/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
+++ b/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
@@ -11,6 +11,7 @@ import type { FC } from "react";
 import { useState } from "react";
 import { useGetAvailabilityZones } from "../../api";
 import { FILTERS } from "../../constants";
+import InstancesExportNotification from "../InstancesExportNotification";
 import AccessGroupFilter from "../AccessGroupFilter";
 import AvailabilityZoneFilter from "../AvailabilityZoneFilter";
 import PendingInstancesNotification from "../PendingInstancesNotification";
@@ -135,7 +136,9 @@ const InstancesHeader: FC<InstancesHeaderProps> = ({
             />,
           ]}
         />
-        <ColumnFilter label="Columns" options={columnFilterOptions} />
+        <div className={classes.actions}>
+          <ColumnFilter label="Columns" options={columnFilterOptions} />
+        </div>
       </div>
 
       <TableFilterChips
@@ -165,6 +168,7 @@ const InstancesHeader: FC<InstancesHeaderProps> = ({
           setShowSearchHelp(false);
         }}
       />
+      <InstancesExportNotification />
       <PendingInstancesNotification />
     </>
   );
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index c0c6d8e004..6769614e5d 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -1,3 +1,4 @@
+import { API_URL } from "@/constants";
 import * as Constants from "@/constants";
 import { resetScreenSize, setScreenSize } from "@/tests/helpers";
 import {
@@ -6,8 +7,11 @@ import {
   windowsInstance,
 } from "@/tests/mocks/instance";
 import { renderWithProviders } from "@/tests/render";
+import server from "@/tests/server";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import type { ComponentProps } from "react";
 import { beforeEach } from "vitest";
 import InstancesPageActions from "./InstancesPageActions";
 import { pluralize } from "@/utils/_helpers";
@@ -23,6 +27,7 @@ const ubuntuProInfo = {
 const MENU_LABELS = ["Operations", "Grouping", "Ubuntu Pro"];
 
 const OPERATIONS_LABELS = [
+  "Export",
   "Shut down",
   "Restart",
   "Remove from Landscape",
@@ -35,12 +40,35 @@ const OPERATIONS_LABELS = [
 const GROUPING_LABELS = ["Assign access group", "Assign tag"];
 
 const UBUNTU_PRO_LABELS = ["Attach token", "Detach token"];
+const exportParams = {
+  query: "",
+  archived_only: false,
+  wsl_children: false,
+  wsl_parents: false,
+};
+
+const defaultProps: ComponentProps<typeof InstancesPageActions> = {
+  exportParams,
+  instanceCount: selected.length,
+  isGettingInstances: false,
+  selectedInstances: selected,
+};
+
+const renderPageActions = (
+  props: Partial<ComponentProps<typeof InstancesPageActions>> = {},
+) =>
+  renderWithProviders(<InstancesPageActions {...defaultProps} {...props} />);
 
 describe("InstancesPageActions", () => {
   beforeEach(() => {
     vi.spyOn(Constants, "REPORT_VIEW_ENABLED", "get").mockReturnValue(true);
     setScreenSize("xxl");
     setEndpointStatus("default");
+    server.use(
+      http.get(`${API_URL}computers/export/annotations`, () => {
+        return HttpResponse.json({ results: [] });
+      }),
+    );
   });
 
   afterEach(() => {
@@ -48,12 +76,7 @@ describe("InstancesPageActions", () => {
   });
 
   it("should render correct action groups", async () => {
-    renderWithProviders(
-      <InstancesPageActions
-        isGettingInstances={false}
-        selectedInstances={selected}
-      />,
-    );
+    renderPageActions();
 
     const buttons = screen.getAllByRole("button");
     expect(buttons).toHaveLength(MENU_LABELS.length);
@@ -75,13 +98,8 @@ describe("InstancesPageActions", () => {
   });
 
   describe("Disabled and visible states", () => {
-    it("should disable buttons when no instances selected", () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[]}
-        />,
-      );
+    it("should disable all groups when no instances are available to export", () => {
+      renderPageActions({ instanceCount: 0, selectedInstances: [] });
 
       const buttons = screen.getAllByRole("button");
 
@@ -93,12 +111,11 @@ describe("InstancesPageActions", () => {
     });
 
     it("should disable buttons while getting instances", () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={true}
-          selectedInstances={[]}
-        />,
-      );
+      renderPageActions({
+        isGettingInstances: true,
+        instanceCount: 0,
+        selectedInstances: [],
+      });
 
       const buttons = screen.getAllByRole("button");
 
@@ -109,14 +126,34 @@ describe("InstancesPageActions", () => {
       }
     });
 
-    it("'View report' menu item should be visible when feature enabled", async () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={selected}
-        />,
+    it("should keep Operations enabled for filtered export without a row selection", async () => {
+      renderPageActions({ instanceCount: 3, selectedInstances: [] });
+
+      const operationsButton = screen.getByRole("button", {
+        name: MENU_LABELS[0],
+      });
+
+      expect(operationsButton).not.toHaveClass("is-disabled");
+
+      await userEvent.click(operationsButton);
+
+      expect(
+        screen.getByRole("menuitem", { name: /^export$/i }),
+      ).not.toHaveClass("is-disabled");
+      expect(screen.getByRole("menuitem", { name: /shut down/i })).toHaveClass(
+        "is-disabled",
       );
 
+      await userEvent.click(screen.getByRole("menuitem", { name: /^export$/i }));
+
+      expect(
+        screen.getByRole("heading", { name: /export 3 instances as tsv/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("'View report' menu item should be visible when feature enabled", async () => {
+      renderPageActions();
+
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
       );
@@ -128,12 +165,7 @@ describe("InstancesPageActions", () => {
     it("'View report' menu item should not be visible when feature disabled", async () => {
       vi.spyOn(Constants, "REPORT_VIEW_ENABLED", "get").mockReturnValue(false);
 
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={selected}
-        />,
-      );
+      renderPageActions();
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -145,17 +177,14 @@ describe("InstancesPageActions", () => {
     });
 
     it("'Upgrade' menu item should be enabled without upgrades info", async () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[
-            {
-              ...ubuntuInstance,
-              upgrades: undefined,
-            },
-          ]}
-        />,
-      );
+      renderPageActions({
+        selectedInstances: [
+          {
+            ...ubuntuInstance,
+            upgrades: undefined,
+          },
+        ],
+      });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -166,17 +195,14 @@ describe("InstancesPageActions", () => {
     });
 
     it("'Upgrade' menu item should be disabled if no upgrades are available", async () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[
-            {
-              ...ubuntuInstance,
-              alerts: [],
-            },
-          ]}
-        />,
-      );
+      renderPageActions({
+        selectedInstances: [
+          {
+            ...ubuntuInstance,
+            alerts: [],
+          },
+        ],
+      });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -187,17 +213,14 @@ describe("InstancesPageActions", () => {
     });
 
     it("'Upgrade distributions' menu item should be disabled if no release upgrades are available", async () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[
-            {
-              ...ubuntuInstance,
-              has_release_upgrades: false,
-            },
-          ]}
-        />,
-      );
+      renderPageActions({
+        selectedInstances: [
+          {
+            ...ubuntuInstance,
+            has_release_upgrades: false,
+          },
+        ],
+      });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -210,12 +233,7 @@ describe("InstancesPageActions", () => {
     });
 
     it("'Run script' menu item should be disabled if script feature is disabled", async () => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[{ ...windowsInstance }]}
-        />,
-      );
+      renderPageActions({ selectedInstances: [{ ...windowsInstance }] });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -228,12 +246,7 @@ describe("InstancesPageActions", () => {
     it("'Detach token' menu item should not be visible if pro licensing is disabled", async () => {
       setEndpointStatus({ status: "empty", path: "features" });
 
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={selected}
-        />,
-      );
+      renderPageActions();
 
       expect(
         screen.getByRole("button", { name: /attach token/i }),
@@ -246,17 +259,14 @@ describe("InstancesPageActions", () => {
     it("'Replace token' menu item should be visible if instance has token", async () => {
       setEndpointStatus({ status: "empty", path: "features" });
 
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={[
-            {
-              ...ubuntuInstance,
-              ubuntu_pro_info: ubuntuProInfo,
-            },
-          ]}
-        />,
-      );
+      renderPageActions({
+        selectedInstances: [
+          {
+            ...ubuntuInstance,
+            ubuntu_pro_info: ubuntuProInfo,
+          },
+        ],
+      });
 
       expect(
         screen.getByRole("button", { name: /replace token/i }),
@@ -269,12 +279,20 @@ describe("InstancesPageActions", () => {
 
   describe("should proper handle button clicks", () => {
     beforeEach(() => {
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={selected}
-        />,
+      renderPageActions();
+    });
+
+    it("'Export' menu item", async () => {
+      await userEvent.click(
+        screen.getByRole("button", { name: MENU_LABELS[0] }),
       );
+      await userEvent.click(screen.getByRole("menuitem", { name: /^export$/i }));
+
+      expect(
+        screen.getByRole("heading", {
+          name: `Export ${pluralize(selected.length, ["instance"], "exact")} as TSV`,
+        }),
+      ).toBeInTheDocument();
     });
 
     it("'Shutdown' menu item", async () => {
@@ -446,17 +464,14 @@ describe("InstancesPageActions", () => {
   });
 
   it("handles click for 'Replace token' menu item", async () => {
-    renderWithProviders(
-      <InstancesPageActions
-        isGettingInstances={false}
-        selectedInstances={[
-          {
-            ...ubuntuInstance,
-            ubuntu_pro_info: ubuntuProInfo,
-          },
-        ]}
-      />,
-    );
+    renderPageActions({
+      selectedInstances: [
+        {
+          ...ubuntuInstance,
+          ubuntu_pro_info: ubuntuProInfo,
+        },
+      ],
+    });
 
     await userEvent.click(
       await screen.findByRole("button", { name: MENU_LABELS[2] }),
@@ -475,12 +490,7 @@ describe("InstancesPageActions", () => {
       const startIdx = 9;
       const endIdx = 12;
 
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={instances.slice(startIdx, endIdx)}
-        />,
-      );
+      renderPageActions({ selectedInstances: instances.slice(startIdx, endIdx) });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
@@ -489,6 +499,8 @@ describe("InstancesPageActions", () => {
       await userEvent.click(
         screen.getByRole("menuitem", { name: /Run script/i }),
       );
+
+      expect(await screen.findByText(/this script will/i)).toBeInTheDocument();
     });
   });
 });
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
index d4483d86b9..1124179775 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
@@ -10,11 +10,14 @@ import { hasOneItem, getSelectionLabel, pluralize } from "@/utils/_helpers";
 import { Button, ContextualMenu, Icon } from "@canonical/react-components";
 import { lazy, memo, Suspense } from "react";
 import { useBoolean } from "usehooks-ts";
-import { getFeatures, hasUpgrades } from "../../helpers";
+import { getFeatures, hasUpgrades, type InstanceListParams } from "../../helpers";
 import InstanceRemoveFromLandscapeModal from "../InstanceRemoveFromLandscapeModal";
 import classes from "./InstancesPageActions.module.scss";
 import ShutDownModal from "../ShutDownModal";
 import RestartModal from "../RestartModal";
+const InstancesExportForm = lazy(
+  async () => import("../InstancesExportForm"),
+);
 
 const RunInstanceScriptForm = lazy(
   async () => import("@/features/scripts/components/RunInstanceScriptForm"),
@@ -38,11 +41,15 @@ const ReplaceTokenForm = lazy(
 );
 
 interface InstancesPageActionsProps {
+  readonly exportParams: InstanceListParams;
+  readonly instanceCount: number | undefined;
   readonly isGettingInstances: boolean;
   readonly selectedInstances: Instance[];
 }
 
 const InstancesPageActions = memo(function InstancesPageActions({
+  exportParams,
+  instanceCount,
   isGettingInstances,
   selectedInstances,
 }: InstancesPageActionsProps) {
@@ -78,6 +85,21 @@ const InstancesPageActions = memo(function InstancesPageActions({
       <PluralizeWithBoldCount count={instances.length} singular="instance" />
     );
   };
+  const hasSelectedInstances = selectedInstances.length > 0;
+  const hasInstancesToExport =
+    hasSelectedInstances || (instanceCount ?? 0) > 0;
+
+  const getExportTitle = () => {
+    if (hasSelectedInstances) {
+      return `Export ${pluralize(selectedInstances.length, ["instance"], "exact")} as TSV`;
+    }
+
+    if (instanceCount !== undefined) {
+      return `Export ${pluralize(instanceCount, ["instance"], "exact")} as TSV`;
+    }
+
+    return "Export instances as TSV";
+  };
 
   const handleRunScript = async () => {
     setSidePanelContent(
@@ -187,6 +209,21 @@ const InstancesPageActions = memo(function InstancesPageActions({
     );
   };
 
+  const handleExport = () => {
+    setSidePanelContent(
+      getExportTitle(),
+      <Suspense fallback={<LoadingState />}>
+        <InstancesExportForm
+          exportParams={exportParams}
+          instanceCount={instanceCount}
+          selectedInstanceCount={selectedInstances.length}
+          selectedInstanceIds={selectedInstances.map(({ id }) => id)}
+        />
+      </Suspense>,
+      "medium",
+    );
+  };
+
   const allInstancesHaveToken = selectedInstances.every(
     (instance) =>
       instance.ubuntu_pro_info?.result === "success" &&
@@ -253,6 +290,17 @@ const InstancesPageActions = memo(function InstancesPageActions({
   ];
 
   const operationsLinks = [
+    {
+      children: (
+        <>
+          <Icon name="export" />
+          <span>Export</span>
+        </>
+      ),
+      onClick: handleExport,
+      hasIcon: true,
+      disabled: !hasInstancesToExport,
+    },
     {
       children: (
         <>
@@ -262,6 +310,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       ),
       onClick: openShutdownModal,
       hasIcon: true,
+      disabled: !hasSelectedInstances,
     },
     {
       children: (
@@ -272,6 +321,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       ),
       onClick: openRebootModal,
       hasIcon: true,
+      disabled: !hasSelectedInstances,
     },
     {
       children: (
@@ -282,6 +332,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       ),
       onClick: openRemoveModal,
       hasIcon: true,
+      disabled: !hasSelectedInstances,
     },
     {
       children: (
@@ -293,6 +344,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       onClick: handleUpgradesRequest,
       hasIcon: true,
       disabled:
+        !hasSelectedInstances ||
         selectedInstances.every((instance) => !hasUpgrades(instance.alerts)) ||
         isGettingInstances,
     },
@@ -306,6 +358,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       onClick: handleDistributionUpgradesRequest,
       hasIcon: true,
       disabled:
+        !hasSelectedInstances ||
         isGettingInstances ||
         !selectedInstances.some((instance) => instance.has_release_upgrades),
     },
@@ -319,6 +372,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
           ),
           onClick: handleReportView,
           hasIcon: true,
+          disabled: !hasSelectedInstances,
         }
       : {},
     {
@@ -331,6 +385,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
       onClick: handleRunScript,
       hasIcon: true,
       disabled:
+        !hasSelectedInstances ||
         isGettingInstances ||
         selectedInstances.every((instance) => !getFeatures(instance).scripts),
     },
@@ -348,7 +403,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
             position="right"
             toggleLabel="Operations"
             toggleClassName="u-no-margin--bottom"
-            toggleDisabled={0 === selectedInstances.length}
+            toggleDisabled={!hasInstancesToExport}
             hasToggleIcon
           />,
           <ContextualMenu
diff --git a/src/features/instances/helpers.test.ts b/src/features/instances/helpers.test.ts
new file mode 100644
index 0000000000..8189432108
--- /dev/null
+++ b/src/features/instances/helpers.test.ts
@@ -0,0 +1,32 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { downloadInstancesCsv } from "./helpers";
+
+describe("downloadInstancesCsv", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("uses the provided filename and appends the tsv extension", () => {
+    const link = {
+      click: vi.fn(),
+      download: "",
+      href: "",
+      remove: vi.fn(),
+    } as unknown as HTMLAnchorElement;
+
+    vi.spyOn(document, "createElement").mockReturnValue(link);
+    vi.spyOn(document.body, "appendChild").mockReturnValue(link);
+    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:instances");
+    vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => undefined);
+
+    downloadInstancesCsv({
+      blob: new Blob(["csv"]),
+      filename: "selected-apps-export",
+    });
+
+    expect(link.download).toBe("selected-apps-export.tsv");
+    expect(link.href).toBe("blob:instances");
+    expect(link.click).toHaveBeenCalledTimes(1);
+    expect(link.remove).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/instances/helpers.ts b/src/features/instances/helpers.ts
index 78fc2dab82..4d65f14c3f 100644
--- a/src/features/instances/helpers.ts
+++ b/src/features/instances/helpers.ts
@@ -1,6 +1,10 @@
 import type { Instance, InstanceWithoutRelation } from "@/types/Instance";
+import type { ListFilter } from "@/types/Filters";
 import type { USGProfile } from "../usg-profiles";
+import { FILTERS } from "./constants";
 import type { RecoveryKeyActivityStatus } from "./types/RecoveryKey";
+import type { AxiosResponse } from "axios";
+import moment from "moment";
 
 export const isRecoveryKeyActivityFailedOrCanceled = (
   activityStatus?: RecoveryKeyActivityStatus | null,
@@ -116,3 +120,138 @@ export const getProfileTypes = (featureFlags: {
 
   return profileTypes;
 };
+
+export const getOptionQuery = (filter: ListFilter, optionValue: string) => {
+  return filter.type === "select"
+    ? (filter.options.find((option) => option.value === optionValue)?.query ??
+        "")
+    : "";
+};
+
+export interface GetInstanceQueryProps {
+  accessGroups: string[];
+  availabilityZones: string[];
+  contractExpiryDays: string;
+  os: string;
+  query: string;
+  status: string;
+  tags: string[];
+}
+
+export interface InstanceListParams {
+  archived_only?: boolean;
+  query?: string;
+  wsl_children?: boolean;
+  wsl_parents?: boolean;
+}
+
+export const getQuery = ({
+  accessGroups,
+  availabilityZones,
+  contractExpiryDays,
+  os,
+  query,
+  status,
+  tags,
+}: GetInstanceQueryProps) => {
+  const queryParts: string[] = [];
+  const osQuery = os ? getOptionQuery(FILTERS.os, os) : "";
+  const statusQuery = status ? getOptionQuery(FILTERS.status, status) : "";
+  const contractExpiryQuery = contractExpiryDays
+    ? getOptionQuery(FILTERS.contractExpiryDays, contractExpiryDays)
+    : "";
+
+  if (osQuery) {
+    queryParts.push(osQuery);
+  }
+
+  if (statusQuery) {
+    queryParts.push(statusQuery);
+  }
+
+  if (contractExpiryQuery) {
+    queryParts.push(contractExpiryQuery);
+  }
+
+  if (query) {
+    queryParts.push(...query.split(","));
+  }
+
+  if (tags.length) {
+    queryParts.push(`tag:${tags.join(" OR tag:")}`);
+  }
+
+  if (accessGroups.length) {
+    queryParts.push(`access-group:${accessGroups.join(" OR access-group:")}`);
+  }
+
+  if (availabilityZones.length) {
+    queryParts.push(
+      availabilityZones.includes("none")
+        ? "availability-zone:null"
+        : `availability-zone:${availabilityZones.join(" OR availability-zone:")}`,
+    );
+  }
+
+  return queryParts.join(" ");
+};
+
+export const getInstanceListParams = ({
+  filters,
+  wsl,
+}: {
+  filters: GetInstanceQueryProps & { status: string };
+  wsl: string[];
+}): InstanceListParams => ({
+  query: getQuery(filters),
+  archived_only: filters.status === "archived",
+  wsl_children: wsl.includes("child"),
+  wsl_parents: wsl.includes("parent"),
+});
+
+const getDownloadFilename = (response?: AxiosResponse<Blob>) => {
+  const disposition = response?.headers["content-disposition"];
+
+  if (typeof disposition === "string") {
+    const match = disposition.match(/filename="?([^"]+)"?/);
+    if (match?.[1]) {
+      return match[1];
+    }
+  }
+
+  return `instances-${moment().format("YYYY-MM-DD-HHmmss")}.tsv`;
+};
+
+const normalizeDownloadFilename = (filename?: string) => {
+  const trimmedFilename = filename?.trim();
+
+  if (!trimmedFilename) {
+    return undefined;
+  }
+
+  return trimmedFilename.toLowerCase().endsWith(".csv") ||
+    trimmedFilename.toLowerCase().endsWith(".tsv")
+    ? trimmedFilename
+    : `${trimmedFilename}.tsv`;
+};
+
+export const downloadInstancesCsv = ({
+  blob,
+  filename,
+  response,
+}: {
+  blob: Blob;
+  filename?: string;
+  response?: AxiosResponse<Blob>;
+}) => {
+  const objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+
+  link.href = objectUrl;
+  link.download =
+    normalizeDownloadFilename(filename) ?? getDownloadFilename(response);
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(objectUrl);
+};
diff --git a/src/features/instances/index.ts b/src/features/instances/index.ts
index f128c88a0f..bd1315a040 100644
--- a/src/features/instances/index.ts
+++ b/src/features/instances/index.ts
@@ -9,7 +9,10 @@ export { default as TagsAddConfirmationModal } from "./components/TagsAddConfirm
 export { FILTERS, ALERT_STATUSES, STATUS_FILTERS } from "./constants";
 export {
   getFeatures,
+  getInstanceListParams,
+  getOptionQuery,
   getRecoveryKeyRegenerationAttemptMessage,
+  getQuery,
   isRecoveryKeyActivityFailedOrCanceled,
   isRecoveryKeyActivityInProgress,
   shouldShowRecoveryKeyActivityStatus,
@@ -25,3 +28,4 @@ export type { Status, RecoveryKey, DistributionUpgradeTarget } from "./types";
 export { default as useInstanceSearchHelpTerms } from "./components/InstancesHeader/hooks/useInstanceSearchHelpTerms";
 export { default as RestartModal } from "./components/RestartModal";
 export { default as ShutDownModal } from "./components/ShutDownModal";
+export type { InstanceListParams } from "./helpers";
diff --git a/src/features/instances/types/InstancesExportJob.ts b/src/features/instances/types/InstancesExportJob.ts
new file mode 100644
index 0000000000..3654722856
--- /dev/null
+++ b/src/features/instances/types/InstancesExportJob.ts
@@ -0,0 +1,20 @@
+export type InstancesExportJobStatus =
+  | "processing"
+  | "completed"
+  | "failed"
+  | "canceled";
+
+export interface InstancesExportJob {
+  readonly id: string;
+  readonly name: string;
+  readonly filename: string;
+  readonly instanceCount: number;
+  readonly attributeLabels: string[];
+  readonly selectedFieldIds: string[];
+  readonly createdAt: string;
+  readonly status: InstancesExportJobStatus;
+  readonly progress: number;
+  readonly estimatedSecondsRemaining?: number | null;
+  readonly errorMessage?: string | null;
+  readonly downloadReady?: boolean;
+}
diff --git a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
index f578637c18..f8fab80973 100644
--- a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
+++ b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
@@ -3,7 +3,7 @@ import { renderWithProviders } from "@/tests/render";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ComponentProps } from "react";
-import { afterEach } from "vitest";
+import { afterEach, vi } from "vitest";
 import InstancesContainer from "./InstancesContainer";
 import { ubuntuInstance } from "@/tests/mocks/instance";
 
diff --git a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
index 996732b9fd..9291bf839b 100644
--- a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
+++ b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
@@ -2,26 +2,30 @@ import PageContent from "@/components/layout/PageContent";
 import PageHeader from "@/components/layout/PageHeader";
 import PageMain from "@/components/layout/PageMain";
 import { DETAILED_UPGRADES_VIEW_ENABLED } from "@/constants";
-import { InstancesPageActions, useGetInstances } from "@/features/instances";
+import {
+  getInstanceListParams,
+  InstancesPageActions,
+  useGetInstances,
+} from "@/features/instances";
 import usePageParams from "@/hooks/usePageParams";
 import type { Instance } from "@/types/Instance";
-import { useCallback, useState, type FC } from "react";
+import { useCallback, useMemo, useState, type FC } from "react";
 import InstancesContainer from "../InstancesContainer";
-import { getQuery } from "./helpers";
 
 const InstancesPage: FC = () => {
   const { currentPage, pageSize, wsl, ...filters } = usePageParams();
+  const instanceListParams = useMemo(
+    () => getInstanceListParams({ filters, wsl }),
+    [filters, wsl],
+  );
 
   const { instances, instancesCount, isGettingInstances } = useGetInstances({
-    query: getQuery(filters),
-    archived_only: filters.status === "archived",
+    ...instanceListParams,
     with_alerts: true,
     with_release_upgrades: true,
     with_upgrades: DETAILED_UPGRADES_VIEW_ENABLED,
     limit: pageSize,
     offset: (currentPage - 1) * pageSize,
-    wsl_children: wsl.includes("child"),
-    wsl_parents: wsl.includes("parent"),
   });
 
   const [selectedInstances, setSelectedInstances] = useState<Instance[]>([]);
@@ -37,6 +41,8 @@ const InstancesPage: FC = () => {
         actions={[
           <InstancesPageActions
             key="actions"
+            exportParams={instanceListParams}
+            instanceCount={instancesCount}
             isGettingInstances={isGettingInstances}
             selectedInstances={selectedInstances}
           />,
diff --git a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts b/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
index bfa5c64e8b..b5a933307a 100644
--- a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
+++ b/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { FILTERS } from "@/features/instances";
-import { getOptionQuery, getQuery } from "./helpers";
+import { getInstanceListParams, getOptionQuery, getQuery } from "./helpers";
 
 const windowsOption = FILTERS.os.options.find(
   (option) => option.value === "windows",
@@ -83,4 +83,26 @@ describe("InstancesPage helpers", () => {
 
     expect(query).toBe(windowsOption.query);
   });
+
+  it("builds list params that preserve archived and WSL filters", () => {
+    expect(
+      getInstanceListParams({
+        filters: {
+          os: "",
+          status: "archived",
+          contractExpiryDays: "",
+          query: "name:web",
+          tags: [],
+          accessGroups: [],
+          availabilityZones: [],
+        },
+        wsl: ["child", "parent"],
+      }),
+    ).toEqual({
+      archived_only: true,
+      query: "name:web",
+      wsl_children: true,
+      wsl_parents: true,
+    });
+  });
 });
diff --git a/src/pages/dashboard/instances/InstancesPage/helpers.ts b/src/pages/dashboard/instances/InstancesPage/helpers.ts
index bb5e63cc1b..9ae77b5f6f 100644
--- a/src/pages/dashboard/instances/InstancesPage/helpers.ts
+++ b/src/pages/dashboard/instances/InstancesPage/helpers.ts
@@ -1,67 +1 @@
-import { FILTERS } from "@/features/instances";
-import type { ListFilter } from "@/types/Filters";
-
-export const getOptionQuery = (filter: ListFilter, optionValue: string) => {
-  return filter.type === "select"
-    ? (filter.options.find((option) => option.value === optionValue)?.query ??
-        "")
-    : "";
-};
-
-interface GetQueryProps {
-  accessGroups: string[];
-  availabilityZones: string[];
-  contractExpiryDays: string;
-  os: string;
-  query: string;
-  status: string;
-  tags: string[];
-}
-
-export const getQuery = ({
-  accessGroups,
-  availabilityZones,
-  contractExpiryDays,
-  os,
-  query,
-  status,
-  tags,
-}: GetQueryProps) => {
-  const queryParts: string[] = [];
-
-  if (os) {
-    queryParts.push(getOptionQuery(FILTERS.os, os));
-  }
-
-  if (status) {
-    queryParts.push(getOptionQuery(FILTERS.status, status));
-  }
-
-  if (contractExpiryDays) {
-    queryParts.push(
-      getOptionQuery(FILTERS.contractExpiryDays, contractExpiryDays),
-    );
-  }
-
-  if (query) {
-    queryParts.push(...query.split(","));
-  }
-
-  if (tags.length) {
-    queryParts.push(`tag:${tags.join(" OR tag:")}`);
-  }
-
-  if (accessGroups.length) {
-    queryParts.push(`access-group:${accessGroups.join(" OR access-group:")}`);
-  }
-
-  if (availabilityZones.length) {
-    queryParts.push(
-      availabilityZones.includes("none")
-        ? "availability-zone:null"
-        : `availability-zone:${availabilityZones.join(" OR availability-zone:")}`,
-    );
-  }
-
-  return queryParts.join(" ");
-};
+export { getInstanceListParams, getOptionQuery, getQuery } from "@/features/instances";
diff --git a/src/styles/partials/icons.scss b/src/styles/partials/icons.scss
index 04aa3b1092..5c48f0b652 100644
--- a/src/styles/partials/icons.scss
+++ b/src/styles/partials/icons.scss
@@ -60,6 +60,8 @@
 @include vf-p-icon-import;
 @include vf-p-icon-user-group;
 @include vf-p-icon-tag;
+@include vf-p-icon-export;
+@include vf-p-icon-arrow-down;
 
 @mixin vf-icon-okta($color) {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='256px' height='256px' viewBox='0 0 256 256' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Ctitle%3Eokta%3C/title%3E%3Cg%3E%3Cpath d='M140.84428,1.77777778 L135.578481,66.6311111 C133.0879,66.3466667 130.59732,66.2044444 128.03558,66.2044444 C124.833405,66.2044444 121.702389,66.4177778 118.642533,66.9155556 L115.653837,35.4844444 C115.582677,34.4888889 116.365431,33.6355556 117.361663,33.6355556 L122.698621,33.6355556 L120.136881,1.84888889 C120.065722,0.853333333 120.848476,0 121.773549,0 L139.207612,0 C140.203845,0 140.986598,0.853333333 140.84428,1.84888889 L140.84428,1.84888889 L140.84428,1.77777778 Z M96.8677434,4.97777778 C96.5831056,4.05333333 95.5868734,3.48444444 94.6618006,3.84 L78.2951286,9.81333333 C77.3700558,10.1688889 76.9430991,11.2355556 77.3700558,12.0888889 L90.6768718,41.1022222 L85.6245513,42.9511111 C84.6994785,43.3066667 84.2725218,44.3733333 84.6994785,45.2266667 L98.2909322,73.7422222 C103.200934,71.04 108.537892,68.9777778 114.159488,67.6977778 L96.9389028,4.97777778 L96.8677434,4.97777778 Z M56.7338171,23.04 L94.3771628,76.0888889 C89.6094801,79.2177778 85.268754,82.9155556 81.568463,87.1822222 L59.0109193,64.9955556 C58.2993249,64.2844444 58.3704843,63.1466667 59.0820788,62.5066667 L63.2093265,59.0933333 L40.7941017,36.4088889 C40.0825073,35.6977778 40.1536667,34.56 40.9364206,33.92 L54.2432366,22.7555556 C55.0259905,22.1155556 56.0933821,22.2577778 56.6626577,23.04 L56.7338171,23.04 Z M25.1390241,53.76 C24.3562702,53.1911111 23.2177191,53.4755556 22.719603,54.3288889 L14.0381509,69.4044444 C13.5400348,70.2577778 13.895832,71.3244444 14.7497453,71.7511111 L43.6404795,85.4044444 L40.9364206,90.0266667 C40.4383045,90.88 40.7941017,92.0177778 41.7191745,92.3733333 L70.4675897,105.528889 C72.5312136,100.195556 75.3064319,95.2177778 78.7220852,90.7377778 L25.1390241,53.76 Z M3.86235042,94.72 C4.00466931,93.7244444 5.00090152,93.1555556 5.92597429,93.3688889 L68.902082,109.795556 C67.2654148,115.128889 66.340342,120.746667 66.1980231,126.577778 L34.6743896,124.017778 C33.6781573,123.946667 32.9665629,123.022222 33.1800412,122.026667 L34.105114,116.764444 L2.29684266,113.777778 C1.30061044,113.706667 0.660175451,112.782222 0.802494339,111.786667 L3.79119098,94.6488889 L3.79119098,94.6488889 L3.86235042,94.72 Z M1.51408878,137.244444 C0.517856564,137.315556 -0.12257843,138.24 0.0197404578,139.235556 L3.07959654,156.373333 C3.22191543,157.368889 4.21814764,157.937778 5.14322041,157.724444 L36.026419,149.688889 L36.9514918,154.951111 C37.0938106,155.946667 38.0900429,156.515556 39.0151156,156.302222 L69.4713575,147.911111 C67.6923714,142.648889 66.5538203,137.031111 66.2691826,131.271111 L1.44292933,137.244444 L1.51408878,137.244444 Z M11.6187298,182.328889 C11.1206137,181.475556 11.4764109,180.408889 12.3303242,179.982222 L71.1080247,152.106667 C73.3139675,157.368889 76.3026641,162.275556 79.8606363,166.684444 L54.1009177,185.031111 C53.3181638,185.6 52.1796127,185.386667 51.6814966,184.533333 L48.9774377,179.84 L22.719603,197.973333 C21.9368491,198.542222 20.798298,198.257778 20.3001819,197.404444 L11.5475703,182.328889 L11.6187298,182.328889 Z M82.849333,170.097778 L37.0938106,216.391111 C36.3822162,217.102222 36.4533756,218.24 37.2361295,218.88 L50.6141049,230.044444 C51.3968588,230.684444 52.4642505,230.542222 53.033526,229.76 L71.5349814,203.733333 L75.6622291,207.217778 C76.444983,207.857778 77.5835341,207.715556 78.1528097,206.862222 L96.0849895,180.835556 C91.2461473,177.848889 86.7631024,174.222222 82.9204924,170.097778 L82.849333,170.097778 Z M73.8120836,244.408889 C72.8870108,244.053333 72.4600542,242.986667 72.8870108,242.133333 L99.9987589,182.968889 C104.97992,185.528889 110.388038,187.448889 116.009634,188.515556 L108.039776,219.093333 C107.826298,220.017778 106.758906,220.586667 105.833833,220.231111 L100.781513,218.382222 L92.313539,249.173333 C92.0289012,250.097778 91.032669,250.666667 90.1075962,250.311111 L73.7409242,244.337778 L73.7409242,244.337778 L73.8120836,244.408889 Z M120.492679,189.297778 L115.22688,254.151111 C115.15572,255.146667 115.938474,256 116.863547,256 L134.297611,256 C135.293843,256 136.076597,255.146667 135.934278,254.151111 L133.372538,222.364444 L138.709496,222.364444 C139.705728,222.364444 140.488482,221.511111 140.417323,220.515556 L137.428626,189.084444 C134.36877,189.582222 131.237755,189.795556 128.03558,189.795556 C125.47384,189.795556 122.983259,189.653333 120.492679,189.297778 L120.492679,189.297778 Z M183.255308,13.7244444 C183.682265,12.8 183.255308,11.8044444 182.330235,11.4488889 L165.963563,5.47555556 C165.03849,5.12 164.042258,5.68888889 163.75762,6.61333333 L155.289647,37.4044444 L150.237326,35.5555556 C149.312253,35.2 148.316021,35.7688889 148.031383,36.6933333 L140.061526,67.2711111 C145.754281,68.4088889 151.091239,70.3288889 156.072401,72.8177778 L183.255308,13.7244444 L183.255308,13.7244444 Z M218.977349,39.5377778 L173.221826,85.8311111 C169.379217,81.7066667 164.967331,78.08 160.057329,75.0933333 L177.989509,49.0666667 C178.558785,48.2844444 179.697336,48.0711111 180.48009,48.7111111 L184.607337,52.1955556 L203.108793,26.1688889 C203.678068,25.3866667 204.81662,25.2444444 205.528214,25.8844444 L218.906189,37.0488889 C219.688943,37.6888889 219.688943,38.8266667 219.048508,39.5377778 L218.977349,39.5377778 Z M243.740835,75.9466667 C244.665908,75.52 244.950546,74.4533333 244.45243,73.6 L235.699818,58.5244444 C235.201702,57.6711111 234.063151,57.4577778 233.280397,57.9555556 L207.022562,76.0888889 L204.318503,71.4666667 C203.820387,70.6133333 202.681836,70.3288889 201.899082,70.9688889 L176.139364,89.3155556 C179.697336,93.7244444 182.614873,98.6311111 184.891975,103.893333 L243.669676,76.0177778 L243.740835,75.9466667 Z M252.991563,99.5555556 L255.98026,116.693333 C256.122578,117.688889 255.482143,118.542222 254.485911,118.684444 L189.659658,124.728889 C189.37502,118.897778 188.236469,113.351111 186.457483,108.088889 L216.913725,99.6977778 C217.838798,99.4133333 218.83503,100.053333 218.977349,101.048889 L219.902422,106.311111 L250.78562,98.2755556 C251.710693,98.0622222 252.706925,98.6311111 252.849244,99.6266667 L252.849244,99.6266667 L252.991563,99.5555556 Z M250.074026,162.488889 C250.999098,162.702222 251.995331,162.133333 252.13765,161.137778 L255.126346,144 C255.268665,143.004444 254.62823,142.151111 253.631998,142.008889 L221.823727,139.022222 L222.748799,133.76 C222.891118,132.764444 222.250683,131.911111 221.254451,131.768889 L189.730817,129.208889 C189.588499,135.04 188.663426,140.657778 187.026759,145.991111 L250.002866,162.417778 L250.002866,162.417778 L250.074026,162.488889 Z M233.280397,201.6 C232.782281,202.453333 231.64373,202.666667 230.860976,202.168889 L177.277915,165.191111 C180.693568,160.711111 183.468786,155.733333 185.53241,150.4 L214.280826,163.555556 C215.205898,163.982222 215.561696,165.048889 215.063579,165.902222 L212.359521,170.524444 L241.250255,184.177778 C242.104168,184.604444 242.459965,185.671111 241.961849,186.524444 L233.280397,201.6 L233.280397,201.6 L233.280397,201.6 Z M161.622837,179.768889 L199.266183,232.817778 C199.835458,233.6 200.97401,233.742222 201.685604,233.102222 L214.99242,221.937778 C215.775174,221.297778 215.775174,220.16 215.134739,219.448889 L192.719514,196.764444 L196.846762,193.351111 C197.629516,192.711111 197.629516,191.573333 196.917921,190.862222 L174.360378,168.675556 C170.588927,172.942222 166.31936,176.711111 161.551678,179.768889 L161.551678,179.768889 L161.622837,179.768889 Z M161.26704,252.017778 C160.341967,252.373333 159.345735,251.804444 159.061097,250.88 L141.840512,188.16 C147.462108,186.88 152.799066,184.817778 157.709068,182.115556 L171.300522,210.631111 C171.727478,211.555556 171.300522,212.622222 170.375449,212.906667 L165.323128,214.755556 L178.629944,243.768889 C179.056901,244.693333 178.629944,245.688889 177.704871,246.044444 L161.338199,252.017778 L161.338199,252.017778 L161.26704,252.017778 Z' fill='#{vf-url-friendly-color($color)}'%3E%3C/path%3E%3C/g%3E%3C/svg%3E%0A");
diff --git a/src/tests/mocks/instancesExport.ts b/src/tests/mocks/instancesExport.ts
new file mode 100644
index 0000000000..32702e961e
--- /dev/null
+++ b/src/tests/mocks/instancesExport.ts
@@ -0,0 +1,41 @@
+import type { InstancesExportJob } from "../../features/instances/types/InstancesExportJob";
+
+export const processingExportJob: InstancesExportJob = {
+  id: "job-processing",
+  name: "Instances export 2026-06-03 14:10:00",
+  filename: "instances-export-1.tsv",
+  instanceCount: 120,
+  attributeLabels: ["Instance name", "Hostname", "Status"],
+  selectedFieldIds: ["title", "hostname", "status"],
+  createdAt: "2026-06-03T12:10:00.000Z",
+  status: "processing",
+  progress: 35,
+  downloadReady: false,
+};
+
+export const completedExportJob: InstancesExportJob = {
+  id: "job-completed",
+  name: "Instances export 2026-06-03 14:08:00",
+  filename: "instances-export-2.tsv",
+  instanceCount: 42,
+  attributeLabels: ["Instance name", "Access group"],
+  selectedFieldIds: ["title", "access_group"],
+  createdAt: "2026-06-03T12:08:00.000Z",
+  status: "completed",
+  progress: 100,
+  downloadReady: true,
+};
+
+export const failedExportJob: InstancesExportJob = {
+  id: "job-failed",
+  name: "Instances export 2026-06-03 14:06:00",
+  filename: "instances-export-3.tsv",
+  instanceCount: 12,
+  attributeLabels: ["Hostname"],
+  selectedFieldIds: ["hostname"],
+  createdAt: "2026-06-03T12:06:00.000Z",
+  status: "failed",
+  progress: 100,
+  errorMessage: "",
+  downloadReady: false,
+};
diff --git a/src/tests/render.tsx b/src/tests/render.tsx
index f4207a5efc..3f4fe59f84 100644
--- a/src/tests/render.tsx
+++ b/src/tests/render.tsx
@@ -31,7 +31,9 @@ export function renderHookWithProviders() {
     return (
       <MemoryRouter>
         <QueryClientProvider client={queryClient}>
-          <AuthProvider>{children}</AuthProvider>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
         </QueryClientProvider>
       </MemoryRouter>
     );
diff --git a/src/tests/server/handlers/index.ts b/src/tests/server/handlers/index.ts
index cac028cc75..f781e954bd 100644
--- a/src/tests/server/handlers/index.ts
+++ b/src/tests/server/handlers/index.ts
@@ -12,6 +12,7 @@ import employees from "./employees";
 import eventsLog from "./eventsLog";
 import features from "./features";
 import instance from "./instance";
+import instancesExport from "./instancesExport";
 import invitations from "./invitations";
 import kernel from "./kernel";
 import mirrors from "./mirrors";
@@ -57,6 +58,7 @@ export default [
   ...employees,
   ...eventsLog,
   ...instance,
+  ...instancesExport,
   ...invitations,
   ...kernel,
   ...mirrors,
diff --git a/src/tests/server/handlers/instancesExport.ts b/src/tests/server/handlers/instancesExport.ts
new file mode 100644
index 0000000000..3210504a30
--- /dev/null
+++ b/src/tests/server/handlers/instancesExport.ts
@@ -0,0 +1,104 @@
+import { API_URL } from "@/constants";
+import type { InstancesExportJob } from "../../../features/instances/types/InstancesExportJob";
+import { getEndpointStatus } from "@/tests/controllers/controller";
+import { http, HttpResponse } from "msw";
+import {
+  createEndpointStatusError,
+  createEndpointStatusNetworkError,
+} from "./_constants";
+import { shouldApplyEndpointStatus } from "./_helpers";
+
+const EXPORTS_LIST_PATH = "computers/exports";
+
+export default [
+  http.get(`${API_URL}${EXPORTS_LIST_PATH}`, () => {
+    if (shouldApplyEndpointStatus(EXPORTS_LIST_PATH)) {
+      const { status, response } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusNetworkError();
+      }
+      if (status === "empty") {
+        return HttpResponse.json({ count: 0, results: [] });
+      }
+      if (status === "variant" && Array.isArray(response)) {
+        const jobs = response as InstancesExportJob[];
+        return HttpResponse.json({ count: jobs.length, results: jobs });
+      }
+    }
+    return HttpResponse.json({ count: 0, results: [] });
+  }),
+
+  http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
+    if (shouldApplyEndpointStatus("computers/export/csv")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    const body = (await request.json()) as Record<string, unknown>;
+    const job: InstancesExportJob = {
+      id: "job-new",
+      name: typeof body.name === "string" ? body.name : "New export",
+      filename: "instances-export.tsv",
+      instanceCount: 0,
+      attributeLabels: [],
+      selectedFieldIds: Array.isArray(body.selected_field_ids)
+        ? (body.selected_field_ids as string[])
+        : [],
+      createdAt: new Date().toISOString(),
+      status: "processing",
+      progress: 0,
+      downloadReady: false,
+    };
+    return HttpResponse.json(job, { status: 201 });
+  }),
+
+  http.post(
+    `${API_URL}computers/exports/:jobId/cancel`,
+    ({ params }) => {
+      if (shouldApplyEndpointStatus("computers/exports/:jobId/cancel")) {
+        const { status } = getEndpointStatus();
+        if (status === "error") {
+          return createEndpointStatusError();
+        }
+      }
+      const job: Partial<InstancesExportJob> = {
+        id: params.jobId as string,
+        status: "canceled",
+      };
+      return HttpResponse.json(job);
+    },
+  ),
+
+  http.delete(`${API_URL}computers/exports/:jobId`, () => {
+    if (shouldApplyEndpointStatus("computers/exports/:jobId")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.get(`${API_URL}computers/exports/:jobId/download`, () => {
+    if (shouldApplyEndpointStatus("computers/exports/:jobId/download")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusNetworkError();
+      }
+    }
+    return new HttpResponse("col1\tcol2\nval1\tval2", {
+      headers: { "Content-Type": "text/tab-separated-values" },
+    });
+  }),
+
+  http.get(`${API_URL}computers/export/annotations`, () => {
+    if (shouldApplyEndpointStatus("computers/export/annotations")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    return HttpResponse.json({ results: [] });
+  }),
+];

From 2d3f4ba348a982e4420bf3874135b3c248e818b0 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Tue, 16 Jun 2026 12:06:33 +0200
Subject: [PATCH 03/41] refine

---
 .../api/useCreateStandaloneAccount.ts         |   2 +-
 src/features/activities/api/index.ts          |   1 +
 .../activities/api/useExportActivitiesCsv.ts  |  39 +++
 .../Activities/Activities.module.scss         |  21 ++
 .../components/Activities/Activities.tsx      |  93 ++++-
 .../ActivitiesActions/ActivitiesActions.tsx   |  69 +++-
 .../components/ActivitiesActions/helpers.ts   |  19 ++
 .../ActivitiesContainer.tsx                   |  54 +++
 .../components/ActivitiesContainer/index.ts   |   1 +
 .../ActivitiesExportForm.module.scss          |  38 +++
 .../ActivitiesExportForm.test.tsx             | 147 ++++++++
 .../ActivitiesExportForm.tsx                  | 293 ++++++++++++++++
 .../ActivitiesExportForm/constants.ts         |  80 +++++
 .../ActivitiesExportForm/helpers.ts           |  12 +
 .../components/ActivitiesExportForm/index.ts  |   1 +
 .../components/ActivitiesExportForm/types.ts  |  13 +
 .../ActivitiesHeader/ActivitiesHeader.tsx     |  16 +-
 src/features/activities/index.tsx             |   1 +
 .../activities/types/ActivitiesExportJob.ts   |   5 +
 src/features/exports/api/exportJobsShared.ts  |  36 ++
 .../exports/api/useCancelExportJob.ts         |  22 ++
 .../exports/api/useDiscardExportJob.ts        |  22 ++
 .../exports/api/useDownloadExportJob.ts       |  53 +++
 .../exports/api/useGetAllExportJobsList.ts    |  67 ++++
 src/features/exports/api/useGetExportJob.ts   |  30 ++
 .../ExportDetailsSidePanel.tsx                | 191 +++++++++++
 .../ExportDetailsSidePanel/helpers.tsx        |  39 +++
 .../ExportDetailsSidePanel/index.ts           |   1 +
 .../ExportProgressBar.module.scss             |  39 +++
 .../ExportProgressBar/ExportProgressBar.tsx   |  45 +++
 .../components/ExportProgressBar/constants.ts |   3 +
 .../components/ExportProgressBar/helpers.ts   |  28 ++
 .../components/ExportProgressBar/index.ts     |   3 +
 .../ExportsContainer/ExportsContainer.tsx     |  65 ++++
 .../components/ExportsContainer/constants.ts  |   5 +
 .../components/ExportsContainer/index.ts      |   1 +
 .../components/ExportsList/ExportsList.tsx    | 234 +++++++++++++
 .../exports/components/ExportsList/index.ts   |   1 +
 .../exports/components/ExportsList/types.ts   |   5 +
 .../SortableFieldList.module.scss             |   0
 .../SortableFieldList/SortableFieldList.tsx   | 193 ++++-------
 .../components/SortableFieldList/constants.ts |   3 +
 .../SortableFieldList/hooks/index.ts          |   6 +
 .../hooks/useDragOverlayPosition.ts           |  16 +
 .../hooks/useFlipAnimation.ts                 |  60 ++++
 .../hooks/usePendingFieldScroll.ts            |  30 ++
 .../hooks/useSortableFieldCleanup.ts          |  24 ++
 .../hooks/useSortableFieldRefs.ts             |  24 ++
 .../hooks/useSyncSortableFields.ts            |  31 ++
 .../components/SortableFieldList/index.ts     |   0
 src/features/exports/constants.ts             |   2 +
 src/features/exports/index.ts                 |   9 +
 src/features/exports/types/ExportForm.ts      |  11 +
 src/features/exports/types/ExportJob.ts       |  23 ++
 src/features/instances/api/index.ts           |   4 -
 .../api/instancesExportJobsShared.ts          |  74 +---
 .../api/useCancelInstancesExportJob.ts        |  46 ---
 .../api/useDiscardInstancesExportJob.ts       |  38 ---
 .../useDownloadInstancesExportJob.test.tsx    | 126 -------
 .../api/useDownloadInstancesExportJob.ts      |  87 ++---
 .../instances/api/useExportInstancesCsv.ts    |  29 +-
 .../api/useGetExportAnnotationFields.ts       |  65 ----
 .../api/useGetInstancesExportJobs.ts          |  44 ---
 .../InstanceList/InstanceList.test.tsx        |   5 +-
 .../components/InstanceList/InstanceList.tsx  |  64 ++--
 .../InstancesExportDetailsPanel.module.scss   |   7 -
 .../InstancesExportDetailsPanel.test.tsx      | 161 ---------
 .../InstancesExportDetailsPanel.tsx           | 284 ----------------
 .../ExportProgressBar.module.scss             |  57 ----
 .../ExportProgressBar.test.tsx                |  63 ----
 .../ExportProgressBar/ExportProgressBar.tsx   |  66 ----
 .../components/ExportProgressBar/index.ts     |   1 -
 .../InstancesExportDetailsPanel/index.ts      |   1 -
 .../InstancesExportForm.test.tsx              | 321 ++++++------------
 .../InstancesExportForm.tsx                   |  72 ++--
 ...nstancesExportAnnotationFields.module.scss |   5 -
 .../InstancesExportAnnotationFields.tsx       |  78 -----
 .../InstancesExportAnnotationFields/index.ts  |   1 -
 .../InstancesExportForm/constants.ts          |  27 +-
 .../InstancesExportForm/helpers.test.ts       |  12 +-
 .../components/InstancesExportForm/helpers.ts |  24 +-
 .../components/InstancesExportForm/types.ts   |  17 +-
 .../InstancesExportNotification.module.scss   |   3 -
 .../InstancesExportNotification.test.tsx      |  69 ----
 .../InstancesExportNotification.tsx           |  71 ----
 .../InstancesExportNotification/index.ts      |   1 -
 .../InstancesHeader/InstancesHeader.tsx       |   2 -
 .../InstancesPageActions.test.tsx             |  16 +-
 .../InstancesPageActions.tsx                  |  42 +--
 .../InstancesPageActions/helpers.ts           |  41 +--
 src/features/instances/helpers.test.ts        |  32 --
 src/features/instances/helpers.ts             |  49 ---
 src/features/instances/index.ts               |   1 +
 .../instances/types/InstancesExportJob.ts     |  21 +-
 src/features/instances/types/index.ts         |   1 +
 .../AttachmentFile/AttachmentFile.tsx         |  10 +-
 .../hooks/useUsgProfileDownload.tsx           |  18 +-
 .../hooks/useUsgProfileDownloadAudit.tsx      |  15 +-
 src/libs/routes/exports.ts                    |   9 +
 src/libs/routes/paths.ts                      |   2 +
 src/libs/routes/routes.ts                     |   2 +
 .../account/exports/ExportsPage.test.tsx      |  95 ++++++
 .../dashboard/account/exports/ExportsPage.tsx |  32 ++
 src/pages/dashboard/account/exports/index.ts  |   1 +
 .../dashboard/activities/ActivitiesPage.tsx   |  45 ++-
 src/pages/dashboard/events-log/helpers.ts     |  19 +-
 .../InstancesContainer.test.tsx               |   3 +
 .../InstancesContainer/InstancesContainer.tsx |   9 +
 .../instances/InstancesPage/InstancesPage.tsx |  11 +
 .../instances/InstancesPage/helpers.ts        |   6 +-
 .../instances/ReportForm/ReportForm.tsx       |  30 +-
 .../ActivityPanel/ActivityPanel.tsx           |  17 +-
 src/routes/DashboardRoutes.tsx                |   1 +
 src/routes/elements.tsx                       |   3 +
 src/templates/dashboard/UserInfo/UserInfo.tsx |  22 ++
 src/tests/mocks/exports.ts                    | 105 ++++++
 src/tests/mocks/instancesExport.ts            |  41 ---
 src/tests/server/handlers/activity.ts         |  89 +++++
 src/tests/server/handlers/exports.ts          | 101 ++++++
 src/tests/server/handlers/index.ts            |   4 +-
 src/tests/server/handlers/instance.ts         | 109 +++++-
 src/tests/server/handlers/instancesExport.ts  | 104 ------
 src/utils/browserDownload.ts                  |  28 ++
 123 files changed, 3124 insertions(+), 2162 deletions(-)
 create mode 100644 src/features/activities/api/useExportActivitiesCsv.ts
 create mode 100644 src/features/activities/components/ActivitiesActions/helpers.ts
 create mode 100644 src/features/activities/components/ActivitiesContainer/ActivitiesContainer.tsx
 create mode 100644 src/features/activities/components/ActivitiesContainer/index.ts
 create mode 100644 src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss
 create mode 100644 src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
 create mode 100644 src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
 create mode 100644 src/features/activities/components/ActivitiesExportForm/constants.ts
 create mode 100644 src/features/activities/components/ActivitiesExportForm/helpers.ts
 create mode 100644 src/features/activities/components/ActivitiesExportForm/index.ts
 create mode 100644 src/features/activities/components/ActivitiesExportForm/types.ts
 create mode 100644 src/features/activities/types/ActivitiesExportJob.ts
 create mode 100644 src/features/exports/api/exportJobsShared.ts
 create mode 100644 src/features/exports/api/useCancelExportJob.ts
 create mode 100644 src/features/exports/api/useDiscardExportJob.ts
 create mode 100644 src/features/exports/api/useDownloadExportJob.ts
 create mode 100644 src/features/exports/api/useGetAllExportJobsList.ts
 create mode 100644 src/features/exports/api/useGetExportJob.ts
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/index.ts
 create mode 100644 src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
 create mode 100644 src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx
 create mode 100644 src/features/exports/components/ExportProgressBar/constants.ts
 create mode 100644 src/features/exports/components/ExportProgressBar/helpers.ts
 create mode 100644 src/features/exports/components/ExportProgressBar/index.ts
 create mode 100644 src/features/exports/components/ExportsContainer/ExportsContainer.tsx
 create mode 100644 src/features/exports/components/ExportsContainer/constants.ts
 create mode 100644 src/features/exports/components/ExportsContainer/index.ts
 create mode 100644 src/features/exports/components/ExportsList/ExportsList.tsx
 create mode 100644 src/features/exports/components/ExportsList/index.ts
 create mode 100644 src/features/exports/components/ExportsList/types.ts
 rename src/features/{instances/components/InstancesExportForm => exports}/components/SortableFieldList/SortableFieldList.module.scss (100%)
 rename src/features/{instances/components/InstancesExportForm => exports}/components/SortableFieldList/SortableFieldList.tsx (72%)
 create mode 100644 src/features/exports/components/SortableFieldList/constants.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/index.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useDragOverlayPosition.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useFlipAnimation.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/usePendingFieldScroll.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useSortableFieldCleanup.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useSortableFieldRefs.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
 rename src/features/{instances/components/InstancesExportForm => exports}/components/SortableFieldList/index.ts (100%)
 create mode 100644 src/features/exports/constants.ts
 create mode 100644 src/features/exports/index.ts
 create mode 100644 src/features/exports/types/ExportForm.ts
 create mode 100644 src/features/exports/types/ExportJob.ts
 delete mode 100644 src/features/instances/api/useCancelInstancesExportJob.ts
 delete mode 100644 src/features/instances/api/useDiscardInstancesExportJob.ts
 delete mode 100644 src/features/instances/api/useDownloadInstancesExportJob.test.tsx
 delete mode 100644 src/features/instances/api/useGetExportAnnotationFields.ts
 delete mode 100644 src/features/instances/api/useGetInstancesExportJobs.ts
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
 delete mode 100644 src/features/instances/components/InstancesExportDetailsPanel/index.ts
 delete mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
 delete mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
 delete mode 100644 src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
 delete mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
 delete mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
 delete mode 100644 src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
 delete mode 100644 src/features/instances/components/InstancesExportNotification/index.ts
 delete mode 100644 src/features/instances/helpers.test.ts
 create mode 100644 src/libs/routes/exports.ts
 create mode 100644 src/pages/dashboard/account/exports/ExportsPage.test.tsx
 create mode 100644 src/pages/dashboard/account/exports/ExportsPage.tsx
 create mode 100644 src/pages/dashboard/account/exports/index.ts
 create mode 100644 src/tests/mocks/exports.ts
 delete mode 100644 src/tests/mocks/instancesExport.ts
 create mode 100644 src/tests/server/handlers/exports.ts
 delete mode 100644 src/tests/server/handlers/instancesExport.ts
 create mode 100644 src/utils/browserDownload.ts

diff --git a/src/features/account-creation/api/useCreateStandaloneAccount.ts b/src/features/account-creation/api/useCreateStandaloneAccount.ts
index 3ac533eba7..40766de254 100644
--- a/src/features/account-creation/api/useCreateStandaloneAccount.ts
+++ b/src/features/account-creation/api/useCreateStandaloneAccount.ts
@@ -15,7 +15,7 @@ export const useCreateStandaloneAccount = () => {
   const axiosInstance = axios.create({ baseURL: API_URL });
 
   const { isPending, mutateAsync } = useMutation<
-    AxiosResponse<unknown>,
+    AxiosResponse<void>,
     AxiosError<ApiError>,
     CreateStandaloneAccountParams
   >({
diff --git a/src/features/activities/api/index.ts b/src/features/activities/api/index.ts
index 9ee7f8f37c..3d56b94e98 100644
--- a/src/features/activities/api/index.ts
+++ b/src/features/activities/api/index.ts
@@ -4,3 +4,4 @@ export { default as useCancelActivities } from "./useCancelActivities";
 export { default as useGetActivityTypes } from "./useGetActivityTypes";
 export { default as useGetSingleActivity } from "./useGetSingleActivity";
 export { default as useRedoActivities } from "./useRedoActivities";
+export { useExportActivitiesCsv } from "./useExportActivitiesCsv";
diff --git a/src/features/activities/api/useExportActivitiesCsv.ts b/src/features/activities/api/useExportActivitiesCsv.ts
new file mode 100644
index 0000000000..24e709eac4
--- /dev/null
+++ b/src/features/activities/api/useExportActivitiesCsv.ts
@@ -0,0 +1,39 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { ActivitiesExportJob } from "../types/ActivitiesExportJob";
+
+interface CreateActivitiesExportJobParams {
+  readonly name: string;
+  readonly query: string;
+  readonly selected_activity_ids: number[];
+  readonly selected_field_ids: string[];
+  readonly retain_until: string;
+  readonly display_query: string;
+  readonly has_selection: boolean;
+}
+
+export const useExportActivitiesCsv = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { isPending, mutateAsync } = useMutation<
+    AxiosResponse<ActivitiesExportJob>,
+    AxiosError<ApiError>,
+    CreateActivitiesExportJobParams
+  >({
+    mutationFn: async (params) =>
+      authFetch.post<ActivitiesExportJob>("activities/exports", params),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["activities-export-jobs"],
+      });
+    },
+  });
+
+  return {
+    exportActivitiesCsv: mutateAsync,
+    isExportActivitiesCsvLoading: isPending,
+  };
+};
diff --git a/src/features/activities/components/Activities/Activities.module.scss b/src/features/activities/components/Activities/Activities.module.scss
index bec4564508..58ed15ec8c 100644
--- a/src/features/activities/components/Activities/Activities.module.scss
+++ b/src/features/activities/components/Activities/Activities.module.scss
@@ -1,3 +1,24 @@
+@import "vanilla-framework/scss/settings_spacing";
+@import "vanilla-framework/scss/settings_colors";
+
 .description {
   width: 40%;
 }
+
+.subhead {
+  background: $colors--theme--background-alt;
+  border-bottom: 1px solid $colors--theme--border-low-contrast;
+  display: flex;
+  gap: $sph--large;
+  padding: $spv--small 0 $spv--small 2.5rem;
+
+  > .buttons {
+    display: flex;
+    gap: $sph--large;
+
+    > :not(:last-child) {
+      border-right: 1px solid $colors--theme--border-low-contrast;
+      padding-right: $sph--large !important;
+    }
+  }
+}
diff --git a/src/features/activities/components/Activities/Activities.tsx b/src/features/activities/components/Activities/Activities.tsx
index 3485665ff9..84b5371772 100644
--- a/src/features/activities/components/Activities/Activities.tsx
+++ b/src/features/activities/components/Activities/Activities.tsx
@@ -27,6 +27,9 @@ interface ActivitiesProps {
   readonly selectedActivities: ActivityCommon[];
   readonly setSelectedActivities: (activities: ActivityCommon[]) => void;
   readonly instanceId?: number;
+  readonly isAllSelected?: boolean;
+  readonly onSelectAll?: () => void;
+  readonly onClearSelection?: () => void;
 }
 
 const Activities: FC<ActivitiesProps> = ({
@@ -36,6 +39,9 @@ const Activities: FC<ActivitiesProps> = ({
   isGettingActivities,
   selectedActivities,
   setSelectedActivities,
+  isAllSelected = false,
+  onSelectAll,
+  onClearSelection,
 }) => {
   const handleActivityDetailsOpen = useOpenActivityDetailsPanel();
 
@@ -44,15 +50,33 @@ const Activities: FC<ActivitiesProps> = ({
   useOpenActivityDetails(handleActivityDetailsOpen);
 
   const handleClearSelection = useCallback(() => {
-    setSelectedActivities([]);
-  }, [setSelectedActivities]);
+    if (onClearSelection) {
+      onClearSelection();
+    } else {
+      setSelectedActivities([]);
+    }
+  }, [setSelectedActivities, onClearSelection]);
 
   const toggleAll = useCallback(() => {
-    setSelectedActivities(selectedActivities.length !== 0 ? [] : activities);
-  }, [activities, selectedActivities, setSelectedActivities]);
+    if (isAllSelected || selectedActivities.length !== 0) {
+      handleClearSelection();
+    } else {
+      setSelectedActivities(activities);
+    }
+  }, [
+    activities,
+    isAllSelected,
+    selectedActivities,
+    setSelectedActivities,
+    handleClearSelection,
+  ]);
 
   const handleToggleActivity = useCallback(
     (activity: ActivityCommon) => {
+      if (isAllSelected) {
+        handleClearSelection();
+        return;
+      }
       setSelectedActivities(
         selectedActivities.includes(activity)
           ? selectedActivities.filter(
@@ -61,7 +85,12 @@ const Activities: FC<ActivitiesProps> = ({
           : [...selectedActivities, activity],
       );
     },
-    [selectedActivities, setSelectedActivities],
+    [
+      isAllSelected,
+      selectedActivities,
+      setSelectedActivities,
+      handleClearSelection,
+    ],
   );
 
   const columns = useMemo<Column<ActivityCommon>[]>(
@@ -77,10 +106,12 @@ const Activities: FC<ActivitiesProps> = ({
                 inline
                 onChange={toggleAll}
                 checked={
-                  activities.length > 0 &&
-                  selectedActivities.length === activities.length
+                  isAllSelected ||
+                  (activities.length > 0 &&
+                    selectedActivities.length === activities.length)
                 }
                 indeterminate={
+                  !isAllSelected &&
                   selectedActivities.length > 0 &&
                   selectedActivities.length < activities.length
                 }
@@ -97,7 +128,9 @@ const Activities: FC<ActivitiesProps> = ({
                 }
                 inline
                 labelClassName="u-no-margin--bottom u-no-padding--top"
-                checked={selectedActivities.includes(row.original)}
+                checked={
+                  isAllSelected || selectedActivities.includes(row.original)
+                }
                 onChange={() => {
                   handleToggleActivity(row.original);
                 }}
@@ -167,6 +200,7 @@ const Activities: FC<ActivitiesProps> = ({
       ].filter((col) => !instanceId || col.accessor !== "computer_id"),
     [
       activities,
+      isAllSelected,
       selectedActivities,
       toggleAll,
       handleToggleActivity,
@@ -176,11 +210,53 @@ const Activities: FC<ActivitiesProps> = ({
     ],
   );
 
+  const showSubhead =
+    onSelectAll &&
+    (isAllSelected || selectedActivities.length > 0) &&
+    activityCount !== undefined &&
+    activityCount > activities.length;
+
+  const subhead = showSubhead ? (
+    <tr>
+      <td colSpan={columns.length} className="u-no-padding">
+        <div className={classes.subhead}>
+          <span>
+            {isAllSelected
+              ? `All ${activityCount} activities selected`
+              : `${selectedActivities.length} of ${activityCount} activities selected`}
+          </span>
+          <div className={classes.buttons}>
+            {!isAllSelected && onSelectAll && (
+              <Button
+                className="u-no-padding u-no-margin"
+                appearance="link"
+                onClick={onSelectAll}
+              >
+                Select all {activityCount} activities
+              </Button>
+            )}
+            {onClearSelection && (
+              <Button
+                className="u-no-padding u-no-margin"
+                appearance="link"
+                onClick={onClearSelection}
+              >
+                Clear selection
+              </Button>
+            )}
+          </div>
+        </div>
+      </td>
+    </tr>
+  ) : undefined;
+
   return (
     <>
       <ActivitiesHeader
         resetSelectedIds={handleClearSelection}
         selected={selectedActivities}
+        activityCount={activityCount}
+        isAllSelected={isAllSelected}
       />
       {isGettingActivities ? (
         <LoadingState />
@@ -190,6 +266,7 @@ const Activities: FC<ActivitiesProps> = ({
           columns={columns}
           data={activities}
           minWidth={1150}
+          subhead={subhead}
         />
       )}
       <TablePagination
diff --git a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
index a79dd65a68..ad2763c805 100644
--- a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
+++ b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
@@ -1,29 +1,82 @@
-import type { FC } from "react";
+import LoadingState from "@/components/layout/LoadingState";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
+import usePageParams from "@/hooks/usePageParams";
+import useSidePanel from "@/hooks/useSidePanel";
+import { Button, Icon } from "@canonical/react-components";
+import { ConfirmationButton } from "@canonical/react-components";
+import { lazy, Suspense, type FC } from "react";
 import type { ActivityCommon } from "../../types";
 import { pluralize } from "@/utils/_helpers";
-import { ConfirmationButton } from "@canonical/react-components";
+import { getExportTitle } from "./helpers";
 import {
   useApproveActivities,
   useCancelActivities,
   useRedoActivities,
 } from "../../api";
 
+const ActivitiesExportForm = lazy(
+  async () => import("../ActivitiesExportForm"),
+);
+
 interface ActivitiesActionsProps {
   readonly selected: ActivityCommon[];
+  readonly activityCount?: number;
+  readonly isAllSelected?: boolean;
+  readonly exportBaseQuery?: string;
 }
 
-const ActivitiesActions: FC<ActivitiesActionsProps> = ({ selected }) => {
+const ActivitiesActions: FC<ActivitiesActionsProps> = ({
+  selected,
+  activityCount,
+  isAllSelected = false,
+  exportBaseQuery = "",
+}) => {
   const { notify } = useNotify();
   const debug = useDebug();
+  const { setSidePanelContent } = useSidePanel();
+  const { query, search, status, fromDate, toDate, type } = usePageParams();
   const { approveActivities, isApprovingActivities } = useApproveActivities();
   const { cancelActivities, isCancelingActivities } = useCancelActivities();
   const { redoActivities, isRedoingActivities } = useRedoActivities();
 
   const selectedIds = selected.map((activity) => activity.id);
+
+  const exportQuery = [
+    exportBaseQuery,
+    search,
+    query,
+    status ? `status:${status}` : "",
+    fromDate ? `created-after:${fromDate}` : "",
+    toDate ? `created-before:${toDate}` : "",
+    type ? `type:${type}` : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   const title = pluralize(selected.length, ["activity", "activities"], "exact");
 
+  const handleExport = () => {
+    setSidePanelContent(
+      getExportTitle({
+        isAllSelected,
+        selectedCount: selected.length,
+        activityCount,
+      }),
+      <Suspense fallback={<LoadingState />}>
+        <ActivitiesExportForm
+          exportParams={{ query: exportQuery }}
+          activityCount={activityCount}
+          selectedActivityCount={isAllSelected ? undefined : selected.length}
+          selectedActivityIds={
+            !isAllSelected && selected.length > 0 ? selectedIds : undefined
+          }
+        />
+      </Suspense>,
+      "medium",
+    );
+  };
+
   const handleApproveActivities = async () => {
     try {
       await approveActivities({ query: `id:${selectedIds.join(" OR id:")}` });
@@ -66,6 +119,16 @@ const ActivitiesActions: FC<ActivitiesActionsProps> = ({ selected }) => {
   return (
     <div key="buttons" className="p-segmented-control">
       <div className="p-segmented-control__list">
+        <Button
+          className="p-segmented-control__button"
+          type="button"
+          hasIcon
+          disabled={!isAllSelected && selected.length === 0}
+          onClick={handleExport}
+        >
+          <Icon name="export" />
+          <span>Export</span>
+        </Button>
         <ConfirmationButton
           className="p-segmented-control__button"
           type="button"
diff --git a/src/features/activities/components/ActivitiesActions/helpers.ts b/src/features/activities/components/ActivitiesActions/helpers.ts
new file mode 100644
index 0000000000..477672cbbd
--- /dev/null
+++ b/src/features/activities/components/ActivitiesActions/helpers.ts
@@ -0,0 +1,19 @@
+import { pluralize } from "@/utils/_helpers";
+
+export const getExportTitle = ({
+  isAllSelected,
+  selectedCount,
+  activityCount,
+}: {
+  isAllSelected: boolean;
+  selectedCount: number;
+  activityCount: number | undefined;
+}): string => {
+  if (!isAllSelected && selectedCount > 0) {
+    return `Export ${pluralize(selectedCount, ["activity", "activities"], "exact")} as TSV`;
+  }
+  if (activityCount !== undefined) {
+    return `Export ${pluralize(activityCount, ["activity", "activities"], "exact")} as TSV`;
+  }
+  return "Export activities as TSV";
+};
diff --git a/src/features/activities/components/ActivitiesContainer/ActivitiesContainer.tsx b/src/features/activities/components/ActivitiesContainer/ActivitiesContainer.tsx
new file mode 100644
index 0000000000..cc049e4863
--- /dev/null
+++ b/src/features/activities/components/ActivitiesContainer/ActivitiesContainer.tsx
@@ -0,0 +1,54 @@
+import LoadingState from "@/components/layout/LoadingState";
+import type { FC } from "react";
+import type { ActivityCommon } from "../../types";
+import Activities from "../Activities";
+import ActivitiesEmptyState from "../ActivitiesEmptyState";
+
+interface ActivitiesContainerProps {
+  readonly activities: ActivityCommon[];
+  readonly activitiesCount: number | undefined;
+  readonly isGettingActivities: boolean;
+  readonly isGettingUnfilteredActivities: boolean;
+  readonly unfilteredActivitiesCount: number | undefined;
+  readonly selectedActivities: ActivityCommon[];
+  readonly setSelectedActivities: (activities: ActivityCommon[]) => void;
+  readonly isAllSelected: boolean;
+  readonly onSelectAll: () => void;
+  readonly onClearSelection: () => void;
+}
+
+const ActivitiesContainer: FC<ActivitiesContainerProps> = ({
+  activities,
+  activitiesCount,
+  isGettingActivities,
+  isGettingUnfilteredActivities,
+  unfilteredActivitiesCount,
+  selectedActivities,
+  setSelectedActivities,
+  isAllSelected,
+  onSelectAll,
+  onClearSelection,
+}) => {
+  if (isGettingUnfilteredActivities) {
+    return <LoadingState />;
+  }
+
+  if (!unfilteredActivitiesCount) {
+    return <ActivitiesEmptyState />;
+  }
+
+  return (
+    <Activities
+      activities={activities}
+      activitiesCount={activitiesCount}
+      isGettingActivities={isGettingActivities}
+      selectedActivities={selectedActivities}
+      setSelectedActivities={setSelectedActivities}
+      isAllSelected={isAllSelected}
+      onSelectAll={onSelectAll}
+      onClearSelection={onClearSelection}
+    />
+  );
+};
+
+export default ActivitiesContainer;
diff --git a/src/features/activities/components/ActivitiesContainer/index.ts b/src/features/activities/components/ActivitiesContainer/index.ts
new file mode 100644
index 0000000000..d5eaf5034a
--- /dev/null
+++ b/src/features/activities/components/ActivitiesContainer/index.ts
@@ -0,0 +1 @@
+export { default } from "./ActivitiesContainer";
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss
new file mode 100644
index 0000000000..77b9e12dfd
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss
@@ -0,0 +1,38 @@
+@import "vanilla-framework/scss/settings_colors";
+@import "vanilla-framework/scss/settings_spacing";
+
+.description {
+  margin-bottom: $spv--large;
+}
+
+.stepOneFields {
+  display: grid;
+  gap: $spv--medium;
+  margin-bottom: $spv--large;
+}
+
+.optionList {
+  display: grid;
+  gap: $sph--small;
+}
+
+.emptyState {
+  color: $colors--theme--text-muted;
+  margin-top: $spv--small;
+}
+
+:global(.p-accordion__tab) {
+  padding-right: $sph--x-large !important;
+}
+
+:global(.p-accordion__tab)::before {
+  margin-right: 0 !important;
+  position: absolute !important;
+  right: 1.5rem !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+}
+
+:global(.p-accordion__tab[aria-expanded="false"])::before {
+  transform: translateY(-50%) rotate(-90deg) !important;
+}
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
new file mode 100644
index 0000000000..cdacc52370
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -0,0 +1,147 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ComponentProps } from "react";
+import { describe, expect, it } from "vitest";
+import ActivitiesExportForm from "./ActivitiesExportForm";
+
+type ActivitiesExportFormProps = ComponentProps<typeof ActivitiesExportForm>;
+
+const defaultProps = {
+  exportParams: { query: "status:succeeded" },
+  activityCount: 10,
+} satisfies ActivitiesExportFormProps;
+
+const openAttributeGroup = async (
+  user: ReturnType<typeof userEvent.setup>,
+  name: RegExp,
+) => {
+  await user.click(screen.getByRole("tab", { name }));
+};
+
+describe("ActivitiesExportForm", () => {
+  it("shows the export details fields and activity attribute groups", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ActivitiesExportForm {...defaultProps} />);
+
+    expect(
+      screen.getByText(/select the attributes you want to include/i),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Export name" })).toBeVisible();
+    expect(screen.getByLabelText("Keep until")).toBeVisible();
+    expect(
+      screen.getByRole("searchbox", { name: "Search attributes" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("tab", { name: /primary identity/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: /audit & time/i }),
+    ).toBeInTheDocument();
+
+    await openAttributeGroup(user, /primary identity/i);
+    expect(screen.getByRole("checkbox", { name: "ID" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Summary" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps Next disabled until an export name and at least one field are selected", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ActivitiesExportForm {...defaultProps} />);
+
+    const nextButton = screen.getByRole("button", { name: "Next" });
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "My activities export",
+    );
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "ID" }));
+    expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("filters attributes by field name", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ActivitiesExportForm
+        {...defaultProps}
+        exportParams={{ query: "" }}
+        activityCount={5}
+      />,
+    );
+
+    await user.type(
+      screen.getByRole("searchbox", { name: "Search attributes" }),
+      "creator",
+    );
+
+    await openAttributeGroup(user, /audit & time/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Creator" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("checkbox", { name: "ID" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("moves to the review step and back without losing the selected field", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ActivitiesExportForm
+        {...defaultProps}
+        exportParams={{ query: "" }}
+        activityCount={5}
+      />,
+    );
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "My activities export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "ID" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(
+      screen.getByText(/review and reorder the columns/i),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Order for ID")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+    await openAttributeGroup(user, /primary identity/i);
+    expect(screen.getByRole("checkbox", { name: "ID" })).toBeChecked();
+  });
+
+  it("queues an activities export and shows a success notification with a status action", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <ActivitiesExportForm {...defaultProps} activityCount={5} />,
+    );
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "My activities export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "ID" }));
+    await user.click(screen.getByRole("checkbox", { name: "Type" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    expect(await screen.findByText("TSV export in progress")).toBeVisible();
+    expect(
+      screen.getByText(
+        'Your activities export "My activities export" for "status:succeeded" is being generated.',
+      ),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "View export status" }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
new file mode 100644
index 0000000000..62722e59ff
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
@@ -0,0 +1,293 @@
+import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
+import { INPUT_DATE_FORMAT } from "@/constants";
+import useDebug from "@/hooks/useDebug";
+import useNotify from "@/hooks/useNotify";
+import useSidePanel from "@/hooks/useSidePanel";
+import { ROUTES } from "@/libs/routes";
+import { getFormikError } from "@/utils/formikErrors";
+import {
+  Accordion,
+  CheckboxInput,
+  Form,
+  Input,
+} from "@canonical/react-components";
+import { useFormik } from "formik";
+import moment from "moment";
+import { useCallback, useMemo, useState, type FC } from "react";
+import { useNavigate } from "react-router";
+import classNames from "classnames";
+import { SortableFieldList } from "@/features/exports";
+import { useExportActivitiesCsv } from "../../api/useExportActivitiesCsv";
+import classes from "./ActivitiesExportForm.module.scss";
+import {
+  EXPORT_FIELD_GROUPS,
+  INITIAL_VALUES,
+  VALIDATION_SCHEMA,
+} from "./constants";
+import { buildActivityExportQuery } from "./helpers";
+import type {
+  ActivityListParams,
+  ExportField,
+  ActivitiesExportFormValues,
+  StepIndex,
+} from "./types";
+
+interface ActivitiesExportFormProps {
+  readonly exportParams: ActivityListParams;
+  readonly activityCount: number | undefined;
+  readonly selectedActivityCount?: number;
+  readonly selectedActivityIds?: number[];
+}
+
+const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
+  exportParams,
+  activityCount: _activityCount,
+  selectedActivityCount: _selectedActivityCount,
+  selectedActivityIds,
+}) => {
+  const { closeSidePanel } = useSidePanel();
+  const { notify } = useNotify();
+  const navigate = useNavigate();
+  const debug = useDebug();
+  const { exportActivitiesCsv, isExportActivitiesCsvLoading } =
+    useExportActivitiesCsv();
+  const [step, setStep] = useState<StepIndex>(0);
+  const [attributeSearch, setAttributeSearch] = useState("");
+  const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
+
+  const handleBack = () => {
+    setStep(0);
+  };
+
+  const formik = useFormik<ActivitiesExportFormValues>({
+    initialValues: INITIAL_VALUES,
+    validationSchema: VALIDATION_SCHEMA,
+    onSubmit: async (values) => {
+      const selectedFields = EXPORT_FIELD_GROUPS.flatMap(
+        (group) => group.fields,
+      ).filter((field) => values.selectedFieldIds.includes(field.id));
+
+      if (step === 0) {
+        setOrderedFields(selectedFields);
+        setStep(1);
+        return;
+      }
+
+      const fieldsToExport = orderedFields.length
+        ? orderedFields
+        : selectedFields;
+      const query = buildActivityExportQuery({
+        query: exportParams.query,
+        selectedActivityIds,
+      });
+
+      try {
+        const response = await exportActivitiesCsv({
+          name: values.name.trim(),
+          query,
+          selected_activity_ids: selectedActivityIds ?? [],
+          selected_field_ids: fieldsToExport.map((field) => field.id),
+          retain_until: moment(values.retainUntil).toISOString(),
+          display_query: exportParams.query ?? "",
+          has_selection: !!selectedActivityIds?.length,
+        });
+        const job = response.data;
+
+        closeSidePanel();
+        notify.success({
+          title: "TSV export in progress",
+          message: `Your activities export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated.`,
+          actions: [
+            {
+              label: "View export status",
+              onClick: () =>
+                navigate(
+                  ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+                ),
+            },
+          ],
+        });
+      } catch (error) {
+        debug(error);
+      }
+    },
+  });
+
+  const toggleField = useCallback(
+    (fieldId: string) => {
+      const nextSelectedFieldIds = formik.values.selectedFieldIds.includes(
+        fieldId,
+      )
+        ? formik.values.selectedFieldIds.filter((id) => id !== fieldId)
+        : [...formik.values.selectedFieldIds, fieldId];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const toggleGroupSelect = useCallback(
+    (groupFields: readonly ExportField[]) => {
+      const groupIds = groupFields.map((field) => field.id);
+      const allSelected = groupIds.every((id) =>
+        formik.values.selectedFieldIds.includes(id),
+      );
+
+      const nextSelectedFieldIds = allSelected
+        ? formik.values.selectedFieldIds.filter((id) => !groupIds.includes(id))
+        : [...new Set([...formik.values.selectedFieldIds, ...groupIds])];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const filteredFieldGroups = useMemo(() => {
+    const normalizedSearch = attributeSearch.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return EXPORT_FIELD_GROUPS;
+    }
+
+    return EXPORT_FIELD_GROUPS.flatMap((group) => {
+      const matchingFields = group.fields.filter((field) =>
+        field.label.toLowerCase().includes(normalizedSearch),
+      );
+
+      if (!matchingFields.length) {
+        return [];
+      }
+
+      return [{ ...group, fields: matchingFields }];
+    });
+  }, [attributeSearch]);
+
+  const accordionSections = filteredFieldGroups.map((group) => {
+    const groupIds = group.fields.map((field) => field.id);
+    const allSelected = groupIds.every((id) =>
+      formik.values.selectedFieldIds.includes(id),
+    );
+    const someSelected =
+      !allSelected &&
+      groupIds.some((id) => formik.values.selectedFieldIds.includes(id));
+
+    return {
+      key: group.key,
+      title: (
+        <CheckboxInput
+          label={group.title}
+          checked={allSelected}
+          indeterminate={someSelected}
+          aria-label={`${group.title} select all`}
+          onChange={() => {
+            toggleGroupSelect(group.fields);
+          }}
+        />
+      ),
+      content: (
+        <div className={classes.optionList}>
+          {group.fields.map((field) => (
+            <CheckboxInput
+              key={field.id}
+              checked={formik.values.selectedFieldIds.includes(field.id)}
+              label={field.label}
+              onChange={() => {
+                toggleField(field.id);
+              }}
+            />
+          ))}
+        </div>
+      ),
+    };
+  });
+
+  const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
+
+  const stepContent =
+    step === 0 ? (
+      <>
+        <div className={classes.stepOneFields}>
+          <Input
+            type="text"
+            label="Export name"
+            required
+            error={getFormikError(formik, "name")}
+            {...formik.getFieldProps("name")}
+          />
+          <Input
+            type="date"
+            label="Keep until"
+            required
+            min={moment().add(1, "day").format(INPUT_DATE_FORMAT)}
+            max={moment().add(100, "years").format(INPUT_DATE_FORMAT)}
+            error={getFormikError(formik, "retainUntil")}
+            {...formik.getFieldProps("retainUntil")}
+          />
+          <Input
+            type="search"
+            label="Search attributes"
+            placeholder="Search attributes"
+            value={attributeSearch}
+            onChange={(event) => {
+              setAttributeSearch(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+              }
+            }}
+          />
+        </div>
+        <div className={classNames({ "is-error": !!selectedFieldIdsError })}>
+          {!!selectedFieldIdsError && (
+            <p className="p-form-validation__message">
+              {selectedFieldIdsError}
+            </p>
+          )}
+          {filteredFieldGroups.length ? (
+            <Accordion sections={accordionSections} titleElement="h5" />
+          ) : (
+            <p className={classes.emptyState}>
+              No attributes match your search.
+            </p>
+          )}
+        </div>
+      </>
+    ) : (
+      <SortableFieldList
+        fields={orderedFields}
+        onOrderChange={setOrderedFields}
+      />
+    );
+
+  return (
+    <Form noValidate onSubmit={formik.handleSubmit}>
+      {step === 0 && (
+        <p className={classes.description}>
+          Name your export, select the attributes you want to include, and
+          filter the list if needed.
+        </p>
+      )}
+
+      {stepContent}
+
+      <SidePanelFormButtons
+        hasBackButton={step === 1}
+        onBackButtonPress={step === 1 ? handleBack : undefined}
+        submitButtonDisabled={
+          (step === 0 &&
+            (!formik.values.name.trim() ||
+              formik.values.selectedFieldIds.length === 0)) ||
+          isExportActivitiesCsvLoading ||
+          formik.isSubmitting
+        }
+        submitButtonText={step === 0 ? "Next" : "Generate TSV"}
+        onCancel={closeSidePanel}
+      />
+    </Form>
+  );
+};
+
+export default ActivitiesExportForm;
diff --git a/src/features/activities/components/ActivitiesExportForm/constants.ts b/src/features/activities/components/ActivitiesExportForm/constants.ts
new file mode 100644
index 0000000000..80ffbb5ed7
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/constants.ts
@@ -0,0 +1,80 @@
+import type { ExportFieldGroup, ActivitiesExportFormValues } from "./types";
+import { INPUT_DATE_FORMAT } from "@/constants";
+import moment from "moment";
+import * as Yup from "yup";
+
+export const INITIAL_VALUES: ActivitiesExportFormValues = {
+  name: "",
+  selectedFieldIds: [],
+  retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
+};
+
+export const VALIDATION_SCHEMA = Yup.object().shape({
+  name: Yup.string().trim().required("This field is required."),
+  selectedFieldIds: Yup.array()
+    .of(Yup.string().required())
+    .min(1, "Select at least one attribute."),
+  retainUntil: Yup.string()
+    .required("This field is required.")
+    .test(
+      "retain-until-future",
+      "Must be a date in the future.",
+      (value) => !!value && moment(value).isAfter(moment().startOf("day")),
+    )
+    .test(
+      "retain-until-max",
+      "Must be within 100 years from today.",
+      (value) =>
+        !!value && moment(value).isSameOrBefore(moment().add(100, "years")),
+    ),
+});
+
+export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
+  {
+    title: "Primary Identity",
+    key: "primary-identity",
+    fields: [
+      { id: "id", label: "ID", defaultSelected: true },
+      { id: "type", label: "Type", defaultSelected: true },
+      { id: "summary", label: "Summary", defaultSelected: true },
+      { id: "status", label: "Status", defaultSelected: true },
+    ],
+  },
+  {
+    title: "Target & Progress",
+    key: "target-progress",
+    fields: [
+      { id: "computer_id", label: "Computer ID", defaultSelected: true },
+      { id: "progress", label: "Progress" },
+    ],
+  },
+  {
+    title: "Outcome Details",
+    key: "outcome-details",
+    fields: [
+      { id: "result_code", label: "Result code" },
+      { id: "result_text", label: "Result text" },
+    ],
+  },
+  {
+    title: "Audit & Time",
+    key: "audit-time",
+    fields: [
+      { id: "creator", label: "Creator", defaultSelected: true },
+      { id: "creation_time", label: "Creation time", defaultSelected: true },
+      { id: "schedule_after_time", label: "Schedule after time" },
+      { id: "schedule_before_time", label: "Schedule before time" },
+      { id: "modification_time", label: "Modification time" },
+      { id: "completion_time", label: "Completion time" },
+    ],
+  },
+  {
+    title: "Context & Metadata",
+    key: "context-metadata",
+    fields: [
+      { id: "access_group", label: "Access group" },
+      { id: "account_id", label: "Account ID" },
+      { id: "parent_id", label: "Parent ID" },
+    ],
+  },
+];
diff --git a/src/features/activities/components/ActivitiesExportForm/helpers.ts b/src/features/activities/components/ActivitiesExportForm/helpers.ts
new file mode 100644
index 0000000000..fbdff0b37e
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/helpers.ts
@@ -0,0 +1,12 @@
+export const buildActivityExportQuery = ({
+  query,
+  selectedActivityIds,
+}: {
+  query?: string;
+  selectedActivityIds?: number[];
+}): string => {
+  if (selectedActivityIds?.length) {
+    return selectedActivityIds.map((id) => `id:${id}`).join(" OR ");
+  }
+  return query?.trim() ?? "";
+};
diff --git a/src/features/activities/components/ActivitiesExportForm/index.ts b/src/features/activities/components/ActivitiesExportForm/index.ts
new file mode 100644
index 0000000000..ddb9e8c1a7
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./ActivitiesExportForm";
diff --git a/src/features/activities/components/ActivitiesExportForm/types.ts b/src/features/activities/components/ActivitiesExportForm/types.ts
new file mode 100644
index 0000000000..cfb0a61820
--- /dev/null
+++ b/src/features/activities/components/ActivitiesExportForm/types.ts
@@ -0,0 +1,13 @@
+export type { ExportField, ExportFieldGroup } from "@/features/exports";
+
+export type StepIndex = 0 | 1;
+
+export interface ActivityListParams {
+  readonly query?: string;
+}
+
+export interface ActivitiesExportFormValues {
+  readonly name: string;
+  readonly selectedFieldIds: string[];
+  readonly retainUntil: string;
+}
diff --git a/src/features/activities/components/ActivitiesHeader/ActivitiesHeader.tsx b/src/features/activities/components/ActivitiesHeader/ActivitiesHeader.tsx
index 9918217b14..67ea8bc8a1 100644
--- a/src/features/activities/components/ActivitiesHeader/ActivitiesHeader.tsx
+++ b/src/features/activities/components/ActivitiesHeader/ActivitiesHeader.tsx
@@ -20,11 +20,15 @@ import {
 interface ActivitiesHeaderProps {
   readonly selected: ActivityCommon[];
   readonly resetSelectedIds: () => void;
+  readonly activityCount?: number;
+  readonly isAllSelected?: boolean;
 }
 
 const ActivitiesHeader: FC<ActivitiesHeaderProps> = ({
   resetSelectedIds,
   selected,
+  activityCount,
+  isAllSelected = false,
 }) => {
   const [searchText, setSearchText] = useState<string>("");
   const [showSearchHelp, setShowSearchHelp] = useState(false);
@@ -40,6 +44,9 @@ const ActivitiesHeader: FC<ActivitiesHeaderProps> = ({
   }));
 
   useEffect(() => {
+    // Intentional prop->state sync: resets the search input when the URL query
+    // param changes externally (e.g. browser back/forward).
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setSearchText(query ?? "");
   }, [query]);
 
@@ -87,7 +94,14 @@ const ActivitiesHeader: FC<ActivitiesHeaderProps> = ({
             <ActivitiesDateFilter />
           </div>
 
-          {IS_PANEL && <ActivitiesActions selected={selected} />}
+          {IS_PANEL && (
+            <ActivitiesActions
+              selected={selected}
+              activityCount={activityCount}
+              isAllSelected={isAllSelected}
+              exportBaseQuery={instanceId ? `computer:id:${instanceId}` : ""}
+            />
+          )}
         </div>
       </div>
       <SearchHelpPopup
diff --git a/src/features/activities/index.tsx b/src/features/activities/index.tsx
index e1a574c19e..738fc40051 100644
--- a/src/features/activities/index.tsx
+++ b/src/features/activities/index.tsx
@@ -26,6 +26,7 @@ export {
 } from "./api";
 export { default as Activities } from "./components/Activities";
 export { default as ActivitiesActions } from "./components/ActivitiesActions";
+export { default as ActivitiesContainer } from "./components/ActivitiesContainer";
 export { default as ActivitiesEmptyState } from "./components/ActivitiesEmptyState";
 export { ACTIVITY_STATUSES } from "./constants";
 export { useOpenActivityDetails, useOpenActivityDetailsPanel } from "./hooks";
diff --git a/src/features/activities/types/ActivitiesExportJob.ts b/src/features/activities/types/ActivitiesExportJob.ts
new file mode 100644
index 0000000000..70f2daf4ad
--- /dev/null
+++ b/src/features/activities/types/ActivitiesExportJob.ts
@@ -0,0 +1,5 @@
+import type { ExportJob } from "@/features/exports";
+
+export interface ActivitiesExportJob extends ExportJob {
+  readonly type: "activity";
+}
diff --git a/src/features/exports/api/exportJobsShared.ts b/src/features/exports/api/exportJobsShared.ts
new file mode 100644
index 0000000000..77f00f8b71
--- /dev/null
+++ b/src/features/exports/api/exportJobsShared.ts
@@ -0,0 +1,36 @@
+import type { ExportJob } from "../types/ExportJob";
+
+export const hasProcessingExportJobs = (jobs: ExportJob[]) =>
+  jobs.some((job) => job.status === "processing");
+
+export const getStatusLabel = (job: ExportJob): string => {
+  switch (job.status) {
+    case "completed":
+      return "Ready";
+    case "failed":
+      return "Failed";
+    case "processing":
+    default:
+      return `Generating (${job.progress}%)`;
+  }
+};
+
+export const getStatusIcon = (job: ExportJob): string => {
+  switch (job.status) {
+    case "completed":
+      return "status-succeeded-small";
+    case "failed":
+      return "status-failed-small";
+    case "processing":
+    default:
+      return "status-in-progress-small";
+  }
+};
+
+export const getTypeLabel = (job: ExportJob): string =>
+  job.type === "activity" ? "Activities" : "Instances";
+
+export interface AllExportJobsResponse {
+  readonly count: number;
+  readonly results: ExportJob[];
+}
diff --git a/src/features/exports/api/useCancelExportJob.ts b/src/features/exports/api/useCancelExportJob.ts
new file mode 100644
index 0000000000..ce2b399dc9
--- /dev/null
+++ b/src/features/exports/api/useCancelExportJob.ts
@@ -0,0 +1,22 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+
+export const useCancelExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<
+    AxiosResponse<void>,
+    AxiosError<ApiError>,
+    string
+  >({
+    mutationFn: async (jobId) => authFetch.post(`exports/${jobId}/cancel`),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    },
+  });
+
+  return { cancelExportJob: mutateAsync };
+};
diff --git a/src/features/exports/api/useDiscardExportJob.ts b/src/features/exports/api/useDiscardExportJob.ts
new file mode 100644
index 0000000000..2f0889caa5
--- /dev/null
+++ b/src/features/exports/api/useDiscardExportJob.ts
@@ -0,0 +1,22 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+
+export const useDiscardExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<
+    AxiosResponse<void>,
+    AxiosError<ApiError>,
+    string
+  >({
+    mutationFn: async (jobId) => authFetch.delete(`exports/${jobId}`),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    },
+  });
+
+  return { discardExportJob: mutateAsync };
+};
diff --git a/src/features/exports/api/useDownloadExportJob.ts b/src/features/exports/api/useDownloadExportJob.ts
new file mode 100644
index 0000000000..e2a27ff0b2
--- /dev/null
+++ b/src/features/exports/api/useDownloadExportJob.ts
@@ -0,0 +1,53 @@
+import useFetch from "@/hooks/useFetch";
+import {
+  downloadBlob,
+  supportsNativeSave,
+  type SaveFilePickerHandle,
+} from "@/utils/browserDownload";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ExportJob } from "../types/ExportJob";
+
+const DEFAULT_EXPORT_FILENAME = "export.tsv";
+
+export const useDownloadExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<ExportJob | null, Error, ExportJob>({
+    mutationFn: async (job) => {
+      const filename = job.filename || DEFAULT_EXPORT_FILENAME;
+
+      if (supportsNativeSave(window)) {
+        let handle: SaveFilePickerHandle;
+        try {
+          handle = await window.showSaveFilePicker({ suggestedName: filename });
+        } catch (error) {
+          if (error instanceof Error && error.name === "AbortError") {
+            return null;
+          }
+          throw error;
+        }
+
+        const response = await authFetch.get<Blob>(
+          `exports/${job.id}/download`,
+          { responseType: "blob" },
+        );
+        const writable = await handle.createWritable();
+        await writable.write(response.data);
+        await writable.close();
+        return job;
+      }
+
+      const response = await authFetch.get<Blob>(`exports/${job.id}/download`, {
+        responseType: "blob",
+      });
+      downloadBlob(response.data, filename);
+      return job;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    },
+  });
+
+  return { downloadExportJob: mutateAsync };
+};
diff --git a/src/features/exports/api/useGetAllExportJobsList.ts b/src/features/exports/api/useGetAllExportJobsList.ts
new file mode 100644
index 0000000000..63dbd5c66b
--- /dev/null
+++ b/src/features/exports/api/useGetAllExportJobsList.ts
@@ -0,0 +1,67 @@
+import useFetch from "@/hooks/useFetch";
+import usePageParams from "@/hooks/usePageParams";
+import type { ApiError } from "@/types/api/ApiError";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import { EXPORT_JOBS_POLL_INTERVAL_MS } from "../constants";
+import {
+  hasProcessingExportJobs,
+  type AllExportJobsResponse,
+} from "./exportJobsShared";
+
+const DEFAULT_EXPORT_JOBS_PAGE_SIZE = 50;
+
+interface GetAllExportJobsListParams {
+  search?: string;
+  type?: string;
+  limit?: number;
+  offset?: number;
+}
+
+interface GetAllExportJobsListConfig {
+  listenToUrlParams?: boolean;
+}
+
+export const useGetAllExportJobsList = (
+  params: GetAllExportJobsListParams = {},
+  { listenToUrlParams = true }: GetAllExportJobsListConfig = {},
+) => {
+  const authFetch = useFetch();
+  const {
+    currentPage,
+    pageSize,
+    search: urlSearch,
+    type: urlType,
+  } = usePageParams();
+
+  const {
+    search = listenToUrlParams ? urlSearch : "",
+    type = listenToUrlParams ? urlType : "",
+    limit = listenToUrlParams ? pageSize : DEFAULT_EXPORT_JOBS_PAGE_SIZE,
+    offset = listenToUrlParams ? (currentPage - 1) * pageSize : 0,
+  } = params;
+
+  const {
+    data: response,
+    isLoading,
+    dataUpdatedAt,
+  } = useQuery<AxiosResponse<AllExportJobsResponse>, AxiosError<ApiError>>({
+    queryKey: ["all-export-jobs", { search, type, limit, offset }],
+    queryFn: async () =>
+      authFetch.get<AllExportJobsResponse>("exports", {
+        params: { search, type: type || undefined, limit, offset },
+      }),
+    refetchInterval: (query) =>
+      hasProcessingExportJobs(query.state.data?.data.results ?? [])
+        ? EXPORT_JOBS_POLL_INTERVAL_MS
+        : false,
+    refetchIntervalInBackground: true,
+  });
+
+  return {
+    exportJobs: response?.data?.results ?? [],
+    totalCount: response?.data?.count ?? 0,
+    isLoading,
+    dataUpdatedAt,
+  };
+};
diff --git a/src/features/exports/api/useGetExportJob.ts b/src/features/exports/api/useGetExportJob.ts
new file mode 100644
index 0000000000..db20e4a5dd
--- /dev/null
+++ b/src/features/exports/api/useGetExportJob.ts
@@ -0,0 +1,30 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import { EXPORT_JOBS_POLL_INTERVAL_MS } from "../constants";
+import type { ExportJob } from "../types/ExportJob";
+
+export const useGetExportJob = (id: string) => {
+  const authFetch = useFetch();
+
+  const {
+    data: response,
+    dataUpdatedAt,
+    isLoading,
+  } = useQuery<AxiosResponse<ExportJob>, AxiosError<ApiError>>({
+    queryKey: ["all-export-jobs", id],
+    queryFn: async () => authFetch.get<ExportJob>(`exports/${id}`),
+    refetchInterval: (query) =>
+      query.state.data?.data.status === "processing"
+        ? EXPORT_JOBS_POLL_INTERVAL_MS
+        : false,
+    refetchIntervalInBackground: true,
+  });
+
+  return {
+    exportJob: response?.data ?? null,
+    dataUpdatedAt,
+    isLoading,
+  };
+};
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
new file mode 100644
index 0000000000..ae5b45112d
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -0,0 +1,191 @@
+import Blocks from "@/components/layout/Blocks";
+import InfoGrid from "@/components/layout/InfoGrid";
+import SidePanel from "@/components/layout/SidePanel";
+import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import useNotify from "@/hooks/useNotify";
+import usePageParams from "@/hooks/usePageParams";
+import {
+  Button,
+  ConfirmationModal,
+  Icon,
+  ICONS,
+} from "@canonical/react-components";
+import moment from "moment";
+import { useState, type FC } from "react";
+import ExportProgressBar from "../ExportProgressBar";
+import { getStatusLabel, getTypeLabel } from "../../api/exportJobsShared";
+import { useCancelExportJob } from "../../api/useCancelExportJob";
+import { useDiscardExportJob } from "../../api/useDiscardExportJob";
+import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import { useGetExportJob } from "../../api/useGetExportJob";
+import { getFilterValue } from "./helpers";
+import NoData from "@/components/layout/NoData";
+
+const ExportDetailsSidePanel: FC = () => {
+  const { name: jobId, popSidePathUntilClear } = usePageParams();
+  const { notify } = useNotify();
+
+  const { exportJob: job } = useGetExportJob(jobId ?? "");
+  const { cancelExportJob: onCancel } = useCancelExportJob();
+  const { discardExportJob: onDiscard } = useDiscardExportJob();
+  const { downloadExportJob: onDownload } = useDownloadExportJob();
+
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+
+  async function handleDownload() {
+    if (!job) {
+      return;
+    }
+
+    const result = await onDownload(job);
+    if (result) {
+      notify.success({
+        title: "TSV download started",
+        message: `${job.name} has been downloaded and removed from the export list.`,
+      });
+    }
+  }
+
+  async function handleCancel() {
+    if (!job) {
+      return;
+    }
+
+    await onCancel(job.id);
+    notify.success({
+      title: "TSV generation cancelled",
+      message: `${job.name} has been cancelled.`,
+    });
+  }
+
+  function handleOpenDiscard() {
+    setConfirmDiscard(true);
+  }
+
+  function handleCloseDiscard() {
+    setConfirmDiscard(false);
+  }
+
+  async function handleConfirmDiscard() {
+    if (!job) {
+      return;
+    }
+
+    await onDiscard(job.id);
+    setConfirmDiscard(false);
+    popSidePathUntilClear();
+    notify.success({
+      title: "TSV discarded",
+      message: `${job.name} has been discarded.`,
+    });
+  }
+
+  if (!job) {
+    return <SidePanel.LoadingState />;
+  }
+
+  const countLabel = getTypeLabel(job);
+
+  return (
+    <>
+      <SidePanel.Header>{job.name}</SidePanel.Header>
+      <SidePanel.Content>
+        <div className="p-segmented-control">
+          <div className="p-segmented-control__list">
+            {job.status === "completed" && (
+              <Button
+                type="button"
+                hasIcon
+                className="p-segmented-control__button"
+                onClick={handleDownload}
+              >
+                <Icon name="begin-downloading" />
+                <span>Download</span>
+              </Button>
+            )}
+            {job.status === "processing" && (
+              <Button
+                type="button"
+                hasIcon
+                className="p-segmented-control__button"
+                onClick={handleCancel}
+              >
+                <Icon name="close--negative" />
+                <span className="u-text--negative">Cancel</span>
+              </Button>
+            )}
+            {job.status !== "processing" && (
+              <Button
+                type="button"
+                hasIcon
+                className="p-segmented-control__button"
+                onClick={handleOpenDiscard}
+              >
+                <Icon name={`${ICONS.delete}--negative`} />
+                <span className="u-text--negative">Discard</span>
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <Blocks>
+          <Blocks.Item title="Details">
+            <InfoGrid dense>
+              <InfoGrid.Item
+                label="Status"
+                value={
+                  job.status === "processing" ? (
+                    <ExportProgressBar
+                      progress={job.progress}
+                      secondsRemaining={job.estimatedSecondsRemaining ?? null}
+                      fullWidth
+                    />
+                  ) : (
+                    getStatusLabel(job)
+                  )
+                }
+                large
+              />
+              <InfoGrid.Item
+                label={countLabel}
+                value={job.rowCount.toLocaleString()}
+              />
+              <InfoGrid.Item
+                label="Created"
+                value={moment(job.createdAt).format(DISPLAY_DATE_TIME_FORMAT)}
+              />
+              <InfoGrid.Item
+                label="Expires"
+                value={
+                  job.retainUntil ? (
+                    moment(job.retainUntil).format(DISPLAY_DATE_TIME_FORMAT)
+                  ) : (
+                    <NoData />
+                  )
+                }
+              />
+              <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
+            </InfoGrid>
+          </Blocks.Item>
+        </Blocks>
+      </SidePanel.Content>
+      {confirmDiscard && (
+        <ConfirmationModal
+          title={`Discard "${job.name}"?`}
+          confirmButtonLabel="Discard"
+          confirmButtonAppearance="negative"
+          close={handleCloseDiscard}
+          onConfirm={handleConfirmDiscard}
+          renderInPortal
+        >
+          <p>The export &quot;{job.name}&quot; will be permanently deleted.</p>
+          <p>
+            This action is <strong>irreversible</strong>.
+          </p>
+        </ConfirmationModal>
+      )}
+    </>
+  );
+};
+
+export default ExportDetailsSidePanel;
diff --git a/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx b/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
new file mode 100644
index 0000000000..8924b97206
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
@@ -0,0 +1,39 @@
+import { CodeSnippet } from "@canonical/react-components";
+import type { ReactNode } from "react";
+import type { ExportJob } from "../../types/ExportJob";
+
+const ID_ONLY_QUERY_RE = /^id:\d+(\s+OR\s+id:\d+)*$/;
+
+export const getFilterValue = (job: ExportJob): ReactNode => {
+  const filter = job.displayQuery?.trim() || "";
+  const hasSelection = job.hasSelection ?? false;
+
+  let legacyFilter = "";
+  if (!filter && job.query) {
+    legacyFilter = ID_ONLY_QUERY_RE.test(job.query.trim())
+      ? ""
+      : job.query.trim();
+  }
+
+  const effectiveFilter = filter || legacyFilter;
+  const effectiveSelection =
+    hasSelection ||
+    (!filter && !!job.query && ID_ONLY_QUERY_RE.test(job.query.trim()));
+
+  if (!effectiveFilter && !effectiveSelection) return null;
+
+  if (effectiveSelection && !effectiveFilter) return "Custom selection";
+
+  if (effectiveFilter && !effectiveSelection) {
+    return (
+      <CodeSnippet blocks={[{ code: effectiveFilter, wrapLines: true }]} />
+    );
+  }
+
+  return (
+    <>
+      <div>Custom selection</div>
+      <CodeSnippet blocks={[{ code: effectiveFilter, wrapLines: true }]} />
+    </>
+  );
+};
diff --git a/src/features/exports/components/ExportDetailsSidePanel/index.ts b/src/features/exports/components/ExportDetailsSidePanel/index.ts
new file mode 100644
index 0000000000..f958bdc27f
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportDetailsSidePanel";
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss b/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
new file mode 100644
index 0000000000..b2cb69d84f
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
@@ -0,0 +1,39 @@
+@import "vanilla-framework/scss/settings_colors";
+
+.wrapper {
+  max-width: 280px;
+  width: 100%;
+}
+
+.fullWidth {
+  max-width: none;
+}
+
+.labels {
+  display: flex;
+  justify-content: space-between;
+}
+
+.percentage {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.eta {
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+.bar {
+  border: 1px solid $colors--theme--border-default;
+  height: 16px;
+  margin-top: 4px;
+  padding: 2px;
+  width: 100%;
+
+  .fill {
+    background-color: #06c;
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+}
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx b/src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx
new file mode 100644
index 0000000000..a4e300729b
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx
@@ -0,0 +1,45 @@
+import type { FC } from "react";
+import { MAX_PROGRESS } from "./constants";
+import { getEtaLabel } from "./helpers";
+import classes from "./ExportProgressBar.module.scss";
+
+export interface ExportProgressBarProps {
+  readonly progress: number;
+  readonly secondsRemaining: number | null;
+  readonly fullWidth?: boolean;
+}
+
+const ExportProgressBar: FC<ExportProgressBarProps> = ({
+  progress,
+  secondsRemaining,
+  fullWidth = false,
+}) => {
+  const clampedProgress = Math.min(
+    MAX_PROGRESS,
+    Math.max(0, Math.round(progress)),
+  );
+
+  return (
+    <div className={`${classes.wrapper} ${fullWidth ? classes.fullWidth : ""}`}>
+      <div className={classes.labels}>
+        <span className={classes.percentage}>{clampedProgress}%</span>
+        <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
+      </div>
+      <div
+        className={classes.bar}
+        role="progressbar"
+        aria-valuenow={clampedProgress}
+        aria-valuemin={0}
+        aria-valuemax={MAX_PROGRESS}
+        aria-label="Export progress"
+      >
+        <div
+          className={classes.fill}
+          style={{ width: `${clampedProgress}%` }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ExportProgressBar;
diff --git a/src/features/exports/components/ExportProgressBar/constants.ts b/src/features/exports/components/ExportProgressBar/constants.ts
new file mode 100644
index 0000000000..4a2cb4663f
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/constants.ts
@@ -0,0 +1,3 @@
+export const SECONDS_PER_MINUTE = 60;
+export const ALMOST_DONE_THRESHOLD_SECONDS = 5;
+export const MAX_PROGRESS = 100;
diff --git a/src/features/exports/components/ExportProgressBar/helpers.ts b/src/features/exports/components/ExportProgressBar/helpers.ts
new file mode 100644
index 0000000000..c26d863b41
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/helpers.ts
@@ -0,0 +1,28 @@
+import { ALMOST_DONE_THRESHOLD_SECONDS, SECONDS_PER_MINUTE } from "./constants";
+
+export const formatSecondsRemaining = (seconds: number): string => {
+  const safe = Math.max(0, Math.round(seconds));
+
+  if (safe < SECONDS_PER_MINUTE) {
+    return `${safe}s left`;
+  }
+
+  const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
+  const remainderSeconds = safe % SECONDS_PER_MINUTE;
+
+  return remainderSeconds
+    ? `${minutes}m ${remainderSeconds}s left`
+    : `${minutes}m left`;
+};
+
+export const getEtaLabel = (secondsRemaining: number | null): string => {
+  if (secondsRemaining === null) {
+    return "Estimating...";
+  }
+
+  if (secondsRemaining <= ALMOST_DONE_THRESHOLD_SECONDS) {
+    return "Almost done";
+  }
+
+  return formatSecondsRemaining(secondsRemaining);
+};
diff --git a/src/features/exports/components/ExportProgressBar/index.ts b/src/features/exports/components/ExportProgressBar/index.ts
new file mode 100644
index 0000000000..7f5104b8dd
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/index.ts
@@ -0,0 +1,3 @@
+export { default } from "./ExportProgressBar";
+export type { ExportProgressBarProps } from "./ExportProgressBar";
+export { formatSecondsRemaining } from "./helpers";
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
new file mode 100644
index 0000000000..68dec74e76
--- /dev/null
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
@@ -0,0 +1,65 @@
+import EmptyState from "@/components/layout/EmptyState";
+import HeaderWithSearch from "@/components/form/HeaderWithSearch";
+import LoadingState from "@/components/layout/LoadingState";
+import { TablePagination } from "@/components/layout/TablePagination";
+import { PageParamFilter } from "@/components/filter";
+import { ROUTES } from "@/libs/routes";
+import type { FC } from "react";
+import { Link } from "react-router";
+import { useGetAllExportJobsList } from "../../api/useGetAllExportJobsList";
+import ExportsList from "../ExportsList";
+import { EXPORT_TYPE_OPTIONS } from "./constants";
+
+const ExportsContainer: FC = () => {
+  const { exportJobs, totalCount, isLoading } = useGetAllExportJobsList();
+
+  const { totalCount: unfilteredCount, isLoading: isLoadingUnfiltered } =
+    useGetAllExportJobsList({}, { listenToUrlParams: false });
+
+  if (isLoadingUnfiltered) {
+    return <LoadingState />;
+  }
+
+  if (!unfilteredCount) {
+    return (
+      <EmptyState
+        icon="export"
+        title="No exports found"
+        body={
+          <p>
+            There are no TSV exports yet. You can create one from the{" "}
+            <Link to={ROUTES.instances.root()}>Instances</Link> or{" "}
+            <Link to={ROUTES.activities.root()}>Activities</Link> page.
+          </p>
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      <HeaderWithSearch
+        actions={
+          <PageParamFilter
+            pageParamKey="type"
+            label="Type"
+            options={EXPORT_TYPE_OPTIONS}
+          />
+        }
+      />
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <>
+          <ExportsList exportJobs={exportJobs} />
+          <TablePagination
+            totalItems={totalCount}
+            currentItemCount={exportJobs.length}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default ExportsContainer;
diff --git a/src/features/exports/components/ExportsContainer/constants.ts b/src/features/exports/components/ExportsContainer/constants.ts
new file mode 100644
index 0000000000..bc7075af9d
--- /dev/null
+++ b/src/features/exports/components/ExportsContainer/constants.ts
@@ -0,0 +1,5 @@
+export const EXPORT_TYPE_OPTIONS = [
+  { label: "All", value: "" },
+  { label: "Instances", value: "instance" },
+  { label: "Activities", value: "activity" },
+];
diff --git a/src/features/exports/components/ExportsContainer/index.ts b/src/features/exports/components/ExportsContainer/index.ts
new file mode 100644
index 0000000000..ff6b5fe379
--- /dev/null
+++ b/src/features/exports/components/ExportsContainer/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportsContainer";
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
new file mode 100644
index 0000000000..ab477e4db3
--- /dev/null
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -0,0 +1,234 @@
+import { LIST_ACTIONS_COLUMN_PROPS } from "@/components/layout/ListActions";
+import ListActions from "@/components/layout/ListActions";
+import ResponsiveTable from "@/components/layout/ResponsiveTable";
+import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import useNotify from "@/hooks/useNotify";
+import usePageParams from "@/hooks/usePageParams";
+import { Button, ConfirmationModal } from "@canonical/react-components";
+import moment from "moment";
+import type { FC } from "react";
+import { useMemo, useState } from "react";
+import type { CellProps, Column } from "react-table";
+import ExportProgressBar from "../ExportProgressBar";
+import {
+  getStatusIcon,
+  getStatusLabel,
+  getTypeLabel,
+} from "../../api/exportJobsShared";
+import { useCancelExportJob } from "../../api/useCancelExportJob";
+import { useDiscardExportJob } from "../../api/useDiscardExportJob";
+import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import type { ExportJob } from "../../types/ExportJob";
+import type { ExportRowData } from "./types";
+import useDebug from "@/hooks/useDebug";
+
+interface ExportsListProps {
+  readonly exportJobs: ExportJob[];
+}
+
+const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
+  const { notify } = useNotify();
+  const debug = useDebug();
+  const { createPageParamsSetter } = usePageParams();
+  const { cancelExportJob: onCancel } = useCancelExportJob();
+  const { discardExportJob: onDiscard } = useDiscardExportJob();
+  const { downloadExportJob: onDownload } = useDownloadExportJob();
+  const [jobToDiscard, setJobToDiscard] = useState<ExportJob | null>(null);
+
+  async function handleDownload(job: ExportJob) {
+    const result = await onDownload(job);
+    if (result) {
+      notify.success({
+        title: "TSV download started",
+        message: `${job.name} has been downloaded and removed from the export list.`,
+      });
+    }
+  }
+
+  async function handleCancel(job: ExportJob) {
+    try {
+      await onCancel(job.id);
+
+      notify.success({
+        title: "TSV generation cancelled",
+        message: `${job.name} has been cancelled.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
+  }
+
+  function handleDiscardClick(job: ExportJob) {
+    setJobToDiscard(job);
+  }
+
+  function handleCloseDiscard() {
+    setJobToDiscard(null);
+  }
+
+  async function handleConfirmDiscard() {
+    if (!jobToDiscard) return;
+
+    await onDiscard(jobToDiscard.id);
+    setJobToDiscard(null);
+    notify.success({
+      title: "TSV discarded",
+      message: `${jobToDiscard.name} has been discarded.`,
+    });
+  }
+
+  const columns = useMemo<Column<ExportRowData>[]>(
+    () => [
+      {
+        Header: "Name",
+        accessor: "job",
+        id: "name",
+        Cell: ({ row }: CellProps<ExportRowData>) => (
+          <Button
+            type="button"
+            appearance="link"
+            className="u-no-margin--bottom u-no-padding--top u-align-text--left"
+            onClick={createPageParamsSetter({
+              sidePath: ["view"],
+              name: row.original.job.id,
+            })}
+          >
+            {row.original.job.name}
+          </Button>
+        ),
+      },
+      {
+        Header: "Type",
+        accessor: "job",
+        id: "type",
+        Cell: ({ row }: CellProps<ExportRowData>) => (
+          <>{getTypeLabel(row.original.job)}</>
+        ),
+      },
+      {
+        Header: "Status",
+        accessor: "job",
+        id: "status",
+        Cell: ({ row }: CellProps<ExportRowData>) => {
+          const { job } = row.original;
+          if (job.status === "processing") {
+            return (
+              <ExportProgressBar
+                progress={job.progress}
+                secondsRemaining={job.estimatedSecondsRemaining ?? null}
+              />
+            );
+          }
+          return (
+            <span>
+              <i className={`p-icon--${getStatusIcon(job)}`} />{" "}
+              {getStatusLabel(job)}
+            </span>
+          );
+        },
+      },
+      {
+        Header: "Created",
+        accessor: "job",
+        id: "createdAt",
+        Cell: ({ row }: CellProps<ExportRowData>) => (
+          <>
+            {moment(row.original.job.createdAt).format(
+              DISPLAY_DATE_TIME_FORMAT,
+            )}
+          </>
+        ),
+      },
+      {
+        Header: "Expires",
+        accessor: "job",
+        id: "retainUntil",
+        Cell: ({ row }: CellProps<ExportRowData>) => (
+          <>
+            {row.original.job.retainUntil
+              ? moment(row.original.job.retainUntil).format(
+                  DISPLAY_DATE_TIME_FORMAT,
+                )
+              : "—"}
+          </>
+        ),
+      },
+      {
+        ...LIST_ACTIONS_COLUMN_PROPS,
+        Cell: ({ row }: CellProps<ExportRowData>) => {
+          const { job } = row.original;
+          const downloadActions =
+            job.status === "completed"
+              ? [
+                  {
+                    icon: "begin-downloading",
+                    label: "Download",
+                    onClick: handleDownload.bind(null, job),
+                  },
+                ]
+              : [];
+          const destructiveActions =
+            job.status === "processing"
+              ? [
+                  {
+                    icon: "close",
+                    label: "Cancel",
+                    onClick: handleCancel.bind(null, job),
+                  },
+                ]
+              : [
+                  {
+                    icon: "delete",
+                    label: "Discard",
+                    onClick: handleDiscardClick.bind(null, job),
+                  },
+                ];
+          return (
+            <ListActions
+              actions={downloadActions}
+              destructiveActions={destructiveActions}
+              toggleAriaLabel={`Actions for ${job.name}`}
+            />
+          );
+        },
+      },
+    ],
+    [createPageParamsSetter, notify, onCancel, onDownload],
+  );
+
+  const data = useMemo<ExportRowData[]>(
+    () => exportJobs.map((job) => ({ job })),
+    [exportJobs],
+  );
+
+  return (
+    <>
+      <ResponsiveTable
+        columns={columns}
+        data={data}
+        sortable={false}
+        emptyMsg="No exports found according to your search parameters."
+      />
+      {jobToDiscard && (
+        <ConfirmationModal
+          title={`Discard "${jobToDiscard.name}"?`}
+          confirmButtonLabel="Discard"
+          confirmButtonAppearance="negative"
+          close={handleCloseDiscard}
+          onConfirm={handleConfirmDiscard}
+          renderInPortal
+        >
+          <p>
+            The export &quot;{jobToDiscard.name}&quot; will be permanently
+            deleted.
+          </p>
+          <p>
+            This action is <strong>irreversible</strong>.
+          </p>
+        </ConfirmationModal>
+      )}
+    </>
+  );
+};
+
+export default ExportsList;
diff --git a/src/features/exports/components/ExportsList/index.ts b/src/features/exports/components/ExportsList/index.ts
new file mode 100644
index 0000000000..00753a80be
--- /dev/null
+++ b/src/features/exports/components/ExportsList/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportsList";
diff --git a/src/features/exports/components/ExportsList/types.ts b/src/features/exports/components/ExportsList/types.ts
new file mode 100644
index 0000000000..3576d06bd9
--- /dev/null
+++ b/src/features/exports/components/ExportsList/types.ts
@@ -0,0 +1,5 @@
+import type { ExportJob } from "../../types/ExportJob";
+
+export interface ExportRowData extends Record<string, unknown> {
+  readonly job: ExportJob;
+}
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
similarity index 100%
rename from src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.module.scss
rename to src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
similarity index 72%
rename from src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx
rename to src/features/exports/components/SortableFieldList/SortableFieldList.tsx
index 90696f1272..fc5958888b 100644
--- a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/SortableFieldList.tsx
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
@@ -2,8 +2,6 @@ import { Button, Icon, Input, ModularTable } from "@canonical/react-components";
 import classNames from "classnames";
 import {
   useCallback,
-  useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -13,7 +11,16 @@ import {
 import { createPortal } from "react-dom";
 import type { CellProps, Column, Row, TableRowProps } from "react-table";
 import classes from "./SortableFieldList.module.scss";
-import type { ExportField } from "../../types";
+import type { ExportField } from "../../types/ExportForm";
+import { JUST_MOVED_HIGHLIGHT_MS, OVERLAY_CURSOR_OFFSET_PX } from "./constants";
+import {
+  useDragOverlayPosition,
+  useFlipAnimation,
+  usePendingFieldScroll,
+  useSortableFieldCleanup,
+  useSortableFieldRefs,
+  useSyncSortableFields,
+} from "./hooks";
 
 interface ReorderRowData extends Record<string, unknown> {
   index: number;
@@ -22,11 +29,6 @@ interface ReorderRowData extends Record<string, unknown> {
   currentOrder: string;
 }
 
-// Horizontal gap between the cursor and the drag overlay card, in pixels.
-const OVERLAY_CURSOR_OFFSET_PX = 12;
-const JUST_MOVED_HIGHLIGHT_MS = 1500;
-const FLIP_TRANSITION_CLEANUP_MS = 300;
-
 interface SortableFieldListProps {
   readonly fields: ExportField[];
   readonly onOrderChange: (fields: ExportField[]) => void;
@@ -59,17 +61,8 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
   const dragCursorPosRef = useRef<{ x: number; y: number } | null>(null);
   const dragOverRafRef = useRef<number | null>(null);
 
-  // Live mirrors of state read inside stable drag handlers, so those handlers
-  // (and therefore getReorderRowProps) keep a constant identity across renders.
-  // The passive effect is a backstop for the general case; the drag path keeps
-  // orderedFieldsRef current synchronously inside the state updater (see
-  // handleDragEnter) so handleDrop never depends on passive-effect flush timing.
   const orderedFieldsRef = useRef(orderedFields);
   const draggingFieldIdRef = useRef(draggingFieldId);
-  useEffect(() => {
-    orderedFieldsRef.current = orderedFields;
-    draggingFieldIdRef.current = draggingFieldId;
-  });
 
   // Stable per-row ref callbacks, cached by fieldId, so the row's ref doesn't
   // churn (null then re-set) on every render.
@@ -77,57 +70,28 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
     Map<string, (el: HTMLTableRowElement | null) => void>
   >(new Map());
 
-  // Keep internal order in sync with the fields prop. Seeding state once with
-  // useState(() => fields) ignores later prop changes; this re-syncs when the
-  // parent updates the selection. Skip while a drag is active: an unrelated
-  // parent re-render mid-drag must not clobber the live handleDragEnter preview
-  // with the (stale) prop order. (draggingFieldIdRef is synced by the effect
-  // above, which is declared — and therefore runs — before this one.)
-  useEffect(() => {
-    if (draggingFieldIdRef.current) return;
-    // Intentional prop->state sync: setState in this effect is the deliberate
-    // mechanism, not an accident. Reading draggingFieldIdRef during render (to
-    // avoid the effect) would instead trip react-hooks/refs.
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setOrderedFields(fields);
-  }, [fields]);
-
-  // Cleanup animation resources on unmount.
-  useEffect(() => {
-    return () => {
-      if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
-      if (dragOverRafRef.current !== null) {
-        cancelAnimationFrame(dragOverRafRef.current);
-      }
-      for (const id of flipRafIdsRef.current) cancelAnimationFrame(id);
-      for (const id of flipTimerIdsRef.current) clearTimeout(id);
-    };
-  }, []);
-
-  // After orderedFields updates, scroll the pending field into view.
-  // Delayed by 270ms so it fires after the FLIP animation (250ms) completes —
-  // getBoundingClientRect includes CSS transforms, so calling scrollIntoView
-  // while the FLIP translateY is active would measure the wrong position.
-  useEffect(() => {
-    if (!pendingScrollRef.current) return;
-    const fieldId = pendingScrollRef.current;
-    pendingScrollRef.current = null;
-    const timer = setTimeout(() => {
-      rowRefsMap.current
-        .get(fieldId)
-        ?.scrollIntoView({ behavior: "smooth", block: "center" });
-    }, 270);
-    return () => { clearTimeout(timer); };
-  }, [orderedFields]);
+  useSortableFieldRefs({
+    draggingFieldId,
+    draggingFieldIdRef,
+    orderedFields,
+    orderedFieldsRef,
+  });
+  useSyncSortableFields({ draggingFieldIdRef, fields, setOrderedFields });
+  useSortableFieldCleanup({
+    dragOverRafRef,
+    flipRafIdsRef,
+    flipTimerIdsRef,
+    justMovedTimerRef,
+  });
+  usePendingFieldScroll({ orderedFields, pendingScrollRef, rowRefsMap });
 
   const triggerMoveEffect = useCallback((fieldId: string) => {
     if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
     setJustMovedFieldId(fieldId);
     pendingScrollRef.current = fieldId;
-    justMovedTimerRef.current = setTimeout(
-      () => { setJustMovedFieldId(null); },
-      JUST_MOVED_HIGHLIGHT_MS,
-    );
+    justMovedTimerRef.current = setTimeout(() => {
+      setJustMovedFieldId(null);
+    }, JUST_MOVED_HIGHLIGHT_MS);
   }, []);
 
   // Snapshot row y-positions before a reorder so FLIP can animate the move.
@@ -149,39 +113,14 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
     pendingFlipRef.current = true;
   }, []);
 
-  // FLIP animation: after orderedFields changes, animate rows from their old
-  // viewport positions to their new ones. Only runs when pendingFlipRef is set
-  // (i.e. arrow/number moves — NOT drag reorders).
-  useLayoutEffect(() => {
-    if (!pendingFlipRef.current) return;
-    pendingFlipRef.current = false;
-
-    const oldPositions = flipPositionsRef.current;
-
-    rowRefsMap.current.forEach((el, id) => {
-      const oldTop = oldPositions.get(id);
-      if (oldTop === undefined) return;
-      const newTop = el.getBoundingClientRect().top;
-      const delta = oldTop - newTop;
-      if (delta === 0) return;
-
-      el.style.transform = `translateY(${delta}px)`;
-      el.style.transition = "transform 0s";
-
-      const raf1 = requestAnimationFrame(() => {
-        const raf2 = requestAnimationFrame(() => {
-          el.style.transition = "transform 0.25s ease, opacity 0.15s ease";
-          el.style.transform = "";
-          const timer = setTimeout(() => {
-            el.style.transition = "";
-          }, FLIP_TRANSITION_CLEANUP_MS);
-          flipTimerIdsRef.current.push(timer);
-        });
-        flipRafIdsRef.current.push(raf2);
-      });
-      flipRafIdsRef.current.push(raf1);
-    });
-  }, [orderedFields]);
+  useFlipAnimation({
+    flipPositionsRef,
+    flipRafIdsRef,
+    flipTimerIdsRef,
+    orderedFields,
+    pendingFlipRef,
+    rowRefsMap,
+  });
 
   // Apply the latest cursor position to the overlay imperatively. Called from a
   // single rAF per frame so a burst of dragover events does no extra layout.
@@ -195,30 +134,22 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
     el.style.transform = `translate3d(${pos.x + OVERLAY_CURSOR_OFFSET_PX}px, ${pos.y}px, 0) translateY(-50%)`;
   }, []);
 
-  // Position the overlay as soon as it mounts, using the cursor position
-  // captured at drag start, so it doesn't flash at the top-left before the
-  // first dragover fires.
-  useLayoutEffect(() => {
-    if (draggingFieldId) positionOverlay();
-  }, [draggingFieldId, positionOverlay]);
-
-  const handleDragStart = useCallback(
-    (fieldId: string, e: React.DragEvent) => {
-      originalOrderRef.current = [...orderedFieldsRef.current];
-      dropSucceededRef.current = false;
-      dragCursorPosRef.current = { x: e.clientX, y: e.clientY };
-      setDraggingFieldId(fieldId);
-      e.dataTransfer.effectAllowed = "move";
-
-      // Replace the browser's native (always semi-transparent) drag ghost with a
-      // 1×1 transparent canvas. We render our own fully-opaque overlay instead.
-      const canvas = document.createElement("canvas");
-      canvas.width = 1;
-      canvas.height = 1;
-      e.dataTransfer.setDragImage(canvas, 0, 0);
-    },
-    [],
-  );
+  useDragOverlayPosition({ draggingFieldId, positionOverlay });
+
+  const handleDragStart = useCallback((fieldId: string, e: React.DragEvent) => {
+    originalOrderRef.current = [...orderedFieldsRef.current];
+    dropSucceededRef.current = false;
+    dragCursorPosRef.current = { x: e.clientX, y: e.clientY };
+    setDraggingFieldId(fieldId);
+    e.dataTransfer.effectAllowed = "move";
+
+    // Replace the browser's native (always semi-transparent) drag ghost with a
+    // 1×1 transparent canvas. We render our own fully-opaque overlay instead.
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    e.dataTransfer.setDragImage(canvas, 0, 0);
+  }, []);
 
   const handleDragEnter = useCallback((index: number) => {
     const draggingId = draggingFieldIdRef.current;
@@ -412,7 +343,9 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
                 appearance="base"
                 className="u-no-margin--bottom has-icon u-no-margin--right"
                 disabled={index === orderedFields.length - 1}
-                onClick={() => { moveDown(index); }}
+                onClick={() => {
+                  moveDown(index);
+                }}
                 aria-label={`Move ${label} down`}
               >
                 <Icon name="arrow-down" />
@@ -426,11 +359,15 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
                 min={1}
                 max={orderedFields.length}
                 value={currentOrder}
-                onChange={(e) => { handleOrderInputChange(index, e.target.value); }}
-                onKeyDown={(e: React.KeyboardEvent) =>
-                  { handleOrderInputKeyDown(e, index); }
-                }
-                onBlur={() => { handleOrderInputBlur(index); }}
+                onChange={(e) => {
+                  handleOrderInputChange(index, e.target.value);
+                }}
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  handleOrderInputKeyDown(e, index);
+                }}
+                onBlur={() => {
+                  handleOrderInputBlur(index);
+                }}
                 aria-label={`Order for ${label}`}
                 wrapperClassName={classes.orderInputWrapper}
               />
@@ -439,7 +376,9 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
                 appearance="base"
                 className="u-no-margin--bottom has-icon"
                 disabled={index === 0}
-                onClick={() => { moveUp(index); }}
+                onClick={() => {
+                  moveUp(index);
+                }}
                 aria-label={`Move ${label} up`}
               >
                 <Icon name="arrow-up" />
diff --git a/src/features/exports/components/SortableFieldList/constants.ts b/src/features/exports/components/SortableFieldList/constants.ts
new file mode 100644
index 0000000000..7062f2c751
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/constants.ts
@@ -0,0 +1,3 @@
+export const OVERLAY_CURSOR_OFFSET_PX = 12;
+export const JUST_MOVED_HIGHLIGHT_MS = 1500;
+export const FLIP_TRANSITION_CLEANUP_MS = 300;
diff --git a/src/features/exports/components/SortableFieldList/hooks/index.ts b/src/features/exports/components/SortableFieldList/hooks/index.ts
new file mode 100644
index 0000000000..37d406692a
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/index.ts
@@ -0,0 +1,6 @@
+export { useDragOverlayPosition } from "./useDragOverlayPosition";
+export { useFlipAnimation } from "./useFlipAnimation";
+export { usePendingFieldScroll } from "./usePendingFieldScroll";
+export { useSortableFieldCleanup } from "./useSortableFieldCleanup";
+export { useSortableFieldRefs } from "./useSortableFieldRefs";
+export { useSyncSortableFields } from "./useSyncSortableFields";
diff --git a/src/features/exports/components/SortableFieldList/hooks/useDragOverlayPosition.ts b/src/features/exports/components/SortableFieldList/hooks/useDragOverlayPosition.ts
new file mode 100644
index 0000000000..0f4241278c
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useDragOverlayPosition.ts
@@ -0,0 +1,16 @@
+import { useLayoutEffect } from "react";
+
+export const useDragOverlayPosition = ({
+  draggingFieldId,
+  positionOverlay,
+}: {
+  readonly draggingFieldId: string | null;
+  readonly positionOverlay: () => void;
+}) => {
+  // Position the overlay as soon as it mounts, using the cursor position
+  // captured at drag start, so it doesn't flash at the top-left before the
+  // first dragover fires.
+  useLayoutEffect(() => {
+    if (draggingFieldId) positionOverlay();
+  }, [draggingFieldId, positionOverlay]);
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/useFlipAnimation.ts b/src/features/exports/components/SortableFieldList/hooks/useFlipAnimation.ts
new file mode 100644
index 0000000000..3b610829b1
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useFlipAnimation.ts
@@ -0,0 +1,60 @@
+import { useLayoutEffect, type RefObject } from "react";
+import type { ExportField } from "../../../types/ExportForm";
+import { FLIP_TRANSITION_CLEANUP_MS } from "../constants";
+
+export const useFlipAnimation = ({
+  flipPositionsRef,
+  flipRafIdsRef,
+  flipTimerIdsRef,
+  orderedFields,
+  pendingFlipRef,
+  rowRefsMap,
+}: {
+  readonly flipPositionsRef: RefObject<Map<string, number>>;
+  readonly flipRafIdsRef: RefObject<number[]>;
+  readonly flipTimerIdsRef: RefObject<ReturnType<typeof setTimeout>[]>;
+  readonly orderedFields: ExportField[];
+  readonly pendingFlipRef: RefObject<boolean>;
+  readonly rowRefsMap: RefObject<Map<string, HTMLTableRowElement>>;
+}) => {
+  // FLIP animation: after orderedFields changes, animate rows from their old
+  // viewport positions to their new ones. Only runs when pendingFlipRef is set
+  // (i.e. arrow/number moves, not drag reorders).
+  useLayoutEffect(() => {
+    if (!pendingFlipRef.current) return;
+    pendingFlipRef.current = false;
+
+    const oldPositions = flipPositionsRef.current;
+
+    rowRefsMap.current.forEach((el, id) => {
+      const oldTop = oldPositions.get(id);
+      if (oldTop === undefined) return;
+      const newTop = el.getBoundingClientRect().top;
+      const delta = oldTop - newTop;
+      if (delta === 0) return;
+
+      el.style.transform = `translateY(${delta}px)`;
+      el.style.transition = "transform 0s";
+
+      const raf1 = requestAnimationFrame(() => {
+        const raf2 = requestAnimationFrame(() => {
+          el.style.transition = "transform 0.25s ease, opacity 0.15s ease";
+          el.style.transform = "";
+          const timer = setTimeout(() => {
+            el.style.transition = "";
+          }, FLIP_TRANSITION_CLEANUP_MS);
+          flipTimerIdsRef.current.push(timer);
+        });
+        flipRafIdsRef.current.push(raf2);
+      });
+      flipRafIdsRef.current.push(raf1);
+    });
+  }, [
+    flipPositionsRef,
+    flipRafIdsRef,
+    flipTimerIdsRef,
+    orderedFields,
+    pendingFlipRef,
+    rowRefsMap,
+  ]);
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/usePendingFieldScroll.ts b/src/features/exports/components/SortableFieldList/hooks/usePendingFieldScroll.ts
new file mode 100644
index 0000000000..1fb050fd48
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/usePendingFieldScroll.ts
@@ -0,0 +1,30 @@
+import { useEffect, type RefObject } from "react";
+import type { ExportField } from "../../../types/ExportForm";
+
+export const usePendingFieldScroll = ({
+  orderedFields,
+  pendingScrollRef,
+  rowRefsMap,
+}: {
+  readonly orderedFields: ExportField[];
+  readonly pendingScrollRef: RefObject<string | null>;
+  readonly rowRefsMap: RefObject<Map<string, HTMLTableRowElement>>;
+}) => {
+  // After orderedFields updates, scroll the pending field into view.
+  // Delayed by 270ms so it fires after the FLIP animation (250ms) completes.
+  // getBoundingClientRect includes CSS transforms, so calling scrollIntoView
+  // while the FLIP translateY is active would measure the wrong position.
+  useEffect(() => {
+    if (!pendingScrollRef.current) return;
+    const fieldId = pendingScrollRef.current;
+    pendingScrollRef.current = null;
+    const timer = setTimeout(() => {
+      rowRefsMap.current
+        .get(fieldId)
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 270);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [orderedFields, pendingScrollRef, rowRefsMap]);
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/useSortableFieldCleanup.ts b/src/features/exports/components/SortableFieldList/hooks/useSortableFieldCleanup.ts
new file mode 100644
index 0000000000..ba536932da
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useSortableFieldCleanup.ts
@@ -0,0 +1,24 @@
+import { useEffect, type RefObject } from "react";
+
+export const useSortableFieldCleanup = ({
+  dragOverRafRef,
+  flipRafIdsRef,
+  flipTimerIdsRef,
+  justMovedTimerRef,
+}: {
+  readonly dragOverRafRef: RefObject<number | null>;
+  readonly flipRafIdsRef: RefObject<number[]>;
+  readonly flipTimerIdsRef: RefObject<ReturnType<typeof setTimeout>[]>;
+  readonly justMovedTimerRef: RefObject<ReturnType<typeof setTimeout> | null>;
+}) => {
+  useEffect(() => {
+    return () => {
+      if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
+      if (dragOverRafRef.current !== null) {
+        cancelAnimationFrame(dragOverRafRef.current);
+      }
+      for (const id of flipRafIdsRef.current) cancelAnimationFrame(id);
+      for (const id of flipTimerIdsRef.current) clearTimeout(id);
+    };
+  }, [dragOverRafRef, flipRafIdsRef, flipTimerIdsRef, justMovedTimerRef]);
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/useSortableFieldRefs.ts b/src/features/exports/components/SortableFieldList/hooks/useSortableFieldRefs.ts
new file mode 100644
index 0000000000..22d523b63b
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useSortableFieldRefs.ts
@@ -0,0 +1,24 @@
+import { useEffect, type RefObject } from "react";
+import type { ExportField } from "../../../types/ExportForm";
+
+export const useSortableFieldRefs = ({
+  draggingFieldId,
+  draggingFieldIdRef,
+  orderedFields,
+  orderedFieldsRef,
+}: {
+  readonly draggingFieldId: string | null;
+  readonly draggingFieldIdRef: RefObject<string | null>;
+  readonly orderedFields: ExportField[];
+  readonly orderedFieldsRef: RefObject<ExportField[]>;
+}) => {
+  // Live mirrors of state read inside stable drag handlers, so those handlers
+  // (and therefore getReorderRowProps) keep a constant identity across renders.
+  // The passive effect is a backstop for the general case; the drag path keeps
+  // orderedFieldsRef current synchronously inside the state updater (see
+  // handleDragEnter) so handleDrop never depends on passive-effect flush timing.
+  useEffect(() => {
+    orderedFieldsRef.current = orderedFields;
+    draggingFieldIdRef.current = draggingFieldId;
+  });
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
new file mode 100644
index 0000000000..a372cb652a
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
@@ -0,0 +1,31 @@
+import {
+  useEffect,
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import type { ExportField } from "../../../types/ExportForm";
+
+export const useSyncSortableFields = ({
+  draggingFieldIdRef,
+  fields,
+  setOrderedFields,
+}: {
+  readonly draggingFieldIdRef: RefObject<string | null>;
+  readonly fields: ExportField[];
+  readonly setOrderedFields: Dispatch<SetStateAction<ExportField[]>>;
+}) => {
+  // Keep internal order in sync with the fields prop. Seeding state once with
+  // useState(() => fields) ignores later prop changes; this re-syncs when the
+  // parent updates the selection. Skip while a drag is active: an unrelated
+  // parent re-render mid-drag must not clobber the live handleDragEnter preview
+  // with the (stale) prop order.
+  useEffect(() => {
+    if (draggingFieldIdRef.current) return;
+    // Intentional prop->state sync: setState in this effect is the deliberate
+    // mechanism, not an accident. Reading draggingFieldIdRef during render (to
+    // avoid the effect) would instead trip react-hooks/refs.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setOrderedFields(fields);
+  }, [draggingFieldIdRef, fields, setOrderedFields]);
+};
diff --git a/src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts b/src/features/exports/components/SortableFieldList/index.ts
similarity index 100%
rename from src/features/instances/components/InstancesExportForm/components/SortableFieldList/index.ts
rename to src/features/exports/components/SortableFieldList/index.ts
diff --git a/src/features/exports/constants.ts b/src/features/exports/constants.ts
new file mode 100644
index 0000000000..28e26962d5
--- /dev/null
+++ b/src/features/exports/constants.ts
@@ -0,0 +1,2 @@
+export const EXPORT_JOBS_POLL_INTERVAL_MS = 5000;
+export const MS_PER_SECOND = 1000;
diff --git a/src/features/exports/index.ts b/src/features/exports/index.ts
new file mode 100644
index 0000000000..ad8e370c1a
--- /dev/null
+++ b/src/features/exports/index.ts
@@ -0,0 +1,9 @@
+export { default as ExportsContainer } from "./components/ExportsContainer";
+export { default as ExportDetailsSidePanel } from "./components/ExportDetailsSidePanel";
+export { default as SortableFieldList } from "./components/SortableFieldList";
+export type {
+  ExportJob,
+  ExportJobType,
+  ExportJobStatus,
+} from "./types/ExportJob";
+export type { ExportField, ExportFieldGroup } from "./types/ExportForm";
diff --git a/src/features/exports/types/ExportForm.ts b/src/features/exports/types/ExportForm.ts
new file mode 100644
index 0000000000..ea682e7eac
--- /dev/null
+++ b/src/features/exports/types/ExportForm.ts
@@ -0,0 +1,11 @@
+export interface ExportField {
+  readonly id: string;
+  readonly label: string;
+  readonly defaultSelected?: boolean;
+}
+
+export interface ExportFieldGroup {
+  readonly title: string;
+  readonly key: string;
+  readonly fields: readonly ExportField[];
+}
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
new file mode 100644
index 0000000000..13c11c0e9c
--- /dev/null
+++ b/src/features/exports/types/ExportJob.ts
@@ -0,0 +1,23 @@
+export type ExportJobType = "instance" | "activity";
+
+export type ExportJobStatus = "processing" | "completed" | "failed";
+
+export interface ExportJob {
+  readonly id: string;
+  readonly name: string;
+  readonly filename: string;
+  readonly type: ExportJobType;
+  readonly rowCount: number;
+  readonly attributeLabels: string[];
+  readonly selectedFieldIds: string[];
+  readonly createdAt: string;
+  readonly status: ExportJobStatus;
+  readonly progress: number;
+  readonly estimatedSecondsRemaining?: number | null;
+  readonly errorMessage?: string | null;
+  readonly downloadReady?: boolean;
+  readonly retainUntil?: string | null;
+  readonly query?: string | null;
+  readonly displayQuery?: string | null;
+  readonly hasSelection?: boolean;
+}
diff --git a/src/features/instances/api/index.ts b/src/features/instances/api/index.ts
index 305a1c66d5..c836496636 100644
--- a/src/features/instances/api/index.ts
+++ b/src/features/instances/api/index.ts
@@ -2,20 +2,16 @@ export * from "./useAcceptPendingInstances";
 export * from "./useAddTagsToInstances";
 export * from "./useCreateDistributionUpgrades";
 export * from "./useEditInstance";
-export * from "./useCancelInstancesExportJob";
-export * from "./useDiscardInstancesExportJob";
 export * from "./useDownloadInstancesExportJob";
 export * from "./useExportInstancesCsv";
 export * from "./useGenerateRecoveryKey";
 export * from "./useGetAvailabilityZones";
-export * from "./useGetInstancesExportJobs";
 export * from "./useGetRecoveryKey";
 export * from "./useGetInstance";
 export * from "./useGetInstanceChildren";
 export * from "./useGetInstances";
 export * from "./useGetDistributionUpgradeTargets";
 export * from "./useGetPendingInstances";
-export * from "./useGetExportAnnotationFields";
 export * from "./useRejectPendingInstances";
 export * from "./useRemoveInstancesFromLandscape";
 export * from "./useRestartInstance";
diff --git a/src/features/instances/api/instancesExportJobsShared.ts b/src/features/instances/api/instancesExportJobsShared.ts
index 1dc896c9cf..3901d5f999 100644
--- a/src/features/instances/api/instancesExportJobsShared.ts
+++ b/src/features/instances/api/instancesExportJobsShared.ts
@@ -1,10 +1,12 @@
 import type { InstanceListParams } from "../helpers";
 import type { InstancesExportJob } from "../types/InstancesExportJob";
-import type { AxiosResponse, InternalAxiosRequestConfig } from "axios";
 
 export interface CreateInstancesExportJobParams extends InstanceListParams {
   readonly name: string;
   readonly selected_field_ids: string[];
+  readonly retain_until: string;
+  readonly display_query: string;
+  readonly has_selection: boolean;
 }
 
 export interface InstancesExportJobsResponse {
@@ -12,67 +14,17 @@ export interface InstancesExportJobsResponse {
   readonly results: InstancesExportJob[];
 }
 
-export const EXPORT_JOBS_QUERY_KEY = ["instances-export-jobs"];
-export const EXPORT_JOBS_POLL_INTERVAL_MS = 5000;
-const HTTP_STATUS_OK = 200;
-
-const EXPORT_JOB_STATUS_ORDER: Record<InstancesExportJob["status"], number> = {
-  processing: 0,
-  completed: 1,
-  failed: 2,
-  canceled: 3,
-};
-
-const isVisibleExportJob = (job: InstancesExportJob) =>
-  job.status === "processing" ||
-  job.status === "completed" ||
-  job.status === "failed";
-
 export const hasProcessingExportJobs = (jobs: InstancesExportJob[]) =>
   jobs.some((job) => job.status === "processing");
 
-export const getSortedExportJobs = (jobs: InstancesExportJob[]) =>
-  [...jobs]
-    .filter(isVisibleExportJob)
-    .sort((left, right) => {
-      if (left.status !== right.status) {
-        return EXPORT_JOB_STATUS_ORDER[left.status] -
-          EXPORT_JOB_STATUS_ORDER[right.status];
-      }
-
-      return (
-        new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()
-      );
-    });
-
-export const setExportJobsCache = (
-  current: InstancesExportJobsResponse | undefined,
-  jobs: InstancesExportJob[],
-): InstancesExportJobsResponse => {
-  const sortedJobs = getSortedExportJobs(jobs);
-
-  return {
-    ...(current ?? {}),
-    count: sortedJobs.length,
-    results: sortedJobs,
-  };
+export const getStatusLabel = (job: InstancesExportJob): string => {
+  switch (job.status) {
+    case "completed":
+      return "Ready";
+    case "failed":
+      return "Failed";
+    case "processing":
+    default:
+      return `Generating (${job.progress}%)`;
+  }
 };
-
-export const getExportJobsFromResponse = (
-  response: AxiosResponse<InstancesExportJobsResponse> | undefined,
-) => response?.data.results ?? [];
-
-export const setExportJobsResponseCache = (
-  current: AxiosResponse<InstancesExportJobsResponse> | undefined,
-  jobs: InstancesExportJob[],
-): AxiosResponse<InstancesExportJobsResponse> => ({
-  data: setExportJobsCache(current?.data, jobs),
-  status: current?.status ?? HTTP_STATUS_OK,
-  statusText: current?.statusText ?? "OK",
-  headers: current?.headers ?? {},
-  config:
-    current?.config ??
-    ({
-      headers: {},
-    } as InternalAxiosRequestConfig),
-});
diff --git a/src/features/instances/api/useCancelInstancesExportJob.ts b/src/features/instances/api/useCancelInstancesExportJob.ts
deleted file mode 100644
index 2d3fe46ea9..0000000000
--- a/src/features/instances/api/useCancelInstancesExportJob.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import useFetch from "@/hooks/useFetch";
-import type { ApiError } from "@/types/api/ApiError";
-import type { InstancesExportJob } from "../types/InstancesExportJob";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type { AxiosError, AxiosResponse } from "axios";
-import {
-  EXPORT_JOBS_QUERY_KEY,
-  getExportJobsFromResponse,
-  setExportJobsResponseCache,
-  type InstancesExportJobsResponse,
-} from "./instancesExportJobsShared";
-
-export const useCancelInstancesExportJob = () => {
-  const authFetch = useFetch();
-  const queryClient = useQueryClient();
-
-  const { mutateAsync } = useMutation<
-    InstancesExportJob,
-    AxiosError<ApiError>,
-    string
-  >({
-    mutationFn: async (jobId) =>
-      (
-        await authFetch.post<InstancesExportJob>(
-          `computers/exports/${jobId}/cancel`,
-        )
-      ).data,
-    onSuccess: (_job, jobId) => {
-      queryClient.setQueryData<
-        AxiosResponse<InstancesExportJobsResponse> | undefined
-      >(
-        EXPORT_JOBS_QUERY_KEY,
-        (current) =>
-          setExportJobsResponseCache(
-            current,
-            getExportJobsFromResponse(current).filter((job) => job.id !== jobId),
-          ),
-      );
-      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
-    },
-  });
-
-  return {
-    cancelInstancesExportJob: mutateAsync,
-  };
-};
diff --git a/src/features/instances/api/useDiscardInstancesExportJob.ts b/src/features/instances/api/useDiscardInstancesExportJob.ts
deleted file mode 100644
index be152c3b2e..0000000000
--- a/src/features/instances/api/useDiscardInstancesExportJob.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import useFetch from "@/hooks/useFetch";
-import type { ApiError } from "@/types/api/ApiError";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type { AxiosError, AxiosResponse } from "axios";
-import {
-  EXPORT_JOBS_QUERY_KEY,
-  getExportJobsFromResponse,
-  setExportJobsResponseCache,
-  type InstancesExportJobsResponse,
-} from "./instancesExportJobsShared";
-
-export const useDiscardInstancesExportJob = () => {
-  const authFetch = useFetch();
-  const queryClient = useQueryClient();
-
-  const { mutateAsync } = useMutation<unknown, AxiosError<ApiError>, string>({
-    mutationFn: async (jobId) => {
-      await authFetch.delete(`computers/exports/${jobId}`);
-    },
-    onSuccess: (_result, jobId) => {
-      queryClient.setQueryData<
-        AxiosResponse<InstancesExportJobsResponse> | undefined
-      >(
-        EXPORT_JOBS_QUERY_KEY,
-        (current) =>
-          setExportJobsResponseCache(
-            current,
-            getExportJobsFromResponse(current).filter((job) => job.id !== jobId),
-          ),
-      );
-      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
-    },
-  });
-
-  return {
-    discardInstancesExportJob: mutateAsync,
-  };
-};
diff --git a/src/features/instances/api/useDownloadInstancesExportJob.test.tsx b/src/features/instances/api/useDownloadInstancesExportJob.test.tsx
deleted file mode 100644
index fbfc88b41f..0000000000
--- a/src/features/instances/api/useDownloadInstancesExportJob.test.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import server from "@/tests/server";
-import { renderHookWithProviders } from "@/tests/render";
-import { API_URL } from "@/constants";
-import type { InstancesExportJob } from "../types/InstancesExportJob";
-import { useDownloadInstancesExportJob } from "./useDownloadInstancesExportJob";
-import { http, HttpResponse } from "msw";
-import { setEndpointStatus } from "@/tests/controllers/controller";
-
-const job = {
-  id: "42",
-  filename: "instances-export-2026-06-08-120000.tsv",
-  name: "My export",
-  status: "completed",
-  progress: 100,
-  downloadReady: true,
-} as unknown as InstancesExportJob;
-
-const removeSaveFilePicker = () => {
-  delete (window as unknown as Record<string, unknown>).showSaveFilePicker;
-};
-
-const renderDownloadHook = () =>
-  renderHook(() => useDownloadInstancesExportJob(), {
-    wrapper: renderHookWithProviders(),
-  }).result;
-
-describe("useDownloadInstancesExportJob", () => {
-  beforeEach(() => {
-    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:mock-url");
-    vi.spyOn(URL, "revokeObjectURL").mockReturnValue(undefined);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    removeSaveFilePicker();
-  });
-
-  it("saves to file via showSaveFilePicker when the File System Access API is available", async () => {
-    const write = vi.fn().mockResolvedValue(undefined);
-    const close = vi.fn().mockResolvedValue(undefined);
-    const createWritable = vi.fn().mockResolvedValue({ write, close });
-    const showSaveFilePicker = vi.fn().mockResolvedValue({ createWritable });
-    (window as unknown as Record<string, unknown>).showSaveFilePicker =
-      showSaveFilePicker;
-
-    const result = renderDownloadHook();
-    await result.current.downloadInstancesExportJob(job);
-
-    expect(showSaveFilePicker).toHaveBeenCalledWith({
-      suggestedName: job.filename,
-    });
-    expect(write).toHaveBeenCalledTimes(1);
-    expect(close).toHaveBeenCalledTimes(1);
-    expect(URL.createObjectURL).not.toHaveBeenCalled();
-  });
-
-  it("falls back to a blob download when the File System Access API is unavailable", async () => {
-    removeSaveFilePicker();
-
-    const result = renderDownloadHook();
-    await result.current.downloadInstancesExportJob(job);
-
-    expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:mock-url");
-  });
-
-  it("rejects without downloading when the save dialog is cancelled", async () => {
-    const showSaveFilePicker = vi
-      .fn()
-      .mockRejectedValue(new DOMException("The user aborted", "AbortError"));
-    (window as unknown as Record<string, unknown>).showSaveFilePicker =
-      showSaveFilePicker;
-
-    const result = renderDownloadHook();
-
-    await expect(
-      result.current.downloadInstancesExportJob(job),
-    ).rejects.toMatchObject({ name: "AbortError" });
-    expect(URL.createObjectURL).not.toHaveBeenCalled();
-  });
-
-  it("throws when the server request fails", async () => {
-    setEndpointStatus({
-      status: "error",
-      path: "computers/exports/:jobId/download",
-    });
-
-    const result = renderDownloadHook();
-
-    await expect(
-      result.current.downloadInstancesExportJob(job),
-    ).rejects.toThrow();
-    expect(URL.createObjectURL).not.toHaveBeenCalled();
-  });
-
-  it("uses the job filename as the suggested save name", async () => {
-    const showSaveFilePicker = vi.fn().mockResolvedValue({
-      createWritable: vi.fn().mockResolvedValue({
-        write: vi.fn().mockResolvedValue(undefined),
-        close: vi.fn().mockResolvedValue(undefined),
-      }),
-    });
-    (window as unknown as Record<string, unknown>).showSaveFilePicker =
-      showSaveFilePicker;
-
-    server.use(
-      http.get(`${API_URL}computers/exports/:jobId/download`, () =>
-        new HttpResponse("data", {
-          headers: {
-            "Content-Disposition": `attachment; filename="${job.filename}"`,
-            "Content-Type": "text/tab-separated-values",
-          },
-        }),
-      ),
-    );
-
-    const result = renderDownloadHook();
-    await result.current.downloadInstancesExportJob(job);
-
-    expect(showSaveFilePicker).toHaveBeenCalledWith({
-      suggestedName: job.filename,
-    });
-  });
-});
diff --git a/src/features/instances/api/useDownloadInstancesExportJob.ts b/src/features/instances/api/useDownloadInstancesExportJob.ts
index 4c35c03cb8..6271536ad4 100644
--- a/src/features/instances/api/useDownloadInstancesExportJob.ts
+++ b/src/features/instances/api/useDownloadInstancesExportJob.ts
@@ -1,80 +1,61 @@
-import { downloadInstancesCsv } from "../helpers";
-import type { InstancesExportJob } from "../types/InstancesExportJob";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import useFetch from "@/hooks/useFetch";
 import {
-  EXPORT_JOBS_QUERY_KEY,
-  getExportJobsFromResponse,
-  setExportJobsResponseCache,
-  type InstancesExportJobsResponse,
-} from "./instancesExportJobsShared";
-import type { AxiosResponse } from "axios";
+  downloadBlob,
+  supportsNativeSave,
+  type SaveFilePickerHandle,
+} from "@/utils/browserDownload";
+import type { InstancesExportJob } from "../types/InstancesExportJob";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 const DEFAULT_EXPORT_FILENAME = "instances-export.tsv";
 
-interface SaveFilePickerHandle {
-  createWritable: () => Promise<{
-    write: (data: Blob) => Promise<void>;
-    close: () => Promise<void>;
-  }>;
-}
-
-interface SaveFilePickerWindow {
-  showSaveFilePicker: (options?: {
-    suggestedName?: string;
-  }) => Promise<SaveFilePickerHandle>;
-}
-
-const supportsNativeSave = (
-  candidate: typeof window,
-): candidate is typeof window & SaveFilePickerWindow =>
-  "showSaveFilePicker" in candidate;
-
 export const useDownloadInstancesExportJob = () => {
   const authFetch = useFetch();
   const queryClient = useQueryClient();
 
   const { mutateAsync } = useMutation<
-    InstancesExportJob,
+    InstancesExportJob | null,
     Error,
     InstancesExportJob
   >({
     mutationFn: async (job) => {
       const filename = job.filename || DEFAULT_EXPORT_FILENAME;
 
-      const response = await authFetch.get<Blob>(
-        `computers/exports/${job.id}/download`,
-        { responseType: "blob" },
-      );
-      const blob = response.data;
-
       if (supportsNativeSave(window)) {
-        const handle = await window.showSaveFilePicker({
-          suggestedName: filename,
-        });
+        let handle: SaveFilePickerHandle;
+        try {
+          handle = await window.showSaveFilePicker({ suggestedName: filename });
+        } catch (error) {
+          if (error instanceof Error && error.name === "AbortError") {
+            return null;
+          }
+          throw error;
+        }
+
+        const response = await authFetch.get<Blob>(
+          `computers/exports/${job.id}/download`,
+          { responseType: "blob" },
+        );
         const writable = await handle.createWritable();
-        await writable.write(blob);
+        await writable.write(response.data);
         await writable.close();
         return job;
       }
 
-      downloadInstancesCsv({ blob, filename });
+      const response = await authFetch.get<Blob>(
+        `computers/exports/${job.id}/download`,
+        { responseType: "blob" },
+      );
+      downloadBlob(response.data, filename);
       return job;
     },
-    onSuccess: (_data, job) => {
-      queryClient.setQueryData<
-        AxiosResponse<InstancesExportJobsResponse> | undefined
-      >(
-        EXPORT_JOBS_QUERY_KEY,
-        (current) =>
-          setExportJobsResponseCache(
-            current,
-            getExportJobsFromResponse(current).filter(
-              (item) => item.id !== job.id,
-            ),
-          ),
-      );
-      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["instances-export-jobs"],
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ["instances-export-jobs-list"],
+      });
     },
   });
 
diff --git a/src/features/instances/api/useExportInstancesCsv.ts b/src/features/instances/api/useExportInstancesCsv.ts
index 5a34ff8224..792eb36e0a 100644
--- a/src/features/instances/api/useExportInstancesCsv.ts
+++ b/src/features/instances/api/useExportInstancesCsv.ts
@@ -3,38 +3,23 @@ import type { ApiError } from "@/types/api/ApiError";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 import type { InstancesExportJob } from "../types/InstancesExportJob";
-import {
-  EXPORT_JOBS_QUERY_KEY,
-  getExportJobsFromResponse,
-  setExportJobsResponseCache,
-  type CreateInstancesExportJobParams,
-  type InstancesExportJobsResponse,
-} from "./instancesExportJobsShared";
+import type { CreateInstancesExportJobParams } from "./instancesExportJobsShared";
 
 export const useExportInstancesCsv = () => {
   const authFetch = useFetch();
   const queryClient = useQueryClient();
 
   const { isPending, mutateAsync } = useMutation<
-    InstancesExportJob,
+    AxiosResponse<InstancesExportJob>,
     AxiosError<ApiError>,
     CreateInstancesExportJobParams
   >({
     mutationFn: async (params) =>
-      (await authFetch.post<InstancesExportJob>("computers/export/csv", params))
-        .data,
-    onSuccess: (job) => {
-      queryClient.setQueryData<
-        AxiosResponse<InstancesExportJobsResponse> | undefined
-      >(
-        EXPORT_JOBS_QUERY_KEY,
-        (current) =>
-          setExportJobsResponseCache(current, [
-            job,
-            ...getExportJobsFromResponse(current),
-          ]),
-      );
-      void queryClient.invalidateQueries({ queryKey: EXPORT_JOBS_QUERY_KEY });
+      authFetch.post<InstancesExportJob>("computers/export/csv", params),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["instances-export-jobs"],
+      });
     },
   });
 
diff --git a/src/features/instances/api/useGetExportAnnotationFields.ts b/src/features/instances/api/useGetExportAnnotationFields.ts
deleted file mode 100644
index 338925cf15..0000000000
--- a/src/features/instances/api/useGetExportAnnotationFields.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import useFetch from "@/hooks/useFetch";
-import type { ApiError } from "@/types/api/ApiError";
-import { useQuery } from "@tanstack/react-query";
-import type { AxiosError, AxiosResponse } from "axios";
-import type { InstanceListParams } from "../helpers";
-
-export interface ExportAnnotationFieldOption {
-  readonly id: string;
-  readonly label: string;
-  readonly annotation_key: string;
-}
-
-const buildAnnotationFieldParams = ({
-  params,
-}: {
-  params: InstanceListParams;
-}) => {
-  const searchParams = new URLSearchParams();
-
-  if (params.query) {
-    searchParams.set("query", params.query);
-  }
-  if (params.archived_only !== undefined) {
-    searchParams.set("archived_only", String(params.archived_only));
-  }
-  if (params.wsl_children !== undefined) {
-    searchParams.set("wsl_children", String(params.wsl_children));
-  }
-  if (params.wsl_parents !== undefined) {
-    searchParams.set("wsl_parents", String(params.wsl_parents));
-  }
-
-  return searchParams;
-};
-
-interface ExportAnnotationFieldResponse {
-  readonly results: ExportAnnotationFieldOption[];
-}
-
-export const useGetExportAnnotationFields = (params: InstanceListParams) => {
-  const authFetch = useFetch();
-
-  const { data: response, error, isError, isPending } = useQuery<
-    AxiosResponse<ExportAnnotationFieldResponse>,
-    AxiosError<ApiError>
-  >({
-    queryKey: ["instance-export-annotation-fields", params],
-    queryFn: ({ signal }) =>
-      authFetch.get<ExportAnnotationFieldResponse>(
-        "computers/export/annotations",
-        {
-          params,
-          paramsSerializer: () => buildAnnotationFieldParams({ params }).toString(),
-          signal,
-        },
-      ),
-  });
-
-  return {
-    exportAnnotationFields: response?.data.results ?? [],
-    exportAnnotationFieldsError: error,
-    isErrorExportAnnotationFields: isError,
-    isGettingExportAnnotationFields: isPending,
-  };
-};
diff --git a/src/features/instances/api/useGetInstancesExportJobs.ts b/src/features/instances/api/useGetInstancesExportJobs.ts
deleted file mode 100644
index a161e55ce4..0000000000
--- a/src/features/instances/api/useGetInstancesExportJobs.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import useFetch from "@/hooks/useFetch";
-import type { ApiError } from "@/types/api/ApiError";
-import { useQuery } from "@tanstack/react-query";
-import type { AxiosError, AxiosResponse } from "axios";
-import {
-  EXPORT_JOBS_POLL_INTERVAL_MS,
-  EXPORT_JOBS_QUERY_KEY,
-  getExportJobsFromResponse,
-  getSortedExportJobs,
-  hasProcessingExportJobs,
-  type InstancesExportJobsResponse,
-} from "./instancesExportJobsShared";
-
-export const useGetInstancesExportJobs = () => {
-  const authFetch = useFetch();
-
-  const { data: response, dataUpdatedAt } = useQuery<
-    AxiosResponse<InstancesExportJobsResponse>,
-    AxiosError<ApiError>
-  >({
-    queryKey: EXPORT_JOBS_QUERY_KEY,
-    queryFn: async () =>
-      authFetch.get<InstancesExportJobsResponse>("computers/exports"),
-    refetchInterval: (query) =>
-      hasProcessingExportJobs(getExportJobsFromResponse(query.state.data))
-        ? EXPORT_JOBS_POLL_INTERVAL_MS
-        : false,
-    refetchIntervalInBackground: true,
-  });
-
-  const exportJobs = getSortedExportJobs(getExportJobsFromResponse(response));
-
-  return {
-    exportJobs,
-    // Timestamp (ms) of the last successful fetch — used as the anchor for the
-    // client-side ETA countdown between polls.
-    dataUpdatedAt,
-    processingExportJobsCount: exportJobs.filter(
-      (job) => job.status === "processing",
-    ).length,
-    readyExportJobsCount: exportJobs.filter((job) => job.status === "completed")
-      .length,
-  };
-};
diff --git a/src/features/instances/components/InstanceList/InstanceList.test.tsx b/src/features/instances/components/InstanceList/InstanceList.test.tsx
index e4b635013a..089442ed90 100644
--- a/src/features/instances/components/InstanceList/InstanceList.test.tsx
+++ b/src/features/instances/components/InstanceList/InstanceList.test.tsx
@@ -14,6 +14,9 @@ const props: ComponentProps<typeof InstanceList> = {
   setColumnFilterOptions: vi.fn(),
   setSelectedInstances: vi.fn(),
   instanceCount: instances.length,
+  isAllSelected: false,
+  onSelectAll: vi.fn(),
+  onClearSelection: vi.fn(),
 };
 
 describe("InstanceList", () => {
@@ -101,7 +104,7 @@ describe("InstanceList", () => {
     });
     await userEvent.click(toggleAllCheckbox);
 
-    expect(props.setSelectedInstances).toHaveBeenCalledWith([]);
+    expect(props.onClearSelection).toHaveBeenCalled();
 
     rerender(<InstanceList {...props} selectedInstances={[]} />);
     const checkedCheckboxes = screen.queryAllByRole("checkbox", {
diff --git a/src/features/instances/components/InstanceList/InstanceList.tsx b/src/features/instances/components/InstanceList/InstanceList.tsx
index bae28eebee..f56adcb684 100644
--- a/src/features/instances/components/InstanceList/InstanceList.tsx
+++ b/src/features/instances/components/InstanceList/InstanceList.tsx
@@ -36,6 +36,9 @@ interface InstanceListProps {
   readonly selectedInstances: Instance[];
   readonly setColumnFilterOptions: (options: ColumnFilterOption[]) => void;
   readonly setSelectedInstances: (instances: Instance[]) => void;
+  readonly isAllSelected: boolean;
+  readonly onSelectAll: () => void;
+  readonly onClearSelection: () => void;
 }
 
 const InstanceList = memo(function InstanceList({
@@ -44,6 +47,9 @@ const InstanceList = memo(function InstanceList({
   selectedInstances,
   setColumnFilterOptions,
   setSelectedInstances,
+  isAllSelected,
+  onSelectAll,
+  onClearSelection,
 }: InstanceListProps) {
   const { disabledColumns, ...filters } = usePageParams();
 
@@ -64,10 +70,11 @@ const InstanceList = memo(function InstanceList({
 
   const isSelected = useCallback(
     (instance: Instance) =>
+      isAllSelected ||
       selectedInstances.some(
         (selectedInstance) => selectedInstance.id === instance.id,
       ),
-    [selectedInstances],
+    [isAllSelected, selectedInstances],
   );
 
   const isNotSelected = useCallback(
@@ -94,17 +101,20 @@ const InstanceList = memo(function InstanceList({
     [setSelectedInstances, selectedInstances],
   );
 
-  const selectAll = useCallback(() => {
-    select(...currentInstances.filter(isNotSelected));
-  }, [currentInstances, select, isNotSelected]);
-
   const toggleAll = useCallback(() => {
-    if (currentInstances.some(isSelected)) {
-      deselect(...currentInstances);
+    if (isAllSelected || currentInstances.some(isSelected)) {
+      onClearSelection();
     } else {
-      selectAll();
+      select(...currentInstances.filter(isNotSelected));
     }
-  }, [deselect, selectAll, currentInstances, isSelected]);
+  }, [
+    isAllSelected,
+    onClearSelection,
+    select,
+    currentInstances,
+    isSelected,
+    isNotSelected,
+  ]);
 
   const columns = useMemo<InstanceColumn[]>(
     () => [
@@ -144,7 +154,9 @@ const InstanceList = memo(function InstanceList({
                 labelClassName="u-no-margin--bottom u-no-padding--top"
                 checked={isSelected(row.original)}
                 onChange={() => {
-                  if (isSelected(row.original)) {
+                  if (isAllSelected) {
+                    onClearSelection();
+                  } else if (isSelected(row.original)) {
                     deselect(row.original);
                   } else {
                     select(row.original);
@@ -314,9 +326,11 @@ const InstanceList = memo(function InstanceList({
       titleId,
       isSelected,
       isNotSelected,
+      isAllSelected,
       select,
       deselect,
       toggleAll,
+      onClearSelection,
     ],
   );
 
@@ -333,30 +347,42 @@ const InstanceList = memo(function InstanceList({
     [disabledColumns, columns],
   );
 
-  const clearSelection = () => {
-    setSelectedInstances([]);
-  };
-
-  const subhead = !!selectedInstances.length &&
+  const showSubhead =
+    (isAllSelected || !!selectedInstances.length) &&
     instanceCount !== undefined &&
-    instanceCount > currentInstances.length && (
+    instanceCount > currentInstances.length;
+
+  const subhead = showSubhead && (
+    <tr>
       <td colSpan={filteredColumns.length} className="u-no-padding">
         <div className={classes.subhead}>
           <span>
-            {selectedInstances.length} of {instanceCount} instances selected
+            {isAllSelected
+              ? `All ${instanceCount} instances selected`
+              : `${selectedInstances.length} of ${instanceCount} instances selected`}
           </span>
           <div className={classes.buttons}>
+            {!isAllSelected && (
+              <Button
+                className="u-no-padding u-no-margin"
+                appearance="link"
+                onClick={onSelectAll}
+              >
+                Select all {instanceCount} instances
+              </Button>
+            )}
             <Button
               className="u-no-padding u-no-margin"
               appearance="link"
-              onClick={clearSelection}
+              onClick={onClearSelection}
             >
               Clear selection
             </Button>
           </div>
         </div>
       </td>
-    );
+    </tr>
+  );
 
   return (
     <ResponsiveTable
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
deleted file mode 100644
index 9c4f63c51d..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.table {
-  margin-top: 1rem;
-}
-
-.emptyState {
-  margin-top: 1rem;
-}
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
deleted file mode 100644
index 845cb6d7ef..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.test.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import server from "@/tests/server";
-import { renderWithProviders } from "@/tests/render";
-import { API_URL } from "@/constants";
-import {
-  completedExportJob,
-  failedExportJob,
-  processingExportJob,
-} from "@/tests/mocks/instancesExport";
-import { screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
-import InstancesExportDetailsPanel from "./InstancesExportDetailsPanel";
-
-describe("InstancesExportDetailsPanel", () => {
-  it("renders an empty state when there are no export jobs", async () => {
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    expect(
-      await screen.findByText(/no tsv exports in progress/i),
-    ).toBeInTheDocument();
-  });
-
-  it("renders tracked processing and completed exports", async () => {
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({
-          count: 2,
-          results: [processingExportJob, completedExportJob],
-        }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    expect(
-      await screen.findByText(processingExportJob.name),
-    ).toBeInTheDocument();
-    expect(screen.getByText(completedExportJob.name)).toBeInTheDocument();
-    expect(screen.getByRole("progressbar")).toBeInTheDocument();
-    expect(screen.getByText("35%")).toBeInTheDocument();
-    expect(screen.getByText("Estimating...")).toBeInTheDocument();
-    expect(screen.getByText(/^ready$/i)).toBeInTheDocument();
-  });
-
-  it("renders failed exports and hides canceled exports", async () => {
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [failedExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    expect(await screen.findByText(failedExportJob.name)).toBeInTheDocument();
-    expect(screen.getByText(/^failed$/i)).toBeInTheDocument();
-    expect(
-      screen.queryByText(/generating \(100%\)/i),
-    ).not.toBeInTheDocument();
-  });
-
-  it("discards a failed export and shows a confirmation notification", async () => {
-    const user = userEvent.setup();
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [failedExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    await user.click(
-      await screen.findByRole("button", {
-        name: new RegExp(`actions for ${failedExportJob.name}`, "i"),
-      }),
-    );
-    await user.click(screen.getByRole("menuitem", { name: /discard/i }));
-
-    expect(
-      await screen.findByText(/tsv discarded/i),
-    ).toBeInTheDocument();
-  });
-
-  it("cancels an in-progress export and shows a confirmation notification", async () => {
-    const user = userEvent.setup();
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [processingExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    await user.click(
-      await screen.findByRole("button", {
-        name: new RegExp(`actions for ${processingExportJob.name}`, "i"),
-      }),
-    );
-    await user.click(screen.getByRole("menuitem", { name: /cancel/i }));
-
-    expect(
-      await screen.findByText(/tsv generation cancelled/i),
-    ).toBeInTheDocument();
-  });
-
-  it("downloads a completed export and shows a confirmation notification", async () => {
-    const user = userEvent.setup();
-    const write = vi.fn().mockResolvedValue(undefined);
-    const close = vi.fn().mockResolvedValue(undefined);
-    const showSaveFilePicker = vi
-      .fn()
-      .mockResolvedValue({ createWritable: vi.fn().mockResolvedValue({ write, close }) });
-    (window as unknown as Record<string, unknown>).showSaveFilePicker =
-      showSaveFilePicker;
-
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [completedExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    await user.click(
-      await screen.findByRole("button", {
-        name: new RegExp(`actions for ${completedExportJob.name}`, "i"),
-      }),
-    );
-    await user.click(screen.getByRole("menuitem", { name: /download/i }));
-
-    await waitFor(() => {
-      expect(write).toHaveBeenCalledTimes(1);
-    });
-    expect(
-      await screen.findByText(/tsv download started/i),
-    ).toBeInTheDocument();
-
-    delete (window as unknown as Record<string, unknown>).showSaveFilePicker;
-  });
-
-  it("discards a completed export without downloading it", async () => {
-    const user = userEvent.setup();
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [completedExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportDetailsPanel />);
-
-    await user.click(
-      await screen.findByRole("button", {
-        name: new RegExp(`actions for ${completedExportJob.name}`, "i"),
-      }),
-    );
-    await user.click(screen.getByRole("menuitem", { name: /discard/i }));
-
-    expect(
-      await screen.findByText(/tsv discarded/i),
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx b/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
deleted file mode 100644
index 8e4ecd792e..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/InstancesExportDetailsPanel.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import {
-  useCancelInstancesExportJob,
-  useDiscardInstancesExportJob,
-  useDownloadInstancesExportJob,
-  useGetInstancesExportJobs,
-} from "../../api";
-import ListActions, {
-  LIST_ACTIONS_COLUMN_PROPS,
-} from "@/components/layout/ListActions";
-import TruncatedCell from "@/components/layout/TruncatedCell";
-import { useExpandableRow } from "@/hooks/useExpandableRow";
-import useNotify from "@/hooks/useNotify";
-import { ModularTable, Notification } from "@canonical/react-components";
-import { useEffect, useMemo, useState, type FC } from "react";
-import type { CellProps, Column } from "react-table";
-import { createTablePropGetters } from "@/utils/table";
-import type { InstancesExportJob } from "../../types/InstancesExportJob";
-import ExportProgressBar from "./components/ExportProgressBar";
-import classes from "./InstancesExportDetailsPanel.module.scss";
-
-const MS_PER_SECOND = 1000;
-
-interface RowData extends Record<string, unknown> {
-  readonly job: InstancesExportJob;
-  readonly title: string;
-  readonly name: string;
-  readonly statusLabel: string;
-  readonly secondsRemaining: number | null;
-  readonly instanceCount: number;
-  readonly attributes: string[];
-}
-
-const { getCellProps, getRowProps } = createTablePropGetters<RowData>({
-  itemTypeName: "export row",
-  headerColumnId: "name",
-});
-
-const getExportJobStatusLabel = (job: InstancesExportJob) => {
-  switch (job.status) {
-    case "completed":
-      return "Ready";
-    case "failed":
-      return "Failed";
-    case "canceled":
-      return "Canceled";
-    case "processing":
-    default:
-      return `Generating (${job.progress}%)`;
-  }
-};
-
-const getExportJobStatusIcon = (job: InstancesExportJob): string | false => {
-  switch (job.status) {
-    case "completed":
-      return "status-succeeded-small";
-    case "failed":
-      return "status-failed-small";
-    case "canceled":
-      return "status-queued-small";
-    case "processing":
-    default:
-      // Processing rows render a progress bar instead of an icon + label.
-      return false;
-  }
-};
-
-const InstancesExportDetailsPanel: FC = () => {
-  const { notify } = useNotify();
-  const { expandedColumnId, expandedRowIndex, getTableRowsRef, handleExpand } =
-    useExpandableRow<HTMLTableRowElement>();
-  const { exportJobs, dataUpdatedAt, processingExportJobsCount } =
-    useGetInstancesExportJobs();
-  const { cancelInstancesExportJob } = useCancelInstancesExportJob();
-  const { discardInstancesExportJob } = useDiscardInstancesExportJob();
-  const { downloadInstancesExportJob } = useDownloadInstancesExportJob();
-
-  // Tick once a second so the ETA counts down between the 5s server polls.
-  // Anchored to dataUpdatedAt (last fetch) to stay correct without relying on
-  // server/client clock alignment. Only runs while something is processing.
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    if (processingExportJobsCount === 0) {
-      return;
-    }
-    const intervalId = setInterval(() => {
-      setNow(Date.now());
-    }, MS_PER_SECOND);
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [processingExportJobsCount]);
-
-  const columns = useMemo<Column<RowData>[]>(
-    () => [
-      {
-        Header: "Name",
-        accessor: "name",
-      },
-      {
-        Header: "Status",
-        accessor: "statusLabel",
-        Cell: ({ row }: CellProps<RowData>) => {
-          const { job, statusLabel, secondsRemaining } = row.original;
-          if (job.status === "processing") {
-            return (
-              <ExportProgressBar
-                progress={job.progress}
-                secondsRemaining={secondsRemaining}
-              />
-            );
-          }
-          return statusLabel;
-        },
-        getCellIcon: ({ row }: CellProps<RowData>) =>
-          getExportJobStatusIcon(row.original.job),
-      },
-      {
-        Header: "Attributes",
-        accessor: "attributes",
-        meta: {
-          ariaLabel: "Attributes",
-          isExpandable: true,
-        },
-        Cell: ({ row }: CellProps<RowData>) => (
-          <TruncatedCell
-            content={row.original.attributes.map((attribute) => (
-              <span className="truncatedItem" key={attribute}>
-                {attribute}
-              </span>
-            ))}
-            isExpanded={
-              row.index === expandedRowIndex &&
-              expandedColumnId === "attributes"
-            }
-            onExpand={() => {
-              handleExpand(row.index, "attributes");
-            }}
-            showCount
-          />
-        ),
-      },
-      {
-        Header: "Instances",
-        accessor: "instanceCount",
-      },
-      {
-        ...LIST_ACTIONS_COLUMN_PROPS,
-        accessor: "job.id",
-        Cell: ({ row }: CellProps<RowData>) => {
-          const { job } = row.original;
-          const actions =
-            job.status === "completed"
-              ? [
-                  {
-                    icon: "begin-downloading",
-                    label: "Download",
-                    onClick: async () => {
-                      try {
-                        await downloadInstancesExportJob(job);
-                      } catch (error) {
-                        if (
-                          error instanceof DOMException &&
-                          error.name === "AbortError"
-                        ) {
-                          // The user cancelled the save dialog; nothing was downloaded.
-                          return;
-                        }
-                        throw error;
-                      }
-
-                      notify.success({
-                        title: "TSV download started",
-                        message: `${job.name} has been downloaded and removed from the export list.`,
-                      });
-                    },
-                  },
-                ]
-              : [];
-          const destructiveActions =
-            job.status === "processing"
-              ? [
-                  {
-                    icon: "close",
-                    label: "Cancel",
-                    onClick: async () => {
-                      await cancelInstancesExportJob(job.id);
-                      notify.info({
-                        title: "TSV generation cancelled",
-                        message: `${job.name} has been cancelled and removed from the export list.`,
-                      });
-                    },
-                  },
-                ]
-              : [
-                  {
-                    icon: "delete",
-                    label: "Discard",
-                    onClick: async () => {
-                      await discardInstancesExportJob(job.id);
-                      notify.info({
-                        title: "TSV discarded",
-                        message: `${job.name} has been discarded and removed from the export list.`,
-                      });
-                    },
-                  },
-                ];
-
-          return (
-            <ListActions
-              actions={actions}
-              destructiveActions={destructiveActions}
-              toggleAriaLabel={`Actions for ${job.name}`}
-            />
-          );
-        },
-      },
-    ],
-    [
-      cancelInstancesExportJob,
-      discardInstancesExportJob,
-      downloadInstancesExportJob,
-      expandedColumnId,
-      expandedRowIndex,
-      handleExpand,
-      notify,
-    ],
-  );
-
-  const data = useMemo<RowData[]>(
-    () =>
-      exportJobs.map((job) => {
-        // Count the ETA down locally from the value captured at the last fetch.
-        const secondsRemaining =
-          job.estimatedSecondsRemaining == null
-            ? null
-            : Math.max(
-                0,
-                job.estimatedSecondsRemaining -
-                  (now - dataUpdatedAt) / MS_PER_SECOND,
-              );
-
-        return {
-          job,
-          title: job.name,
-          name: job.name,
-          statusLabel: getExportJobStatusLabel(job),
-          secondsRemaining,
-          instanceCount: job.instanceCount,
-          attributes: job.attributeLabels,
-        };
-      }),
-    [exportJobs, now, dataUpdatedAt],
-  );
-
-  return (
-    <>
-      <Notification
-        inline
-        severity="caution"
-        title="TSV downloads are single-use:"
-      >
-        Once you download a TSV, it is discarded and cannot be downloaded again.
-      </Notification>
-      {exportJobs.length ? (
-        <div ref={getTableRowsRef}>
-          <ModularTable
-            className={classes.table}
-            columns={columns}
-            data={data}
-            getCellProps={getCellProps(expandedRowIndex, expandedColumnId)}
-            getRowProps={getRowProps(expandedRowIndex)}
-            sortable={false}
-          />
-        </div>
-      ) : (
-        <p className={classes.emptyState}>
-          You have no TSV exports in progress or waiting to be downloaded.
-        </p>
-      )}
-    </>
-  );
-};
-
-export default InstancesExportDetailsPanel;
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
deleted file mode 100644
index 1d716d776f..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import "vanilla-framework/scss/settings_colors";
-@import "vanilla-framework/scss/settings_spacing";
-
-.wrapper {
-  align-items: center;
-  display: flex;
-  gap: $sph--small;
-  min-width: 16rem;
-  width: 100%;
-}
-
-// Track for the unfilled remainder: a light base with subtle diagonal hatching.
-.bar {
-  background-color: #f2f3f5;
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent,
-    transparent 6px,
-    rgba(0, 0, 0, 0.05) 6px,
-    rgba(0, 0, 0, 0.05) 12px
-  );
-  border-radius: 4px;
-  flex: 1 1 auto;
-  height: 1.5rem;
-  overflow: hidden;
-  position: relative;
-}
-
-// Filled portion. Width is set inline from the progress percentage.
-.fill {
-  align-items: center;
-  background-color: $color-positive;
-  border-radius: 4px;
-  display: flex;
-  height: 100%;
-  justify-content: flex-end;
-  min-width: 2.5rem;
-  transition: width 0.3s ease;
-}
-
-// The percentage label, rendered as a lighter rounded "thumb" at the fill edge.
-.percentage {
-  background-color: rgba(255, 255, 255, 0.25);
-  border-radius: 3px;
-  color: #fff;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1;
-  margin-right: 0.25rem;
-  padding: 0.2rem 0.4rem;
-}
-
-.eta {
-  color: $color-mid-dark;
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
deleted file mode 100644
index c49e82ec31..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import ExportProgressBar, { formatSecondsRemaining } from "./ExportProgressBar";
-
-describe("ExportProgressBar", () => {
-  it("renders the percentage inside the bar and reflects it on the progressbar role", () => {
-    render(<ExportProgressBar progress={35} secondsRemaining={120} />);
-
-    expect(screen.getByText("35%")).toBeInTheDocument();
-    const bar = screen.getByRole("progressbar");
-    expect(bar).toHaveAttribute("aria-valuenow", "35");
-    expect(bar).toHaveAttribute("aria-valuemin", "0");
-    expect(bar).toHaveAttribute("aria-valuemax", "100");
-  });
-
-  it("clamps out-of-range progress values", () => {
-    const { rerender } = render(
-      <ExportProgressBar progress={-10} secondsRemaining={null} />,
-    );
-    expect(screen.getByText("0%")).toBeInTheDocument();
-
-    rerender(<ExportProgressBar progress={150} secondsRemaining={null} />);
-    expect(screen.getByText("100%")).toBeInTheDocument();
-  });
-
-  it("shows 'Estimating...' when there is no estimate yet", () => {
-    render(<ExportProgressBar progress={0} secondsRemaining={null} />);
-    expect(screen.getByText("Estimating...")).toBeInTheDocument();
-  });
-
-  it("shows 'Almost done' for very small estimates", () => {
-    render(<ExportProgressBar progress={98} secondsRemaining={3} />);
-    expect(screen.getByText("Almost done")).toBeInTheDocument();
-  });
-
-  it("formats the remaining time to the right of the bar", () => {
-    render(<ExportProgressBar progress={50} secondsRemaining={150} />);
-    expect(screen.getByText("2m 30s left")).toBeInTheDocument();
-  });
-});
-
-const FORTY_FIVE_SECONDS = 45;
-const TWO_MINUTES = 120;
-const TWO_AND_A_HALF_MINUTES = 150;
-const NEGATIVE_DURATION = -30;
-
-describe("formatSecondsRemaining", () => {
-  it("formats sub-minute durations in seconds", () => {
-    expect(formatSecondsRemaining(0)).toBe("0s left");
-    expect(formatSecondsRemaining(FORTY_FIVE_SECONDS)).toBe("45s left");
-  });
-
-  it("formats whole minutes without trailing seconds", () => {
-    expect(formatSecondsRemaining(TWO_MINUTES)).toBe("2m left");
-  });
-
-  it("formats minutes with remaining seconds", () => {
-    expect(formatSecondsRemaining(TWO_AND_A_HALF_MINUTES)).toBe("2m 30s left");
-  });
-
-  it("never returns a negative duration", () => {
-    expect(formatSecondsRemaining(NEGATIVE_DURATION)).toBe("0s left");
-  });
-});
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
deleted file mode 100644
index 23d0c13609..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/ExportProgressBar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { FC } from "react";
-import classes from "./ExportProgressBar.module.scss";
-
-const SECONDS_PER_MINUTE = 60;
-// Below this, a precise countdown reads as noise — show "Almost done" instead.
-const ALMOST_DONE_THRESHOLD_SECONDS = 5;
-const MAX_PROGRESS = 100;
-
-export const formatSecondsRemaining = (seconds: number): string => {
-  const safe = Math.max(0, Math.round(seconds));
-
-  if (safe < SECONDS_PER_MINUTE) {
-    return `${safe}s left`;
-  }
-
-  const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
-  const remainderSeconds = safe % SECONDS_PER_MINUTE;
-
-  return remainderSeconds
-    ? `${minutes}m ${remainderSeconds}s left`
-    : `${minutes}m left`;
-};
-
-const getEtaLabel = (secondsRemaining: number | null): string => {
-  if (secondsRemaining === null) {
-    return "Estimating...";
-  }
-
-  if (secondsRemaining <= ALMOST_DONE_THRESHOLD_SECONDS) {
-    return "Almost done";
-  }
-
-  return formatSecondsRemaining(secondsRemaining);
-};
-
-interface ExportProgressBarProps {
-  readonly progress: number;
-  readonly secondsRemaining: number | null;
-}
-
-const ExportProgressBar: FC<ExportProgressBarProps> = ({
-  progress,
-  secondsRemaining,
-}) => {
-  const clampedProgress = Math.min(MAX_PROGRESS, Math.max(0, Math.round(progress)));
-
-  return (
-    <div className={classes.wrapper}>
-      <div
-        className={classes.bar}
-        role="progressbar"
-        aria-valuenow={clampedProgress}
-        aria-valuemin={0}
-        aria-valuemax={MAX_PROGRESS}
-        aria-label="Export progress"
-      >
-        <div className={classes.fill} style={{ width: `${clampedProgress}%` }}>
-          <span className={classes.percentage}>{clampedProgress}%</span>
-        </div>
-      </div>
-      <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
-    </div>
-  );
-};
-
-export default ExportProgressBar;
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts b/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
deleted file mode 100644
index d5f2ddaf0a..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/components/ExportProgressBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ExportProgressBar";
diff --git a/src/features/instances/components/InstancesExportDetailsPanel/index.ts b/src/features/instances/components/InstancesExportDetailsPanel/index.ts
deleted file mode 100644
index 20d402ae51..0000000000
--- a/src/features/instances/components/InstancesExportDetailsPanel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InstancesExportDetailsPanel";
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
index 97518966b3..116395e79e 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -1,63 +1,45 @@
-import server from "@/tests/server";
-import useSidePanel from "@/hooks/useSidePanel";
-import useNotify from "@/hooks/useNotify";
-import { API_URL } from "@/constants";
 import { renderWithProviders } from "@/tests/render";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { http, HttpResponse } from "msw";
+import type { ComponentProps } from "react";
+import { describe, expect, it } from "vitest";
 import InstancesExportForm from "./InstancesExportForm";
 
-const closeSidePanel = vi.fn();
-const notify = {
-  clear: vi.fn(),
-  error: vi.fn(),
-  info: vi.fn(),
-  success: vi.fn(),
-  notification: null,
+type InstancesExportFormProps = ComponentProps<typeof InstancesExportForm>;
+
+const defaultProps = {
+  exportParams: {
+    query: "name:prod",
+    archived_only: false,
+    wsl_children: false,
+    wsl_parents: false,
+  },
+  instanceCount: 1,
+} satisfies InstancesExportFormProps;
+
+const renderForm = (props: Partial<InstancesExportFormProps> = {}) =>
+  renderWithProviders(<InstancesExportForm {...defaultProps} {...props} />);
+
+const openAttributeGroup = async (
+  user: ReturnType<typeof userEvent.setup>,
+  name: RegExp,
+) => {
+  await user.click(screen.getByRole("tab", { name }));
 };
 
-vi.mock("@/hooks/useSidePanel");
-vi.mock("@/hooks/useNotify");
-
 describe("InstancesExportForm", () => {
-  beforeEach(() => {
-    closeSidePanel.mockReset();
-    vi.mocked(useSidePanel, { partial: true }).mockReturnValue({
-      closeSidePanel,
-    });
-    vi.mocked(useNotify).mockReturnValue({
-      notify,
-      sidePanel: {
-        open: false,
-        setOpen: vi.fn(),
-      },
-    });
-    notify.info.mockReset();
-    notify.success.mockReset();
-    notify.error.mockReset();
-    notify.clear.mockReset();
-  });
-
-  it("shows step 1 with attribute groups in accordions", () => {
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
-    );
+  it("shows the export details fields and instance attribute groups", async () => {
+    const user = userEvent.setup();
+    renderForm();
 
     expect(
       screen.getByText(/select the attributes you want to include/i),
     ).toBeInTheDocument();
-    expect(screen.getByLabelText("Export name")).toBeInTheDocument();
-    expect(screen.getByLabelText("Search attributes")).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Export name" })).toBeVisible();
+    expect(screen.getByLabelText("Keep until")).toBeVisible();
+    expect(
+      screen.getByRole("searchbox", { name: "Search attributes" }),
+    ).toBeVisible();
     expect(
       screen.getByRole("tab", { name: /primary identity/i }),
     ).toBeInTheDocument();
@@ -66,67 +48,47 @@ describe("InstancesExportForm", () => {
         name: /granular metadata & deep diagnostics/i,
       }),
     ).toBeInTheDocument();
-    expect(screen.getByLabelText("Annotations")).toBeInTheDocument();
-  });
-
-  it("disables Next button when no fields are selected", () => {
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
-    );
-
-    expect(screen.getByRole("button", { name: "Next" })).toHaveAttribute(
-      "aria-disabled",
-      "true",
-    );
-
-    expect(screen.getByLabelText("Export name")).toHaveValue("");
+    await openAttributeGroup(user, /business logic/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Annotations" }),
+    ).toBeInTheDocument();
   });
 
-  it("filters attributes in step 1", async () => {
+  it("keeps Next disabled until an export name and at least one field are selected", async () => {
     const user = userEvent.setup();
+    renderForm();
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
-    );
+    const nextButton = screen.getByRole("button", { name: "Next" });
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
 
-    await user.type(screen.getByLabelText("Search attributes"), "host");
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
+    );
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
 
-    expect(screen.getByLabelText("Hostname")).toBeInTheDocument();
-    expect(screen.queryByLabelText("Instance name")).not.toBeInTheDocument();
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
-  it("does not match parent group titles when filtering attributes", async () => {
+  it("filters attributes by field name without matching group titles", async () => {
     const user = userEvent.setup();
+    renderForm();
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
-    );
+    const search = screen.getByRole("searchbox", { name: "Search attributes" });
+    await user.type(search, "host");
 
-    await user.type(screen.getByLabelText("Search attributes"), "primary");
+    await openAttributeGroup(user, /primary identity/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Hostname" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("checkbox", { name: "Instance name" }),
+    ).not.toBeInTheDocument();
+
+    await user.clear(search);
+    await user.type(search, "primary");
 
     expect(
       screen.getByText("No attributes match your search."),
@@ -136,99 +98,65 @@ describe("InstancesExportForm", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("shows attribute validation with error styling", async () => {
+  it("shows attribute validation after clearing the last selected field", async () => {
     const user = userEvent.setup();
+    renderForm();
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
     );
-
-    await user.type(screen.getByLabelText("Export name"), "Weekly export");
-    await user.click(screen.getByLabelText("Instance name"));
-    await user.click(screen.getByLabelText("Instance name"));
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
 
     expect(screen.getByText("Select at least one attribute")).toHaveClass(
       "p-form-validation__message",
     );
   });
 
-  it("moves to step 2 showing reorder table when Next is clicked", async () => {
+  it("moves to the review step and back without losing selected fields", async () => {
     const user = userEvent.setup();
+    renderForm();
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
     );
-
-    await user.type(screen.getByLabelText("Export name"), "Weekly export");
-    await user.click(screen.getByLabelText("Instance name"));
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
     await user.click(screen.getByRole("button", { name: "Next" }));
 
     expect(
       screen.getByText(/review and reorder the columns/i),
     ).toBeInTheDocument();
-    expect(screen.getByLabelText("Order for Instance name")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
-  });
-
-  it("allows going back from step 2 to step 1", async () => {
-    const user = userEvent.setup();
-
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
-    );
+    expect(
+      screen.getByLabelText("Order for Instance name"),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Order for Hostname")).toBeInTheDocument();
 
-    await user.type(screen.getByLabelText("Export name"), "Weekly export");
-    await user.click(screen.getByLabelText("Instance name"));
-    await user.click(screen.getByRole("button", { name: "Next" }));
     await user.click(screen.getByRole("button", { name: "Back" }));
 
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+    await openAttributeGroup(user, /primary identity/i);
     expect(
-      screen.getByRole("button", { name: "Next" }),
-    ).toBeInTheDocument();
+      screen.getByRole("checkbox", { name: "Instance name" }),
+    ).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Hostname" })).toBeChecked();
   });
 
   it("keeps the order input focused while typing", async () => {
     const user = userEvent.setup();
+    renderForm();
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={1}
-      />,
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
     );
-
-    await user.type(screen.getByLabelText("Export name"), "Weekly export");
-    await user.click(screen.getByLabelText("Instance name"));
-    await user.click(screen.getByLabelText("Hostname"));
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
     await user.click(screen.getByRole("button", { name: "Next" }));
 
     const orderInput = screen.getByLabelText("Order for Hostname");
@@ -240,56 +168,29 @@ describe("InstancesExportForm", () => {
     expect(orderInput).toHaveValue(1);
   });
 
-  it("queues an export, closes the side panel, and shows a toast", async () => {
+  it("queues an export and shows a success notification with a status action", async () => {
     const user = userEvent.setup();
-    let capturedBody: unknown = null;
-    server.use(
-      http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
-        capturedBody = await request.json();
-        return HttpResponse.json(
-          {
-            id: "job-1",
-            name: "Weekly export",
-            filename: "instances-export.tsv",
-            instanceCount: 8,
-            attributeLabels: ["Instance name"],
-            selectedFieldIds: ["title"],
-            createdAt: "2026-06-03T12:10:00.000Z",
-            status: "processing",
-            progress: 0,
-            downloadReady: false,
-          },
-          { status: 201 },
-        );
-      }),
-    );
+    renderForm({ instanceCount: 8 });
 
-    renderWithProviders(
-      <InstancesExportForm
-        exportParams={{
-          query: "name:prod",
-          archived_only: false,
-          wsl_children: false,
-          wsl_parents: false,
-        }}
-        instanceCount={8}
-      />,
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
     );
-
-    await user.type(screen.getByLabelText("Export name"), "Weekly export");
-    await user.click(screen.getByLabelText("Instance name"));
-    await user.click(screen.getByLabelText("Annotations"));
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    await openAttributeGroup(user, /business logic/i);
+    await user.click(screen.getByRole("checkbox", { name: "Annotations" }));
     await user.click(screen.getByRole("button", { name: "Next" }));
     await user.click(screen.getByRole("button", { name: "Generate TSV" }));
 
-    expect(closeSidePanel).toHaveBeenCalled();
-    expect(notify.info).toHaveBeenCalledWith(
-      expect.objectContaining({ title: "TSV export in progress" }),
-    );
-    expect(capturedBody).toMatchObject({
-      name: "Weekly export",
-      query: "name:prod",
-      selected_field_ids: ["title", "annotations"],
-    });
+    expect(await screen.findByText("TSV export in progress")).toBeVisible();
+    expect(
+      screen.getByText(
+        'Your instances export "Weekly export" for "name:prod" is being generated.',
+      ),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "View export status" }),
+    ).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index 19021e22a7..7c39fc3155 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -1,7 +1,9 @@
 import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
+import { INPUT_DATE_FORMAT } from "@/constants";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import useSidePanel from "@/hooks/useSidePanel";
+import { ROUTES } from "@/libs/routes";
 import { getFormikError } from "@/utils/formikErrors";
 import {
   Accordion,
@@ -10,17 +12,17 @@ import {
   Input,
 } from "@canonical/react-components";
 import { useFormik } from "formik";
-import {
-  useCallback,
-  useMemo,
-  useState,
-  type FC,
-} from "react";
+import moment from "moment";
+import { useCallback, useMemo, useState, type FC } from "react";
+import { useNavigate } from "react-router";
 import { useExportInstancesCsv } from "../../api/useExportInstancesCsv";
 import type { InstanceListParams } from "../../helpers";
 import classes from "./InstancesExportForm.module.scss";
-import { INITIAL_VALUES, VALIDATION_SCHEMA } from "./constants";
-import { EXPORT_FIELD_GROUPS } from "./constants";
+import {
+  EXPORT_FIELD_GROUPS,
+  INITIAL_VALUES,
+  VALIDATION_SCHEMA,
+} from "./constants";
 import { buildExportQuery } from "./helpers";
 import type {
   ExportField,
@@ -28,7 +30,7 @@ import type {
   StepIndex,
 } from "./types";
 import classNames from "classnames";
-import SortableFieldList from "./components/SortableFieldList";
+import { SortableFieldList } from "@/features/exports";
 
 interface InstancesExportFormProps {
   readonly exportParams: InstanceListParams;
@@ -45,6 +47,7 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
 }) => {
   const { closeSidePanel } = useSidePanel();
   const { notify } = useNotify();
+  const navigate = useNavigate();
   const debug = useDebug();
   const { exportInstancesCsv, isExportInstancesCsvLoading } =
     useExportInstancesCsv();
@@ -52,6 +55,10 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
   const [attributeSearch, setAttributeSearch] = useState("");
   const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
 
+  const handleBack = () => {
+    setStep(0);
+  };
+
   const formik = useFormik<InstancesExportFormValues>({
     initialValues: INITIAL_VALUES,
     validationSchema: VALIDATION_SCHEMA,
@@ -75,19 +82,32 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
       });
 
       try {
-        await exportInstancesCsv({
+        const response = await exportInstancesCsv({
           name: values.name.trim(),
           query,
           archived_only: exportParams.archived_only,
           wsl_children: exportParams.wsl_children,
           wsl_parents: exportParams.wsl_parents,
           selected_field_ids: fieldsToExport.map((field) => field.id),
+          retain_until: moment(values.retainUntil).toISOString(),
+          display_query: exportParams.query ?? "",
+          has_selection: !!selectedInstanceIds?.length,
         });
+        const job = response.data;
 
         closeSidePanel();
-        notify.info({
+        notify.success({
           title: "TSV export in progress",
-          message: `Your instances export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated. You can track it from the instances page.`,
+          message: `Your instances export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated.`,
+          actions: [
+            {
+              label: "View export status",
+              onClick: () =>
+                navigate(
+                  ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+                ),
+            },
+          ],
         });
       } catch (error) {
         debug(error);
@@ -198,6 +218,15 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
             error={getFormikError(formik, "name")}
             {...formik.getFieldProps("name")}
           />
+          <Input
+            type="date"
+            label="Keep until"
+            required
+            min={moment().add(1, "day").format(INPUT_DATE_FORMAT)}
+            max={moment().add(100, "years").format(INPUT_DATE_FORMAT)}
+            error={getFormikError(formik, "retainUntil")}
+            {...formik.getFieldProps("retainUntil")}
+          />
           <Input
             type="search"
             label="Search attributes"
@@ -237,23 +266,18 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
 
   return (
     <Form noValidate onSubmit={formik.handleSubmit}>
-      <p className={classes.description}>
-        {step === 0
-          ? "Name your export, select the attributes you want to include, and filter the list if needed."
-          : "Review your selected columns before generating the export."}
-      </p>
+      {step === 0 && (
+        <p className={classes.description}>
+          Name your export, select the attributes you want to include, and
+          filter the list if needed.
+        </p>
+      )}
 
       {stepContent}
 
       <SidePanelFormButtons
         hasBackButton={step === 1}
-        onBackButtonPress={
-          step === 1
-            ? () => {
-                setStep(0);
-              }
-            : undefined
-        }
+        onBackButtonPress={step === 1 ? handleBack : undefined}
         submitButtonDisabled={
           (step === 0 &&
             (!formik.values.name.trim() ||
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
deleted file mode 100644
index 808a93d9a9..0000000000
--- a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "vanilla-framework/scss/settings_spacing";
-
-.helperText {
-  margin-top: $spv--small;
-}
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
deleted file mode 100644
index 4ddd1fb827..0000000000
--- a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/InstancesExportAnnotationFields.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { TableFilter } from "@/components/filter";
-import LoadingState from "@/components/layout/LoadingState";
-import { useGetExportAnnotationFields } from "../../../../api";
-import type { FC } from "react";
-import { useState } from "react";
-import type { InstanceListParams } from "../../../../helpers";
-import classes from "./InstancesExportAnnotationFields.module.scss";
-
-interface InstancesExportAnnotationFieldsProps {
-  readonly exportParams: InstanceListParams;
-  readonly selectedAnnotationFieldIds: string[];
-  readonly onSelectedAnnotationFieldIdsChange: (
-    nextAnnotationFieldIds: string[],
-  ) => void;
-}
-
-const InstancesExportAnnotationFields: FC<
-  InstancesExportAnnotationFieldsProps
-> = ({
-  exportParams,
-  selectedAnnotationFieldIds,
-  onSelectedAnnotationFieldIdsChange,
-}) => {
-  const [searchText, setSearchText] = useState("");
-  const {
-    exportAnnotationFields,
-    isErrorExportAnnotationFields,
-    isGettingExportAnnotationFields,
-  } = useGetExportAnnotationFields(exportParams);
-
-  const filteredAnnotationFields = exportAnnotationFields.filter(({ label }) =>
-    label.toLowerCase().includes(searchText.trim().toLowerCase()),
-  );
-
-  if (isGettingExportAnnotationFields && exportAnnotationFields.length === 0) {
-    return (
-      <p className={classes.helperText}>
-        <LoadingState inline /> Loading available annotation columns…
-      </p>
-    );
-  }
-
-  if (isErrorExportAnnotationFields) {
-    return (
-      <p className={classes.helperText}>
-        We couldn’t load annotation columns. You can still export the built-in
-        instance attributes.
-      </p>
-    );
-  }
-
-  if (exportAnnotationFields.length === 0) {
-    return (
-      <p className={classes.helperText}>
-        No annotations were found for the current filtered instances.
-      </p>
-    );
-  }
-
-  return (
-    <TableFilter
-      type="multiple"
-      label="Select annotation columns"
-      hasToggleIcon
-      hasBadge
-      options={filteredAnnotationFields.map((field) => ({
-        label: field.label,
-        value: field.id,
-      }))}
-      selectedItems={selectedAnnotationFieldIds}
-      onItemsSelect={onSelectedAnnotationFieldIdsChange}
-      onSearch={setSearchText}
-      showSelectedItemCount
-    />
-  );
-};
-
-export default InstancesExportAnnotationFields;
diff --git a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts b/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
deleted file mode 100644
index 1fc65c0588..0000000000
--- a/src/features/instances/components/InstancesExportForm/components/InstancesExportAnnotationFields/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InstancesExportAnnotationFields";
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
index 602c6937df..8f8948c79b 100644
--- a/src/features/instances/components/InstancesExportForm/constants.ts
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -1,9 +1,12 @@
 import type { ExportFieldGroup, InstancesExportFormValues } from "./types";
+import { INPUT_DATE_FORMAT } from "@/constants";
+import moment from "moment";
 import * as Yup from "yup";
 
 export const INITIAL_VALUES: InstancesExportFormValues = {
   name: "",
   selectedFieldIds: [],
+  retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };
 
 export const VALIDATION_SCHEMA = Yup.object().shape({
@@ -11,6 +14,19 @@ export const VALIDATION_SCHEMA = Yup.object().shape({
   selectedFieldIds: Yup.array()
     .of(Yup.string().required())
     .min(1, "Select at least one attribute"),
+  retainUntil: Yup.string()
+    .required("This field is required")
+    .test(
+      "retain-until-future",
+      "Must be a date in the future",
+      (value) => !!value && moment(value).isAfter(moment().startOf("day")),
+    )
+    .test(
+      "retain-until-max",
+      "Must be within 100 years from today",
+      (value) =>
+        !!value && moment(value).isSameOrBefore(moment().add(100, "years")),
+    ),
 });
 
 export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
@@ -130,14 +146,3 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     ],
   },
 ];
-
-export const ALL_EXPORT_FIELD_IDS = EXPORT_FIELD_GROUPS.flatMap((group) =>
-  group.fields.map((field) => field.id),
-);
-
-export const DEFAULT_ASYNC_EXPORT_FIELD_IDS = EXPORT_FIELD_GROUPS.flatMap(
-  (group) =>
-    group.fields
-      .filter((field) => field.defaultSelected)
-      .map((field) => field.id),
-);
diff --git a/src/features/instances/components/InstancesExportForm/helpers.test.ts b/src/features/instances/components/InstancesExportForm/helpers.test.ts
index 78973a56a0..e193900560 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.test.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.test.ts
@@ -6,9 +6,9 @@ const SECOND_INSTANCE_ID = 42;
 
 describe("buildExportQuery", () => {
   it("returns the original query when there is no row selection", () => {
-    expect(buildExportQuery({ query: "name:prod", selectedInstanceIds: [] })).toBe(
-      "name:prod",
-    );
+    expect(
+      buildExportQuery({ query: "name:prod", selectedInstanceIds: [] }),
+    ).toBe("name:prod");
   });
 
   it("builds an id-only query when there is no base query", () => {
@@ -17,14 +17,12 @@ describe("buildExportQuery", () => {
     );
   });
 
-  it("combines the current query with the selected instance ids", () => {
+  it("uses only the selected instance ids when both a query and ids are provided", () => {
     expect(
       buildExportQuery({
         query: "tag:server archived:false",
         selectedInstanceIds: [FIRST_INSTANCE_ID, SECOND_INSTANCE_ID],
       }),
-    ).toBe(
-      `(tag:server archived:false) AND (id:${FIRST_INSTANCE_ID} OR id:${SECOND_INSTANCE_ID})`,
-    );
+    ).toBe(`id:${FIRST_INSTANCE_ID} OR id:${SECOND_INSTANCE_ID}`);
   });
 });
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
index 3a6db70831..91510a2775 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -144,14 +144,14 @@ export const getAnnotationFieldOptions = (
     });
   });
 
-  return [...annotationKeys].sort((left, right) => left.localeCompare(right)).map(
-    (annotationKey) => ({
+  return [...annotationKeys]
+    .sort((left, right) => left.localeCompare(right))
+    .map((annotationKey) => ({
       id: `annotation:${annotationKey}`,
       label: `Annotation: ${annotationKey}`,
       annotationKey,
       getValue: (instance) => instance.annotations?.[annotationKey] ?? "",
-    }),
-  );
+    }));
 };
 
 export const getSelectedExportFields = ({
@@ -183,19 +183,9 @@ export const buildExportQuery = ({
   query?: string;
   selectedInstanceIds?: number[];
 }) => {
-  const baseQuery = query?.trim();
-  const selectionQuery = selectedInstanceIds?.length
-    ? `id:${selectedInstanceIds.join(" OR id:")}`
-    : "";
-
-  if (!selectionQuery) {
-    return baseQuery;
+  if (selectedInstanceIds?.length) {
+    return `id:${selectedInstanceIds.join(" OR id:")}`;
   }
 
-  if (!baseQuery) {
-    return selectionQuery;
-  }
-
-  return `(${baseQuery}) AND (${selectionQuery})`;
+  return query?.trim();
 };
-
diff --git a/src/features/instances/components/InstancesExportForm/types.ts b/src/features/instances/components/InstancesExportForm/types.ts
index f1b5493083..b31a1f53b6 100644
--- a/src/features/instances/components/InstancesExportForm/types.ts
+++ b/src/features/instances/components/InstancesExportForm/types.ts
@@ -1,18 +1,9 @@
-export type StepIndex = 0 | 1;
-
-export interface ExportField {
-  readonly id: string;
-  readonly label: string;
-  readonly defaultSelected?: boolean;
-}
+export type { ExportField, ExportFieldGroup } from "@/features/exports";
 
-export interface ExportFieldGroup {
-  readonly title: string;
-  readonly key: string;
-  readonly fields: readonly ExportField[];
-}
+export type StepIndex = 0 | 1;
 
 export interface InstancesExportFormValues {
   readonly name: string;
   readonly selectedFieldIds: string[];
-}
\ No newline at end of file
+  readonly retainUntil: string;
+}
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
deleted file mode 100644
index 8cebab3885..0000000000
--- a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.notification::before {
-  z-index: var(--z-below) !important;
-}
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
deleted file mode 100644
index c63c72e1be..0000000000
--- a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import server from "@/tests/server";
-import { renderWithProviders } from "@/tests/render";
-import { API_URL } from "@/constants";
-import {
-  completedExportJob,
-  processingExportJob,
-} from "@/tests/mocks/instancesExport";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
-import InstancesExportNotification from "./InstancesExportNotification";
-
-describe("InstancesExportNotification", () => {
-  it("does not render when there are no exports", async () => {
-    renderWithProviders(<InstancesExportNotification />);
-
-    // Wait for the initial fetch to settle, then assert nothing rendered.
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(
-      screen.queryByRole("heading", { name: /tsv exports/i }),
-    ).not.toBeInTheDocument();
-  });
-
-  it("renders an in-progress message for active exports", async () => {
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({ count: 1, results: [processingExportJob] }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportNotification />);
-
-    expect(
-      await screen.findByRole("heading", { name: /tsv exports/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/your tsv export is being generated/i),
-    ).toBeInTheDocument();
-  });
-
-  it("opens the export details side panel", async () => {
-    const user = userEvent.setup();
-    server.use(
-      http.get(`${API_URL}computers/exports`, () =>
-        HttpResponse.json({
-          count: 2,
-          results: [processingExportJob, completedExportJob],
-        }),
-      ),
-    );
-
-    renderWithProviders(<InstancesExportNotification />);
-
-    await user.click(
-      await screen.findByRole("button", { name: /view export details/i }),
-    );
-
-    expect(screen.getByRole("complementary")).toBeInTheDocument();
-    expect(
-      await screen.findByRole("heading", {
-        name: /tsv exports/i,
-        level: 3,
-      }),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(/once you download a tsv, it is discarded/i),
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx b/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
deleted file mode 100644
index d38603c2e4..0000000000
--- a/src/features/instances/components/InstancesExportNotification/InstancesExportNotification.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useGetInstancesExportJobs } from "../../api";
-import LoadingState from "@/components/layout/LoadingState";
-import useSidePanel from "@/hooks/useSidePanel";
-import { Button, Notification } from "@canonical/react-components";
-import { lazy, Suspense, useEffect, useMemo, useRef, type FC } from "react";
-import { useBoolean } from "usehooks-ts";
-import classes from "./InstancesExportNotification.module.scss";
-
-const InstancesExportDetailsPanel = lazy(
-  async () => import("../InstancesExportDetailsPanel"),
-);
-
-const InstancesExportNotification: FC = () => {
-  const { setSidePanelContent } = useSidePanel();
-  const { exportJobs, processingExportJobsCount, readyExportJobsCount } =
-    useGetInstancesExportJobs();
-  const previousJobsCountRef = useRef(exportJobs.length);
-  const { value: dismissed, setFalse: show, setTrue: dismiss } = useBoolean();
-
-  useEffect(() => {
-    if (exportJobs.length > previousJobsCountRef.current) {
-      show();
-    }
-
-    previousJobsCountRef.current = exportJobs.length;
-  }, [exportJobs.length, show]);
-
-  const message = useMemo(() => {
-    if (processingExportJobsCount && readyExportJobsCount) {
-      return `You have ${processingExportJobsCount} TSV export${processingExportJobsCount === 1 ? "" : "s"} in progress and ${readyExportJobsCount} ready to download.`;
-    }
-
-    if (processingExportJobsCount) {
-      return `Your TSV export${processingExportJobsCount === 1 ? " is" : "s are"} being generated.`;
-    }
-
-    return `Your TSV export${readyExportJobsCount === 1 ? " is" : "s are"} ready to download.`;
-  }, [processingExportJobsCount, readyExportJobsCount]);
-
-  if (!exportJobs.length || dismissed) {
-    return null;
-  }
-
-  return (
-    <Notification
-      severity="information"
-      title="TSV exports"
-      className={classes.notification}
-      onDismiss={dismiss}
-    >
-      <span>{message} </span>
-      <Button
-        type="button"
-        appearance="link"
-        onClick={() => {
-          setSidePanelContent(
-            "TSV exports",
-            <Suspense fallback={<LoadingState />}>
-              <InstancesExportDetailsPanel />
-            </Suspense>,
-            "large",
-          );
-        }}
-      >
-        View export details
-      </Button>
-    </Notification>
-  );
-};
-
-export default InstancesExportNotification;
diff --git a/src/features/instances/components/InstancesExportNotification/index.ts b/src/features/instances/components/InstancesExportNotification/index.ts
deleted file mode 100644
index 32abb4c42d..0000000000
--- a/src/features/instances/components/InstancesExportNotification/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InstancesExportNotification";
diff --git a/src/features/instances/components/InstancesHeader/InstancesHeader.tsx b/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
index b6b77d7ad5..06fea508cc 100644
--- a/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
+++ b/src/features/instances/components/InstancesHeader/InstancesHeader.tsx
@@ -11,7 +11,6 @@ import type { FC } from "react";
 import { useState } from "react";
 import { useGetAvailabilityZones } from "../../api";
 import { FILTERS } from "../../constants";
-import InstancesExportNotification from "../InstancesExportNotification";
 import AccessGroupFilter from "../AccessGroupFilter";
 import AvailabilityZoneFilter from "../AvailabilityZoneFilter";
 import PendingInstancesNotification from "../PendingInstancesNotification";
@@ -168,7 +167,6 @@ const InstancesHeader: FC<InstancesHeaderProps> = ({
           setShowSearchHelp(false);
         }}
       />
-      <InstancesExportNotification />
       <PendingInstancesNotification />
     </>
   );
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index 6769614e5d..b807197932 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -52,12 +52,12 @@ const defaultProps: ComponentProps<typeof InstancesPageActions> = {
   instanceCount: selected.length,
   isGettingInstances: false,
   selectedInstances: selected,
+  isAllSelected: false,
 };
 
 const renderPageActions = (
   props: Partial<ComponentProps<typeof InstancesPageActions>> = {},
-) =>
-  renderWithProviders(<InstancesPageActions {...defaultProps} {...props} />);
+) => renderWithProviders(<InstancesPageActions {...defaultProps} {...props} />);
 
 describe("InstancesPageActions", () => {
   beforeEach(() => {
@@ -144,7 +144,9 @@ describe("InstancesPageActions", () => {
         "is-disabled",
       );
 
-      await userEvent.click(screen.getByRole("menuitem", { name: /^export$/i }));
+      await userEvent.click(
+        screen.getByRole("menuitem", { name: /^export$/i }),
+      );
 
       expect(
         screen.getByRole("heading", { name: /export 3 instances as tsv/i }),
@@ -286,7 +288,9 @@ describe("InstancesPageActions", () => {
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
       );
-      await userEvent.click(screen.getByRole("menuitem", { name: /^export$/i }));
+      await userEvent.click(
+        screen.getByRole("menuitem", { name: /^export$/i }),
+      );
 
       expect(
         screen.getByRole("heading", {
@@ -490,7 +494,9 @@ describe("InstancesPageActions", () => {
       const startIdx = 9;
       const endIdx = 12;
 
-      renderPageActions({ selectedInstances: instances.slice(startIdx, endIdx) });
+      renderPageActions({
+        selectedInstances: instances.slice(startIdx, endIdx),
+      });
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
index 1124179775..dec5c20ede 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
@@ -10,14 +10,17 @@ import { hasOneItem, getSelectionLabel, pluralize } from "@/utils/_helpers";
 import { Button, ContextualMenu, Icon } from "@canonical/react-components";
 import { lazy, memo, Suspense } from "react";
 import { useBoolean } from "usehooks-ts";
-import { getFeatures, hasUpgrades, type InstanceListParams } from "../../helpers";
+import {
+  getFeatures,
+  hasUpgrades,
+  type InstanceListParams,
+} from "../../helpers";
+import { getExportTitle } from "./helpers";
 import InstanceRemoveFromLandscapeModal from "../InstanceRemoveFromLandscapeModal";
 import classes from "./InstancesPageActions.module.scss";
 import ShutDownModal from "../ShutDownModal";
 import RestartModal from "../RestartModal";
-const InstancesExportForm = lazy(
-  async () => import("../InstancesExportForm"),
-);
+const InstancesExportForm = lazy(async () => import("../InstancesExportForm"));
 
 const RunInstanceScriptForm = lazy(
   async () => import("@/features/scripts/components/RunInstanceScriptForm"),
@@ -45,6 +48,7 @@ interface InstancesPageActionsProps {
   readonly instanceCount: number | undefined;
   readonly isGettingInstances: boolean;
   readonly selectedInstances: Instance[];
+  readonly isAllSelected: boolean;
 }
 
 const InstancesPageActions = memo(function InstancesPageActions({
@@ -52,6 +56,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
   instanceCount,
   isGettingInstances,
   selectedInstances,
+  isAllSelected,
 }: InstancesPageActionsProps) {
   const { isFeatureEnabled } = useAuth();
   const { setSidePanelContent } = useSidePanel();
@@ -86,20 +91,7 @@ const InstancesPageActions = memo(function InstancesPageActions({
     );
   };
   const hasSelectedInstances = selectedInstances.length > 0;
-  const hasInstancesToExport =
-    hasSelectedInstances || (instanceCount ?? 0) > 0;
-
-  const getExportTitle = () => {
-    if (hasSelectedInstances) {
-      return `Export ${pluralize(selectedInstances.length, ["instance"], "exact")} as TSV`;
-    }
-
-    if (instanceCount !== undefined) {
-      return `Export ${pluralize(instanceCount, ["instance"], "exact")} as TSV`;
-    }
-
-    return "Export instances as TSV";
-  };
+  const hasInstancesToExport = isAllSelected || hasSelectedInstances;
 
   const handleRunScript = async () => {
     setSidePanelContent(
@@ -211,13 +203,21 @@ const InstancesPageActions = memo(function InstancesPageActions({
 
   const handleExport = () => {
     setSidePanelContent(
-      getExportTitle(),
+      getExportTitle({
+        isAllSelected,
+        selectedCount: selectedInstances.length,
+        instanceCount,
+      }),
       <Suspense fallback={<LoadingState />}>
         <InstancesExportForm
           exportParams={exportParams}
           instanceCount={instanceCount}
-          selectedInstanceCount={selectedInstances.length}
-          selectedInstanceIds={selectedInstances.map(({ id }) => id)}
+          selectedInstanceCount={
+            isAllSelected ? undefined : selectedInstances.length
+          }
+          selectedInstanceIds={
+            isAllSelected ? undefined : selectedInstances.map(({ id }) => id)
+          }
         />
       </Suspense>,
       "medium",
diff --git a/src/features/instances/components/InstancesPageActions/helpers.ts b/src/features/instances/components/InstancesPageActions/helpers.ts
index 0049cfb87f..c3cfc4538e 100644
--- a/src/features/instances/components/InstancesPageActions/helpers.ts
+++ b/src/features/instances/components/InstancesPageActions/helpers.ts
@@ -1,26 +1,19 @@
-import type { NotificationMethodArgs } from "@/types/Notification";
-import type { Instance } from "@/types/Instance";
-import { pluralize, getSelectionLabel } from "@/utils/_helpers";
+import { pluralize } from "@/utils/_helpers";
 
-type GetNotificationArgsFn = (params: {
-  action: "reboot" | "shutdown";
-  onDetailsClick: () => void;
-  selected: Instance[];
-}) => NotificationMethodArgs;
-
-export const getNotificationArgs: GetNotificationArgsFn = ({
-  action,
-  onDetailsClick,
-  selected,
-}) => {
-  return {
-    title: `Selected ${pluralize(selected.length, ["instance has", "instances have"])} been queued for ${action}.`,
-    message: `${getSelectionLabel(selected, (instance) => `"${instance.title}" instance has`, `instances have`)} been queued in Activities for ${action}.`,
-    actions: [
-      {
-        label: "View details",
-        onClick: onDetailsClick,
-      },
-    ],
-  };
+export const getExportTitle = ({
+  isAllSelected,
+  selectedCount,
+  instanceCount,
+}: {
+  isAllSelected: boolean;
+  selectedCount: number;
+  instanceCount: number | undefined;
+}): string => {
+  if (!isAllSelected && selectedCount > 0) {
+    return `Export ${pluralize(selectedCount, ["instance"], "exact")} as TSV`;
+  }
+  if (instanceCount !== undefined) {
+    return `Export ${pluralize(instanceCount, ["instance"], "exact")} as TSV`;
+  }
+  return "Export instances as TSV";
 };
diff --git a/src/features/instances/helpers.test.ts b/src/features/instances/helpers.test.ts
deleted file mode 100644
index 8189432108..0000000000
--- a/src/features/instances/helpers.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { downloadInstancesCsv } from "./helpers";
-
-describe("downloadInstancesCsv", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("uses the provided filename and appends the tsv extension", () => {
-    const link = {
-      click: vi.fn(),
-      download: "",
-      href: "",
-      remove: vi.fn(),
-    } as unknown as HTMLAnchorElement;
-
-    vi.spyOn(document, "createElement").mockReturnValue(link);
-    vi.spyOn(document.body, "appendChild").mockReturnValue(link);
-    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:instances");
-    vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => undefined);
-
-    downloadInstancesCsv({
-      blob: new Blob(["csv"]),
-      filename: "selected-apps-export",
-    });
-
-    expect(link.download).toBe("selected-apps-export.tsv");
-    expect(link.href).toBe("blob:instances");
-    expect(link.click).toHaveBeenCalledTimes(1);
-    expect(link.remove).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/features/instances/helpers.ts b/src/features/instances/helpers.ts
index 4d65f14c3f..69088cd944 100644
--- a/src/features/instances/helpers.ts
+++ b/src/features/instances/helpers.ts
@@ -3,8 +3,6 @@ import type { ListFilter } from "@/types/Filters";
 import type { USGProfile } from "../usg-profiles";
 import { FILTERS } from "./constants";
 import type { RecoveryKeyActivityStatus } from "./types/RecoveryKey";
-import type { AxiosResponse } from "axios";
-import moment from "moment";
 
 export const isRecoveryKeyActivityFailedOrCanceled = (
   activityStatus?: RecoveryKeyActivityStatus | null,
@@ -208,50 +206,3 @@ export const getInstanceListParams = ({
   wsl_children: wsl.includes("child"),
   wsl_parents: wsl.includes("parent"),
 });
-
-const getDownloadFilename = (response?: AxiosResponse<Blob>) => {
-  const disposition = response?.headers["content-disposition"];
-
-  if (typeof disposition === "string") {
-    const match = disposition.match(/filename="?([^"]+)"?/);
-    if (match?.[1]) {
-      return match[1];
-    }
-  }
-
-  return `instances-${moment().format("YYYY-MM-DD-HHmmss")}.tsv`;
-};
-
-const normalizeDownloadFilename = (filename?: string) => {
-  const trimmedFilename = filename?.trim();
-
-  if (!trimmedFilename) {
-    return undefined;
-  }
-
-  return trimmedFilename.toLowerCase().endsWith(".csv") ||
-    trimmedFilename.toLowerCase().endsWith(".tsv")
-    ? trimmedFilename
-    : `${trimmedFilename}.tsv`;
-};
-
-export const downloadInstancesCsv = ({
-  blob,
-  filename,
-  response,
-}: {
-  blob: Blob;
-  filename?: string;
-  response?: AxiosResponse<Blob>;
-}) => {
-  const objectUrl = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-
-  link.href = objectUrl;
-  link.download =
-    normalizeDownloadFilename(filename) ?? getDownloadFilename(response);
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  URL.revokeObjectURL(objectUrl);
-};
diff --git a/src/features/instances/index.ts b/src/features/instances/index.ts
index bd1315a040..487c4352c1 100644
--- a/src/features/instances/index.ts
+++ b/src/features/instances/index.ts
@@ -29,3 +29,4 @@ export { default as useInstanceSearchHelpTerms } from "./components/InstancesHea
 export { default as RestartModal } from "./components/RestartModal";
 export { default as ShutDownModal } from "./components/ShutDownModal";
 export type { InstanceListParams } from "./helpers";
+export type { InstancesExportJob } from "./types";
diff --git a/src/features/instances/types/InstancesExportJob.ts b/src/features/instances/types/InstancesExportJob.ts
index 3654722856..e384142f02 100644
--- a/src/features/instances/types/InstancesExportJob.ts
+++ b/src/features/instances/types/InstancesExportJob.ts
@@ -1,20 +1,5 @@
-export type InstancesExportJobStatus =
-  | "processing"
-  | "completed"
-  | "failed"
-  | "canceled";
+import type { ExportJob } from "@/features/exports";
 
-export interface InstancesExportJob {
-  readonly id: string;
-  readonly name: string;
-  readonly filename: string;
-  readonly instanceCount: number;
-  readonly attributeLabels: string[];
-  readonly selectedFieldIds: string[];
-  readonly createdAt: string;
-  readonly status: InstancesExportJobStatus;
-  readonly progress: number;
-  readonly estimatedSecondsRemaining?: number | null;
-  readonly errorMessage?: string | null;
-  readonly downloadReady?: boolean;
+export interface InstancesExportJob extends ExportJob {
+  readonly type: "instance";
 }
diff --git a/src/features/instances/types/index.ts b/src/features/instances/types/index.ts
index c3d5e045ae..9e3541751a 100644
--- a/src/features/instances/types/index.ts
+++ b/src/features/instances/types/index.ts
@@ -1,3 +1,4 @@
 export type { RecoveryKey } from "./RecoveryKey";
 export type { Status } from "./Status";
 export type { DistributionUpgradeTarget } from "./DistributionUpgradeTarget";
+export type { InstancesExportJob } from "./InstancesExportJob";
diff --git a/src/features/scripts/components/AttachmentFile/AttachmentFile.tsx b/src/features/scripts/components/AttachmentFile/AttachmentFile.tsx
index 35f1540fa7..1ebae7982a 100644
--- a/src/features/scripts/components/AttachmentFile/AttachmentFile.tsx
+++ b/src/features/scripts/components/AttachmentFile/AttachmentFile.tsx
@@ -8,6 +8,7 @@ import {
 import classNames from "classnames";
 import type { FC } from "react";
 import useDebug from "@/hooks/useDebug";
+import { downloadBlob } from "@/utils/browserDownload";
 import { useGetSingleScriptAttachment } from "../../api";
 import classes from "./AttachmentFile.module.scss";
 
@@ -40,14 +41,7 @@ const AttachmentFile: FC<AttachmentFileProps> = ({
         return;
       }
 
-      const url = URL.createObjectURL(data.data);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
+      downloadBlob(data.data, filename);
     } catch (error) {
       debug(error);
     }
diff --git a/src/features/usg-profiles/hooks/useUsgProfileDownload.tsx b/src/features/usg-profiles/hooks/useUsgProfileDownload.tsx
index 6ad253d69e..3124d816c0 100644
--- a/src/features/usg-profiles/hooks/useUsgProfileDownload.tsx
+++ b/src/features/usg-profiles/hooks/useUsgProfileDownload.tsx
@@ -1,4 +1,5 @@
 import useDebug from "@/hooks/useDebug";
+import { downloadBlob } from "@/utils/browserDownload";
 import { useGetUsgProfileAuditDownload } from "../api";
 
 type USGProfileDownloadMode = "audit" | "tailoring";
@@ -102,11 +103,6 @@ export const useUsgProfileDownload = (mode: USGProfileDownloadMode) => {
 
         const fileToDownload = decodedBlob ?? data;
 
-        const url = URL.createObjectURL(fileToDownload);
-        const link = document.createElement("a");
-
-        link.href = url;
-
         const headerFilename = getFilenameFromContentDisposition(
           headers["content-disposition"],
         );
@@ -117,16 +113,10 @@ export const useUsgProfileDownload = (mode: USGProfileDownloadMode) => {
           pathFilename ??
           (mode === "tailoring" ? "tailoring-file" : "download");
 
-        link.download = withExtension(
-          resolvedFilename,
-          fileToDownload.type,
-          mode,
+        downloadBlob(
+          fileToDownload,
+          withExtension(resolvedFilename, fileToDownload.type, mode),
         );
-
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
       } catch (error) {
         debug(error);
       }
diff --git a/src/features/usg-profiles/hooks/useUsgProfileDownloadAudit.tsx b/src/features/usg-profiles/hooks/useUsgProfileDownloadAudit.tsx
index 15a5fdc4ec..89e5790158 100644
--- a/src/features/usg-profiles/hooks/useUsgProfileDownloadAudit.tsx
+++ b/src/features/usg-profiles/hooks/useUsgProfileDownloadAudit.tsx
@@ -1,3 +1,4 @@
+import { downloadBlob } from "@/utils/browserDownload";
 import { useGetUsgProfileAuditDownload } from "../api/useGetUsgProfileAuditDownload";
 
 export const useUsgProfileDownloadAudit = () => {
@@ -18,19 +19,7 @@ export const useUsgProfileDownloadAudit = () => {
         type: "text/csv;charset=utf-8;",
       });
 
-      const url = URL.createObjectURL(blob);
-
-      const link = document.createElement("a");
-
-      link.href = url;
-
-      link.download = path.slice(path.lastIndexOf("/") + 1);
-
-      document.body.appendChild(link);
-
-      link.click();
-
-      document.body.removeChild(link);
+      downloadBlob(blob, path.slice(path.lastIndexOf("/") + 1));
     },
 
     isDownloadingAudit: isUsgProfileAuditDownloadLoading,
diff --git a/src/libs/routes/exports.ts b/src/libs/routes/exports.ts
new file mode 100644
index 0000000000..5b9ec40de8
--- /dev/null
+++ b/src/libs/routes/exports.ts
@@ -0,0 +1,9 @@
+import { createRoute } from "./_helpers";
+
+export const EXPORTS_PATHS = {
+  root: "exports",
+} as const;
+
+export const EXPORTS_ROUTES = {
+  root: createRoute(`/${EXPORTS_PATHS.root}`),
+} as const;
diff --git a/src/libs/routes/paths.ts b/src/libs/routes/paths.ts
index 9f8393ae9f..f07f15e6e2 100644
--- a/src/libs/routes/paths.ts
+++ b/src/libs/routes/paths.ts
@@ -4,6 +4,7 @@ import { ALERT_PATHS } from "./alerts";
 import { AUTH_PATHS } from "./auth";
 import { ERROR_PATHS } from "./errors";
 import { EVENTS_LOG_PATHS } from "./eventsLog";
+import { EXPORTS_PATHS } from "./exports";
 import { EXTERNAL_PATHS } from "./external";
 import { INSTANCES_PATHS } from "./instances";
 import { OVERVIEW_PATHS } from "./overview";
@@ -20,6 +21,7 @@ export const PATHS = {
   alerts: ALERT_PATHS,
   error: ERROR_PATHS,
   eventsLog: EVENTS_LOG_PATHS,
+  exports: EXPORTS_PATHS,
   external: EXTERNAL_PATHS,
   instances: INSTANCES_PATHS,
   overview: OVERVIEW_PATHS,
diff --git a/src/libs/routes/routes.ts b/src/libs/routes/routes.ts
index ac431594a8..79e1b24773 100644
--- a/src/libs/routes/routes.ts
+++ b/src/libs/routes/routes.ts
@@ -4,6 +4,7 @@ import { ALERT_ROUTES } from "./alerts";
 import { AUTH_ROUTES } from "./auth";
 import { ERROR_ROUTES } from "./errors";
 import { EVENTS_LOG_ROUTES } from "./eventsLog";
+import { EXPORTS_ROUTES } from "./exports";
 import { EXTERNAL_ROUTES } from "./external";
 import { INSTANCES_ROUTES } from "./instances";
 import { OVERVIEW_ROUTES } from "./overview";
@@ -20,6 +21,7 @@ export const ROUTES = {
   alerts: ALERT_ROUTES,
   errors: ERROR_ROUTES,
   eventsLog: EVENTS_LOG_ROUTES,
+  exports: EXPORTS_ROUTES,
   external: EXTERNAL_ROUTES,
   instances: INSTANCES_ROUTES,
   overview: OVERVIEW_ROUTES,
diff --git a/src/pages/dashboard/account/exports/ExportsPage.test.tsx b/src/pages/dashboard/account/exports/ExportsPage.test.tsx
new file mode 100644
index 0000000000..db76a7a708
--- /dev/null
+++ b/src/pages/dashboard/account/exports/ExportsPage.test.tsx
@@ -0,0 +1,95 @@
+import { screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
+import { PATHS } from "@/libs/routes";
+import { renderWithProviders } from "@/tests/render";
+import { setEndpointStatus } from "@/tests/controllers/controller";
+import { completedExportJob, processingExportJob } from "@/tests/mocks/exports";
+import ExportsPage from "./ExportsPage";
+
+describe("ExportsPage", () => {
+  afterEach(() => {
+    setEndpointStatus("default");
+  });
+
+  it("renders the 'Exports' page title", () => {
+    setEndpointStatus({ path: PATHS.exports.root, status: "empty" });
+
+    renderWithProviders(<ExportsPage />);
+
+    expect(
+      screen.getByRole("heading", { name: "Exports" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows 'No exports found' when the list is empty", async () => {
+    setEndpointStatus({ path: PATHS.exports.root, status: "empty" });
+
+    renderWithProviders(<ExportsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("No exports found")).toBeInTheDocument();
+    });
+  });
+
+  it("shows the loading spinner while data is being fetched", () => {
+    setEndpointStatus({ path: PATHS.exports.root, status: "loading" });
+
+    renderWithProviders(<ExportsPage />);
+
+    const spinner = screen.getByRole("status");
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveTextContent("Loading...");
+  });
+
+  it("renders job names when data is present", async () => {
+    setEndpointStatus({
+      path: PATHS.exports.root,
+      status: "variant",
+      response: [completedExportJob, processingExportJob],
+    });
+
+    renderWithProviders(<ExportsPage />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: completedExportJob.name }),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByRole("button", { name: processingExportJob.name }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show 'No exports found.' when jobs are present", async () => {
+    setEndpointStatus({
+      path: PATHS.exports.root,
+      status: "variant",
+      response: [completedExportJob],
+    });
+
+    renderWithProviders(<ExportsPage />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: completedExportJob.name }),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText("No exports found")).not.toBeInTheDocument();
+  });
+
+  it("renders the search input when exports are present", async () => {
+    setEndpointStatus({
+      path: PATHS.exports.root,
+      status: "variant",
+      response: [completedExportJob],
+    });
+
+    renderWithProviders(<ExportsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("searchbox")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/pages/dashboard/account/exports/ExportsPage.tsx b/src/pages/dashboard/account/exports/ExportsPage.tsx
new file mode 100644
index 0000000000..290999524a
--- /dev/null
+++ b/src/pages/dashboard/account/exports/ExportsPage.tsx
@@ -0,0 +1,32 @@
+import PageContent from "@/components/layout/PageContent";
+import PageHeader from "@/components/layout/PageHeader";
+import PageMain from "@/components/layout/PageMain";
+import SidePanel from "@/components/layout/SidePanel";
+import { ExportsContainer, ExportDetailsSidePanel } from "@/features/exports";
+import useSetDynamicFilterValidation from "@/hooks/useDynamicFilterValidation";
+import usePageParams from "@/hooks/usePageParams";
+import type { FC } from "react";
+
+const ExportsPage: FC = () => {
+  useSetDynamicFilterValidation("sidePath", ["view"]);
+  const { sidePath, lastSidePathSegment, popSidePathUntilClear } =
+    usePageParams();
+
+  return (
+    <PageMain>
+      <PageHeader title="Exports" />
+      <PageContent>
+        <ExportsContainer />
+      </PageContent>
+      <SidePanel isOpen={sidePath.length > 0} onClose={popSidePathUntilClear}>
+        {lastSidePathSegment === "view" && (
+          <SidePanel.Suspense key="view">
+            <ExportDetailsSidePanel />
+          </SidePanel.Suspense>
+        )}
+      </SidePanel>
+    </PageMain>
+  );
+};
+
+export default ExportsPage;
diff --git a/src/pages/dashboard/account/exports/index.ts b/src/pages/dashboard/account/exports/index.ts
new file mode 100644
index 0000000000..3082a28935
--- /dev/null
+++ b/src/pages/dashboard/account/exports/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportsPage";
diff --git a/src/pages/dashboard/activities/ActivitiesPage.tsx b/src/pages/dashboard/activities/ActivitiesPage.tsx
index d9236ed568..00ce14b92b 100644
--- a/src/pages/dashboard/activities/ActivitiesPage.tsx
+++ b/src/pages/dashboard/activities/ActivitiesPage.tsx
@@ -1,17 +1,15 @@
-import LoadingState from "@/components/layout/LoadingState";
 import PageContent from "@/components/layout/PageContent";
 import PageHeader from "@/components/layout/PageHeader";
 import PageMain from "@/components/layout/PageMain";
 import type { ActivityCommon } from "@/features/activities";
 import {
-  Activities,
   ActivitiesActions,
-  ActivitiesEmptyState,
+  ActivitiesContainer,
   useGetActivities,
 } from "@/features/activities";
 import useSelection from "@/hooks/useSelection";
 import { DEFAULT_PAGE_SIZE } from "@/libs/pageParamsManager/constants";
-import type { FC } from "react";
+import { useCallback, useState, type FC } from "react";
 
 const ActivitiesPage: FC = () => {
   const { activities, activitiesCount, isGettingActivities } =
@@ -33,6 +31,18 @@ const ActivitiesPage: FC = () => {
     setSelectedItems: setSelectedActivities,
   } = useSelection<ActivityCommon>(activities, isGettingActivities);
 
+  const [isAllSelected, setIsAllSelected] = useState(false);
+
+  const clearSelection = useCallback(() => {
+    setSelectedActivities([]);
+    setIsAllSelected(false);
+  }, [setSelectedActivities]);
+
+  const selectAll = useCallback(() => {
+    setIsAllSelected(true);
+    setSelectedActivities([]);
+  }, [setSelectedActivities]);
+
   return (
     <PageMain>
       <PageHeader
@@ -42,26 +52,27 @@ const ActivitiesPage: FC = () => {
             ? [
                 <ActivitiesActions
                   selected={selectedActivities}
+                  activityCount={activitiesCount}
                   key="activities-actions"
+                  isAllSelected={isAllSelected}
                 />,
               ]
             : undefined
         }
       />
       <PageContent hasTable>
-        {isGettingUnfilteredActivities ? (
-          <LoadingState />
-        ) : !unfilteredActivitiesCount ? (
-          <ActivitiesEmptyState />
-        ) : (
-          <Activities
-            activities={activities}
-            activitiesCount={activitiesCount}
-            isGettingActivities={isGettingActivities}
-            selectedActivities={selectedActivities}
-            setSelectedActivities={setSelectedActivities}
-          />
-        )}
+        <ActivitiesContainer
+          activities={activities}
+          activitiesCount={activitiesCount}
+          isGettingActivities={isGettingActivities}
+          isGettingUnfilteredActivities={isGettingUnfilteredActivities}
+          unfilteredActivitiesCount={unfilteredActivitiesCount}
+          selectedActivities={selectedActivities}
+          setSelectedActivities={setSelectedActivities}
+          isAllSelected={isAllSelected}
+          onSelectAll={selectAll}
+          onClearSelection={clearSelection}
+        />
       </PageContent>
     </PageMain>
   );
diff --git a/src/pages/dashboard/events-log/helpers.ts b/src/pages/dashboard/events-log/helpers.ts
index 8ec30a5f7d..a378fb8bb5 100644
--- a/src/pages/dashboard/events-log/helpers.ts
+++ b/src/pages/dashboard/events-log/helpers.ts
@@ -1,4 +1,5 @@
 import type { EventLog } from "@/features/events-log";
+import { downloadBlob } from "@/utils/browserDownload";
 
 export const downloadCSV = (eventsLog: EventLog[], filename: string) => {
   const header = [
@@ -29,21 +30,5 @@ export const downloadCSV = (eventsLog: EventLog[], filename: string) => {
   ].join("\r\n");
 
   const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-
-  // Create URL for blob
-  const url = URL.createObjectURL(blob);
-
-  // Create link element
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-
-  // Append link to body
-  document.body.appendChild(link);
-
-  // Programmatically click the link to start download
-  link.click();
-
-  // Clean up by removing the link
-  document.body.removeChild(link);
+  downloadBlob(blob, filename);
 };
diff --git a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
index f8fab80973..88c1c6458b 100644
--- a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
+++ b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.test.tsx
@@ -16,6 +16,9 @@ const props: Omit<
   isGettingInstances: false,
   selectedInstances: [],
   onChangeFilter: vi.fn(),
+  isAllSelected: false,
+  onSelectAll: vi.fn(),
+  onClearSelection: vi.fn(),
 };
 
 const columns = [
diff --git a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.tsx b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.tsx
index 31989e6f64..79525f1988 100644
--- a/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.tsx
+++ b/src/pages/dashboard/instances/InstancesContainer/InstancesContainer.tsx
@@ -12,6 +12,9 @@ interface InstancesContainerProps {
   readonly selectedInstances: Instance[];
   readonly setSelectedInstances: (instances: Instance[]) => void;
   readonly onChangeFilter: () => void;
+  readonly isAllSelected: boolean;
+  readonly onSelectAll: () => void;
+  readonly onClearSelection: () => void;
 }
 
 const InstancesContainer = memo(function InstancesContainer({
@@ -21,6 +24,9 @@ const InstancesContainer = memo(function InstancesContainer({
   selectedInstances,
   setSelectedInstances,
   onChangeFilter,
+  isAllSelected,
+  onSelectAll,
+  onClearSelection,
 }: InstancesContainerProps) {
   const [columnFilterOptions, setColumnFilterOptions] = useState<
     ColumnFilterOption[]
@@ -42,6 +48,9 @@ const InstancesContainer = memo(function InstancesContainer({
           selectedInstances={selectedInstances}
           setColumnFilterOptions={setColumnFilterOptions}
           setSelectedInstances={setSelectedInstances}
+          isAllSelected={isAllSelected}
+          onSelectAll={onSelectAll}
+          onClearSelection={onClearSelection}
         />
       )}
 
diff --git a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
index 9291bf839b..bd35b67bf2 100644
--- a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
+++ b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
@@ -29,9 +29,16 @@ const InstancesPage: FC = () => {
   });
 
   const [selectedInstances, setSelectedInstances] = useState<Instance[]>([]);
+  const [isAllSelected, setIsAllSelected] = useState(false);
 
   const clearSelection = useCallback(() => {
     setSelectedInstances([]);
+    setIsAllSelected(false);
+  }, []);
+
+  const selectAll = useCallback(() => {
+    setIsAllSelected(true);
+    setSelectedInstances([]);
   }, []);
 
   return (
@@ -45,6 +52,7 @@ const InstancesPage: FC = () => {
             instanceCount={instancesCount}
             isGettingInstances={isGettingInstances}
             selectedInstances={selectedInstances}
+            isAllSelected={isAllSelected}
           />,
         ]}
       />
@@ -56,6 +64,9 @@ const InstancesPage: FC = () => {
           selectedInstances={selectedInstances}
           setSelectedInstances={setSelectedInstances}
           onChangeFilter={clearSelection}
+          isAllSelected={isAllSelected}
+          onSelectAll={selectAll}
+          onClearSelection={clearSelection}
         />
       </PageContent>
     </PageMain>
diff --git a/src/pages/dashboard/instances/InstancesPage/helpers.ts b/src/pages/dashboard/instances/InstancesPage/helpers.ts
index 9ae77b5f6f..d1cb762c33 100644
--- a/src/pages/dashboard/instances/InstancesPage/helpers.ts
+++ b/src/pages/dashboard/instances/InstancesPage/helpers.ts
@@ -1 +1,5 @@
-export { getInstanceListParams, getOptionQuery, getQuery } from "@/features/instances";
+export {
+  getInstanceListParams,
+  getOptionQuery,
+  getQuery,
+} from "@/features/instances";
diff --git a/src/pages/dashboard/instances/ReportForm/ReportForm.tsx b/src/pages/dashboard/instances/ReportForm/ReportForm.tsx
index bd3cd41537..7afc3c9101 100644
--- a/src/pages/dashboard/instances/ReportForm/ReportForm.tsx
+++ b/src/pages/dashboard/instances/ReportForm/ReportForm.tsx
@@ -6,28 +6,7 @@ import * as Yup from "yup";
 import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
 import classes from "./ReportForm.module.scss";
 import { getFormikError } from "@/utils/formikErrors";
-
-const downloadCSV = (csvString: string, filename: string) => {
-  // Create blob from string
-  const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
-
-  // Create URL for blob
-  const url = URL.createObjectURL(blob);
-
-  // Create link element
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-
-  // Append link to body
-  document.body.appendChild(link);
-
-  // Programmatically click the link to start download
-  link.click();
-
-  // Clean up by removing the link
-  document.body.removeChild(link);
-};
+import { downloadBlob } from "@/utils/browserDownload";
 
 interface ReportFormProps {
   readonly instanceIds: number[];
@@ -48,7 +27,12 @@ const ReportForm: FC<ReportFormProps> = ({ instanceIds }) => {
     }),
     // todo: figure out how to use form values to submit
     onSubmit: () => {
-      downloadCSV(getCsvComplianceDataResult?.data || "", "report.csv");
+      downloadBlob(
+        new Blob([getCsvComplianceDataResult?.data || ""], {
+          type: "text/csv;charset=utf-8;",
+        }),
+        "report.csv",
+      );
     },
   });
 
diff --git a/src/pages/dashboard/instances/[single]/tabs/activities/ActivityPanel/ActivityPanel.tsx b/src/pages/dashboard/instances/[single]/tabs/activities/ActivityPanel/ActivityPanel.tsx
index abe70c858e..27e6fb80a7 100644
--- a/src/pages/dashboard/instances/[single]/tabs/activities/ActivityPanel/ActivityPanel.tsx
+++ b/src/pages/dashboard/instances/[single]/tabs/activities/ActivityPanel/ActivityPanel.tsx
@@ -7,7 +7,7 @@ import {
 } from "@/features/activities";
 import useSelection from "@/hooks/useSelection";
 import { DEFAULT_PAGE_SIZE } from "@/libs/pageParamsManager/constants";
-import type { FC } from "react";
+import { useCallback, useState, type FC } from "react";
 
 interface ActivityPanelProps {
   readonly instanceId?: number;
@@ -35,6 +35,18 @@ const ActivityPanel: FC<ActivityPanelProps> = ({ instanceId }) => {
     setSelectedItems: setSelectedActivities,
   } = useSelection<ActivityCommon>(activities, isGettingActivities);
 
+  const [isAllSelected, setIsAllSelected] = useState(false);
+
+  const clearSelection = useCallback(() => {
+    setSelectedActivities([]);
+    setIsAllSelected(false);
+  }, [setSelectedActivities]);
+
+  const selectAll = useCallback(() => {
+    setIsAllSelected(true);
+    setSelectedActivities([]);
+  }, [setSelectedActivities]);
+
   if (isGettingUnfilteredActivities) {
     return <LoadingState />;
   }
@@ -51,6 +63,9 @@ const ActivityPanel: FC<ActivityPanelProps> = ({ instanceId }) => {
       instanceId={instanceId}
       selectedActivities={selectedActivities}
       setSelectedActivities={setSelectedActivities}
+      isAllSelected={isAllSelected}
+      onSelectAll={selectAll}
+      onClearSelection={clearSelection}
     />
   );
 };
diff --git a/src/routes/DashboardRoutes.tsx b/src/routes/DashboardRoutes.tsx
index ddf9eebc0e..4aa1c12a1e 100644
--- a/src/routes/DashboardRoutes.tsx
+++ b/src/routes/DashboardRoutes.tsx
@@ -28,6 +28,7 @@ export const DashboardRoutes = (
         path={PATHS.alerts.root}
         element={<Pages.AlertNotificationsPage />}
       />
+      <Route path={PATHS.exports.root} element={<Pages.ExportsPage />} />
       <Route path={PATHS.error.envError} element={<Pages.EnvError />} />
 
       {/* --- Instances --- */}
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
index b247380f88..4a885a909e 100644
--- a/src/routes/elements.tsx
+++ b/src/routes/elements.tsx
@@ -125,3 +125,6 @@ export const Alerts = Loadable(
 export const ApiCredentials = Loadable(
   lazy(() => import("@/pages/dashboard/account/api-credentials")),
 );
+export const ExportsPage = Loadable(
+  lazy(() => import("@/pages/dashboard/account/exports")),
+);
diff --git a/src/templates/dashboard/UserInfo/UserInfo.tsx b/src/templates/dashboard/UserInfo/UserInfo.tsx
index 1adeb5892b..8c0c850746 100644
--- a/src/templates/dashboard/UserInfo/UserInfo.tsx
+++ b/src/templates/dashboard/UserInfo/UserInfo.tsx
@@ -136,6 +136,28 @@ const UserInfo: FC = () => {
             </Link>
           )}
         </li>
+        <li className="p-side-navigation__item">
+          <Link
+            className={classNames("p-side-navigation__link", classes.link)}
+            to={ROUTES.exports.root()}
+            aria-current={
+              pathname.includes(ROUTES.exports.root()) ? "page" : undefined
+            }
+          >
+            <Icon
+              name="export"
+              className={classNames(
+                "is-light p-side-navigation__icon",
+                classes.icon,
+              )}
+            />
+            <span
+              className={classNames("p-side-navigation__label", classes.label)}
+            >
+              Exports
+            </span>
+          </Link>
+        </li>
         <li className="p-side-navigation__item">
           <Link
             className={classNames("p-side-navigation__link", classes.link)}
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
new file mode 100644
index 0000000000..8b6a037352
--- /dev/null
+++ b/src/tests/mocks/exports.ts
@@ -0,0 +1,105 @@
+import type { ExportJob } from "@/features/exports";
+
+export const processingExportJob: ExportJob = {
+  id: "job-processing",
+  name: "Instances export 2026-06-03 14:10:00",
+  filename: "instances-export-1.tsv",
+  rowCount: 120,
+  type: "instance",
+  attributeLabels: ["Instance name", "Hostname", "Status"],
+  selectedFieldIds: ["title", "hostname", "status"],
+  createdAt: "2026-06-03T12:10:00.000Z",
+  status: "processing",
+  progress: 35,
+  downloadReady: false,
+  query: "tag:production",
+  displayQuery: "tag:production",
+  hasSelection: false,
+};
+
+export const completedExportJob: ExportJob = {
+  id: "job-completed",
+  name: "Instances export 2026-06-03 14:08:00",
+  filename: "instances-export-2.tsv",
+  rowCount: 42,
+  type: "instance",
+  attributeLabels: ["Instance name", "Access group"],
+  selectedFieldIds: ["title", "access_group"],
+  createdAt: "2026-06-03T12:08:00.000Z",
+  status: "completed",
+  progress: 100,
+  downloadReady: true,
+  query: "id:1 OR id:2",
+  displayQuery: "name:prod",
+  hasSelection: true,
+};
+
+export const failedExportJob: ExportJob = {
+  id: "job-failed",
+  name: "Instances export 2026-06-03 14:06:00",
+  filename: "instances-export-3.tsv",
+  rowCount: 12,
+  type: "instance",
+  attributeLabels: ["Hostname"],
+  selectedFieldIds: ["hostname"],
+  createdAt: "2026-06-03T12:06:00.000Z",
+  status: "failed",
+  progress: 100,
+  errorMessage: "",
+  downloadReady: false,
+  query: null,
+  displayQuery: null,
+  hasSelection: false,
+};
+
+export const processingActivitiesExportJob: ExportJob = {
+  id: "act-job-processing",
+  name: "Activities export 2026-06-03 14:10:00",
+  filename: "activities-export-1.tsv",
+  rowCount: 50,
+  type: "activity",
+  attributeLabels: ["ID", "Type", "Summary", "Status"],
+  selectedFieldIds: ["id", "type", "summary", "status"],
+  createdAt: "2026-06-03T12:10:00.000Z",
+  status: "processing",
+  progress: 30,
+  downloadReady: false,
+  query: "status:succeeded",
+  displayQuery: "status:succeeded",
+  hasSelection: false,
+};
+
+export const completedActivitiesExportJob: ExportJob = {
+  id: "act-job-completed",
+  name: "Activities export 2026-06-03 14:08:00",
+  filename: "activities-export-2.tsv",
+  rowCount: 20,
+  type: "activity",
+  attributeLabels: ["ID", "Type", "Creator"],
+  selectedFieldIds: ["id", "type", "creator"],
+  createdAt: "2026-06-03T12:08:00.000Z",
+  status: "completed",
+  progress: 100,
+  downloadReady: true,
+  query: null,
+  displayQuery: null,
+  hasSelection: false,
+};
+
+export const failedActivitiesExportJob: ExportJob = {
+  id: "act-job-failed",
+  name: "Activities export 2026-06-03 14:06:00",
+  filename: "activities-export-3.tsv",
+  rowCount: 0,
+  type: "activity",
+  attributeLabels: ["ID"],
+  selectedFieldIds: ["id"],
+  createdAt: "2026-06-03T12:06:00.000Z",
+  status: "failed",
+  progress: 100,
+  errorMessage: "Export failed",
+  downloadReady: false,
+  query: null,
+  displayQuery: null,
+  hasSelection: false,
+};
diff --git a/src/tests/mocks/instancesExport.ts b/src/tests/mocks/instancesExport.ts
deleted file mode 100644
index 32702e961e..0000000000
--- a/src/tests/mocks/instancesExport.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { InstancesExportJob } from "../../features/instances/types/InstancesExportJob";
-
-export const processingExportJob: InstancesExportJob = {
-  id: "job-processing",
-  name: "Instances export 2026-06-03 14:10:00",
-  filename: "instances-export-1.tsv",
-  instanceCount: 120,
-  attributeLabels: ["Instance name", "Hostname", "Status"],
-  selectedFieldIds: ["title", "hostname", "status"],
-  createdAt: "2026-06-03T12:10:00.000Z",
-  status: "processing",
-  progress: 35,
-  downloadReady: false,
-};
-
-export const completedExportJob: InstancesExportJob = {
-  id: "job-completed",
-  name: "Instances export 2026-06-03 14:08:00",
-  filename: "instances-export-2.tsv",
-  instanceCount: 42,
-  attributeLabels: ["Instance name", "Access group"],
-  selectedFieldIds: ["title", "access_group"],
-  createdAt: "2026-06-03T12:08:00.000Z",
-  status: "completed",
-  progress: 100,
-  downloadReady: true,
-};
-
-export const failedExportJob: InstancesExportJob = {
-  id: "job-failed",
-  name: "Instances export 2026-06-03 14:06:00",
-  filename: "instances-export-3.tsv",
-  instanceCount: 12,
-  attributeLabels: ["Hostname"],
-  selectedFieldIds: ["hostname"],
-  createdAt: "2026-06-03T12:06:00.000Z",
-  status: "failed",
-  progress: 100,
-  errorMessage: "",
-  downloadReady: false,
-};
diff --git a/src/tests/server/handlers/activity.ts b/src/tests/server/handlers/activity.ts
index 2dc25c8037..8ce34cda26 100644
--- a/src/tests/server/handlers/activity.ts
+++ b/src/tests/server/handlers/activity.ts
@@ -1,5 +1,6 @@
 import { API_URL, API_URL_OLD } from "@/constants";
 import type { Activity } from "@/features/activities";
+import type { ExportJob } from "@/features/exports";
 import { getEndpointStatus } from "@/tests/controllers/controller";
 import {
   activities,
@@ -218,4 +219,92 @@ export default [
 
     return HttpResponse.json([activities[0].id, activities[1].id]);
   }),
+
+  http.post(`${API_URL}activities/exports`, async ({ request }) => {
+    if (shouldApplyEndpointStatus("activities/exports")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    const body = (await request.json()) as Record<string, unknown>;
+    const job: ExportJob = {
+      id: "act-job-new",
+      name: typeof body.name === "string" ? body.name : "New activities export",
+      filename: "activities-export.tsv",
+      rowCount: 0,
+      type: "activity",
+      attributeLabels: [],
+      selectedFieldIds: Array.isArray(body.selected_field_ids)
+        ? (body.selected_field_ids as string[])
+        : [],
+      createdAt: new Date().toISOString(),
+      status: "processing",
+      progress: 0,
+      downloadReady: false,
+      query: typeof body.query === "string" ? body.query : null,
+      displayQuery:
+        typeof body.display_query === "string"
+          ? body.display_query || null
+          : null,
+      hasSelection: body.has_selection === true,
+    };
+    return HttpResponse.json(job, { status: 201 });
+  }),
+
+  http.get(`${API_URL}activities/exports`, ({ request }) => {
+    if (shouldApplyEndpointStatus("activities/exports")) {
+      const { status, response } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusNetworkError();
+      }
+      if (status === "empty") {
+        return HttpResponse.json({ count: 0, results: [] });
+      }
+      if (status === "variant" && Array.isArray(response)) {
+        const jobs = response as ExportJob[];
+        const url = new URL(request.url);
+        const search = url.searchParams.get("search") ?? "";
+        const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
+        const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
+        const filtered = search
+          ? jobs.filter((job) =>
+              job.name.toLowerCase().includes(search.toLowerCase()),
+            )
+          : jobs;
+        return HttpResponse.json({
+          count: filtered.length,
+          results: filtered.slice(offset, offset + limit),
+        });
+      }
+    }
+    return HttpResponse.json({ count: 0, results: [] });
+  }),
+
+  http.post(`${API_URL}activities/exports/:jobId/cancel`, () => {
+    if (shouldApplyEndpointStatus("activities/exports/:jobId/cancel")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.delete(`${API_URL}activities/exports/:jobId`, () => {
+    if (shouldApplyEndpointStatus("activities/exports/:jobId")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.get(`${API_URL}activities/exports/:jobId/download`, () => {
+    if (shouldApplyEndpointStatus("activities/exports/:jobId/download")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusNetworkError();
+    }
+    return new HttpResponse(
+      "id\ttype\nsummary\nstatus\n1\tscript\ntest\nsucceeded",
+      {
+        headers: { "Content-Type": "text/tab-separated-values" },
+      },
+    );
+  }),
 ];
diff --git a/src/tests/server/handlers/exports.ts b/src/tests/server/handlers/exports.ts
new file mode 100644
index 0000000000..880abe4482
--- /dev/null
+++ b/src/tests/server/handlers/exports.ts
@@ -0,0 +1,101 @@
+import { API_URL } from "@/constants";
+import type { ExportJob } from "@/features/exports";
+import { PATHS } from "@/libs/routes";
+import { getEndpointStatus } from "@/tests/controllers/controller";
+import { http, HttpResponse } from "msw";
+import {
+  createEndpointStatusError,
+  createEndpointStatusNetworkError,
+} from "./_constants";
+import { shouldApplyEndpointStatus } from "./_helpers";
+
+const EXPORTS_PATH = PATHS.exports.root;
+
+const generateExportJobsResponse = (
+  request: Request,
+  jobs: ExportJob[],
+): { count: number; results: ExportJob[] } => {
+  const url = new URL(request.url);
+  const search = url.searchParams.get("search") ?? "";
+  const type = url.searchParams.get("type") ?? "";
+  const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
+  const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
+
+  let filtered = search
+    ? jobs.filter((job) =>
+        job.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : jobs;
+  if (type) {
+    filtered = filtered.filter((job) => job.type === type);
+  }
+
+  return {
+    count: filtered.length,
+    results: filtered.slice(offset, offset + limit),
+  };
+};
+
+export default [
+  http.get(`${API_URL}${EXPORTS_PATH}`, ({ request }) => {
+    if (shouldApplyEndpointStatus(EXPORTS_PATH)) {
+      const { status, response } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusNetworkError();
+      if (status === "loading") return new Promise(() => undefined);
+      if (status === "empty") {
+        return HttpResponse.json({ count: 0, results: [] });
+      }
+      if (status === "variant" && Array.isArray(response)) {
+        return HttpResponse.json(
+          generateExportJobsResponse(request, response as ExportJob[]),
+        );
+      }
+    }
+    return HttpResponse.json({ count: 0, results: [] });
+  }),
+
+  http.get(`${API_URL}${EXPORTS_PATH}/:jobId`, () => {
+    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId`)) {
+      const { status, response } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusNetworkError();
+      if (
+        status === "variant" &&
+        response &&
+        typeof response === "object" &&
+        !Array.isArray(response)
+      ) {
+        return HttpResponse.json(response as unknown as ExportJob);
+      }
+    }
+    return new HttpResponse(null, { status: 404 });
+  }),
+
+  http.post(`${API_URL}${EXPORTS_PATH}/:jobId/cancel`, () => {
+    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/cancel`)) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.delete(`${API_URL}${EXPORTS_PATH}/:jobId`, () => {
+    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId`)) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.get(`${API_URL}${EXPORTS_PATH}/:jobId/download`, () => {
+    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/download`)) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusNetworkError();
+    }
+    return new HttpResponse("tsv-data", {
+      headers: {
+        "Content-Disposition": `attachment; filename="export.tsv"`,
+        "Content-Type": "text/tab-separated-values",
+      },
+    });
+  }),
+];
diff --git a/src/tests/server/handlers/index.ts b/src/tests/server/handlers/index.ts
index f781e954bd..4a3aa271dc 100644
--- a/src/tests/server/handlers/index.ts
+++ b/src/tests/server/handlers/index.ts
@@ -6,13 +6,13 @@ import activity from "./activity";
 import administrators from "./administrators";
 import alerts from "./alerts";
 import auth from "./auth";
+import exports from "./exports";
 import autoinstallFiles from "./autoinstallFiles";
 import availabilityZones from "./availabilityZones";
 import employees from "./employees";
 import eventsLog from "./eventsLog";
 import features from "./features";
 import instance from "./instance";
-import instancesExport from "./instancesExport";
 import invitations from "./invitations";
 import kernel from "./kernel";
 import mirrors from "./mirrors";
@@ -53,12 +53,12 @@ export default [
   ...activity,
   ...alerts,
   ...auth,
+  ...exports,
   ...oidcIssuers,
   ...availabilityZones,
   ...employees,
   ...eventsLog,
   ...instance,
-  ...instancesExport,
   ...invitations,
   ...kernel,
   ...mirrors,
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index 6f0afbd652..e6acb24254 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -1,5 +1,6 @@
 import { API_URL, API_URL_OLD } from "@/constants";
 import type { Activity } from "@/features/activities";
+import type { ExportJob } from "@/features/exports";
 import type {
   DistributionUpgradeTarget,
   RemoveInstancesParams,
@@ -37,7 +38,10 @@ import {
   isAction,
   shouldApplyEndpointStatus,
 } from "./_helpers";
-import { createEndpointStatusError } from "./_constants";
+import {
+  createEndpointStatusError,
+  createEndpointStatusNetworkError,
+} from "./_constants";
 
 function isUpgradeAlert(alert: InstanceAlert) {
   return ["PackageUpgradesAlert", "SecurityUpgradesAlert"].includes(alert.type);
@@ -650,4 +654,107 @@ export default [
     await delay();
     return HttpResponse.json();
   }),
+
+  http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
+    if (shouldApplyEndpointStatus("computers/export/csv")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    const body = (await request.json()) as Record<string, unknown>;
+    const job: ExportJob = {
+      id: "job-new",
+      name: typeof body.name === "string" ? body.name : "New export",
+      filename: "instances-export.tsv",
+      rowCount: 0,
+      type: "instance",
+      attributeLabels: [],
+      selectedFieldIds: Array.isArray(body.selected_field_ids)
+        ? (body.selected_field_ids as string[])
+        : [],
+      createdAt: new Date().toISOString(),
+      status: "processing",
+      progress: 0,
+      downloadReady: false,
+      query: typeof body.query === "string" ? body.query : null,
+      displayQuery:
+        typeof body.display_query === "string"
+          ? body.display_query || null
+          : null,
+      hasSelection: body.has_selection === true,
+    };
+    return HttpResponse.json(job, { status: 201 });
+  }),
+
+  http.get(`${API_URL}computers/exports`, ({ request }) => {
+    if (shouldApplyEndpointStatus("computers/exports")) {
+      const { status, response } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusNetworkError();
+      }
+      if (status === "empty") {
+        return HttpResponse.json({ count: 0, results: [] });
+      }
+      if (status === "variant" && Array.isArray(response)) {
+        const jobs = response as ExportJob[];
+        const url = new URL(request.url);
+        const search = url.searchParams.get("search") ?? "";
+        const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
+        const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
+        const filtered = search
+          ? jobs.filter((job) =>
+              job.name.toLowerCase().includes(search.toLowerCase()),
+            )
+          : jobs;
+        return HttpResponse.json({
+          count: filtered.length,
+          results: filtered.slice(offset, offset + limit),
+        });
+      }
+    }
+    return HttpResponse.json({ count: 0, results: [] });
+  }),
+
+  http.post(`${API_URL}computers/exports/:jobId/cancel`, () => {
+    if (shouldApplyEndpointStatus("computers/exports/:jobId/cancel")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.delete(`${API_URL}computers/exports/:jobId`, () => {
+    if (shouldApplyEndpointStatus("computers/exports/:jobId")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    return new HttpResponse(null, { status: 204 });
+  }),
+
+  http.get(`${API_URL}computers/exports/:jobId/download`, () => {
+    if (shouldApplyEndpointStatus("computers/exports/:jobId/download")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusNetworkError();
+      }
+    }
+    return new HttpResponse("col1\tcol2\nval1\tval2", {
+      headers: { "Content-Type": "text/tab-separated-values" },
+    });
+  }),
+
+  http.get(`${API_URL}computers/export/annotations`, () => {
+    if (shouldApplyEndpointStatus("computers/export/annotations")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    return HttpResponse.json({ results: [] });
+  }),
 ];
diff --git a/src/tests/server/handlers/instancesExport.ts b/src/tests/server/handlers/instancesExport.ts
deleted file mode 100644
index 3210504a30..0000000000
--- a/src/tests/server/handlers/instancesExport.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { API_URL } from "@/constants";
-import type { InstancesExportJob } from "../../../features/instances/types/InstancesExportJob";
-import { getEndpointStatus } from "@/tests/controllers/controller";
-import { http, HttpResponse } from "msw";
-import {
-  createEndpointStatusError,
-  createEndpointStatusNetworkError,
-} from "./_constants";
-import { shouldApplyEndpointStatus } from "./_helpers";
-
-const EXPORTS_LIST_PATH = "computers/exports";
-
-export default [
-  http.get(`${API_URL}${EXPORTS_LIST_PATH}`, () => {
-    if (shouldApplyEndpointStatus(EXPORTS_LIST_PATH)) {
-      const { status, response } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusNetworkError();
-      }
-      if (status === "empty") {
-        return HttpResponse.json({ count: 0, results: [] });
-      }
-      if (status === "variant" && Array.isArray(response)) {
-        const jobs = response as InstancesExportJob[];
-        return HttpResponse.json({ count: jobs.length, results: jobs });
-      }
-    }
-    return HttpResponse.json({ count: 0, results: [] });
-  }),
-
-  http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
-    if (shouldApplyEndpointStatus("computers/export/csv")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    const body = (await request.json()) as Record<string, unknown>;
-    const job: InstancesExportJob = {
-      id: "job-new",
-      name: typeof body.name === "string" ? body.name : "New export",
-      filename: "instances-export.tsv",
-      instanceCount: 0,
-      attributeLabels: [],
-      selectedFieldIds: Array.isArray(body.selected_field_ids)
-        ? (body.selected_field_ids as string[])
-        : [],
-      createdAt: new Date().toISOString(),
-      status: "processing",
-      progress: 0,
-      downloadReady: false,
-    };
-    return HttpResponse.json(job, { status: 201 });
-  }),
-
-  http.post(
-    `${API_URL}computers/exports/:jobId/cancel`,
-    ({ params }) => {
-      if (shouldApplyEndpointStatus("computers/exports/:jobId/cancel")) {
-        const { status } = getEndpointStatus();
-        if (status === "error") {
-          return createEndpointStatusError();
-        }
-      }
-      const job: Partial<InstancesExportJob> = {
-        id: params.jobId as string,
-        status: "canceled",
-      };
-      return HttpResponse.json(job);
-    },
-  ),
-
-  http.delete(`${API_URL}computers/exports/:jobId`, () => {
-    if (shouldApplyEndpointStatus("computers/exports/:jobId")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    return new HttpResponse(null, { status: 204 });
-  }),
-
-  http.get(`${API_URL}computers/exports/:jobId/download`, () => {
-    if (shouldApplyEndpointStatus("computers/exports/:jobId/download")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusNetworkError();
-      }
-    }
-    return new HttpResponse("col1\tcol2\nval1\tval2", {
-      headers: { "Content-Type": "text/tab-separated-values" },
-    });
-  }),
-
-  http.get(`${API_URL}computers/export/annotations`, () => {
-    if (shouldApplyEndpointStatus("computers/export/annotations")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    return HttpResponse.json({ results: [] });
-  }),
-];
diff --git a/src/utils/browserDownload.ts b/src/utils/browserDownload.ts
new file mode 100644
index 0000000000..44e56a2fbf
--- /dev/null
+++ b/src/utils/browserDownload.ts
@@ -0,0 +1,28 @@
+export interface SaveFilePickerHandle {
+  createWritable: () => Promise<{
+    write: (data: Blob) => Promise<void>;
+    close: () => Promise<void>;
+  }>;
+}
+
+export interface SaveFilePickerWindow {
+  showSaveFilePicker: (options?: {
+    suggestedName?: string;
+  }) => Promise<SaveFilePickerHandle>;
+}
+
+export const supportsNativeSave = (
+  candidate: typeof window,
+): candidate is typeof window & SaveFilePickerWindow =>
+  "showSaveFilePicker" in candidate;
+
+export const downloadBlob = (blob: Blob, filename: string): void => {
+  const objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = objectUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(objectUrl);
+};

From 1530d372e1726470aac16c077946ccf9e7817f65 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Wed, 17 Jun 2026 17:35:52 +0200
Subject: [PATCH 04/41] add UI fixes

---
 .../activities/api/useExportActivitiesCsv.ts  |   2 -
 .../ActivitiesExportForm.tsx                  |   2 -
 .../ExportDetailsSidePanel.tsx                |  67 +++++++-----
 .../ExportDetailsSidePanel/helpers.tsx        |  34 +-----
 .../components/ExportsList/ExportsList.tsx    |  44 ++++----
 src/features/exports/types/ExportJob.ts       |  16 ++-
 src/features/instances/api/index.ts           |   3 +-
 .../api/instancesExportJobsShared.ts          |   2 -
 .../api/useDownloadInstancesExportJob.ts      |  65 -----------
 ...stancesCsv.ts => useExportInstancesTsv.ts} |   8 +-
 .../InstancesExportForm.tsx                   |  12 +--
 .../components/InstancesExportForm/helpers.ts |  21 ----
 .../InstancesPageActions.test.tsx             |   8 --
 src/tests/mocks/exports.ts                    |  74 ++++++-------
 src/tests/server/handlers/activity.ts         |  78 ++------------
 src/tests/server/handlers/instance.ts         | 101 +++---------------
 16 files changed, 134 insertions(+), 403 deletions(-)
 delete mode 100644 src/features/instances/api/useDownloadInstancesExportJob.ts
 rename src/features/instances/api/{useExportInstancesCsv.ts => useExportInstancesTsv.ts} (79%)

diff --git a/src/features/activities/api/useExportActivitiesCsv.ts b/src/features/activities/api/useExportActivitiesCsv.ts
index 24e709eac4..c5fcea8038 100644
--- a/src/features/activities/api/useExportActivitiesCsv.ts
+++ b/src/features/activities/api/useExportActivitiesCsv.ts
@@ -10,8 +10,6 @@ interface CreateActivitiesExportJobParams {
   readonly selected_activity_ids: number[];
   readonly selected_field_ids: string[];
   readonly retain_until: string;
-  readonly display_query: string;
-  readonly has_selection: boolean;
 }
 
 export const useExportActivitiesCsv = () => {
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
index 62722e59ff..eaa95fd4ec 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
@@ -88,8 +88,6 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
           selected_activity_ids: selectedActivityIds ?? [],
           selected_field_ids: fieldsToExport.map((field) => field.id),
           retain_until: moment(values.retainUntil).toISOString(),
-          display_query: exportParams.query ?? "",
-          has_selection: !!selectedActivityIds?.length,
         });
         const job = response.data;
 
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index ae5b45112d..2ad0cb2e02 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -12,6 +12,7 @@ import {
 } from "@canonical/react-components";
 import moment from "moment";
 import { useState, type FC } from "react";
+import useDebug from "@/hooks/useDebug";
 import ExportProgressBar from "../ExportProgressBar";
 import { getStatusLabel, getTypeLabel } from "../../api/exportJobsShared";
 import { useCancelExportJob } from "../../api/useCancelExportJob";
@@ -19,11 +20,11 @@ import { useDiscardExportJob } from "../../api/useDiscardExportJob";
 import { useDownloadExportJob } from "../../api/useDownloadExportJob";
 import { useGetExportJob } from "../../api/useGetExportJob";
 import { getFilterValue } from "./helpers";
-import NoData from "@/components/layout/NoData";
 
 const ExportDetailsSidePanel: FC = () => {
   const { name: jobId, popSidePathUntilClear } = usePageParams();
   const { notify } = useNotify();
+  const debug = useDebug();
 
   const { exportJob: job } = useGetExportJob(jobId ?? "");
   const { cancelExportJob: onCancel } = useCancelExportJob();
@@ -37,12 +38,16 @@ const ExportDetailsSidePanel: FC = () => {
       return;
     }
 
-    const result = await onDownload(job);
-    if (result) {
-      notify.success({
-        title: "TSV download started",
-        message: `${job.name} has been downloaded and removed from the export list.`,
-      });
+    try {
+      const result = await onDownload(job);
+      if (result) {
+        notify.success({
+          title: "TSV download started",
+          message: `${job.name} has been downloaded and removed from the export list.`,
+        });
+      }
+    } catch (error) {
+      debug(error);
     }
   }
 
@@ -51,11 +56,15 @@ const ExportDetailsSidePanel: FC = () => {
       return;
     }
 
-    await onCancel(job.id);
-    notify.success({
-      title: "TSV generation cancelled",
-      message: `${job.name} has been cancelled.`,
-    });
+    try {
+      await onCancel(job.id);
+      notify.success({
+        title: "TSV generation cancelled",
+        message: `${job.name} has been cancelled.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
   }
 
   function handleOpenDiscard() {
@@ -71,13 +80,17 @@ const ExportDetailsSidePanel: FC = () => {
       return;
     }
 
-    await onDiscard(job.id);
-    setConfirmDiscard(false);
-    popSidePathUntilClear();
-    notify.success({
-      title: "TSV discarded",
-      message: `${job.name} has been discarded.`,
-    });
+    try {
+      await onDiscard(job.id);
+      setConfirmDiscard(false);
+      popSidePathUntilClear();
+      notify.success({
+        title: "TSV discarded",
+        message: `${job.name} has been discarded.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
   }
 
   if (!job) {
@@ -137,7 +150,7 @@ const ExportDetailsSidePanel: FC = () => {
                   job.status === "processing" ? (
                     <ExportProgressBar
                       progress={job.progress}
-                      secondsRemaining={job.estimatedSecondsRemaining ?? null}
+                      secondsRemaining={job.estimated_seconds_remaining ?? null}
                       fullWidth
                     />
                   ) : (
@@ -148,21 +161,17 @@ const ExportDetailsSidePanel: FC = () => {
               />
               <InfoGrid.Item
                 label={countLabel}
-                value={job.rowCount.toLocaleString()}
+                value={job.row_count.toLocaleString()}
               />
               <InfoGrid.Item
                 label="Created"
-                value={moment(job.createdAt).format(DISPLAY_DATE_TIME_FORMAT)}
+                value={moment(job.created_at).format(DISPLAY_DATE_TIME_FORMAT)}
               />
               <InfoGrid.Item
                 label="Expires"
-                value={
-                  job.retainUntil ? (
-                    moment(job.retainUntil).format(DISPLAY_DATE_TIME_FORMAT)
-                  ) : (
-                    <NoData />
-                  )
-                }
+                value={moment(job.retain_until).format(
+                  DISPLAY_DATE_TIME_FORMAT,
+                )}
               />
               <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
             </InfoGrid>
diff --git a/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx b/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
index 8924b97206..8f3ce5f6bd 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/helpers.tsx
@@ -2,38 +2,12 @@ import { CodeSnippet } from "@canonical/react-components";
 import type { ReactNode } from "react";
 import type { ExportJob } from "../../types/ExportJob";
 
-const ID_ONLY_QUERY_RE = /^id:\d+(\s+OR\s+id:\d+)*$/;
-
 export const getFilterValue = (job: ExportJob): ReactNode => {
-  const filter = job.displayQuery?.trim() || "";
-  const hasSelection = job.hasSelection ?? false;
-
-  let legacyFilter = "";
-  if (!filter && job.query) {
-    legacyFilter = ID_ONLY_QUERY_RE.test(job.query.trim())
-      ? ""
-      : job.query.trim();
-  }
-
-  const effectiveFilter = filter || legacyFilter;
-  const effectiveSelection =
-    hasSelection ||
-    (!filter && !!job.query && ID_ONLY_QUERY_RE.test(job.query.trim()));
-
-  if (!effectiveFilter && !effectiveSelection) return null;
-
-  if (effectiveSelection && !effectiveFilter) return "Custom selection";
+  const filter = job.query?.trim();
 
-  if (effectiveFilter && !effectiveSelection) {
-    return (
-      <CodeSnippet blocks={[{ code: effectiveFilter, wrapLines: true }]} />
-    );
+  if (!filter) {
+    return null;
   }
 
-  return (
-    <>
-      <div>Custom selection</div>
-      <CodeSnippet blocks={[{ code: effectiveFilter, wrapLines: true }]} />
-    </>
-  );
+  return <CodeSnippet blocks={[{ code: filter, wrapLines: true }]} />;
 };
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index ab477e4db3..f003cf40f9 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -36,12 +36,16 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
   const [jobToDiscard, setJobToDiscard] = useState<ExportJob | null>(null);
 
   async function handleDownload(job: ExportJob) {
-    const result = await onDownload(job);
-    if (result) {
-      notify.success({
-        title: "TSV download started",
-        message: `${job.name} has been downloaded and removed from the export list.`,
-      });
+    try {
+      const result = await onDownload(job);
+      if (result) {
+        notify.success({
+          title: "TSV download started",
+          message: `${job.name} has been downloaded and removed from the export list.`,
+        });
+      }
+    } catch (error) {
+      debug(error);
     }
   }
 
@@ -69,12 +73,16 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
   async function handleConfirmDiscard() {
     if (!jobToDiscard) return;
 
-    await onDiscard(jobToDiscard.id);
-    setJobToDiscard(null);
-    notify.success({
-      title: "TSV discarded",
-      message: `${jobToDiscard.name} has been discarded.`,
-    });
+    try {
+      await onDiscard(jobToDiscard.id);
+      setJobToDiscard(null);
+      notify.success({
+        title: "TSV discarded",
+        message: `${jobToDiscard.name} has been discarded.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
   }
 
   const columns = useMemo<Column<ExportRowData>[]>(
@@ -115,7 +123,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
             return (
               <ExportProgressBar
                 progress={job.progress}
-                secondsRemaining={job.estimatedSecondsRemaining ?? null}
+                secondsRemaining={job.estimated_seconds_remaining ?? null}
               />
             );
           }
@@ -133,7 +141,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         id: "createdAt",
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <>
-            {moment(row.original.job.createdAt).format(
+            {moment(row.original.job.created_at).format(
               DISPLAY_DATE_TIME_FORMAT,
             )}
           </>
@@ -145,11 +153,9 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         id: "retainUntil",
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <>
-            {row.original.job.retainUntil
-              ? moment(row.original.job.retainUntil).format(
-                  DISPLAY_DATE_TIME_FORMAT,
-                )
-              : "—"}
+            {moment(row.original.job.retain_until).format(
+              DISPLAY_DATE_TIME_FORMAT,
+            )}
           </>
         ),
       },
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
index 13c11c0e9c..27e606a05e 100644
--- a/src/features/exports/types/ExportJob.ts
+++ b/src/features/exports/types/ExportJob.ts
@@ -7,17 +7,13 @@ export interface ExportJob {
   readonly name: string;
   readonly filename: string;
   readonly type: ExportJobType;
-  readonly rowCount: number;
-  readonly attributeLabels: string[];
-  readonly selectedFieldIds: string[];
-  readonly createdAt: string;
+  readonly row_count: number;
+  readonly attribute_labels: string[];
+  readonly created_at: string;
   readonly status: ExportJobStatus;
   readonly progress: number;
-  readonly estimatedSecondsRemaining?: number | null;
-  readonly errorMessage?: string | null;
-  readonly downloadReady?: boolean;
-  readonly retainUntil?: string | null;
+  readonly estimated_seconds_remaining?: number | null;
+  readonly download_ready: boolean;
+  readonly retain_until: string;
   readonly query?: string | null;
-  readonly displayQuery?: string | null;
-  readonly hasSelection?: boolean;
 }
diff --git a/src/features/instances/api/index.ts b/src/features/instances/api/index.ts
index c836496636..c03985b4ed 100644
--- a/src/features/instances/api/index.ts
+++ b/src/features/instances/api/index.ts
@@ -2,8 +2,7 @@ export * from "./useAcceptPendingInstances";
 export * from "./useAddTagsToInstances";
 export * from "./useCreateDistributionUpgrades";
 export * from "./useEditInstance";
-export * from "./useDownloadInstancesExportJob";
-export * from "./useExportInstancesCsv";
+export * from "./useExportInstancesTsv";
 export * from "./useGenerateRecoveryKey";
 export * from "./useGetAvailabilityZones";
 export * from "./useGetRecoveryKey";
diff --git a/src/features/instances/api/instancesExportJobsShared.ts b/src/features/instances/api/instancesExportJobsShared.ts
index 3901d5f999..486a41a740 100644
--- a/src/features/instances/api/instancesExportJobsShared.ts
+++ b/src/features/instances/api/instancesExportJobsShared.ts
@@ -5,8 +5,6 @@ export interface CreateInstancesExportJobParams extends InstanceListParams {
   readonly name: string;
   readonly selected_field_ids: string[];
   readonly retain_until: string;
-  readonly display_query: string;
-  readonly has_selection: boolean;
 }
 
 export interface InstancesExportJobsResponse {
diff --git a/src/features/instances/api/useDownloadInstancesExportJob.ts b/src/features/instances/api/useDownloadInstancesExportJob.ts
deleted file mode 100644
index 6271536ad4..0000000000
--- a/src/features/instances/api/useDownloadInstancesExportJob.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import useFetch from "@/hooks/useFetch";
-import {
-  downloadBlob,
-  supportsNativeSave,
-  type SaveFilePickerHandle,
-} from "@/utils/browserDownload";
-import type { InstancesExportJob } from "../types/InstancesExportJob";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
-const DEFAULT_EXPORT_FILENAME = "instances-export.tsv";
-
-export const useDownloadInstancesExportJob = () => {
-  const authFetch = useFetch();
-  const queryClient = useQueryClient();
-
-  const { mutateAsync } = useMutation<
-    InstancesExportJob | null,
-    Error,
-    InstancesExportJob
-  >({
-    mutationFn: async (job) => {
-      const filename = job.filename || DEFAULT_EXPORT_FILENAME;
-
-      if (supportsNativeSave(window)) {
-        let handle: SaveFilePickerHandle;
-        try {
-          handle = await window.showSaveFilePicker({ suggestedName: filename });
-        } catch (error) {
-          if (error instanceof Error && error.name === "AbortError") {
-            return null;
-          }
-          throw error;
-        }
-
-        const response = await authFetch.get<Blob>(
-          `computers/exports/${job.id}/download`,
-          { responseType: "blob" },
-        );
-        const writable = await handle.createWritable();
-        await writable.write(response.data);
-        await writable.close();
-        return job;
-      }
-
-      const response = await authFetch.get<Blob>(
-        `computers/exports/${job.id}/download`,
-        { responseType: "blob" },
-      );
-      downloadBlob(response.data, filename);
-      return job;
-    },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ["instances-export-jobs"],
-      });
-      await queryClient.invalidateQueries({
-        queryKey: ["instances-export-jobs-list"],
-      });
-    },
-  });
-
-  return {
-    downloadInstancesExportJob: mutateAsync,
-  };
-};
diff --git a/src/features/instances/api/useExportInstancesCsv.ts b/src/features/instances/api/useExportInstancesTsv.ts
similarity index 79%
rename from src/features/instances/api/useExportInstancesCsv.ts
rename to src/features/instances/api/useExportInstancesTsv.ts
index 792eb36e0a..f900d162f6 100644
--- a/src/features/instances/api/useExportInstancesCsv.ts
+++ b/src/features/instances/api/useExportInstancesTsv.ts
@@ -5,7 +5,7 @@ import type { AxiosError, AxiosResponse } from "axios";
 import type { InstancesExportJob } from "../types/InstancesExportJob";
 import type { CreateInstancesExportJobParams } from "./instancesExportJobsShared";
 
-export const useExportInstancesCsv = () => {
+export const useExportInstancesTsv = () => {
   const authFetch = useFetch();
   const queryClient = useQueryClient();
 
@@ -15,7 +15,7 @@ export const useExportInstancesCsv = () => {
     CreateInstancesExportJobParams
   >({
     mutationFn: async (params) =>
-      authFetch.post<InstancesExportJob>("computers/export/csv", params),
+      authFetch.post<InstancesExportJob>("computers/exports", params),
     onSuccess: async () => {
       await queryClient.invalidateQueries({
         queryKey: ["instances-export-jobs"],
@@ -24,7 +24,7 @@ export const useExportInstancesCsv = () => {
   });
 
   return {
-    exportInstancesCsv: mutateAsync,
-    isExportInstancesCsvLoading: isPending,
+    exportInstancesTsv: mutateAsync,
+    isExportInstancesTsvLoading: isPending,
   };
 };
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index 7c39fc3155..abcc929995 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -15,7 +15,7 @@ import { useFormik } from "formik";
 import moment from "moment";
 import { useCallback, useMemo, useState, type FC } from "react";
 import { useNavigate } from "react-router";
-import { useExportInstancesCsv } from "../../api/useExportInstancesCsv";
+import { useExportInstancesTsv } from "../../api/useExportInstancesTsv";
 import type { InstanceListParams } from "../../helpers";
 import classes from "./InstancesExportForm.module.scss";
 import {
@@ -49,8 +49,8 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
   const { notify } = useNotify();
   const navigate = useNavigate();
   const debug = useDebug();
-  const { exportInstancesCsv, isExportInstancesCsvLoading } =
-    useExportInstancesCsv();
+  const { exportInstancesTsv, isExportInstancesTsvLoading } =
+    useExportInstancesTsv();
   const [step, setStep] = useState<StepIndex>(0);
   const [attributeSearch, setAttributeSearch] = useState("");
   const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
@@ -82,7 +82,7 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
       });
 
       try {
-        const response = await exportInstancesCsv({
+        const response = await exportInstancesTsv({
           name: values.name.trim(),
           query,
           archived_only: exportParams.archived_only,
@@ -90,8 +90,6 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
           wsl_parents: exportParams.wsl_parents,
           selected_field_ids: fieldsToExport.map((field) => field.id),
           retain_until: moment(values.retainUntil).toISOString(),
-          display_query: exportParams.query ?? "",
-          has_selection: !!selectedInstanceIds?.length,
         });
         const job = response.data;
 
@@ -282,7 +280,7 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
           (step === 0 &&
             (!formik.values.name.trim() ||
               formik.values.selectedFieldIds.length === 0)) ||
-          isExportInstancesCsvLoading ||
+          isExportInstancesTsvLoading ||
           formik.isSubmitting
         }
         submitButtonText={step === 0 ? "Next" : "Generate TSV"}
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
index 91510a2775..5b314c55f2 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -133,27 +133,6 @@ export const DEFAULT_EXPORT_FIELD_IDS = BUILTIN_EXPORT_FIELDS.filter(
   ({ defaultSelected }) => defaultSelected,
 ).map(({ id }) => id);
 
-export const getAnnotationFieldOptions = (
-  instances: Instance[],
-): AnnotationFieldOption[] => {
-  const annotationKeys = new Set<string>();
-
-  instances.forEach((instance) => {
-    Object.keys(instance.annotations ?? {}).forEach((annotationKey) => {
-      annotationKeys.add(annotationKey);
-    });
-  });
-
-  return [...annotationKeys]
-    .sort((left, right) => left.localeCompare(right))
-    .map((annotationKey) => ({
-      id: `annotation:${annotationKey}`,
-      label: `Annotation: ${annotationKey}`,
-      annotationKey,
-      getValue: (instance) => instance.annotations?.[annotationKey] ?? "",
-    }));
-};
-
 export const getSelectedExportFields = ({
   annotationFieldOptions,
   selectedFieldIds,
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index b807197932..478e546255 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -1,4 +1,3 @@
-import { API_URL } from "@/constants";
 import * as Constants from "@/constants";
 import { resetScreenSize, setScreenSize } from "@/tests/helpers";
 import {
@@ -7,10 +6,8 @@ import {
   windowsInstance,
 } from "@/tests/mocks/instance";
 import { renderWithProviders } from "@/tests/render";
-import server from "@/tests/server";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
 import type { ComponentProps } from "react";
 import { beforeEach } from "vitest";
 import InstancesPageActions from "./InstancesPageActions";
@@ -64,11 +61,6 @@ describe("InstancesPageActions", () => {
     vi.spyOn(Constants, "REPORT_VIEW_ENABLED", "get").mockReturnValue(true);
     setScreenSize("xxl");
     setEndpointStatus("default");
-    server.use(
-      http.get(`${API_URL}computers/export/annotations`, () => {
-        return HttpResponse.json({ results: [] });
-      }),
-    );
   });
 
   afterEach(() => {
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 8b6a037352..7222ca4bb6 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -4,102 +4,88 @@ export const processingExportJob: ExportJob = {
   id: "job-processing",
   name: "Instances export 2026-06-03 14:10:00",
   filename: "instances-export-1.tsv",
-  rowCount: 120,
+  row_count: 120,
   type: "instance",
-  attributeLabels: ["Instance name", "Hostname", "Status"],
-  selectedFieldIds: ["title", "hostname", "status"],
-  createdAt: "2026-06-03T12:10:00.000Z",
+  attribute_labels: ["Instance name", "Hostname", "Status"],
+  created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 35,
-  downloadReady: false,
+  download_ready: false,
+  retain_until: "2029-06-03T12:10:00.000Z",
   query: "tag:production",
-  displayQuery: "tag:production",
-  hasSelection: false,
 };
 
 export const completedExportJob: ExportJob = {
   id: "job-completed",
   name: "Instances export 2026-06-03 14:08:00",
   filename: "instances-export-2.tsv",
-  rowCount: 42,
+  row_count: 42,
   type: "instance",
-  attributeLabels: ["Instance name", "Access group"],
-  selectedFieldIds: ["title", "access_group"],
-  createdAt: "2026-06-03T12:08:00.000Z",
+  attribute_labels: ["Instance name", "Access group"],
+  created_at: "2026-06-03T12:08:00.000Z",
   status: "completed",
   progress: 100,
-  downloadReady: true,
+  download_ready: true,
+  retain_until: "2029-06-03T12:08:00.000Z",
   query: "id:1 OR id:2",
-  displayQuery: "name:prod",
-  hasSelection: true,
 };
 
 export const failedExportJob: ExportJob = {
   id: "job-failed",
   name: "Instances export 2026-06-03 14:06:00",
   filename: "instances-export-3.tsv",
-  rowCount: 12,
+  row_count: 12,
   type: "instance",
-  attributeLabels: ["Hostname"],
-  selectedFieldIds: ["hostname"],
-  createdAt: "2026-06-03T12:06:00.000Z",
+  attribute_labels: ["Hostname"],
+  created_at: "2026-06-03T12:06:00.000Z",
   status: "failed",
   progress: 100,
-  errorMessage: "",
-  downloadReady: false,
+  download_ready: false,
+  retain_until: "2029-06-03T12:06:00.000Z",
   query: null,
-  displayQuery: null,
-  hasSelection: false,
 };
 
 export const processingActivitiesExportJob: ExportJob = {
   id: "act-job-processing",
   name: "Activities export 2026-06-03 14:10:00",
   filename: "activities-export-1.tsv",
-  rowCount: 50,
+  row_count: 50,
   type: "activity",
-  attributeLabels: ["ID", "Type", "Summary", "Status"],
-  selectedFieldIds: ["id", "type", "summary", "status"],
-  createdAt: "2026-06-03T12:10:00.000Z",
+  attribute_labels: ["ID", "Type", "Summary", "Status"],
+  created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 30,
-  downloadReady: false,
+  download_ready: false,
+  retain_until: "2029-06-03T12:10:00.000Z",
   query: "status:succeeded",
-  displayQuery: "status:succeeded",
-  hasSelection: false,
 };
 
 export const completedActivitiesExportJob: ExportJob = {
   id: "act-job-completed",
   name: "Activities export 2026-06-03 14:08:00",
   filename: "activities-export-2.tsv",
-  rowCount: 20,
+  row_count: 20,
   type: "activity",
-  attributeLabels: ["ID", "Type", "Creator"],
-  selectedFieldIds: ["id", "type", "creator"],
-  createdAt: "2026-06-03T12:08:00.000Z",
+  attribute_labels: ["ID", "Type", "Creator"],
+  created_at: "2026-06-03T12:08:00.000Z",
   status: "completed",
   progress: 100,
-  downloadReady: true,
+  download_ready: true,
+  retain_until: "2029-06-03T12:08:00.000Z",
   query: null,
-  displayQuery: null,
-  hasSelection: false,
 };
 
 export const failedActivitiesExportJob: ExportJob = {
   id: "act-job-failed",
   name: "Activities export 2026-06-03 14:06:00",
   filename: "activities-export-3.tsv",
-  rowCount: 0,
+  row_count: 0,
   type: "activity",
-  attributeLabels: ["ID"],
-  selectedFieldIds: ["id"],
-  createdAt: "2026-06-03T12:06:00.000Z",
+  attribute_labels: ["ID"],
+  created_at: "2026-06-03T12:06:00.000Z",
   status: "failed",
   progress: 100,
-  errorMessage: "Export failed",
-  downloadReady: false,
+  download_ready: false,
+  retain_until: "2029-06-03T12:06:00.000Z",
   query: null,
-  displayQuery: null,
-  hasSelection: false,
 };
diff --git a/src/tests/server/handlers/activity.ts b/src/tests/server/handlers/activity.ts
index 8ce34cda26..7e30a8a855 100644
--- a/src/tests/server/handlers/activity.ts
+++ b/src/tests/server/handlers/activity.ts
@@ -9,6 +9,7 @@ import {
   manyDeliveredActivities,
   manyUnapprovedActivities,
 } from "@/tests/mocks/activity";
+import moment from "moment";
 import { http, HttpResponse } from "msw";
 import {
   createEndpointStatusError,
@@ -230,81 +231,20 @@ export default [
       id: "act-job-new",
       name: typeof body.name === "string" ? body.name : "New activities export",
       filename: "activities-export.tsv",
-      rowCount: 0,
+      row_count: 0,
       type: "activity",
-      attributeLabels: [],
-      selectedFieldIds: Array.isArray(body.selected_field_ids)
-        ? (body.selected_field_ids as string[])
-        : [],
-      createdAt: new Date().toISOString(),
+      attribute_labels: [],
+      created_at: new Date().toISOString(),
       status: "processing",
       progress: 0,
-      downloadReady: false,
+      download_ready: false,
+      retain_until:
+        typeof body.retain_until === "string"
+          ? body.retain_until
+          : moment().add(3, "years").toISOString(),
       query: typeof body.query === "string" ? body.query : null,
-      displayQuery:
-        typeof body.display_query === "string"
-          ? body.display_query || null
-          : null,
-      hasSelection: body.has_selection === true,
     };
     return HttpResponse.json(job, { status: 201 });
   }),
 
-  http.get(`${API_URL}activities/exports`, ({ request }) => {
-    if (shouldApplyEndpointStatus("activities/exports")) {
-      const { status, response } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusNetworkError();
-      }
-      if (status === "empty") {
-        return HttpResponse.json({ count: 0, results: [] });
-      }
-      if (status === "variant" && Array.isArray(response)) {
-        const jobs = response as ExportJob[];
-        const url = new URL(request.url);
-        const search = url.searchParams.get("search") ?? "";
-        const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
-        const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
-        const filtered = search
-          ? jobs.filter((job) =>
-              job.name.toLowerCase().includes(search.toLowerCase()),
-            )
-          : jobs;
-        return HttpResponse.json({
-          count: filtered.length,
-          results: filtered.slice(offset, offset + limit),
-        });
-      }
-    }
-    return HttpResponse.json({ count: 0, results: [] });
-  }),
-
-  http.post(`${API_URL}activities/exports/:jobId/cancel`, () => {
-    if (shouldApplyEndpointStatus("activities/exports/:jobId/cancel")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusError();
-    }
-    return new HttpResponse(null, { status: 204 });
-  }),
-
-  http.delete(`${API_URL}activities/exports/:jobId`, () => {
-    if (shouldApplyEndpointStatus("activities/exports/:jobId")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusError();
-    }
-    return new HttpResponse(null, { status: 204 });
-  }),
-
-  http.get(`${API_URL}activities/exports/:jobId/download`, () => {
-    if (shouldApplyEndpointStatus("activities/exports/:jobId/download")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusNetworkError();
-    }
-    return new HttpResponse(
-      "id\ttype\nsummary\nstatus\n1\tscript\ntest\nsucceeded",
-      {
-        headers: { "Content-Type": "text/tab-separated-values" },
-      },
-    );
-  }),
 ];
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index e6acb24254..239659f4c3 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -32,16 +32,14 @@ import type {
   PendingInstance,
 } from "@/types/Instance";
 import type { GroupsResponse, Group } from "@/types/User";
+import moment from "moment";
 import { delay, http, HttpResponse } from "msw";
 import {
   generatePaginatedResponse,
   isAction,
   shouldApplyEndpointStatus,
 } from "./_helpers";
-import {
-  createEndpointStatusError,
-  createEndpointStatusNetworkError,
-} from "./_constants";
+import { createEndpointStatusError } from "./_constants";
 
 function isUpgradeAlert(alert: InstanceAlert) {
   return ["PackageUpgradesAlert", "SecurityUpgradesAlert"].includes(alert.type);
@@ -655,8 +653,8 @@ export default [
     return HttpResponse.json();
   }),
 
-  http.post(`${API_URL}computers/export/csv`, async ({ request }) => {
-    if (shouldApplyEndpointStatus("computers/export/csv")) {
+  http.post(`${API_URL}computers/exports`, async ({ request }) => {
+    if (shouldApplyEndpointStatus("computers/exports")) {
       const { status } = getEndpointStatus();
       if (status === "error") {
         return createEndpointStatusError();
@@ -667,94 +665,19 @@ export default [
       id: "job-new",
       name: typeof body.name === "string" ? body.name : "New export",
       filename: "instances-export.tsv",
-      rowCount: 0,
+      row_count: 0,
       type: "instance",
-      attributeLabels: [],
-      selectedFieldIds: Array.isArray(body.selected_field_ids)
-        ? (body.selected_field_ids as string[])
-        : [],
-      createdAt: new Date().toISOString(),
+      attribute_labels: [],
+      created_at: new Date().toISOString(),
       status: "processing",
       progress: 0,
-      downloadReady: false,
+      download_ready: false,
+      retain_until:
+        typeof body.retain_until === "string"
+          ? body.retain_until
+          : moment().add(3, "years").toISOString(),
       query: typeof body.query === "string" ? body.query : null,
-      displayQuery:
-        typeof body.display_query === "string"
-          ? body.display_query || null
-          : null,
-      hasSelection: body.has_selection === true,
     };
     return HttpResponse.json(job, { status: 201 });
   }),
-
-  http.get(`${API_URL}computers/exports`, ({ request }) => {
-    if (shouldApplyEndpointStatus("computers/exports")) {
-      const { status, response } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusNetworkError();
-      }
-      if (status === "empty") {
-        return HttpResponse.json({ count: 0, results: [] });
-      }
-      if (status === "variant" && Array.isArray(response)) {
-        const jobs = response as ExportJob[];
-        const url = new URL(request.url);
-        const search = url.searchParams.get("search") ?? "";
-        const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
-        const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
-        const filtered = search
-          ? jobs.filter((job) =>
-              job.name.toLowerCase().includes(search.toLowerCase()),
-            )
-          : jobs;
-        return HttpResponse.json({
-          count: filtered.length,
-          results: filtered.slice(offset, offset + limit),
-        });
-      }
-    }
-    return HttpResponse.json({ count: 0, results: [] });
-  }),
-
-  http.post(`${API_URL}computers/exports/:jobId/cancel`, () => {
-    if (shouldApplyEndpointStatus("computers/exports/:jobId/cancel")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    return new HttpResponse(null, { status: 204 });
-  }),
-
-  http.delete(`${API_URL}computers/exports/:jobId`, () => {
-    if (shouldApplyEndpointStatus("computers/exports/:jobId")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    return new HttpResponse(null, { status: 204 });
-  }),
-
-  http.get(`${API_URL}computers/exports/:jobId/download`, () => {
-    if (shouldApplyEndpointStatus("computers/exports/:jobId/download")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusNetworkError();
-      }
-    }
-    return new HttpResponse("col1\tcol2\nval1\tval2", {
-      headers: { "Content-Type": "text/tab-separated-values" },
-    });
-  }),
-
-  http.get(`${API_URL}computers/export/annotations`, () => {
-    if (shouldApplyEndpointStatus("computers/export/annotations")) {
-      const { status } = getEndpointStatus();
-      if (status === "error") {
-        return createEndpointStatusError();
-      }
-    }
-    return HttpResponse.json({ results: [] });
-  }),
 ];

From bc57fc2cea28227a5d80a4e0bc6bfa5b1c40ed8f Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 18 Jun 2026 15:07:13 +0200
Subject: [PATCH 05/41] improve tests

---
 .../ActivitiesExportForm.test.tsx             |  10 +-
 .../ActivitiesExportForm/constants.ts         |  26 ++-
 .../exports/api/useGetAllExportJobsList.ts    |  43 +++--
 .../ExportDetailsSidePanel.test.tsx           | 159 ++++++++++++++++
 .../ExportDetailsSidePanel.tsx                |  98 +++++-----
 .../ExportDetailsSidePanel/helpers.test.tsx   |  22 +++
 .../ExportProgressBar.test.tsx                |  33 ++++
 .../ExportProgressBar/helpers.test.ts         |  39 ++++
 .../components/ExportProgressBar/index.ts     |   2 -
 .../ExportsContainer.test.tsx                 |  59 ++++++
 .../ExportsList/ExportsList.test.tsx          |  70 +++++++
 .../components/ExportsList/ExportsList.tsx    | 161 +++-------------
 .../components/ExportsList/helpers.test.ts    |  32 ++++
 .../exports/components/ExportsList/helpers.ts |  16 ++
 .../ExportsListActions.test.tsx               |  73 ++++++++
 .../ExportsListActions/ExportsListActions.tsx | 154 +++++++++++++++
 .../components/ExportsListActions/index.ts    |   1 +
 .../hooks/useSyncSortableFields.ts            |   2 +-
 src/features/exports/constants.ts             |   1 -
 src/features/exports/helpers.test.ts          |  54 ++++++
 .../{api/exportJobsShared.ts => helpers.ts}   |  19 +-
 src/features/exports/index.ts                 |   6 +-
 src/features/exports/types/ExportForm.ts      |  11 +-
 src/features/exports/types/ExportJob.ts       |  25 ++-
 .../api/instancesExportJobsShared.ts          |  28 ---
 .../instances/api/useExportInstancesTsv.ts    |   8 +-
 .../components/InstanceList/InstanceList.tsx  |   2 +-
 .../components/InstanceList/helpers.test.tsx  |  46 +----
 .../components/InstanceList/helpers.tsx       |  35 +---
 .../InstancesExportForm.test.tsx              | 137 ++++++++++----
 .../InstancesExportForm.tsx                   |  12 +-
 .../InstancesExportForm/constants.ts          |  18 +-
 .../components/InstancesExportForm/helpers.ts | 176 +++---------------
 .../components/InstancesExportForm/types.ts   |   6 +-
 .../InstancesPageActions.test.tsx             |  27 ---
 src/tests/mocks/exports.ts                    |   6 -
 src/tests/server/handlers/activity.ts         |   1 -
 src/tests/server/handlers/instance.ts         |   1 -
 38 files changed, 1001 insertions(+), 618 deletions(-)
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/helpers.test.tsx
 create mode 100644 src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx
 create mode 100644 src/features/exports/components/ExportProgressBar/helpers.test.ts
 create mode 100644 src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
 create mode 100644 src/features/exports/components/ExportsList/ExportsList.test.tsx
 create mode 100644 src/features/exports/components/ExportsList/helpers.test.ts
 create mode 100644 src/features/exports/components/ExportsList/helpers.ts
 create mode 100644 src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
 create mode 100644 src/features/exports/components/ExportsListActions/ExportsListActions.tsx
 create mode 100644 src/features/exports/components/ExportsListActions/index.ts
 create mode 100644 src/features/exports/helpers.test.ts
 rename src/features/exports/{api/exportJobsShared.ts => helpers.ts} (52%)
 delete mode 100644 src/features/instances/api/instancesExportJobsShared.ts

diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
index cdacc52370..fa4e27458e 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -46,10 +46,14 @@ describe("ActivitiesExportForm", () => {
     ).toBeInTheDocument();
   });
 
-  it("keeps Next disabled until an export name and at least one field are selected", async () => {
+  it("pre-selects the visible table columns and keeps Next disabled until a name is given", async () => {
     const user = userEvent.setup();
     renderWithProviders(<ActivitiesExportForm {...defaultProps} />);
 
+    await openAttributeGroup(user, /primary identity/i);
+    expect(screen.getByRole("checkbox", { name: "Summary" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Status" })).toBeChecked();
+
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).toHaveAttribute("aria-disabled", "true");
 
@@ -57,10 +61,6 @@ describe("ActivitiesExportForm", () => {
       screen.getByRole("textbox", { name: "Export name" }),
       "My activities export",
     );
-    expect(nextButton).toHaveAttribute("aria-disabled", "true");
-
-    await openAttributeGroup(user, /primary identity/i);
-    await user.click(screen.getByRole("checkbox", { name: "ID" }));
     expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
diff --git a/src/features/activities/components/ActivitiesExportForm/constants.ts b/src/features/activities/components/ActivitiesExportForm/constants.ts
index 80ffbb5ed7..dec795488e 100644
--- a/src/features/activities/components/ActivitiesExportForm/constants.ts
+++ b/src/features/activities/components/ActivitiesExportForm/constants.ts
@@ -3,9 +3,17 @@ import { INPUT_DATE_FORMAT } from "@/constants";
 import moment from "moment";
 import * as Yup from "yup";
 
+const VISIBLE_COLUMN_FIELD_IDS: string[] = [
+  "summary",
+  "status",
+  "computer_id",
+  "creation_time",
+  "creator",
+];
+
 export const INITIAL_VALUES: ActivitiesExportFormValues = {
   name: "",
-  selectedFieldIds: [],
+  selectedFieldIds: VISIBLE_COLUMN_FIELD_IDS,
   retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };
 
@@ -34,17 +42,17 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Primary Identity",
     key: "primary-identity",
     fields: [
-      { id: "id", label: "ID", defaultSelected: true },
-      { id: "type", label: "Type", defaultSelected: true },
-      { id: "summary", label: "Summary", defaultSelected: true },
-      { id: "status", label: "Status", defaultSelected: true },
+      { id: "id", label: "ID" },
+      { id: "type", label: "Type" },
+      { id: "summary", label: "Summary" },
+      { id: "status", label: "Status" },
     ],
   },
   {
     title: "Target & Progress",
     key: "target-progress",
     fields: [
-      { id: "computer_id", label: "Computer ID", defaultSelected: true },
+      { id: "computer_id", label: "Computer ID" },
       { id: "progress", label: "Progress" },
     ],
   },
@@ -60,8 +68,8 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Audit & Time",
     key: "audit-time",
     fields: [
-      { id: "creator", label: "Creator", defaultSelected: true },
-      { id: "creation_time", label: "Creation time", defaultSelected: true },
+      { id: "creator", label: "Creator" },
+      { id: "creation_time", label: "Creation time" },
       { id: "schedule_after_time", label: "Schedule after time" },
       { id: "schedule_before_time", label: "Schedule before time" },
       { id: "modification_time", label: "Modification time" },
@@ -77,4 +85,4 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "parent_id", label: "Parent ID" },
     ],
   },
-];
+];
\ No newline at end of file
diff --git a/src/features/exports/api/useGetAllExportJobsList.ts b/src/features/exports/api/useGetAllExportJobsList.ts
index 63dbd5c66b..34c528f868 100644
--- a/src/features/exports/api/useGetAllExportJobsList.ts
+++ b/src/features/exports/api/useGetAllExportJobsList.ts
@@ -4,12 +4,9 @@ import type { ApiError } from "@/types/api/ApiError";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 import { EXPORT_JOBS_POLL_INTERVAL_MS } from "../constants";
-import {
-  hasProcessingExportJobs,
-  type AllExportJobsResponse,
-} from "./exportJobsShared";
-
-const DEFAULT_EXPORT_JOBS_PAGE_SIZE = 50;
+import type { ExportJob } from "../types/ExportJob";
+import { hasProcessingExportJobs } from "../helpers";
+import type { ApiPaginatedResponse } from "@/types/api/ApiPaginatedResponse";
 
 interface GetAllExportJobsListParams {
   search?: string;
@@ -27,29 +24,31 @@ export const useGetAllExportJobsList = (
   { listenToUrlParams = true }: GetAllExportJobsListConfig = {},
 ) => {
   const authFetch = useFetch();
-  const {
-    currentPage,
-    pageSize,
-    search: urlSearch,
-    type: urlType,
-  } = usePageParams();
+  const { currentPage, pageSize, search, type } = usePageParams();
 
-  const {
-    search = listenToUrlParams ? urlSearch : "",
-    type = listenToUrlParams ? urlType : "",
-    limit = listenToUrlParams ? pageSize : DEFAULT_EXPORT_JOBS_PAGE_SIZE,
-    offset = listenToUrlParams ? (currentPage - 1) * pageSize : 0,
-  } = params;
+  const paramsWithPagination = {
+    ...(listenToUrlParams
+      ? {
+          limit: pageSize,
+          offset: (currentPage - 1) * pageSize,
+          search: search ?? undefined,
+          type: type ?? undefined,
+        }
+      : params),
+  };
 
   const {
     data: response,
     isLoading,
     dataUpdatedAt,
-  } = useQuery<AxiosResponse<AllExportJobsResponse>, AxiosError<ApiError>>({
-    queryKey: ["all-export-jobs", { search, type, limit, offset }],
+  } = useQuery<
+    AxiosResponse<ApiPaginatedResponse<ExportJob>>,
+    AxiosError<ApiError>
+  >({
+    queryKey: ["all-export-jobs", paramsWithPagination],
     queryFn: async () =>
-      authFetch.get<AllExportJobsResponse>("exports", {
-        params: { search, type: type || undefined, limit, offset },
+      authFetch.get<ApiPaginatedResponse<ExportJob>>("exports", {
+        params: paramsWithPagination,
       }),
     refetchInterval: (query) =>
       hasProcessingExportJobs(query.state.data?.data.results ?? [])
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
new file mode 100644
index 0000000000..c774ae259d
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
@@ -0,0 +1,159 @@
+import { renderWithProviders } from "@/tests/render";
+import { setEndpointStatus } from "@/tests/controllers/controller";
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expectLoadingState } from "@/tests/helpers";
+import { completedExportJob, processingExportJob } from "@/tests/mocks/exports";
+import ExportDetailsSidePanel from "./ExportDetailsSidePanel";
+
+const SIDE_PANEL_URL = "?sidePath=view&name=job-completed";
+const PROCESSING_URL = "?sidePath=view&name=job-processing";
+const LOADING_URL = "?sidePath=view&name=unknown";
+
+describe("ExportDetailsSidePanel", () => {
+  const user = userEvent.setup();
+
+  it("renders loading state while fetching", () => {
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      LOADING_URL,
+    );
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("renders the job name and details for a completed export", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: completedExportJob,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      SIDE_PANEL_URL,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      screen.getByRole("heading", { name: completedExportJob.name }),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("shows download and discard buttons for completed jobs", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: completedExportJob,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      SIDE_PANEL_URL,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      screen.getByRole("button", { name: /download/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /discard/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows cancel button for processing jobs", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: processingExportJob,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      PROCESSING_URL,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      screen.getByRole("button", { name: /cancel/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens cancel confirmation modal for processing jobs", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: processingExportJob,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      PROCESSING_URL,
+    );
+
+    await expectLoadingState();
+
+    await user.click(
+      screen.getByRole("button", { name: /cancel/i }),
+    );
+
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(
+      screen.getByText(/still being generated/i),
+    ).toBeInTheDocument();
+  });
+
+  it("shows discard confirmation modal", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: completedExportJob,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      SIDE_PANEL_URL,
+    );
+
+    await expectLoadingState();
+
+    await user.click(
+      screen.getByRole("button", { name: /discard/i }),
+    );
+
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText(/permanently deleted/i)).toBeInTheDocument();
+  });
+
+  it("shows the filter when the job has a query", async () => {
+    const jobWithQuery = { ...completedExportJob, query: "tag:production" };
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: jobWithQuery,
+    });
+
+    renderWithProviders(
+      <ExportDetailsSidePanel />,
+      undefined,
+      SIDE_PANEL_URL,
+    );
+
+    await expectLoadingState();
+
+    expect(screen.getByText("tag:production")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index 2ad0cb2e02..29425b48d6 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -6,15 +6,15 @@ import useNotify from "@/hooks/useNotify";
 import usePageParams from "@/hooks/usePageParams";
 import {
   Button,
-  ConfirmationModal,
+  ConfirmationButton,
   Icon,
   ICONS,
 } from "@canonical/react-components";
 import moment from "moment";
-import { useState, type FC } from "react";
+import { type FC } from "react";
 import useDebug from "@/hooks/useDebug";
 import ExportProgressBar from "../ExportProgressBar";
-import { getStatusLabel, getTypeLabel } from "../../api/exportJobsShared";
+import { getStatusLabel, getTypeLabel } from "../../helpers";
 import { useCancelExportJob } from "../../api/useCancelExportJob";
 import { useDiscardExportJob } from "../../api/useDiscardExportJob";
 import { useDownloadExportJob } from "../../api/useDownloadExportJob";
@@ -31,9 +31,7 @@ const ExportDetailsSidePanel: FC = () => {
   const { discardExportJob: onDiscard } = useDiscardExportJob();
   const { downloadExportJob: onDownload } = useDownloadExportJob();
 
-  const [confirmDiscard, setConfirmDiscard] = useState(false);
-
-  async function handleDownload() {
+  const handleDownload = async () => {
     if (!job) {
       return;
     }
@@ -49,9 +47,9 @@ const ExportDetailsSidePanel: FC = () => {
     } catch (error) {
       debug(error);
     }
-  }
+  };
 
-  async function handleCancel() {
+  const handleConfirmCancel = async () => {
     if (!job) {
       return;
     }
@@ -65,24 +63,15 @@ const ExportDetailsSidePanel: FC = () => {
     } catch (error) {
       debug(error);
     }
-  }
-
-  function handleOpenDiscard() {
-    setConfirmDiscard(true);
-  }
-
-  function handleCloseDiscard() {
-    setConfirmDiscard(false);
-  }
+  };
 
-  async function handleConfirmDiscard() {
+  const handleConfirmDiscard = async () => {
     if (!job) {
       return;
     }
 
     try {
       await onDiscard(job.id);
-      setConfirmDiscard(false);
       popSidePathUntilClear();
       notify.success({
         title: "TSV discarded",
@@ -91,7 +80,7 @@ const ExportDetailsSidePanel: FC = () => {
     } catch (error) {
       debug(error);
     }
-  }
+  };
 
   if (!job) {
     return <SidePanel.LoadingState />;
@@ -117,26 +106,60 @@ const ExportDetailsSidePanel: FC = () => {
               </Button>
             )}
             {job.status === "processing" && (
-              <Button
+              <ConfirmationButton
                 type="button"
-                hasIcon
-                className="p-segmented-control__button"
-                onClick={handleCancel}
+                className="p-button has-icon p-segmented-control__button"
+                confirmationModalProps={{
+                  title: `Cancel "${job.name}"?`,
+                  confirmButtonLabel: "Cancel",
+                  confirmButtonAppearance: "negative",
+                  onConfirm: handleConfirmCancel,
+                  children: (
+                    <>
+                      <p>
+                        The export &quot;{job.name}&quot; is still being
+                        generated.
+                      </p>
+                      <p>
+                        Cancelling it will stop the generation and discard any
+                        partial results.
+                      </p>
+                      <p>
+                        This action is <strong>irreversible</strong>.
+                      </p>
+                    </>
+                  ),
+                }}
               >
                 <Icon name="close--negative" />
                 <span className="u-text--negative">Cancel</span>
-              </Button>
+              </ConfirmationButton>
             )}
             {job.status !== "processing" && (
-              <Button
+              <ConfirmationButton
                 type="button"
-                hasIcon
-                className="p-segmented-control__button"
-                onClick={handleOpenDiscard}
+                className="p-button has-icon p-segmented-control__button"
+                confirmationModalProps={{
+                  title: `Discard "${job.name}"?`,
+                  confirmButtonLabel: "Discard",
+                  confirmButtonAppearance: "negative",
+                  onConfirm: handleConfirmDiscard,
+                  children: (
+                    <>
+                      <p>
+                        The export &quot;{job.name}&quot; will be permanently
+                        deleted.
+                      </p>
+                      <p>
+                        This action is <strong>irreversible</strong>.
+                      </p>
+                    </>
+                  ),
+                }}
               >
                 <Icon name={`${ICONS.delete}--negative`} />
                 <span className="u-text--negative">Discard</span>
-              </Button>
+              </ConfirmationButton>
             )}
           </div>
         </div>
@@ -178,21 +201,6 @@ const ExportDetailsSidePanel: FC = () => {
           </Blocks.Item>
         </Blocks>
       </SidePanel.Content>
-      {confirmDiscard && (
-        <ConfirmationModal
-          title={`Discard "${job.name}"?`}
-          confirmButtonLabel="Discard"
-          confirmButtonAppearance="negative"
-          close={handleCloseDiscard}
-          onConfirm={handleConfirmDiscard}
-          renderInPortal
-        >
-          <p>The export &quot;{job.name}&quot; will be permanently deleted.</p>
-          <p>
-            This action is <strong>irreversible</strong>.
-          </p>
-        </ConfirmationModal>
-      )}
     </>
   );
 };
diff --git a/src/features/exports/components/ExportDetailsSidePanel/helpers.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/helpers.test.tsx
new file mode 100644
index 0000000000..f2760c7356
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/helpers.test.tsx
@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { completedExportJob, failedExportJob } from "@/tests/mocks/exports";
+import { getFilterValue } from "./helpers";
+
+describe("getFilterValue", () => {
+  it("returns null when job has no query", () => {
+    expect(getFilterValue(failedExportJob)).toBeNull();
+  });
+
+  it("returns null when job has empty query", () => {
+    const job = { ...completedExportJob, query: "  " };
+    expect(getFilterValue(job)).toBeNull();
+  });
+
+  it("returns JSX with the query code", () => {
+    const result = getFilterValue(completedExportJob);
+    expect(result).not.toBeNull();
+    const { container } = render(<>{result}</>);
+    expect(container.textContent).toContain("id:1 OR id:2");
+  });
+});
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx b/src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx
new file mode 100644
index 0000000000..555a4fe1df
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import ExportProgressBar from "./ExportProgressBar";
+
+describe("ExportProgressBar", () => {
+  it("renders the progress percentage", () => {
+    render(<ExportProgressBar progress={50} secondsRemaining={null} />);
+    expect(screen.getByText("50%")).toBeInTheDocument();
+  });
+
+  it("renders the ETA label", () => {
+    render(<ExportProgressBar progress={50} secondsRemaining={120} />);
+    expect(screen.getByText("2m left")).toBeInTheDocument();
+  });
+
+  it("renders a progress bar with correct aria attributes", () => {
+    render(<ExportProgressBar progress={75} secondsRemaining={null} />);
+    const progressbar = screen.getByRole("progressbar");
+    expect(progressbar).toHaveAttribute("aria-valuenow", "75");
+    expect(progressbar).toHaveAttribute("aria-valuemin", "0");
+    expect(progressbar).toHaveAttribute("aria-valuemax", "100");
+  });
+
+  it("clamps progress to 0-100", () => {
+    render(<ExportProgressBar progress={150} secondsRemaining={null} />);
+    expect(screen.getByText("100%")).toBeInTheDocument();
+  });
+
+  it("rounds progress to nearest integer", () => {
+    render(<ExportProgressBar progress={33.7} secondsRemaining={null} />);
+    expect(screen.getByText("34%")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/exports/components/ExportProgressBar/helpers.test.ts b/src/features/exports/components/ExportProgressBar/helpers.test.ts
new file mode 100644
index 0000000000..b0d86c67a7
--- /dev/null
+++ b/src/features/exports/components/ExportProgressBar/helpers.test.ts
@@ -0,0 +1,39 @@
+/* eslint @typescript-eslint/no-magic-numbers: 0 */
+import { describe, it, expect } from "vitest";
+import { formatSecondsRemaining, getEtaLabel } from "./helpers";
+
+describe("formatSecondsRemaining", () => {
+  it('formats seconds as "Xs left" when under a minute', () => {
+    expect(formatSecondsRemaining(30)).toBe("30s left");
+  });
+
+  it("rounds to the nearest second", () => {
+    expect(formatSecondsRemaining(30.7)).toBe("31s left");
+  });
+
+  it("clamps to zero for negative values", () => {
+    expect(formatSecondsRemaining(-5)).toBe("0s left");
+  });
+
+  it('formats as "Xm left" for whole minutes', () => {
+    expect(formatSecondsRemaining(120)).toBe("2m left");
+  });
+
+  it('formats as "Xm Ys left" for minutes with remainder', () => {
+    expect(formatSecondsRemaining(150)).toBe("2m 30s left");
+  });
+});
+
+describe("getEtaLabel", () => {
+  it('returns "Estimating..." when secondsRemaining is null', () => {
+    expect(getEtaLabel(null)).toBe("Estimating...");
+  });
+
+  it('returns "Almost done" when within threshold', () => {
+    expect(getEtaLabel(3)).toBe("Almost done");
+  });
+
+  it("delegates to formatSecondsRemaining for larger values", () => {
+    expect(getEtaLabel(120)).toBe("2m left");
+  });
+});
diff --git a/src/features/exports/components/ExportProgressBar/index.ts b/src/features/exports/components/ExportProgressBar/index.ts
index 7f5104b8dd..d5f2ddaf0a 100644
--- a/src/features/exports/components/ExportProgressBar/index.ts
+++ b/src/features/exports/components/ExportProgressBar/index.ts
@@ -1,3 +1 @@
 export { default } from "./ExportProgressBar";
-export type { ExportProgressBarProps } from "./ExportProgressBar";
-export { formatSecondsRemaining } from "./helpers";
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
new file mode 100644
index 0000000000..843f329f32
--- /dev/null
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -0,0 +1,59 @@
+import { renderWithProviders } from "@/tests/render";
+import { setEndpointStatus } from "@/tests/controllers/controller";
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { expectLoadingState } from "@/tests/helpers";
+import {
+  completedExportJob,
+  processingExportJob,
+  failedExportJob,
+  completedActivitiesExportJob,
+} from "@/tests/mocks/exports";
+import ExportsContainer from "./ExportsContainer";
+
+const exportJobs = [
+  completedExportJob,
+  processingExportJob,
+  failedExportJob,
+  completedActivitiesExportJob,
+];
+
+describe("ExportsContainer", () => {
+  it("renders empty state when there are no exports", async () => {
+    renderWithProviders(<ExportsContainer />);
+
+    await expectLoadingState();
+
+    expect(screen.getByText("No exports found")).toBeInTheDocument();
+  });
+
+  it("renders the export list with data", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports",
+      response: exportJobs,
+    });
+
+    renderWithProviders(<ExportsContainer />);
+
+    await expectLoadingState();
+
+    expect(screen.getByText(completedExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText(processingExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText(completedActivitiesExportJob.name)).toBeInTheDocument();
+  });
+
+  it("renders the type filter", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports",
+      response: exportJobs,
+    });
+
+    renderWithProviders(<ExportsContainer />);
+
+    await expectLoadingState();
+
+    expect(screen.getByRole("button", { name: /type/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
new file mode 100644
index 0000000000..c266cc6f9c
--- /dev/null
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -0,0 +1,70 @@
+import { renderWithProviders } from "@/tests/render";
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import {
+  completedExportJob,
+  processingExportJob,
+  failedExportJob,
+} from "@/tests/mocks/exports";
+import ExportsList from "./ExportsList";
+
+const exportJobs = [completedExportJob, processingExportJob, failedExportJob];
+
+describe("ExportsList", () => {
+
+  it("renders all export jobs", () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    expect(screen.getByText(completedExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText(processingExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText(failedExportJob.name)).toBeInTheDocument();
+  });
+
+  it("renders the type labels", () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    const typeCells = screen.getAllByText("Instances");
+    expect(typeCells.length).toBe(3);
+  });
+
+  it("renders the status labels", () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+  });
+
+  it("renders a progress bar for processing jobs", () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    expect(screen.getByText("35%")).toBeInTheDocument();
+  });
+
+  it("renders sortable header columns", () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Type")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Created")).toBeInTheDocument();
+    expect(screen.getByText("Expires")).toBeInTheDocument();
+    expect(screen.getByText("Actions")).toBeInTheDocument();
+  });
+
+  it("shows empty message when no export jobs", () => {
+    renderWithProviders(<ExportsList exportJobs={[]} />);
+
+    expect(
+      screen.getByText("No exports found according to your search parameters."),
+    ).toBeInTheDocument();
+  });
+
+  it("renders actions menu for each job", async () => {
+    renderWithProviders(<ExportsList exportJobs={exportJobs} />);
+
+    const actionButtons = screen.getAllByRole("button", {
+      name: /actions for/i,
+    });
+    expect(actionButtons.length).toBe(3);
+  });
+});
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index f003cf40f9..9ca4e88378 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -1,89 +1,25 @@
 import { LIST_ACTIONS_COLUMN_PROPS } from "@/components/layout/ListActions";
-import ListActions from "@/components/layout/ListActions";
 import ResponsiveTable from "@/components/layout/ResponsiveTable";
 import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
-import useNotify from "@/hooks/useNotify";
 import usePageParams from "@/hooks/usePageParams";
-import { Button, ConfirmationModal } from "@canonical/react-components";
+import { Button } from "@canonical/react-components";
 import moment from "moment";
 import type { FC } from "react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { CellProps, Column } from "react-table";
 import ExportProgressBar from "../ExportProgressBar";
-import {
-  getStatusIcon,
-  getStatusLabel,
-  getTypeLabel,
-} from "../../api/exportJobsShared";
-import { useCancelExportJob } from "../../api/useCancelExportJob";
-import { useDiscardExportJob } from "../../api/useDiscardExportJob";
-import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import ExportsListActions from "../ExportsListActions";
+import { getStatusLabel, getTypeLabel } from "../../helpers";
+import { getStatusIcon, getTypeIcon } from "./helpers";
 import type { ExportJob } from "../../types/ExportJob";
 import type { ExportRowData } from "./types";
-import useDebug from "@/hooks/useDebug";
 
 interface ExportsListProps {
   readonly exportJobs: ExportJob[];
 }
 
 const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
-  const { notify } = useNotify();
-  const debug = useDebug();
   const { createPageParamsSetter } = usePageParams();
-  const { cancelExportJob: onCancel } = useCancelExportJob();
-  const { discardExportJob: onDiscard } = useDiscardExportJob();
-  const { downloadExportJob: onDownload } = useDownloadExportJob();
-  const [jobToDiscard, setJobToDiscard] = useState<ExportJob | null>(null);
-
-  async function handleDownload(job: ExportJob) {
-    try {
-      const result = await onDownload(job);
-      if (result) {
-        notify.success({
-          title: "TSV download started",
-          message: `${job.name} has been downloaded and removed from the export list.`,
-        });
-      }
-    } catch (error) {
-      debug(error);
-    }
-  }
-
-  async function handleCancel(job: ExportJob) {
-    try {
-      await onCancel(job.id);
-
-      notify.success({
-        title: "TSV generation cancelled",
-        message: `${job.name} has been cancelled.`,
-      });
-    } catch (error) {
-      debug(error);
-    }
-  }
-
-  function handleDiscardClick(job: ExportJob) {
-    setJobToDiscard(job);
-  }
-
-  function handleCloseDiscard() {
-    setJobToDiscard(null);
-  }
-
-  async function handleConfirmDiscard() {
-    if (!jobToDiscard) return;
-
-    try {
-      await onDiscard(jobToDiscard.id);
-      setJobToDiscard(null);
-      notify.success({
-        title: "TSV discarded",
-        message: `${jobToDiscard.name} has been discarded.`,
-      });
-    } catch (error) {
-      debug(error);
-    }
-  }
 
   const columns = useMemo<Column<ExportRowData>[]>(
     () => [
@@ -112,6 +48,8 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <>{getTypeLabel(row.original.job)}</>
         ),
+        getCellIcon: ({ row: { original } }: CellProps<ExportRowData>) =>
+          getTypeIcon(original.job),
       },
       {
         Header: "Status",
@@ -127,12 +65,12 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
               />
             );
           }
-          return (
-            <span>
-              <i className={`p-icon--${getStatusIcon(job)}`} />{" "}
-              {getStatusLabel(job)}
-            </span>
-          );
+          return <>{getStatusLabel(job)}</>;
+        },
+        getCellIcon: ({ row: { original } }: CellProps<ExportRowData>) => {
+          return original.job.status === "processing"
+            ? false
+            : getStatusIcon(original.job);
         },
       },
       {
@@ -161,45 +99,12 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
       },
       {
         ...LIST_ACTIONS_COLUMN_PROPS,
-        Cell: ({ row }: CellProps<ExportRowData>) => {
-          const { job } = row.original;
-          const downloadActions =
-            job.status === "completed"
-              ? [
-                  {
-                    icon: "begin-downloading",
-                    label: "Download",
-                    onClick: handleDownload.bind(null, job),
-                  },
-                ]
-              : [];
-          const destructiveActions =
-            job.status === "processing"
-              ? [
-                  {
-                    icon: "close",
-                    label: "Cancel",
-                    onClick: handleCancel.bind(null, job),
-                  },
-                ]
-              : [
-                  {
-                    icon: "delete",
-                    label: "Discard",
-                    onClick: handleDiscardClick.bind(null, job),
-                  },
-                ];
-          return (
-            <ListActions
-              actions={downloadActions}
-              destructiveActions={destructiveActions}
-              toggleAriaLabel={`Actions for ${job.name}`}
-            />
-          );
-        },
+        Cell: ({ row }: CellProps<ExportRowData>) => (
+          <ExportsListActions job={row.original.job} />
+        ),
       },
     ],
-    [createPageParamsSetter, notify, onCancel, onDownload],
+    [createPageParamsSetter],
   );
 
   const data = useMemo<ExportRowData[]>(
@@ -208,32 +113,12 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
   );
 
   return (
-    <>
-      <ResponsiveTable
-        columns={columns}
-        data={data}
-        sortable={false}
-        emptyMsg="No exports found according to your search parameters."
-      />
-      {jobToDiscard && (
-        <ConfirmationModal
-          title={`Discard "${jobToDiscard.name}"?`}
-          confirmButtonLabel="Discard"
-          confirmButtonAppearance="negative"
-          close={handleCloseDiscard}
-          onConfirm={handleConfirmDiscard}
-          renderInPortal
-        >
-          <p>
-            The export &quot;{jobToDiscard.name}&quot; will be permanently
-            deleted.
-          </p>
-          <p>
-            This action is <strong>irreversible</strong>.
-          </p>
-        </ConfirmationModal>
-      )}
-    </>
+    <ResponsiveTable
+      columns={columns}
+      data={data}
+      sortable={false}
+      emptyMsg="No exports found according to your search parameters."
+    />
   );
 };
 
diff --git a/src/features/exports/components/ExportsList/helpers.test.ts b/src/features/exports/components/ExportsList/helpers.test.ts
new file mode 100644
index 0000000000..c24efaf2e6
--- /dev/null
+++ b/src/features/exports/components/ExportsList/helpers.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import { getStatusIcon, getTypeIcon } from "./helpers";
+import {
+  completedExportJob,
+  completedActivitiesExportJob,
+  failedActivitiesExportJob,
+  processingExportJob,
+} from "@/tests/mocks/exports";
+
+describe("getStatusIcon", () => {
+  it('returns "status-succeeded-small" for completed', () => {
+    expect(getStatusIcon(completedExportJob)).toBe("status-succeeded-small");
+  });
+
+  it('returns "status-failed-small" for failed', () => {
+    expect(getStatusIcon(failedActivitiesExportJob)).toBe("status-failed-small");
+  });
+
+  it('returns "status-in-progress-small" for processing', () => {
+    expect(getStatusIcon(processingExportJob)).toBe("status-in-progress-small");
+  });
+});
+
+describe("getTypeIcon", () => {
+  it('returns "machines" for instance exports', () => {
+    expect(getTypeIcon(completedExportJob)).toBe("machines");
+  });
+
+  it('returns "switcher-environments" for activity exports', () => {
+    expect(getTypeIcon(completedActivitiesExportJob)).toBe("switcher-environments");
+  });
+});
diff --git a/src/features/exports/components/ExportsList/helpers.ts b/src/features/exports/components/ExportsList/helpers.ts
new file mode 100644
index 0000000000..5b4243a123
--- /dev/null
+++ b/src/features/exports/components/ExportsList/helpers.ts
@@ -0,0 +1,16 @@
+import type { ExportJob } from "../../types/ExportJob";
+
+export const getStatusIcon = (job: ExportJob): string => {
+  switch (job.status) {
+    case "completed":
+      return "status-succeeded-small";
+    case "failed":
+      return "status-failed-small";
+    case "processing":
+    default:
+      return "status-in-progress-small";
+  }
+};
+
+export const getTypeIcon = (job: ExportJob): string =>
+  job.type === "activity" ? "switcher-environments" : "machines";
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
new file mode 100644
index 0000000000..f0f079296e
--- /dev/null
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
@@ -0,0 +1,73 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect } from "vitest";
+import { renderWithProviders } from "@/tests/render";
+import { completedExportJob, processingExportJob } from "@/tests/mocks/exports";
+import ExportsListActions from "./ExportsListActions";
+
+describe("ExportsListActions", () => {
+  const user = userEvent.setup();
+
+  it("renders the actions menu toggle button", () => {
+    renderWithProviders(<ExportsListActions job={completedExportJob} />);
+    expect(
+      screen.getByRole("button", { name: /actions for/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows download and discard for completed jobs", async () => {
+    renderWithProviders(<ExportsListActions job={completedExportJob} />);
+    await user.click(
+      screen.getByRole("button", { name: /actions for/i }),
+    );
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Download" }),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Discard" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows cancel for processing jobs", async () => {
+    renderWithProviders(<ExportsListActions job={processingExportJob} />);
+    await user.click(
+      screen.getByRole("button", { name: /actions for/i }),
+    );
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Cancel" }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens discard confirmation modal", async () => {
+    renderWithProviders(<ExportsListActions job={completedExportJob} />);
+    await user.click(
+      screen.getByRole("button", { name: /actions for/i }),
+    );
+
+    await user.click(
+      await screen.findByRole("menuitem", { name: "Discard" }),
+    );
+
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText(/permanently deleted/i)).toBeInTheDocument();
+  });
+
+  it("opens cancel confirmation modal for processing jobs", async () => {
+    renderWithProviders(<ExportsListActions job={processingExportJob} />);
+    await user.click(
+      screen.getByRole("button", { name: /actions for/i }),
+    );
+
+    await user.click(
+      await screen.findByRole("menuitem", { name: "Cancel" }),
+    );
+
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(
+      screen.getByText(/still being generated/i),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
new file mode 100644
index 0000000000..5c0fcd6033
--- /dev/null
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
@@ -0,0 +1,154 @@
+import ListActions from "@/components/layout/ListActions";
+import useDebug from "@/hooks/useDebug";
+import useNotify from "@/hooks/useNotify";
+import { ConfirmationModal } from "@canonical/react-components";
+import type { FC } from "react";
+import { useBoolean } from "usehooks-ts";
+import { useCancelExportJob } from "../../api/useCancelExportJob";
+import { useDiscardExportJob } from "../../api/useDiscardExportJob";
+import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import type { ExportJob } from "../../types/ExportJob";
+
+interface ExportsListActionsProps {
+  readonly job: ExportJob;
+}
+
+const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
+  const { notify } = useNotify();
+  const debug = useDebug();
+  const { cancelExportJob: onCancel } = useCancelExportJob();
+  const { discardExportJob: onDiscard } = useDiscardExportJob();
+  const { downloadExportJob: onDownload } = useDownloadExportJob();
+
+  const {
+    value: isDiscardModalOpen,
+    setTrue: openDiscardModal,
+    setFalse: closeDiscardModal,
+  } = useBoolean();
+
+  const {
+    value: isCancelModalOpen,
+    setTrue: openCancelModal,
+    setFalse: closeCancelModal,
+  } = useBoolean();
+
+  const handleDownload = async () => {
+    try {
+      const result = await onDownload(job);
+      if (result) {
+        notify.success({
+          title: "TSV download started",
+          message: `${job.name} has been downloaded and removed from the export list.`,
+        });
+      }
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const handleConfirmCancel = async () => {
+    try {
+      await onCancel(job.id);
+      notify.success({
+        title: "TSV generation cancelled",
+        message: `${job.name} has been cancelled.`,
+      });
+    } catch (error) {
+      debug(error);
+    } finally {
+      closeCancelModal();
+    }
+  };
+
+  const handleConfirmDiscard = async () => {
+    try {
+      await onDiscard(job.id);
+      notify.success({
+        title: "TSV discarded",
+        message: `${job.name} has been discarded.`,
+      });
+    } catch (error) {
+      debug(error);
+    } finally {
+      closeDiscardModal();
+    }
+  };
+
+  const downloadActions =
+    job.status === "completed"
+      ? [
+          {
+            icon: "begin-downloading" as const,
+            label: "Download",
+            onClick: handleDownload,
+          },
+        ]
+      : [];
+
+  const destructiveActions =
+    job.status === "processing"
+      ? [
+          {
+            icon: "close" as const,
+            label: "Cancel",
+            onClick: openCancelModal,
+          },
+        ]
+      : [
+          {
+            icon: "delete" as const,
+            label: "Discard",
+            onClick: openDiscardModal,
+          },
+        ];
+
+  return (
+    <>
+      <ListActions
+        actions={downloadActions}
+        destructiveActions={destructiveActions}
+        toggleAriaLabel={`Actions for ${job.name}`}
+      />
+      {isDiscardModalOpen && (
+        <ConfirmationModal
+          title={`Discard "${job.name}"?`}
+          confirmButtonLabel="Discard"
+          confirmButtonAppearance="negative"
+          close={closeDiscardModal}
+          onConfirm={handleConfirmDiscard}
+          renderInPortal
+        >
+          <p>
+            The export &quot;{job.name}&quot; will be permanently deleted.
+          </p>
+          <p>
+            This action is <strong>irreversible</strong>.
+          </p>
+        </ConfirmationModal>
+      )}
+      {isCancelModalOpen && (
+        <ConfirmationModal
+          title={`Cancel "${job.name}"?`}
+          confirmButtonLabel="Cancel"
+          confirmButtonAppearance="negative"
+          close={closeCancelModal}
+          onConfirm={handleConfirmCancel}
+          renderInPortal
+        >
+          <p>
+            The export &quot;{job.name}&quot; is still being generated.
+          </p>
+          <p>
+            Cancelling it will stop the generation and discard any partial
+            results.
+          </p>
+          <p>
+            This action is <strong>irreversible</strong>.
+          </p>
+        </ConfirmationModal>
+      )}
+    </>
+  );
+};
+
+export default ExportsListActions;
diff --git a/src/features/exports/components/ExportsListActions/index.ts b/src/features/exports/components/ExportsListActions/index.ts
new file mode 100644
index 0000000000..b7824d1d1e
--- /dev/null
+++ b/src/features/exports/components/ExportsListActions/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportsListActions";
diff --git a/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
index a372cb652a..d2eb9da4f4 100644
--- a/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
+++ b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
@@ -25,7 +25,7 @@ export const useSyncSortableFields = ({
     // Intentional prop->state sync: setState in this effect is the deliberate
     // mechanism, not an accident. Reading draggingFieldIdRef during render (to
     // avoid the effect) would instead trip react-hooks/refs.
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+     
     setOrderedFields(fields);
   }, [draggingFieldIdRef, fields, setOrderedFields]);
 };
diff --git a/src/features/exports/constants.ts b/src/features/exports/constants.ts
index 28e26962d5..2cc645d9ce 100644
--- a/src/features/exports/constants.ts
+++ b/src/features/exports/constants.ts
@@ -1,2 +1 @@
 export const EXPORT_JOBS_POLL_INTERVAL_MS = 5000;
-export const MS_PER_SECOND = 1000;
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
new file mode 100644
index 0000000000..c2f427b4b1
--- /dev/null
+++ b/src/features/exports/helpers.test.ts
@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import {
+  hasProcessingExportJobs,
+  getStatusLabel,
+  getTypeLabel,
+} from "./helpers";
+import {
+  completedExportJob,
+  completedActivitiesExportJob,
+  failedExportJob,
+  processingExportJob,
+} from "@/tests/mocks/exports";
+
+describe("hasProcessingExportJobs", () => {
+  it("returns true when any job is processing", () => {
+    expect(
+      hasProcessingExportJobs([processingExportJob, completedExportJob]),
+    ).toBe(true);
+  });
+
+  it("returns false when no jobs are processing", () => {
+    expect(hasProcessingExportJobs([completedExportJob, failedExportJob])).toBe(
+      false,
+    );
+  });
+
+  it("returns false for an empty list", () => {
+    expect(hasProcessingExportJobs([])).toBe(false);
+  });
+});
+
+describe("getStatusLabel", () => {
+  it('returns "Ready" for completed jobs', () => {
+    expect(getStatusLabel(completedExportJob)).toBe("Ready");
+  });
+
+  it('returns "Failed" for failed jobs', () => {
+    expect(getStatusLabel(failedExportJob)).toBe("Failed");
+  });
+
+  it("returns progress percentage for processing jobs", () => {
+    expect(getStatusLabel(processingExportJob)).toBe("Generating (35%)");
+  });
+});
+
+describe("getTypeLabel", () => {
+  it('returns "Instances" for instance exports', () => {
+    expect(getTypeLabel(completedExportJob)).toBe("Instances");
+  });
+
+  it('returns "Activities" for activity exports', () => {
+    expect(getTypeLabel(completedActivitiesExportJob)).toBe("Activities");
+  });
+});
diff --git a/src/features/exports/api/exportJobsShared.ts b/src/features/exports/helpers.ts
similarity index 52%
rename from src/features/exports/api/exportJobsShared.ts
rename to src/features/exports/helpers.ts
index 77f00f8b71..b72d291d34 100644
--- a/src/features/exports/api/exportJobsShared.ts
+++ b/src/features/exports/helpers.ts
@@ -1,4 +1,4 @@
-import type { ExportJob } from "../types/ExportJob";
+import type { ExportJob } from "./types/ExportJob";
 
 export const hasProcessingExportJobs = (jobs: ExportJob[]) =>
   jobs.some((job) => job.status === "processing");
@@ -15,22 +15,7 @@ export const getStatusLabel = (job: ExportJob): string => {
   }
 };
 
-export const getStatusIcon = (job: ExportJob): string => {
-  switch (job.status) {
-    case "completed":
-      return "status-succeeded-small";
-    case "failed":
-      return "status-failed-small";
-    case "processing":
-    default:
-      return "status-in-progress-small";
-  }
-};
-
 export const getTypeLabel = (job: ExportJob): string =>
   job.type === "activity" ? "Activities" : "Instances";
 
-export interface AllExportJobsResponse {
-  readonly count: number;
-  readonly results: ExportJob[];
-}
+
diff --git a/src/features/exports/index.ts b/src/features/exports/index.ts
index ad8e370c1a..7400fbb314 100644
--- a/src/features/exports/index.ts
+++ b/src/features/exports/index.ts
@@ -1,9 +1,5 @@
 export { default as ExportsContainer } from "./components/ExportsContainer";
 export { default as ExportDetailsSidePanel } from "./components/ExportDetailsSidePanel";
 export { default as SortableFieldList } from "./components/SortableFieldList";
-export type {
-  ExportJob,
-  ExportJobType,
-  ExportJobStatus,
-} from "./types/ExportJob";
+export type { ExportJob } from "./types/ExportJob";
 export type { ExportField, ExportFieldGroup } from "./types/ExportForm";
diff --git a/src/features/exports/types/ExportForm.ts b/src/features/exports/types/ExportForm.ts
index ea682e7eac..db8c13fec7 100644
--- a/src/features/exports/types/ExportForm.ts
+++ b/src/features/exports/types/ExportForm.ts
@@ -1,11 +1,10 @@
 export interface ExportField {
-  readonly id: string;
-  readonly label: string;
-  readonly defaultSelected?: boolean;
+  id: string;
+  label: string;
 }
 
 export interface ExportFieldGroup {
-  readonly title: string;
-  readonly key: string;
-  readonly fields: readonly ExportField[];
+  title: string;
+  key: string;
+  fields: readonly ExportField[];
 }
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
index 27e606a05e..1d6ad2f2dc 100644
--- a/src/features/exports/types/ExportJob.ts
+++ b/src/features/exports/types/ExportJob.ts
@@ -3,17 +3,16 @@ export type ExportJobType = "instance" | "activity";
 export type ExportJobStatus = "processing" | "completed" | "failed";
 
 export interface ExportJob {
-  readonly id: string;
-  readonly name: string;
-  readonly filename: string;
-  readonly type: ExportJobType;
-  readonly row_count: number;
-  readonly attribute_labels: string[];
-  readonly created_at: string;
-  readonly status: ExportJobStatus;
-  readonly progress: number;
-  readonly estimated_seconds_remaining?: number | null;
-  readonly download_ready: boolean;
-  readonly retain_until: string;
-  readonly query?: string | null;
+  id: string;
+  name: string;
+  filename: string;
+  type: ExportJobType;
+  row_count: number;
+  created_at: string;
+  status: ExportJobStatus;
+  progress: number;
+  estimated_seconds_remaining?: number | null;
+  download_ready: boolean;
+  retain_until: string;
+  query?: string | null;
 }
diff --git a/src/features/instances/api/instancesExportJobsShared.ts b/src/features/instances/api/instancesExportJobsShared.ts
deleted file mode 100644
index 486a41a740..0000000000
--- a/src/features/instances/api/instancesExportJobsShared.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { InstanceListParams } from "../helpers";
-import type { InstancesExportJob } from "../types/InstancesExportJob";
-
-export interface CreateInstancesExportJobParams extends InstanceListParams {
-  readonly name: string;
-  readonly selected_field_ids: string[];
-  readonly retain_until: string;
-}
-
-export interface InstancesExportJobsResponse {
-  readonly count: number;
-  readonly results: InstancesExportJob[];
-}
-
-export const hasProcessingExportJobs = (jobs: InstancesExportJob[]) =>
-  jobs.some((job) => job.status === "processing");
-
-export const getStatusLabel = (job: InstancesExportJob): string => {
-  switch (job.status) {
-    case "completed":
-      return "Ready";
-    case "failed":
-      return "Failed";
-    case "processing":
-    default:
-      return `Generating (${job.progress}%)`;
-  }
-};
diff --git a/src/features/instances/api/useExportInstancesTsv.ts b/src/features/instances/api/useExportInstancesTsv.ts
index f900d162f6..398a0d10dd 100644
--- a/src/features/instances/api/useExportInstancesTsv.ts
+++ b/src/features/instances/api/useExportInstancesTsv.ts
@@ -3,7 +3,13 @@ import type { ApiError } from "@/types/api/ApiError";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 import type { InstancesExportJob } from "../types/InstancesExportJob";
-import type { CreateInstancesExportJobParams } from "./instancesExportJobsShared";
+import type { InstanceListParams } from "../helpers";
+
+interface CreateInstancesExportJobParams extends InstanceListParams {
+  name: string;
+  selected_field_ids: string[];
+  retain_until: string;
+}
 
 export const useExportInstancesTsv = () => {
   const authFetch = useFetch();
diff --git a/src/features/instances/components/InstanceList/InstanceList.tsx b/src/features/instances/components/InstanceList/InstanceList.tsx
index f56adcb684..19486326cb 100644
--- a/src/features/instances/components/InstanceList/InstanceList.tsx
+++ b/src/features/instances/components/InstanceList/InstanceList.tsx
@@ -299,7 +299,7 @@ const InstanceList = memo(function InstanceList({
         },
       },
       {
-        accessor: "last_ping",
+        accessor: "last_ping_time",
         canBeHidden: true,
         optionLabel: "Last ping",
         Header: "Last ping time",
diff --git a/src/features/instances/components/InstanceList/helpers.test.tsx b/src/features/instances/components/InstanceList/helpers.test.tsx
index 9a4eb45842..40ef71bd5d 100644
--- a/src/features/instances/components/InstanceList/helpers.test.tsx
+++ b/src/features/instances/components/InstanceList/helpers.test.tsx
@@ -1,8 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import {
   getColumnFilterOptions,
-  getCheckboxState,
-  handleCheckboxChange,
   getStatusCellIconAndLabel,
   getUpgradesCellIconAndLabel,
   createHeaderPropsGetter,
@@ -31,46 +29,6 @@ describe("InstanceList helpers", () => {
     });
   });
 
-  describe("getCheckboxState", () => {
-    it("returns 'checked' when instance is in selectedInstances", () => {
-      const result = getCheckboxState({
-        instance: ubuntuInstance,
-        selectedInstances: [ubuntuInstance],
-      });
-      expect(result).toBe("checked");
-    });
-
-    it("returns 'unchecked' when instance is not in selectedInstances", () => {
-      const result = getCheckboxState({
-        instance: ubuntuInstance,
-        selectedInstances: [],
-      });
-      expect(result).toBe("unchecked");
-    });
-  });
-
-  describe("handleCheckboxChange", () => {
-    it("adds instance when not already selected", () => {
-      const setSelectedInstances = vi.fn();
-      handleCheckboxChange({
-        instance: ubuntuInstance,
-        selectedInstances: [],
-        setSelectedInstances,
-      });
-      expect(setSelectedInstances).toHaveBeenCalledWith([ubuntuInstance]);
-    });
-
-    it("removes instance when already selected", () => {
-      const setSelectedInstances = vi.fn();
-      handleCheckboxChange({
-        instance: ubuntuInstance,
-        selectedInstances: [ubuntuInstance],
-        setSelectedInstances,
-      });
-      expect(setSelectedInstances).toHaveBeenCalledWith([]);
-    });
-  });
-
   describe("getStatusCellIconAndLabel", () => {
     it("returns 'Archived' for archived instances", () => {
       const instance: InstanceWithoutRelation = {
@@ -327,10 +285,10 @@ describe("InstanceList helpers", () => {
       expect(result["aria-label"]).toBe("Ubuntu Pro expiration date");
     });
 
-    it("sets aria-label for last_ping cells", () => {
+    it("sets aria-label for last_ping_time cells", () => {
       const getter = getCellProps(null);
       const result = getter({
-        column: { id: "last_ping" },
+        column: { id: "last_ping_time" },
         row: { index: 0 },
       } as Parameters<typeof getter>[0]);
       expect(result["aria-label"]).toBe("Last ping");
diff --git a/src/features/instances/components/InstanceList/helpers.tsx b/src/features/instances/components/InstanceList/helpers.tsx
index c08de5b701..eb3c5ae3ba 100644
--- a/src/features/instances/components/InstanceList/helpers.tsx
+++ b/src/features/instances/components/InstanceList/helpers.tsx
@@ -33,39 +33,6 @@ export const getColumnFilterOptions = (
   }));
 };
 
-interface FigureCheckboxStateParams {
-  instance: Instance;
-  selectedInstances: Instance[];
-}
-
-export const getCheckboxState = ({
-  instance,
-  selectedInstances,
-}: FigureCheckboxStateParams) => {
-  const selectedInstancesIds = selectedInstances.map(({ id }) => id);
-  return selectedInstancesIds.includes(instance.id) ? "checked" : "unchecked";
-};
-
-interface HandleCheckboxChangeParams {
-  instance: Instance;
-  selectedInstances: Instance[];
-  setSelectedInstances: (instances: Instance[]) => void;
-}
-
-export const handleCheckboxChange = ({
-  instance,
-  selectedInstances,
-  setSelectedInstances,
-}: HandleCheckboxChangeParams) => {
-  if (selectedInstances.some(({ id }) => id === instance.id)) {
-    setSelectedInstances(
-      selectedInstances.filter(({ id }) => id !== instance.id),
-    );
-  } else {
-    setSelectedInstances([...selectedInstances, instance]);
-  }
-};
-
 export const getStatusCellIconAndLabel = (
   instance: InstanceWithoutRelation,
 ): { label: ReactNode; icon?: string } => {
@@ -248,7 +215,7 @@ export const getCellProps = (expandedRowIndex: number | null) => {
       case "ubuntu_pro":
         cellProps["aria-label"] = "Ubuntu Pro expiration date";
         break;
-      case "last_ping":
+      case "last_ping_time":
         cellProps["aria-label"] = "Last ping";
         break;
       case "actions":
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
index 116395e79e..d9b4ce5b9e 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -1,25 +1,9 @@
 import { renderWithProviders } from "@/tests/render";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import type { ComponentProps } from "react";
 import { describe, expect, it } from "vitest";
 import InstancesExportForm from "./InstancesExportForm";
 
-type InstancesExportFormProps = ComponentProps<typeof InstancesExportForm>;
-
-const defaultProps = {
-  exportParams: {
-    query: "name:prod",
-    archived_only: false,
-    wsl_children: false,
-    wsl_parents: false,
-  },
-  instanceCount: 1,
-} satisfies InstancesExportFormProps;
-
-const renderForm = (props: Partial<InstancesExportFormProps> = {}) =>
-  renderWithProviders(<InstancesExportForm {...defaultProps} {...props} />);
-
 const openAttributeGroup = async (
   user: ReturnType<typeof userEvent.setup>,
   name: RegExp,
@@ -30,7 +14,17 @@ const openAttributeGroup = async (
 describe("InstancesExportForm", () => {
   it("shows the export details fields and instance attribute groups", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
     expect(
       screen.getByText(/select the attributes you want to include/i),
@@ -54,10 +48,28 @@ describe("InstancesExportForm", () => {
     ).toBeInTheDocument();
   });
 
-  it("keeps Next disabled until an export name and at least one field are selected", async () => {
+  it("pre-selects the visible table columns and keeps Next disabled until a name is given", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
+    // Attributes matching the visible table columns are pre-selected on open.
+    await openAttributeGroup(user, /primary identity/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Instance name" }),
+    ).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Status" })).toBeChecked();
+
+    // A name is still required before proceeding.
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).toHaveAttribute("aria-disabled", "true");
 
@@ -65,16 +77,22 @@ describe("InstancesExportForm", () => {
       screen.getByRole("textbox", { name: "Export name" }),
       "Weekly export",
     );
-    expect(nextButton).toHaveAttribute("aria-disabled", "true");
-
-    await openAttributeGroup(user, /primary identity/i);
-    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
     expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("filters attributes by field name without matching group titles", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
     const search = screen.getByRole("searchbox", { name: "Search attributes" });
     await user.type(search, "host");
@@ -98,17 +116,34 @@ describe("InstancesExportForm", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("shows attribute validation after clearing the last selected field", async () => {
+  it("shows attribute validation after clearing every pre-selected field", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
     await user.type(
       screen.getByRole("textbox", { name: "Export name" }),
       "Weekly export",
     );
-    await openAttributeGroup(user, /primary identity/i);
-    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
-    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+
+    const uncheck = async (...labels: string[]) => {
+      for (const label of labels) {
+        await user.click(screen.getByLabelText(label));
+      }
+    };
+    await uncheck("Instance name", "Status", "OS");
+    await uncheck("Security upgrades count");
+    await uncheck("Tags", "Ubuntu Pro expiration");
+    await uncheck("Availability zone", "Last ping", "Regular upgrades count");
 
     expect(screen.getByText("Select at least one attribute")).toHaveClass(
       "p-form-validation__message",
@@ -117,15 +152,23 @@ describe("InstancesExportForm", () => {
 
   it("moves to the review step and back without losing selected fields", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
     await user.type(
       screen.getByRole("textbox", { name: "Export name" }),
       "Weekly export",
     );
-    await openAttributeGroup(user, /primary identity/i);
-    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
-    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    // Visible-column attributes are pre-selected, so proceed straight to review.
     await user.click(screen.getByRole("button", { name: "Next" }));
 
     expect(
@@ -134,7 +177,7 @@ describe("InstancesExportForm", () => {
     expect(
       screen.getByLabelText("Order for Instance name"),
     ).toBeInTheDocument();
-    expect(screen.getByLabelText("Order for Hostname")).toBeInTheDocument();
+    expect(screen.getByLabelText("Order for Status")).toBeInTheDocument();
 
     await user.click(screen.getByRole("button", { name: "Back" }));
 
@@ -143,12 +186,22 @@ describe("InstancesExportForm", () => {
     expect(
       screen.getByRole("checkbox", { name: "Instance name" }),
     ).toBeChecked();
-    expect(screen.getByRole("checkbox", { name: "Hostname" })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "Status" })).toBeChecked();
   });
 
   it("keeps the order input focused while typing", async () => {
     const user = userEvent.setup();
-    renderForm();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={1}
+      />,
+    );
 
     await user.type(
       screen.getByRole("textbox", { name: "Export name" }),
@@ -170,7 +223,17 @@ describe("InstancesExportForm", () => {
 
   it("queues an export and shows a success notification with a status action", async () => {
     const user = userEvent.setup();
-    renderForm({ instanceCount: 8 });
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+        instanceCount={8}
+      />,
+    );
 
     await user.type(
       screen.getByRole("textbox", { name: "Export name" }),
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index abcc929995..01818d3211 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -3,6 +3,7 @@ import { INPUT_DATE_FORMAT } from "@/constants";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import useSidePanel from "@/hooks/useSidePanel";
+import usePageParams from "@/hooks/usePageParams";
 import { ROUTES } from "@/libs/routes";
 import { getFormikError } from "@/utils/formikErrors";
 import {
@@ -18,12 +19,8 @@ import { useNavigate } from "react-router";
 import { useExportInstancesTsv } from "../../api/useExportInstancesTsv";
 import type { InstanceListParams } from "../../helpers";
 import classes from "./InstancesExportForm.module.scss";
-import {
-  EXPORT_FIELD_GROUPS,
-  INITIAL_VALUES,
-  VALIDATION_SCHEMA,
-} from "./constants";
-import { buildExportQuery } from "./helpers";
+import { EXPORT_FIELD_GROUPS, VALIDATION_SCHEMA } from "./constants";
+import { buildExportQuery, getInitialValues } from "./helpers";
 import type {
   ExportField,
   InstancesExportFormValues,
@@ -54,13 +51,14 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
   const [step, setStep] = useState<StepIndex>(0);
   const [attributeSearch, setAttributeSearch] = useState("");
   const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
+  const { disabledColumns } = usePageParams();
 
   const handleBack = () => {
     setStep(0);
   };
 
   const formik = useFormik<InstancesExportFormValues>({
-    initialValues: INITIAL_VALUES,
+    initialValues: getInitialValues(disabledColumns),
     validationSchema: VALIDATION_SCHEMA,
     onSubmit: async (values) => {
       const selectedFields = EXPORT_FIELD_GROUPS.flatMap(
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
index 8f8948c79b..9d30754ea3 100644
--- a/src/features/instances/components/InstancesExportForm/constants.ts
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -34,11 +34,11 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Primary Identity",
     key: "primary-identity",
     fields: [
-      { id: "hostname", label: "Hostname", defaultSelected: true },
-      { id: "title", label: "Instance name", defaultSelected: true },
-      { id: "os", label: "OS", defaultSelected: true },
-      { id: "id", label: "ID", defaultSelected: true },
-      { id: "status", label: "Status", defaultSelected: true },
+      { id: "hostname", label: "Hostname" },
+      { id: "title", label: "Instance name" },
+      { id: "os", label: "OS" },
+      { id: "id", label: "ID" },
+      { id: "status", label: "Status" },
     ],
   },
   {
@@ -74,8 +74,8 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Business Logic",
     key: "business-logic",
     fields: [
-      { id: "tags", label: "Tags", defaultSelected: true },
-      { id: "access_group", label: "Access group", defaultSelected: true },
+      { id: "tags", label: "Tags" },
+      { id: "access_group", label: "Access group" },
       { id: "annotations", label: "Annotations" },
       { id: "ubuntu_pro", label: "Ubuntu Pro expiration" },
       { id: "license_type", label: "License type" },
@@ -85,7 +85,7 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Granular Metadata & Deep Diagnostics",
     key: "granular-metadata-diagnostics",
     fields: [
-      { id: "last_ping_time", label: "Last ping", defaultSelected: true },
+      { id: "last_ping_time", label: "Last ping" },
       { id: "juju_machine_id", label: "Juju machine ID" },
       { id: "cloud_instance_metadata", label: "Cloud instance metadata" },
       { id: "hostagent_uid", label: "Host agent UID" },
@@ -145,4 +145,4 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "juju_model_uuid", label: "Juju model UUID" },
     ],
   },
-];
+];
\ No newline at end of file
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
index 5b314c55f2..2507432247 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -1,159 +1,25 @@
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
-import type { Instance } from "@/types/Instance";
-import moment from "moment";
-
-export const EXPORT_ASYNC_THRESHOLD_MS = 1500;
-
-export interface ExportFieldOption {
-  readonly id: string;
-  readonly label: string;
-  readonly defaultSelected?: boolean;
-  readonly getValue: (instance: Instance) => string;
-}
-
-export interface AnnotationFieldOption extends ExportFieldOption {
-  readonly annotationKey: string;
-}
-
-const formatDate = (value: string | null | undefined) =>
-  moment(value).isValid() ? moment(value).format(DISPLAY_DATE_TIME_FORMAT) : "";
-
-const getStatusLabel = (instance: Instance) => {
-  if (instance.archived) {
-    return "Archived";
-  }
-
-  const filteredAlerts = (instance.alerts ?? []).filter(
-    ({ type }) =>
-      !["PackageUpgradesAlert", "SecurityUpgradesAlert"].includes(type),
-  );
-
-  if (!filteredAlerts.length) {
-    return "Online";
-  }
-
-  return filteredAlerts.map(({ summary, type }) => summary || type).join("; ");
+import { INITIAL_VALUES } from "./constants";
+import type { InstancesExportFormValues } from "./types";
+
+const ACCESSOR_TO_EXPORT_FIELD_ID: Record<string, string | string[]> = {
+  title: "title",
+  status: "status",
+  upgrades: ["upgrades_security", "upgrades_regular"],
+  os: "os",
+  tags: "tags",
+  availability_zone: "availability_zone",
+  ubuntu_pro: "ubuntu_pro",
+  last_ping_time: "last_ping_time",
 };
 
-export const BUILTIN_EXPORT_FIELDS: ExportFieldOption[] = [
-  {
-    id: "title",
-    label: "Instance name",
-    defaultSelected: true,
-    getValue: (instance) => instance.title,
-  },
-  {
-    id: "hostname",
-    label: "Hostname",
-    defaultSelected: true,
-    getValue: (instance) => instance.hostname ?? "",
-  },
-  {
-    id: "status",
-    label: "Status",
-    defaultSelected: true,
-    getValue: getStatusLabel,
-  },
-  {
-    id: "os",
-    label: "OS",
-    defaultSelected: true,
-    getValue: (instance) => instance.distribution_info?.description ?? "",
-  },
-  {
-    id: "access_group",
-    label: "Access group",
-    defaultSelected: true,
-    getValue: (instance) => instance.access_group,
-  },
-  {
-    id: "tags",
-    label: "Tags",
-    defaultSelected: true,
-    getValue: (instance) =>
-      instance.tags.length ? JSON.stringify(instance.tags) : "",
-  },
-  {
-    id: "availability_zone",
-    label: "Availability zone",
-    getValue: (instance) => instance.cloud_init?.availability_zone ?? "",
-  },
-  {
-    id: "ubuntu_pro",
-    label: "Ubuntu Pro expiration",
-    getValue: (instance) =>
-      instance.ubuntu_pro_info?.attached
-        ? formatDate(instance.ubuntu_pro_info.expires)
-        : "",
-  },
-  {
-    id: "last_ping",
-    label: "Last ping",
-    defaultSelected: true,
-    getValue: (instance) => formatDate(instance.last_ping_time),
-  },
-  {
-    id: "registered_at",
-    label: "Registered at",
-    getValue: (instance) => formatDate(instance.registered_at),
-  },
-  {
-    id: "parent",
-    label: "Parent instance",
-    getValue: (instance) => instance.parent?.title ?? "",
-  },
-  {
-    id: "comment",
-    label: "Comment",
-    getValue: (instance) => instance.comment,
-  },
-  {
-    id: "employee_id",
-    label: "Employee ID",
-    getValue: (instance) =>
-      instance.employee_id === null ? "" : String(instance.employee_id),
-  },
-  {
-    id: "archived",
-    label: "Archived",
-    getValue: (instance) => (instance.archived ? "Yes" : "No"),
-  },
-  {
-    id: "wsl",
-    label: "WSL instance",
-    getValue: (instance) => (instance.is_wsl_instance ? "Yes" : "No"),
-  },
-];
-
-const builtinFieldMap = new Map(
-  BUILTIN_EXPORT_FIELDS.map((field) => [field.id, field]),
-);
-
-export const DEFAULT_EXPORT_FIELD_IDS = BUILTIN_EXPORT_FIELDS.filter(
-  ({ defaultSelected }) => defaultSelected,
-).map(({ id }) => id);
-
-export const getSelectedExportFields = ({
-  annotationFieldOptions,
-  selectedFieldIds,
-}: {
-  annotationFieldOptions: AnnotationFieldOption[];
-  selectedFieldIds: string[];
-}) => {
-  const effectiveFieldIds = selectedFieldIds.length
-    ? selectedFieldIds
-    : DEFAULT_EXPORT_FIELD_IDS;
-  const annotationFieldMap = new Map(
-    annotationFieldOptions.map((field) => [field.id, field]),
-  );
-
-  return effectiveFieldIds.flatMap((fieldId) => {
-    const field =
-      builtinFieldMap.get(fieldId) ?? annotationFieldMap.get(fieldId);
-
-    return field ? [field] : [];
-  });
-};
+export const getInitialValues = (
+  disabledColumns: string[],
+): InstancesExportFormValues => ({
+  ...INITIAL_VALUES,
+  selectedFieldIds: Object.entries(ACCESSOR_TO_EXPORT_FIELD_ID)
+    .filter(([accessor]) => !disabledColumns.includes(accessor))
+    .flatMap(([, value]) => (Array.isArray(value) ? value : [value])),
+});
 
 export const buildExportQuery = ({
   query,
@@ -167,4 +33,4 @@ export const buildExportQuery = ({
   }
 
   return query?.trim();
-};
+};
\ No newline at end of file
diff --git a/src/features/instances/components/InstancesExportForm/types.ts b/src/features/instances/components/InstancesExportForm/types.ts
index b31a1f53b6..77bc534c61 100644
--- a/src/features/instances/components/InstancesExportForm/types.ts
+++ b/src/features/instances/components/InstancesExportForm/types.ts
@@ -3,7 +3,7 @@ export type { ExportField, ExportFieldGroup } from "@/features/exports";
 export type StepIndex = 0 | 1;
 
 export interface InstancesExportFormValues {
-  readonly name: string;
-  readonly selectedFieldIds: string[];
-  readonly retainUntil: string;
+  name: string;
+  selectedFieldIds: string[];
+  retainUntil: string;
 }
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index 478e546255..53a7b9e085 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -118,33 +118,6 @@ describe("InstancesPageActions", () => {
       }
     });
 
-    it("should keep Operations enabled for filtered export without a row selection", async () => {
-      renderPageActions({ instanceCount: 3, selectedInstances: [] });
-
-      const operationsButton = screen.getByRole("button", {
-        name: MENU_LABELS[0],
-      });
-
-      expect(operationsButton).not.toHaveClass("is-disabled");
-
-      await userEvent.click(operationsButton);
-
-      expect(
-        screen.getByRole("menuitem", { name: /^export$/i }),
-      ).not.toHaveClass("is-disabled");
-      expect(screen.getByRole("menuitem", { name: /shut down/i })).toHaveClass(
-        "is-disabled",
-      );
-
-      await userEvent.click(
-        screen.getByRole("menuitem", { name: /^export$/i }),
-      );
-
-      expect(
-        screen.getByRole("heading", { name: /export 3 instances as tsv/i }),
-      ).toBeInTheDocument();
-    });
-
     it("'View report' menu item should be visible when feature enabled", async () => {
       renderPageActions();
 
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 7222ca4bb6..9ec905f227 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -6,7 +6,6 @@ export const processingExportJob: ExportJob = {
   filename: "instances-export-1.tsv",
   row_count: 120,
   type: "instance",
-  attribute_labels: ["Instance name", "Hostname", "Status"],
   created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 35,
@@ -21,7 +20,6 @@ export const completedExportJob: ExportJob = {
   filename: "instances-export-2.tsv",
   row_count: 42,
   type: "instance",
-  attribute_labels: ["Instance name", "Access group"],
   created_at: "2026-06-03T12:08:00.000Z",
   status: "completed",
   progress: 100,
@@ -36,7 +34,6 @@ export const failedExportJob: ExportJob = {
   filename: "instances-export-3.tsv",
   row_count: 12,
   type: "instance",
-  attribute_labels: ["Hostname"],
   created_at: "2026-06-03T12:06:00.000Z",
   status: "failed",
   progress: 100,
@@ -51,7 +48,6 @@ export const processingActivitiesExportJob: ExportJob = {
   filename: "activities-export-1.tsv",
   row_count: 50,
   type: "activity",
-  attribute_labels: ["ID", "Type", "Summary", "Status"],
   created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 30,
@@ -66,7 +62,6 @@ export const completedActivitiesExportJob: ExportJob = {
   filename: "activities-export-2.tsv",
   row_count: 20,
   type: "activity",
-  attribute_labels: ["ID", "Type", "Creator"],
   created_at: "2026-06-03T12:08:00.000Z",
   status: "completed",
   progress: 100,
@@ -81,7 +76,6 @@ export const failedActivitiesExportJob: ExportJob = {
   filename: "activities-export-3.tsv",
   row_count: 0,
   type: "activity",
-  attribute_labels: ["ID"],
   created_at: "2026-06-03T12:06:00.000Z",
   status: "failed",
   progress: 100,
diff --git a/src/tests/server/handlers/activity.ts b/src/tests/server/handlers/activity.ts
index 7e30a8a855..d39f6d58d0 100644
--- a/src/tests/server/handlers/activity.ts
+++ b/src/tests/server/handlers/activity.ts
@@ -233,7 +233,6 @@ export default [
       filename: "activities-export.tsv",
       row_count: 0,
       type: "activity",
-      attribute_labels: [],
       created_at: new Date().toISOString(),
       status: "processing",
       progress: 0,
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index 239659f4c3..a06e6c64a1 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -667,7 +667,6 @@ export default [
       filename: "instances-export.tsv",
       row_count: 0,
       type: "instance",
-      attribute_labels: [],
       created_at: new Date().toISOString(),
       status: "processing",
       progress: 0,

From a81ddb6fd50facf8b929c2491266dfce125a062c Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 18 Jun 2026 16:11:43 +0200
Subject: [PATCH 06/41] add changeset

---
 .changeset/great-dogs-mate.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/great-dogs-mate.md

diff --git a/.changeset/great-dogs-mate.md b/.changeset/great-dogs-mate.md
new file mode 100644
index 0000000000..657f340fb8
--- /dev/null
+++ b/.changeset/great-dogs-mate.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add exports functionality for instances and activities

From c0770981f562e3c9552746f40adc32462dec034a Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 18 Jun 2026 16:34:19 +0200
Subject: [PATCH 07/41] copilot fixes

---
 src/features/activities/api/index.ts          |  2 +-
 ...vitiesCsv.ts => useExportActivitiesTsv.ts} |  8 +--
 .../ActivitiesExportForm.test.tsx             |  8 ++-
 .../ActivitiesExportForm.tsx                  | 19 +++---
 .../ActivitiesExportForm/constants.ts         |  2 +-
 .../ExportDetailsSidePanel.test.tsx           | 58 ++++---------------
 .../ExportsContainer.test.tsx                 |  4 +-
 .../ExportsList/ExportsList.test.tsx          |  1 -
 .../components/ExportsList/helpers.test.ts    |  8 ++-
 .../ExportsListActions.test.tsx               | 28 +++------
 .../ExportsListActions/ExportsListActions.tsx |  8 +--
 .../SortableFieldList.module.scss             | 30 +++++-----
 .../hooks/useSyncSortableFields.ts            |  2 +-
 src/features/exports/helpers.test.ts          | 31 ++++++++++
 src/features/exports/helpers.ts               | 19 +++++-
 src/features/exports/index.ts                 |  1 +
 .../instances/api/useExportInstancesTsv.ts    |  2 +-
 .../InstancesExportForm.test.tsx              |  3 +-
 .../InstancesExportForm.tsx                   |  9 ++-
 .../InstancesExportForm/constants.ts          |  2 +-
 .../components/InstancesExportForm/helpers.ts |  2 +-
 src/tests/render.tsx                          |  4 +-
 src/tests/server/handlers/activity.ts         |  1 -
 23 files changed, 132 insertions(+), 120 deletions(-)
 rename src/features/activities/api/{useExportActivitiesCsv.ts => useExportActivitiesTsv.ts} (84%)

diff --git a/src/features/activities/api/index.ts b/src/features/activities/api/index.ts
index 3d56b94e98..9298f90382 100644
--- a/src/features/activities/api/index.ts
+++ b/src/features/activities/api/index.ts
@@ -4,4 +4,4 @@ export { default as useCancelActivities } from "./useCancelActivities";
 export { default as useGetActivityTypes } from "./useGetActivityTypes";
 export { default as useGetSingleActivity } from "./useGetSingleActivity";
 export { default as useRedoActivities } from "./useRedoActivities";
-export { useExportActivitiesCsv } from "./useExportActivitiesCsv";
+export { useExportActivitiesTsv } from "./useExportActivitiesTsv";
diff --git a/src/features/activities/api/useExportActivitiesCsv.ts b/src/features/activities/api/useExportActivitiesTsv.ts
similarity index 84%
rename from src/features/activities/api/useExportActivitiesCsv.ts
rename to src/features/activities/api/useExportActivitiesTsv.ts
index c5fcea8038..8c2d9d0e65 100644
--- a/src/features/activities/api/useExportActivitiesCsv.ts
+++ b/src/features/activities/api/useExportActivitiesTsv.ts
@@ -12,7 +12,7 @@ interface CreateActivitiesExportJobParams {
   readonly retain_until: string;
 }
 
-export const useExportActivitiesCsv = () => {
+export const useExportActivitiesTsv = () => {
   const authFetch = useFetch();
   const queryClient = useQueryClient();
 
@@ -25,13 +25,13 @@ export const useExportActivitiesCsv = () => {
       authFetch.post<ActivitiesExportJob>("activities/exports", params),
     onSuccess: async () => {
       await queryClient.invalidateQueries({
-        queryKey: ["activities-export-jobs"],
+        queryKey: ["all-export-jobs"],
       });
     },
   });
 
   return {
-    exportActivitiesCsv: mutateAsync,
-    isExportActivitiesCsvLoading: isPending,
+    exportActivitiesTsv: mutateAsync,
+    isExportActivitiesTsvLoading: isPending,
   };
 };
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
index fa4e27458e..a218722aac 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -121,7 +121,11 @@ describe("ActivitiesExportForm", () => {
   it("queues an activities export and shows a success notification with a status action", async () => {
     const user = userEvent.setup();
     renderWithProviders(
-      <ActivitiesExportForm {...defaultProps} activityCount={5} />,
+      <ActivitiesExportForm
+        {...defaultProps}
+        activityCount={5}
+        selectedActivityIds={[1, 2]}
+      />,
     );
 
     await user.type(
@@ -137,7 +141,7 @@ describe("ActivitiesExportForm", () => {
     expect(await screen.findByText("TSV export in progress")).toBeVisible();
     expect(
       screen.getByText(
-        'Your activities export "My activities export" for "status:succeeded" is being generated.',
+        'Your activities export "My activities export" for 2 selected activities is being generated.',
       ),
     ).toBeVisible();
     expect(
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
index eaa95fd4ec..532b9a65ff 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
@@ -16,8 +16,8 @@ import moment from "moment";
 import { useCallback, useMemo, useState, type FC } from "react";
 import { useNavigate } from "react-router";
 import classNames from "classnames";
-import { SortableFieldList } from "@/features/exports";
-import { useExportActivitiesCsv } from "../../api/useExportActivitiesCsv";
+import { getExportScope, SortableFieldList } from "@/features/exports";
+import { useExportActivitiesTsv } from "../../api/useExportActivitiesTsv";
 import classes from "./ActivitiesExportForm.module.scss";
 import {
   EXPORT_FIELD_GROUPS,
@@ -49,8 +49,8 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
   const { notify } = useNotify();
   const navigate = useNavigate();
   const debug = useDebug();
-  const { exportActivitiesCsv, isExportActivitiesCsvLoading } =
-    useExportActivitiesCsv();
+  const { exportActivitiesTsv, isExportActivitiesTsvLoading } =
+    useExportActivitiesTsv();
   const [step, setStep] = useState<StepIndex>(0);
   const [attributeSearch, setAttributeSearch] = useState("");
   const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
@@ -82,7 +82,7 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
       });
 
       try {
-        const response = await exportActivitiesCsv({
+        const response = await exportActivitiesTsv({
           name: values.name.trim(),
           query,
           selected_activity_ids: selectedActivityIds ?? [],
@@ -90,11 +90,16 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
           retain_until: moment(values.retainUntil).toISOString(),
         });
         const job = response.data;
+        const exportScope = getExportScope({
+          query: exportParams.query,
+          selectedCount: selectedActivityIds?.length,
+          selectionForms: ["selected activity", "selected activities"],
+        });
 
         closeSidePanel();
         notify.success({
           title: "TSV export in progress",
-          message: `Your activities export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated.`,
+          message: `Your activities export "${values.name.trim()}"${exportScope} is being generated.`,
           actions: [
             {
               label: "View export status",
@@ -278,7 +283,7 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
           (step === 0 &&
             (!formik.values.name.trim() ||
               formik.values.selectedFieldIds.length === 0)) ||
-          isExportActivitiesCsvLoading ||
+          isExportActivitiesTsvLoading ||
           formik.isSubmitting
         }
         submitButtonText={step === 0 ? "Next" : "Generate TSV"}
diff --git a/src/features/activities/components/ActivitiesExportForm/constants.ts b/src/features/activities/components/ActivitiesExportForm/constants.ts
index dec795488e..2a45cb8c04 100644
--- a/src/features/activities/components/ActivitiesExportForm/constants.ts
+++ b/src/features/activities/components/ActivitiesExportForm/constants.ts
@@ -85,4 +85,4 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "parent_id", label: "Parent ID" },
     ],
   },
-];
\ No newline at end of file
+];
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
index c774ae259d..7a243bbc79 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
@@ -15,11 +15,7 @@ describe("ExportDetailsSidePanel", () => {
   const user = userEvent.setup();
 
   it("renders loading state while fetching", () => {
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      LOADING_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, LOADING_URL);
 
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
@@ -31,11 +27,7 @@ describe("ExportDetailsSidePanel", () => {
       response: completedExportJob,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      SIDE_PANEL_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, SIDE_PANEL_URL);
 
     await expectLoadingState();
 
@@ -54,11 +46,7 @@ describe("ExportDetailsSidePanel", () => {
       response: completedExportJob,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      SIDE_PANEL_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, SIDE_PANEL_URL);
 
     await expectLoadingState();
 
@@ -77,17 +65,11 @@ describe("ExportDetailsSidePanel", () => {
       response: processingExportJob,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      PROCESSING_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, PROCESSING_URL);
 
     await expectLoadingState();
 
-    expect(
-      screen.getByRole("button", { name: /cancel/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
   });
 
   it("opens cancel confirmation modal for processing jobs", async () => {
@@ -97,22 +79,14 @@ describe("ExportDetailsSidePanel", () => {
       response: processingExportJob,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      PROCESSING_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, PROCESSING_URL);
 
     await expectLoadingState();
 
-    await user.click(
-      screen.getByRole("button", { name: /cancel/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /cancel/i }));
 
     expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    expect(
-      screen.getByText(/still being generated/i),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/still being generated/i)).toBeInTheDocument();
   });
 
   it("shows discard confirmation modal", async () => {
@@ -122,17 +96,11 @@ describe("ExportDetailsSidePanel", () => {
       response: completedExportJob,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      SIDE_PANEL_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, SIDE_PANEL_URL);
 
     await expectLoadingState();
 
-    await user.click(
-      screen.getByRole("button", { name: /discard/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /discard/i }));
 
     expect(await screen.findByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText(/permanently deleted/i)).toBeInTheDocument();
@@ -146,11 +114,7 @@ describe("ExportDetailsSidePanel", () => {
       response: jobWithQuery,
     });
 
-    renderWithProviders(
-      <ExportDetailsSidePanel />,
-      undefined,
-      SIDE_PANEL_URL,
-    );
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, SIDE_PANEL_URL);
 
     await expectLoadingState();
 
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
index 843f329f32..446597a3ff 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -40,7 +40,9 @@ describe("ExportsContainer", () => {
 
     expect(screen.getByText(completedExportJob.name)).toBeInTheDocument();
     expect(screen.getByText(processingExportJob.name)).toBeInTheDocument();
-    expect(screen.getByText(completedActivitiesExportJob.name)).toBeInTheDocument();
+    expect(
+      screen.getByText(completedActivitiesExportJob.name),
+    ).toBeInTheDocument();
   });
 
   it("renders the type filter", async () => {
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
index c266cc6f9c..842b2e14b8 100644
--- a/src/features/exports/components/ExportsList/ExportsList.test.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -11,7 +11,6 @@ import ExportsList from "./ExportsList";
 const exportJobs = [completedExportJob, processingExportJob, failedExportJob];
 
 describe("ExportsList", () => {
-
   it("renders all export jobs", () => {
     renderWithProviders(<ExportsList exportJobs={exportJobs} />);
 
diff --git a/src/features/exports/components/ExportsList/helpers.test.ts b/src/features/exports/components/ExportsList/helpers.test.ts
index c24efaf2e6..6585b4473e 100644
--- a/src/features/exports/components/ExportsList/helpers.test.ts
+++ b/src/features/exports/components/ExportsList/helpers.test.ts
@@ -13,7 +13,9 @@ describe("getStatusIcon", () => {
   });
 
   it('returns "status-failed-small" for failed', () => {
-    expect(getStatusIcon(failedActivitiesExportJob)).toBe("status-failed-small");
+    expect(getStatusIcon(failedActivitiesExportJob)).toBe(
+      "status-failed-small",
+    );
   });
 
   it('returns "status-in-progress-small" for processing', () => {
@@ -27,6 +29,8 @@ describe("getTypeIcon", () => {
   });
 
   it('returns "switcher-environments" for activity exports', () => {
-    expect(getTypeIcon(completedActivitiesExportJob)).toBe("switcher-environments");
+    expect(getTypeIcon(completedActivitiesExportJob)).toBe(
+      "switcher-environments",
+    );
   });
 });
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
index f0f079296e..fb68ed1129 100644
--- a/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
@@ -17,9 +17,7 @@ describe("ExportsListActions", () => {
 
   it("shows download and discard for completed jobs", async () => {
     renderWithProviders(<ExportsListActions job={completedExportJob} />);
-    await user.click(
-      screen.getByRole("button", { name: /actions for/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
 
     expect(
       await screen.findByRole("menuitem", { name: "Download" }),
@@ -32,9 +30,7 @@ describe("ExportsListActions", () => {
 
   it("shows cancel for processing jobs", async () => {
     renderWithProviders(<ExportsListActions job={processingExportJob} />);
-    await user.click(
-      screen.getByRole("button", { name: /actions for/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
 
     expect(
       await screen.findByRole("menuitem", { name: "Cancel" }),
@@ -43,13 +39,9 @@ describe("ExportsListActions", () => {
 
   it("opens discard confirmation modal", async () => {
     renderWithProviders(<ExportsListActions job={completedExportJob} />);
-    await user.click(
-      screen.getByRole("button", { name: /actions for/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
 
-    await user.click(
-      await screen.findByRole("menuitem", { name: "Discard" }),
-    );
+    await user.click(await screen.findByRole("menuitem", { name: "Discard" }));
 
     expect(await screen.findByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText(/permanently deleted/i)).toBeInTheDocument();
@@ -57,17 +49,11 @@ describe("ExportsListActions", () => {
 
   it("opens cancel confirmation modal for processing jobs", async () => {
     renderWithProviders(<ExportsListActions job={processingExportJob} />);
-    await user.click(
-      screen.getByRole("button", { name: /actions for/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
 
-    await user.click(
-      await screen.findByRole("menuitem", { name: "Cancel" }),
-    );
+    await user.click(await screen.findByRole("menuitem", { name: "Cancel" }));
 
     expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    expect(
-      screen.getByText(/still being generated/i),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/still being generated/i)).toBeInTheDocument();
   });
 });
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
index 5c0fcd6033..1b6f273346 100644
--- a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
@@ -118,9 +118,7 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
           onConfirm={handleConfirmDiscard}
           renderInPortal
         >
-          <p>
-            The export &quot;{job.name}&quot; will be permanently deleted.
-          </p>
+          <p>The export &quot;{job.name}&quot; will be permanently deleted.</p>
           <p>
             This action is <strong>irreversible</strong>.
           </p>
@@ -135,9 +133,7 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
           onConfirm={handleConfirmCancel}
           renderInPortal
         >
-          <p>
-            The export &quot;{job.name}&quot; is still being generated.
-          </p>
+          <p>The export &quot;{job.name}&quot; is still being generated.</p>
           <p>
             Cancelling it will stop the generation and discard any partial
             results.
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
index 050b5a7bbe..27b7dbf57b 100644
--- a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
@@ -29,14 +29,14 @@
 .orderControls {
   align-items: center;
   display: flex;
-  justify-content: flex-end;
   gap: $sph--small;
+  justify-content: flex-end;
 }
 
 .orderInput {
-  width: 3.5rem;
-  text-align: center;
   min-width: 0;
+  text-align: center;
+  width: 3.5rem;
 }
 
 .orderInputWrapper {
@@ -47,10 +47,10 @@
   opacity: 0.6;
 
   > :global(td) {
-    background-color: rgba(0, 102, 204, 0.06);
+    background-color: rgb(0 102 204 / 6%);
     box-shadow:
-      inset 0 2px 0 0 #0066cc,
-      inset 0 -2px 0 0 #0066cc;
+      inset 0 2px 0 0 #06c,
+      inset 0 -2px 0 0 #06c;
   }
 }
 
@@ -61,7 +61,7 @@
 
 // Smooth the blue outline appearing/disappearing on the dragged row's cells.
 // background-color is intentionally excluded — including it conflicts with the
-// flashBlue @keyframes animation on .justMoved > td, causing a double-flash.
+// flash-blue @keyframes animation on .justMoved > td, causing a double-flash.
 .selectedColumns :global(td) {
   transition: box-shadow 0.15s ease;
 }
@@ -73,9 +73,9 @@
 .dragOverlay {
   align-items: center;
   background: #fff;
-  border: 2px solid #0066cc;
+  border: 2px solid #06c;
   border-radius: 4px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
   display: inline-flex;
   font-size: 0.875rem;
   gap: $sph--small;
@@ -92,7 +92,7 @@
   background: #f0f6ff;
   border: 1px solid #b3d1f5;
   border-radius: 2px;
-  color: #0066cc;
+  color: #06c;
   font-size: 0.75rem;
   font-weight: 600;
   min-width: 1.25rem;
@@ -101,18 +101,20 @@
 }
 
 // Brief blue flash on cells after a row is moved via arrows or number input.
-@keyframes flashBlue {
+@keyframes flash-blue {
   0% {
-    background-color: rgba(0, 102, 204, 0.2);
+    background-color: rgb(0 102 204 / 20%);
   }
+
   30% {
-    background-color: rgba(0, 102, 204, 0.2);
+    background-color: rgb(0 102 204 / 20%);
   }
+
   100% {
     background-color: transparent;
   }
 }
 
 .justMoved > :global(td) {
-  animation: flashBlue 1.5s ease-out forwards;
+  animation: flash-blue 1.5s ease-out forwards;
 }
diff --git a/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
index d2eb9da4f4..ef15d110f9 100644
--- a/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
+++ b/src/features/exports/components/SortableFieldList/hooks/useSyncSortableFields.ts
@@ -25,7 +25,7 @@ export const useSyncSortableFields = ({
     // Intentional prop->state sync: setState in this effect is the deliberate
     // mechanism, not an accident. Reading draggingFieldIdRef during render (to
     // avoid the effect) would instead trip react-hooks/refs.
-     
+
     setOrderedFields(fields);
   }, [draggingFieldIdRef, fields, setOrderedFields]);
 };
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
index c2f427b4b1..0dd4bb1635 100644
--- a/src/features/exports/helpers.test.ts
+++ b/src/features/exports/helpers.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import {
   hasProcessingExportJobs,
+  getExportScope,
   getStatusLabel,
   getTypeLabel,
 } from "./helpers";
@@ -11,6 +12,36 @@ import {
   processingExportJob,
 } from "@/tests/mocks/exports";
 
+describe("getExportScope", () => {
+  const selectionForms = ["selected activity", "selected activities"] as const;
+
+  it("uses the selected item count instead of the query", () => {
+    expect(
+      getExportScope({
+        query: "status:succeeded",
+        selectedCount: 2,
+        selectionForms,
+      }),
+    ).toBe(" for 2 selected activities");
+  });
+
+  it("uses the singular selection label", () => {
+    expect(getExportScope({ selectedCount: 1, selectionForms })).toBe(
+      " for 1 selected activity",
+    );
+  });
+
+  it("uses the query when there is no selection", () => {
+    expect(getExportScope({ query: "status:succeeded", selectionForms })).toBe(
+      ' for "status:succeeded"',
+    );
+  });
+
+  it("returns an empty scope when there is no selection or query", () => {
+    expect(getExportScope({ selectionForms })).toBe("");
+  });
+});
+
 describe("hasProcessingExportJobs", () => {
   it("returns true when any job is processing", () => {
     expect(
diff --git a/src/features/exports/helpers.ts b/src/features/exports/helpers.ts
index b72d291d34..19f5dba4eb 100644
--- a/src/features/exports/helpers.ts
+++ b/src/features/exports/helpers.ts
@@ -1,5 +1,22 @@
+import { pluralize } from "@/utils/_helpers";
 import type { ExportJob } from "./types/ExportJob";
 
+export const getExportScope = ({
+  query,
+  selectedCount,
+  selectionForms,
+}: {
+  query?: string;
+  selectedCount?: number;
+  selectionForms: readonly [singular: string, plural: string];
+}): string => {
+  if (selectedCount) {
+    return ` for ${pluralize(selectedCount, selectionForms, "exact")}`;
+  }
+
+  return query ? ` for "${query}"` : "";
+};
+
 export const hasProcessingExportJobs = (jobs: ExportJob[]) =>
   jobs.some((job) => job.status === "processing");
 
@@ -17,5 +34,3 @@ export const getStatusLabel = (job: ExportJob): string => {
 
 export const getTypeLabel = (job: ExportJob): string =>
   job.type === "activity" ? "Activities" : "Instances";
-
-
diff --git a/src/features/exports/index.ts b/src/features/exports/index.ts
index 7400fbb314..5a4362ceef 100644
--- a/src/features/exports/index.ts
+++ b/src/features/exports/index.ts
@@ -1,5 +1,6 @@
 export { default as ExportsContainer } from "./components/ExportsContainer";
 export { default as ExportDetailsSidePanel } from "./components/ExportDetailsSidePanel";
 export { default as SortableFieldList } from "./components/SortableFieldList";
+export { getExportScope } from "./helpers";
 export type { ExportJob } from "./types/ExportJob";
 export type { ExportField, ExportFieldGroup } from "./types/ExportForm";
diff --git a/src/features/instances/api/useExportInstancesTsv.ts b/src/features/instances/api/useExportInstancesTsv.ts
index 398a0d10dd..14135347df 100644
--- a/src/features/instances/api/useExportInstancesTsv.ts
+++ b/src/features/instances/api/useExportInstancesTsv.ts
@@ -24,7 +24,7 @@ export const useExportInstancesTsv = () => {
       authFetch.post<InstancesExportJob>("computers/exports", params),
     onSuccess: async () => {
       await queryClient.invalidateQueries({
-        queryKey: ["instances-export-jobs"],
+        queryKey: ["all-export-jobs"],
       });
     },
   });
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
index d9b4ce5b9e..bcc295adb5 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -232,6 +232,7 @@ describe("InstancesExportForm", () => {
           wsl_parents: false,
         }}
         instanceCount={8}
+        selectedInstanceIds={[1, 2]}
       />,
     );
 
@@ -249,7 +250,7 @@ describe("InstancesExportForm", () => {
     expect(await screen.findByText("TSV export in progress")).toBeVisible();
     expect(
       screen.getByText(
-        'Your instances export "Weekly export" for "name:prod" is being generated.',
+        'Your instances export "Weekly export" for 2 selected instances is being generated.',
       ),
     ).toBeVisible();
     expect(
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index 01818d3211..17a92f0283 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -27,7 +27,7 @@ import type {
   StepIndex,
 } from "./types";
 import classNames from "classnames";
-import { SortableFieldList } from "@/features/exports";
+import { getExportScope, SortableFieldList } from "@/features/exports";
 
 interface InstancesExportFormProps {
   readonly exportParams: InstanceListParams;
@@ -90,11 +90,16 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
           retain_until: moment(values.retainUntil).toISOString(),
         });
         const job = response.data;
+        const exportScope = getExportScope({
+          query: exportParams.query,
+          selectedCount: selectedInstanceIds?.length,
+          selectionForms: ["selected instance", "selected instances"],
+        });
 
         closeSidePanel();
         notify.success({
           title: "TSV export in progress",
-          message: `Your instances export "${values.name.trim()}"${exportParams.query ? ` for "${exportParams.query}"` : ""} is being generated.`,
+          message: `Your instances export "${values.name.trim()}"${exportScope} is being generated.`,
           actions: [
             {
               label: "View export status",
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
index 9d30754ea3..4b6d8f87f1 100644
--- a/src/features/instances/components/InstancesExportForm/constants.ts
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -145,4 +145,4 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "juju_model_uuid", label: "Juju model UUID" },
     ],
   },
-];
\ No newline at end of file
+];
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
index 2507432247..87e4b75fe3 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -33,4 +33,4 @@ export const buildExportQuery = ({
   }
 
   return query?.trim();
-};
\ No newline at end of file
+};
diff --git a/src/tests/render.tsx b/src/tests/render.tsx
index 3f4fe59f84..f4207a5efc 100644
--- a/src/tests/render.tsx
+++ b/src/tests/render.tsx
@@ -31,9 +31,7 @@ export function renderHookWithProviders() {
     return (
       <MemoryRouter>
         <QueryClientProvider client={queryClient}>
-          <AuthProvider>
-            {children}
-          </AuthProvider>
+          <AuthProvider>{children}</AuthProvider>
         </QueryClientProvider>
       </MemoryRouter>
     );
diff --git a/src/tests/server/handlers/activity.ts b/src/tests/server/handlers/activity.ts
index d39f6d58d0..6ce419c0ed 100644
--- a/src/tests/server/handlers/activity.ts
+++ b/src/tests/server/handlers/activity.ts
@@ -245,5 +245,4 @@ export default [
     };
     return HttpResponse.json(job, { status: 201 });
   }),
-
 ];

From aaf0eda7917c228951f321693e0cb6ef6fc4e95c Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Fri, 19 Jun 2026 10:37:05 +0200
Subject: [PATCH 08/41] add more copilot fixes

---
 .../components/ActivitiesActions/ActivitiesActions.tsx      | 3 +--
 src/features/exports/api/useDownloadExportJob.ts            | 6 ++++--
 .../ExportDetailsSidePanel/ExportDetailsSidePanel.tsx       | 2 +-
 .../components/ExportsListActions/ExportsListActions.tsx    | 2 +-
 src/utils/browserDownload.ts                                | 3 ++-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
index ad2763c805..c7914559ba 100644
--- a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
+++ b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
@@ -3,8 +3,7 @@ import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import usePageParams from "@/hooks/usePageParams";
 import useSidePanel from "@/hooks/useSidePanel";
-import { Button, Icon } from "@canonical/react-components";
-import { ConfirmationButton } from "@canonical/react-components";
+import { Button, ConfirmationButton, Icon } from "@canonical/react-components";
 import { lazy, Suspense, type FC } from "react";
 import type { ActivityCommon } from "../../types";
 import { pluralize } from "@/utils/_helpers";
diff --git a/src/features/exports/api/useDownloadExportJob.ts b/src/features/exports/api/useDownloadExportJob.ts
index e2a27ff0b2..4061018502 100644
--- a/src/features/exports/api/useDownloadExportJob.ts
+++ b/src/features/exports/api/useDownloadExportJob.ts
@@ -44,8 +44,10 @@ export const useDownloadExportJob = () => {
       downloadBlob(response.data, filename);
       return job;
     },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    onSuccess: async (data) => {
+      if (data) {
+        await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+      }
     },
   });
 
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index 29425b48d6..1ffe5da0c0 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -111,7 +111,7 @@ const ExportDetailsSidePanel: FC = () => {
                 className="p-button has-icon p-segmented-control__button"
                 confirmationModalProps={{
                   title: `Cancel "${job.name}"?`,
-                  confirmButtonLabel: "Cancel",
+                  confirmButtonLabel: "Confirm",
                   confirmButtonAppearance: "negative",
                   onConfirm: handleConfirmCancel,
                   children: (
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
index 1b6f273346..d8f5678bd9 100644
--- a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
@@ -127,7 +127,7 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
       {isCancelModalOpen && (
         <ConfirmationModal
           title={`Cancel "${job.name}"?`}
-          confirmButtonLabel="Cancel"
+          confirmButtonLabel="Confirm"
           confirmButtonAppearance="negative"
           close={closeCancelModal}
           onConfirm={handleConfirmCancel}
diff --git a/src/utils/browserDownload.ts b/src/utils/browserDownload.ts
index 44e56a2fbf..371854884d 100644
--- a/src/utils/browserDownload.ts
+++ b/src/utils/browserDownload.ts
@@ -14,7 +14,8 @@ export interface SaveFilePickerWindow {
 export const supportsNativeSave = (
   candidate: typeof window,
 ): candidate is typeof window & SaveFilePickerWindow =>
-  "showSaveFilePicker" in candidate;
+  "showSaveFilePicker" in candidate &&
+  typeof (candidate as SaveFilePickerWindow).showSaveFilePicker === "function";
 
 export const downloadBlob = (blob: Blob, filename: string): void => {
   const objectUrl = URL.createObjectURL(blob);

From 8e1dcb30f27b0af9b9d277953a9ba6020ac72e60 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Wed, 24 Jun 2026 16:06:44 +0200
Subject: [PATCH 09/41] add retry button

---
 .../activities/api/useExportActivitiesTsv.ts  |   1 -
 .../ActivitiesActions/ActivitiesActions.tsx   |   6 +-
 .../ActivitiesExportForm.test.tsx             |   4 -
 .../ActivitiesExportForm.tsx                  | 314 +++---------------
 .../ActivitiesExportForm/constants.ts         |  25 +-
 .../ActivitiesExportForm/helpers.ts           |  12 -
 .../components/ActivitiesExportForm/types.ts  |  10 -
 .../exports/api/useGetAllExportJobsList.ts    |   9 +-
 src/features/exports/api/useGetExportJob.ts   |  42 ++-
 src/features/exports/api/useRetryExportJob.ts |  28 ++
 .../ExportDetailsSidePanel/ExportDetails.tsx  | 224 +++++++++++++
 .../ExportDetailsSidePanel.test.tsx           |  65 +++-
 .../ExportDetailsSidePanel.tsx                | 224 +++----------
 .../ExportForm/ExportForm.module.scss}        |   0
 .../components/ExportForm/ExportForm.tsx      | 253 ++++++++++++++
 .../components/ExportForm/constants.ts        |  22 ++
 .../exports/components/ExportForm/index.ts    |   1 +
 .../ExportsContainer.test.tsx                 |   2 +
 .../ExportsContainer/ExportsContainer.tsx     |   5 +-
 .../components/ExportsList/ExportsList.tsx    |   8 +-
 .../components/ExportsList/helpers.test.ts    |  10 +-
 .../exports/components/ExportsList/helpers.ts |   4 +-
 .../ExportsListActions.test.tsx               |  29 +-
 .../ExportsListActions/ExportsListActions.tsx |  36 +-
 .../SortableFieldList.module.scss             |  15 +-
 .../SortableFieldList/SortableFieldList.tsx   |  29 +-
 .../components/SortableFieldList/constants.ts |   9 +-
 .../components/SortableFieldList/helpers.ts   |  15 +
 .../SortableFieldList/hooks/index.ts          |   1 +
 .../hooks/useRestoreFocusAfterMove.ts         |  38 +++
 src/features/exports/constants.ts             |   2 +
 src/features/exports/helpers.test.ts          |  31 ++
 src/features/exports/helpers.ts               |  14 +
 src/features/exports/index.ts                 |  10 +-
 src/features/exports/types/ExportForm.ts      |   8 +
 .../instances/api/useExportInstancesTsv.ts    |   6 +-
 .../InstancesExportForm.module.scss           |  38 ---
 .../InstancesExportForm.test.tsx              |  74 ++++-
 .../InstancesExportForm.tsx                   | 314 ++++--------------
 .../InstancesExportForm/constants.ts          |  25 +-
 .../InstancesExportForm/helpers.test.ts       |  54 +--
 .../components/InstancesExportForm/helpers.ts |  18 +-
 .../components/InstancesExportForm/types.ts   |   9 -
 .../InstancesPageActions.test.tsx             |   4 +-
 .../InstancesPageActions.tsx                  |  70 ++--
 src/tests/mocks/exports.ts                    |  26 ++
 src/tests/server/handlers/exports.ts          |  33 +-
 47 files changed, 1217 insertions(+), 960 deletions(-)
 delete mode 100644 src/features/activities/components/ActivitiesExportForm/helpers.ts
 create mode 100644 src/features/exports/api/useRetryExportJob.ts
 create mode 100644 src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
 rename src/features/{activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss => exports/components/ExportForm/ExportForm.module.scss} (100%)
 create mode 100644 src/features/exports/components/ExportForm/ExportForm.tsx
 create mode 100644 src/features/exports/components/ExportForm/constants.ts
 create mode 100644 src/features/exports/components/ExportForm/index.ts
 create mode 100644 src/features/exports/components/SortableFieldList/helpers.ts
 create mode 100644 src/features/exports/components/SortableFieldList/hooks/useRestoreFocusAfterMove.ts
 delete mode 100644 src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
 delete mode 100644 src/features/instances/components/InstancesExportForm/types.ts

diff --git a/src/features/activities/api/useExportActivitiesTsv.ts b/src/features/activities/api/useExportActivitiesTsv.ts
index 8c2d9d0e65..f962911a2d 100644
--- a/src/features/activities/api/useExportActivitiesTsv.ts
+++ b/src/features/activities/api/useExportActivitiesTsv.ts
@@ -7,7 +7,6 @@ import type { ActivitiesExportJob } from "../types/ActivitiesExportJob";
 interface CreateActivitiesExportJobParams {
   readonly name: string;
   readonly query: string;
-  readonly selected_activity_ids: number[];
   readonly selected_field_ids: string[];
   readonly retain_until: string;
 }
diff --git a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
index c7914559ba..622f54fdfc 100644
--- a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
+++ b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
@@ -65,8 +65,6 @@ const ActivitiesActions: FC<ActivitiesActionsProps> = ({
       <Suspense fallback={<LoadingState />}>
         <ActivitiesExportForm
           exportParams={{ query: exportQuery }}
-          activityCount={activityCount}
-          selectedActivityCount={isAllSelected ? undefined : selected.length}
           selectedActivityIds={
             !isAllSelected && selected.length > 0 ? selectedIds : undefined
           }
@@ -121,12 +119,10 @@ const ActivitiesActions: FC<ActivitiesActionsProps> = ({
         <Button
           className="p-segmented-control__button"
           type="button"
-          hasIcon
           disabled={!isAllSelected && selected.length === 0}
           onClick={handleExport}
         >
-          <Icon name="export" />
-          <span>Export</span>
+          <span>Export selection as TSV</span>
         </Button>
         <ConfirmationButton
           className="p-segmented-control__button"
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
index a218722aac..e6acfeca02 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -9,7 +9,6 @@ type ActivitiesExportFormProps = ComponentProps<typeof ActivitiesExportForm>;
 
 const defaultProps = {
   exportParams: { query: "status:succeeded" },
-  activityCount: 10,
 } satisfies ActivitiesExportFormProps;
 
 const openAttributeGroup = async (
@@ -70,7 +69,6 @@ describe("ActivitiesExportForm", () => {
       <ActivitiesExportForm
         {...defaultProps}
         exportParams={{ query: "" }}
-        activityCount={5}
       />,
     );
 
@@ -94,7 +92,6 @@ describe("ActivitiesExportForm", () => {
       <ActivitiesExportForm
         {...defaultProps}
         exportParams={{ query: "" }}
-        activityCount={5}
       />,
     );
 
@@ -123,7 +120,6 @@ describe("ActivitiesExportForm", () => {
     renderWithProviders(
       <ActivitiesExportForm
         {...defaultProps}
-        activityCount={5}
         selectedActivityIds={[1, 2]}
       />,
     );
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
index 532b9a65ff..93b0e16f9e 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
@@ -1,48 +1,28 @@
-import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
-import { INPUT_DATE_FORMAT } from "@/constants";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import useSidePanel from "@/hooks/useSidePanel";
 import { ROUTES } from "@/libs/routes";
-import { getFormikError } from "@/utils/formikErrors";
 import {
-  Accordion,
-  CheckboxInput,
-  Form,
-  Input,
-} from "@canonical/react-components";
-import { useFormik } from "formik";
+  buildExportQuery,
+  ExportForm,
+  getExportScope,
+  type ExportField,
+  type ExportFormValues,
+} from "@/features/exports";
 import moment from "moment";
-import { useCallback, useMemo, useState, type FC } from "react";
+import type { FC } from "react";
 import { useNavigate } from "react-router";
-import classNames from "classnames";
-import { getExportScope, SortableFieldList } from "@/features/exports";
 import { useExportActivitiesTsv } from "../../api/useExportActivitiesTsv";
-import classes from "./ActivitiesExportForm.module.scss";
-import {
-  EXPORT_FIELD_GROUPS,
-  INITIAL_VALUES,
-  VALIDATION_SCHEMA,
-} from "./constants";
-import { buildActivityExportQuery } from "./helpers";
-import type {
-  ActivityListParams,
-  ExportField,
-  ActivitiesExportFormValues,
-  StepIndex,
-} from "./types";
+import { EXPORT_FIELD_GROUPS, INITIAL_VALUES } from "./constants";
+import type { ActivityListParams } from "./types";
 
 interface ActivitiesExportFormProps {
   readonly exportParams: ActivityListParams;
-  readonly activityCount: number | undefined;
-  readonly selectedActivityCount?: number;
   readonly selectedActivityIds?: number[];
 }
 
 const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
   exportParams,
-  activityCount: _activityCount,
-  selectedActivityCount: _selectedActivityCount,
   selectedActivityIds,
 }) => {
   const { closeSidePanel } = useSidePanel();
@@ -51,245 +31,59 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
   const debug = useDebug();
   const { exportActivitiesTsv, isExportActivitiesTsvLoading } =
     useExportActivitiesTsv();
-  const [step, setStep] = useState<StepIndex>(0);
-  const [attributeSearch, setAttributeSearch] = useState("");
-  const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
-
-  const handleBack = () => {
-    setStep(0);
-  };
-
-  const formik = useFormik<ActivitiesExportFormValues>({
-    initialValues: INITIAL_VALUES,
-    validationSchema: VALIDATION_SCHEMA,
-    onSubmit: async (values) => {
-      const selectedFields = EXPORT_FIELD_GROUPS.flatMap(
-        (group) => group.fields,
-      ).filter((field) => values.selectedFieldIds.includes(field.id));
 
-      if (step === 0) {
-        setOrderedFields(selectedFields);
-        setStep(1);
-        return;
-      }
+  const handleGenerate = async ({
+    values,
+    fieldsToExport,
+  }: {
+    values: ExportFormValues;
+    fieldsToExport: ExportField[];
+  }) => {
+    const query = buildExportQuery({
+      query: exportParams.query,
+      selectedIds: selectedActivityIds,
+    });
 
-      const fieldsToExport = orderedFields.length
-        ? orderedFields
-        : selectedFields;
-      const query = buildActivityExportQuery({
+    try {
+      const response = await exportActivitiesTsv({
+        name: values.name.trim(),
+        query,
+        selected_field_ids: fieldsToExport.map((field) => field.id),
+        retain_until: moment(values.retainUntil).toISOString(),
+      });
+      const job = response.data;
+      const exportScope = getExportScope({
         query: exportParams.query,
-        selectedActivityIds,
+        selectedCount: selectedActivityIds?.length,
+        selectionForms: ["selected activity", "selected activities"],
       });
 
-      try {
-        const response = await exportActivitiesTsv({
-          name: values.name.trim(),
-          query,
-          selected_activity_ids: selectedActivityIds ?? [],
-          selected_field_ids: fieldsToExport.map((field) => field.id),
-          retain_until: moment(values.retainUntil).toISOString(),
-        });
-        const job = response.data;
-        const exportScope = getExportScope({
-          query: exportParams.query,
-          selectedCount: selectedActivityIds?.length,
-          selectionForms: ["selected activity", "selected activities"],
-        });
-
-        closeSidePanel();
-        notify.success({
-          title: "TSV export in progress",
-          message: `Your activities export "${values.name.trim()}"${exportScope} is being generated.`,
-          actions: [
-            {
-              label: "View export status",
-              onClick: () =>
-                navigate(
-                  ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
-                ),
-            },
-          ],
-        });
-      } catch (error) {
-        debug(error);
-      }
-    },
-  });
-
-  const toggleField = useCallback(
-    (fieldId: string) => {
-      const nextSelectedFieldIds = formik.values.selectedFieldIds.includes(
-        fieldId,
-      )
-        ? formik.values.selectedFieldIds.filter((id) => id !== fieldId)
-        : [...formik.values.selectedFieldIds, fieldId];
-
-      void formik.setFieldTouched("selectedFieldIds", true, false);
-      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
-    },
-    [formik],
-  );
-
-  const toggleGroupSelect = useCallback(
-    (groupFields: readonly ExportField[]) => {
-      const groupIds = groupFields.map((field) => field.id);
-      const allSelected = groupIds.every((id) =>
-        formik.values.selectedFieldIds.includes(id),
-      );
-
-      const nextSelectedFieldIds = allSelected
-        ? formik.values.selectedFieldIds.filter((id) => !groupIds.includes(id))
-        : [...new Set([...formik.values.selectedFieldIds, ...groupIds])];
-
-      void formik.setFieldTouched("selectedFieldIds", true, false);
-      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
-    },
-    [formik],
-  );
-
-  const filteredFieldGroups = useMemo(() => {
-    const normalizedSearch = attributeSearch.trim().toLowerCase();
-
-    if (!normalizedSearch) {
-      return EXPORT_FIELD_GROUPS;
+      closeSidePanel();
+      notify.success({
+        title: "TSV export in progress",
+        message: `Your activities export "${values.name.trim()}"${exportScope} is being generated.`,
+        actions: [
+          {
+            label: "View export status",
+            onClick: () =>
+              navigate(
+                ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+              ),
+          },
+        ],
+      });
+    } catch (error) {
+      debug(error);
     }
-
-    return EXPORT_FIELD_GROUPS.flatMap((group) => {
-      const matchingFields = group.fields.filter((field) =>
-        field.label.toLowerCase().includes(normalizedSearch),
-      );
-
-      if (!matchingFields.length) {
-        return [];
-      }
-
-      return [{ ...group, fields: matchingFields }];
-    });
-  }, [attributeSearch]);
-
-  const accordionSections = filteredFieldGroups.map((group) => {
-    const groupIds = group.fields.map((field) => field.id);
-    const allSelected = groupIds.every((id) =>
-      formik.values.selectedFieldIds.includes(id),
-    );
-    const someSelected =
-      !allSelected &&
-      groupIds.some((id) => formik.values.selectedFieldIds.includes(id));
-
-    return {
-      key: group.key,
-      title: (
-        <CheckboxInput
-          label={group.title}
-          checked={allSelected}
-          indeterminate={someSelected}
-          aria-label={`${group.title} select all`}
-          onChange={() => {
-            toggleGroupSelect(group.fields);
-          }}
-        />
-      ),
-      content: (
-        <div className={classes.optionList}>
-          {group.fields.map((field) => (
-            <CheckboxInput
-              key={field.id}
-              checked={formik.values.selectedFieldIds.includes(field.id)}
-              label={field.label}
-              onChange={() => {
-                toggleField(field.id);
-              }}
-            />
-          ))}
-        </div>
-      ),
-    };
-  });
-
-  const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
-
-  const stepContent =
-    step === 0 ? (
-      <>
-        <div className={classes.stepOneFields}>
-          <Input
-            type="text"
-            label="Export name"
-            required
-            error={getFormikError(formik, "name")}
-            {...formik.getFieldProps("name")}
-          />
-          <Input
-            type="date"
-            label="Keep until"
-            required
-            min={moment().add(1, "day").format(INPUT_DATE_FORMAT)}
-            max={moment().add(100, "years").format(INPUT_DATE_FORMAT)}
-            error={getFormikError(formik, "retainUntil")}
-            {...formik.getFieldProps("retainUntil")}
-          />
-          <Input
-            type="search"
-            label="Search attributes"
-            placeholder="Search attributes"
-            value={attributeSearch}
-            onChange={(event) => {
-              setAttributeSearch(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-              }
-            }}
-          />
-        </div>
-        <div className={classNames({ "is-error": !!selectedFieldIdsError })}>
-          {!!selectedFieldIdsError && (
-            <p className="p-form-validation__message">
-              {selectedFieldIdsError}
-            </p>
-          )}
-          {filteredFieldGroups.length ? (
-            <Accordion sections={accordionSections} titleElement="h5" />
-          ) : (
-            <p className={classes.emptyState}>
-              No attributes match your search.
-            </p>
-          )}
-        </div>
-      </>
-    ) : (
-      <SortableFieldList
-        fields={orderedFields}
-        onOrderChange={setOrderedFields}
-      />
-    );
+  };
 
   return (
-    <Form noValidate onSubmit={formik.handleSubmit}>
-      {step === 0 && (
-        <p className={classes.description}>
-          Name your export, select the attributes you want to include, and
-          filter the list if needed.
-        </p>
-      )}
-
-      {stepContent}
-
-      <SidePanelFormButtons
-        hasBackButton={step === 1}
-        onBackButtonPress={step === 1 ? handleBack : undefined}
-        submitButtonDisabled={
-          (step === 0 &&
-            (!formik.values.name.trim() ||
-              formik.values.selectedFieldIds.length === 0)) ||
-          isExportActivitiesTsvLoading ||
-          formik.isSubmitting
-        }
-        submitButtonText={step === 0 ? "Next" : "Generate TSV"}
-        onCancel={closeSidePanel}
-      />
-    </Form>
+    <ExportForm
+      fieldGroups={EXPORT_FIELD_GROUPS}
+      initialValues={INITIAL_VALUES}
+      isSubmitting={isExportActivitiesTsvLoading}
+      onGenerate={handleGenerate}
+    />
   );
 };
 
diff --git a/src/features/activities/components/ActivitiesExportForm/constants.ts b/src/features/activities/components/ActivitiesExportForm/constants.ts
index 2a45cb8c04..189ec0b8cc 100644
--- a/src/features/activities/components/ActivitiesExportForm/constants.ts
+++ b/src/features/activities/components/ActivitiesExportForm/constants.ts
@@ -1,7 +1,6 @@
-import type { ExportFieldGroup, ActivitiesExportFormValues } from "./types";
+import type { ExportFieldGroup, ExportFormValues } from "@/features/exports";
 import { INPUT_DATE_FORMAT } from "@/constants";
 import moment from "moment";
-import * as Yup from "yup";
 
 const VISIBLE_COLUMN_FIELD_IDS: string[] = [
   "summary",
@@ -11,32 +10,12 @@ const VISIBLE_COLUMN_FIELD_IDS: string[] = [
   "creator",
 ];
 
-export const INITIAL_VALUES: ActivitiesExportFormValues = {
+export const INITIAL_VALUES: ExportFormValues = {
   name: "",
   selectedFieldIds: VISIBLE_COLUMN_FIELD_IDS,
   retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };
 
-export const VALIDATION_SCHEMA = Yup.object().shape({
-  name: Yup.string().trim().required("This field is required."),
-  selectedFieldIds: Yup.array()
-    .of(Yup.string().required())
-    .min(1, "Select at least one attribute."),
-  retainUntil: Yup.string()
-    .required("This field is required.")
-    .test(
-      "retain-until-future",
-      "Must be a date in the future.",
-      (value) => !!value && moment(value).isAfter(moment().startOf("day")),
-    )
-    .test(
-      "retain-until-max",
-      "Must be within 100 years from today.",
-      (value) =>
-        !!value && moment(value).isSameOrBefore(moment().add(100, "years")),
-    ),
-});
-
 export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
   {
     title: "Primary Identity",
diff --git a/src/features/activities/components/ActivitiesExportForm/helpers.ts b/src/features/activities/components/ActivitiesExportForm/helpers.ts
deleted file mode 100644
index fbdff0b37e..0000000000
--- a/src/features/activities/components/ActivitiesExportForm/helpers.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const buildActivityExportQuery = ({
-  query,
-  selectedActivityIds,
-}: {
-  query?: string;
-  selectedActivityIds?: number[];
-}): string => {
-  if (selectedActivityIds?.length) {
-    return selectedActivityIds.map((id) => `id:${id}`).join(" OR ");
-  }
-  return query?.trim() ?? "";
-};
diff --git a/src/features/activities/components/ActivitiesExportForm/types.ts b/src/features/activities/components/ActivitiesExportForm/types.ts
index cfb0a61820..70d6bfc22c 100644
--- a/src/features/activities/components/ActivitiesExportForm/types.ts
+++ b/src/features/activities/components/ActivitiesExportForm/types.ts
@@ -1,13 +1,3 @@
-export type { ExportField, ExportFieldGroup } from "@/features/exports";
-
-export type StepIndex = 0 | 1;
-
 export interface ActivityListParams {
   readonly query?: string;
 }
-
-export interface ActivitiesExportFormValues {
-  readonly name: string;
-  readonly selectedFieldIds: string[];
-  readonly retainUntil: string;
-}
diff --git a/src/features/exports/api/useGetAllExportJobsList.ts b/src/features/exports/api/useGetAllExportJobsList.ts
index 34c528f868..ec31dadc07 100644
--- a/src/features/exports/api/useGetAllExportJobsList.ts
+++ b/src/features/exports/api/useGetAllExportJobsList.ts
@@ -17,11 +17,15 @@ interface GetAllExportJobsListParams {
 
 interface GetAllExportJobsListConfig {
   listenToUrlParams?: boolean;
+  enablePolling?: boolean;
 }
 
 export const useGetAllExportJobsList = (
   params: GetAllExportJobsListParams = {},
-  { listenToUrlParams = true }: GetAllExportJobsListConfig = {},
+  {
+    listenToUrlParams = true,
+    enablePolling = true,
+  }: GetAllExportJobsListConfig = {},
 ) => {
   const authFetch = useFetch();
   const { currentPage, pageSize, search, type } = usePageParams();
@@ -51,10 +55,11 @@ export const useGetAllExportJobsList = (
         params: paramsWithPagination,
       }),
     refetchInterval: (query) =>
+      enablePolling &&
       hasProcessingExportJobs(query.state.data?.data.results ?? [])
         ? EXPORT_JOBS_POLL_INTERVAL_MS
         : false,
-    refetchIntervalInBackground: true,
+    refetchIntervalInBackground: enablePolling,
   });
 
   return {
diff --git a/src/features/exports/api/useGetExportJob.ts b/src/features/exports/api/useGetExportJob.ts
index db20e4a5dd..1873e6c663 100644
--- a/src/features/exports/api/useGetExportJob.ts
+++ b/src/features/exports/api/useGetExportJob.ts
@@ -1,20 +1,27 @@
 import useFetch from "@/hooks/useFetch";
 import type { ApiError } from "@/types/api/ApiError";
-import { useQuery } from "@tanstack/react-query";
+import type { ApiPaginatedResponse } from "@/types/api/ApiPaginatedResponse";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
+import { useEffect } from "react";
 import { EXPORT_JOBS_POLL_INTERVAL_MS } from "../constants";
 import type { ExportJob } from "../types/ExportJob";
 
 export const useGetExportJob = (id: string) => {
   const authFetch = useFetch();
+  const queryClient = useQueryClient();
 
   const {
     data: response,
     dataUpdatedAt,
     isLoading,
+    isError,
+    error,
   } = useQuery<AxiosResponse<ExportJob>, AxiosError<ApiError>>({
     queryKey: ["all-export-jobs", id],
     queryFn: async () => authFetch.get<ExportJob>(`exports/${id}`),
+    enabled: !!id,
+    retry: false,
     refetchInterval: (query) =>
       query.state.data?.data.status === "processing"
         ? EXPORT_JOBS_POLL_INTERVAL_MS
@@ -22,9 +29,40 @@ export const useGetExportJob = (id: string) => {
     refetchIntervalInBackground: true,
   });
 
+  const job = response?.data ?? null;
+  useEffect(() => {
+    if (!job) {
+      return;
+    }
+
+    queryClient.setQueriesData<AxiosResponse<ApiPaginatedResponse<ExportJob>>>(
+      { queryKey: ["all-export-jobs"] },
+      (old) => {
+        if (
+          !Array.isArray(old?.data.results) ||
+          !old.data.results.some((listedJob) => listedJob.id === job.id)
+        ) {
+          return old;
+        }
+
+        return {
+          ...old,
+          data: {
+            ...old.data,
+            results: old.data.results.map((listedJob) =>
+              listedJob.id === job.id ? job : listedJob,
+            ),
+          },
+        };
+      },
+    );
+  }, [job, queryClient]);
+
   return {
-    exportJob: response?.data ?? null,
+    exportJob: job,
     dataUpdatedAt,
     isLoading,
+    isError,
+    error,
   };
 };
diff --git a/src/features/exports/api/useRetryExportJob.ts b/src/features/exports/api/useRetryExportJob.ts
new file mode 100644
index 0000000000..7bcd22a792
--- /dev/null
+++ b/src/features/exports/api/useRetryExportJob.ts
@@ -0,0 +1,28 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { ExportJob } from "../types/ExportJob";
+
+export const useRetryExportJob = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation<
+    AxiosResponse<ExportJob>,
+    AxiosError<ApiError>,
+    string
+  >({
+    mutationFn: async (jobId) =>
+      authFetch.post<ExportJob>(`exports/${jobId}/retry`),
+    onSuccess: async (_, jobId) => {
+      // Remove the old (failed) job from cache before invalidating so the
+      // global QueryCache error handler doesn't fire when the backend returns
+      // 404 for the now-discarded job.
+      queryClient.removeQueries({ queryKey: ["all-export-jobs", jobId] });
+      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    },
+  });
+
+  return { retryExportJob: mutateAsync };
+};
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
new file mode 100644
index 0000000000..05fbd53b25
--- /dev/null
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -0,0 +1,224 @@
+import Blocks from "@/components/layout/Blocks";
+import InfoGrid from "@/components/layout/InfoGrid";
+import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import useDebug from "@/hooks/useDebug";
+import useNotify from "@/hooks/useNotify";
+import usePageParams from "@/hooks/usePageParams";
+import {
+  Button,
+  ConfirmationButton,
+  Icon,
+  ICONS,
+} from "@canonical/react-components";
+import moment from "moment";
+import type { FC } from "react";
+import { useCancelExportJob } from "../../api/useCancelExportJob";
+import { useDiscardExportJob } from "../../api/useDiscardExportJob";
+import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import { useRetryExportJob } from "../../api/useRetryExportJob";
+import { getStatusLabel, getTypeLabel } from "../../helpers";
+import type { ExportJob } from "../../types/ExportJob";
+import ExportProgressBar from "../ExportProgressBar";
+import { getFilterValue } from "./helpers";
+
+interface ExportDetailsProps {
+  readonly job: ExportJob;
+}
+
+const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
+  const { popSidePathUntilClear, setPageParams } = usePageParams();
+  const { notify } = useNotify();
+  const debug = useDebug();
+
+  const { cancelExportJob: onCancel } = useCancelExportJob();
+  const { discardExportJob: onDiscard } = useDiscardExportJob();
+  const { downloadExportJob: onDownload } = useDownloadExportJob();
+  const { retryExportJob: onRetry } = useRetryExportJob();
+
+  const handleDownload = async () => {
+    try {
+      const result = await onDownload(job);
+      if (result) {
+        notify.success({
+          title: "TSV download started",
+          message: `${job.name} has been downloaded and removed from the export list.`,
+        });
+      }
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const handleConfirmCancel = async () => {
+    try {
+      await onCancel(job.id);
+      notify.success({
+        title: "TSV generation cancelled",
+        message: `${job.name} has been cancelled.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const handleConfirmDiscard = async () => {
+    try {
+      await onDiscard(job.id);
+      popSidePathUntilClear();
+      notify.success({
+        title: "TSV discarded",
+        message: `${job.name} has been discarded.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const handleRetry = async () => {
+    try {
+      const { data: newJob } = await onRetry(job.id);
+      setPageParams({ name: newJob.id });
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const countLabel = getTypeLabel(job);
+
+  return (
+    <>
+      <div className="p-segmented-control">
+        <div className="p-segmented-control__list">
+          {job.download_ready && (
+            <Button
+              type="button"
+              hasIcon
+              className="p-segmented-control__button"
+              onClick={handleDownload}
+            >
+              <Icon name="begin-downloading" />
+              <span>Download</span>
+            </Button>
+          )}
+          {job.status === "failed" && (
+            <Button
+              type="button"
+              hasIcon
+              className="p-segmented-control__button"
+              onClick={handleRetry}
+            >
+              <Icon name="restart" />
+              <span>Retry</span>
+            </Button>
+          )}
+          {job.status === "processing" && (
+            <ConfirmationButton
+              type="button"
+              className="p-button has-icon p-segmented-control__button"
+              confirmationModalProps={{
+                title: `Cancel "${job.name}"?`,
+                confirmButtonLabel: "Confirm",
+                confirmButtonAppearance: "negative",
+                onConfirm: handleConfirmCancel,
+                children: (
+                  <>
+                    <p>
+                      The export &quot;{job.name}&quot; is still being generated.
+                    </p>
+                    <p>
+                      Cancelling it will stop the generation and discard any
+                      partial results.
+                    </p>
+                    <p>
+                      This action is <strong>irreversible</strong>.
+                    </p>
+                  </>
+                ),
+              }}
+            >
+              <Icon name="close--negative" />
+              <span className="u-text--negative">Cancel</span>
+            </ConfirmationButton>
+          )}
+          {job.status !== "processing" && (
+            <ConfirmationButton
+              type="button"
+              className="p-button has-icon p-segmented-control__button"
+              confirmationModalProps={{
+                title: `Discard "${job.name}"?`,
+                confirmButtonLabel: "Discard",
+                confirmButtonAppearance: "negative",
+                onConfirm: handleConfirmDiscard,
+                children: (
+                  <>
+                    <p>
+                      The export &quot;{job.name}&quot; will be permanently
+                      deleted.
+                    </p>
+                    <p>
+                      This action is <strong>irreversible</strong>.
+                    </p>
+                  </>
+                ),
+              }}
+            >
+              <Icon name={`${ICONS.delete}--negative`} />
+              <span className="u-text--negative">Discard</span>
+            </ConfirmationButton>
+          )}
+        </div>
+      </div>
+
+      <Blocks>
+        <Blocks.Item title="Details">
+          <InfoGrid dense>
+            <InfoGrid.Item
+              label="Status"
+              value={
+                job.status === "processing" ? (
+                  <ExportProgressBar
+                    progress={job.progress}
+                    secondsRemaining={job.estimated_seconds_remaining ?? null}
+                    fullWidth
+                  />
+                ) : (
+                  <span className="u-flex--align-center">
+                    <Icon
+                      name={job.status === "completed" ? "success" : "error"}
+                      className="u-no-margin--right"
+                    />{" "}
+                    {getStatusLabel(job)}
+                  </span>
+                )
+              }
+              large
+            />
+            <InfoGrid.Item
+              label={countLabel}
+              value={job.row_count.toLocaleString()}
+            />
+            <InfoGrid.Item
+              label="Created"
+              value={
+                <span className="font-monospace">
+                  {moment(job.created_at).format(DISPLAY_DATE_TIME_FORMAT)}
+                </span>
+              }
+            />
+            <InfoGrid.Item
+              label="Expires"
+              value={
+                <span className="font-monospace">
+                  {moment(job.retain_until).format(DISPLAY_DATE_TIME_FORMAT)}
+                </span>
+              }
+            />
+            <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
+          </InfoGrid>
+        </Blocks.Item>
+      </Blocks>
+    </>
+  );
+};
+
+export default ExportDetails;
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
index 7a243bbc79..a6c2a0711e 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
@@ -4,12 +4,13 @@ import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { expectLoadingState } from "@/tests/helpers";
-import { completedExportJob, processingExportJob } from "@/tests/mocks/exports";
+import { completedExportJob, processingExportJob, newExportJob } from "@/tests/mocks/exports";
 import ExportDetailsSidePanel from "./ExportDetailsSidePanel";
 
 const SIDE_PANEL_URL = "?sidePath=view&name=job-completed";
 const PROCESSING_URL = "?sidePath=view&name=job-processing";
 const LOADING_URL = "?sidePath=view&name=unknown";
+const FAILED_URL = "?sidePath=view&name=job-failed";
 
 describe("ExportDetailsSidePanel", () => {
   const user = userEvent.setup();
@@ -20,6 +21,20 @@ describe("ExportDetailsSidePanel", () => {
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
 
+  it("shows a not-found state when the export does not exist", async () => {
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, LOADING_URL);
+
+    await expectLoadingState();
+
+    expect(
+      screen.getByRole("heading", { name: /export not found/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/this export no longer exists or the link is invalid/i),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
   it("renders the job name and details for a completed export", async () => {
     setEndpointStatus({
       status: "variant",
@@ -120,4 +135,52 @@ describe("ExportDetailsSidePanel", () => {
 
     expect(screen.getByText("tag:production")).toBeInTheDocument();
   });
+
+  it("shows the retry button for failed jobs", async () => {
+    const failedJob = {
+      ...completedExportJob,
+      id: "job-failed",
+      status: "failed" as const,
+      download_ready: false,
+    };
+    setEndpointStatus({
+      status: "variant",
+      path: "exports/:jobId",
+      response: failedJob,
+    });
+
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, FAILED_URL);
+
+    await expectLoadingState();
+
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+  });
+
+  it("follows the newly enqueued job after retrying a failed export", async () => {
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, FAILED_URL);
+
+    await expectLoadingState();
+
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /retry/i }));
+
+    expect(
+      await screen.findByRole("heading", { name: newExportJob.name }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows a server-error state when the export fails to load", async () => {
+    setEndpointStatus({ status: "error", path: "exports/:jobId" });
+
+    renderWithProviders(<ExportDetailsSidePanel />, undefined, SIDE_PANEL_URL);
+
+    expect(
+      await screen.findByRole("heading", { name: /unable to load export/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/something went wrong while loading this export/i),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index 1ffe5da0c0..a4b0d3b05a 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -1,205 +1,57 @@
-import Blocks from "@/components/layout/Blocks";
-import InfoGrid from "@/components/layout/InfoGrid";
+import EmptyState from "@/components/layout/EmptyState";
 import SidePanel from "@/components/layout/SidePanel";
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
-import useNotify from "@/hooks/useNotify";
 import usePageParams from "@/hooks/usePageParams";
-import {
-  Button,
-  ConfirmationButton,
-  Icon,
-  ICONS,
-} from "@canonical/react-components";
-import moment from "moment";
 import { type FC } from "react";
-import useDebug from "@/hooks/useDebug";
-import ExportProgressBar from "../ExportProgressBar";
-import { getStatusLabel, getTypeLabel } from "../../helpers";
-import { useCancelExportJob } from "../../api/useCancelExportJob";
-import { useDiscardExportJob } from "../../api/useDiscardExportJob";
-import { useDownloadExportJob } from "../../api/useDownloadExportJob";
 import { useGetExportJob } from "../../api/useGetExportJob";
-import { getFilterValue } from "./helpers";
+import { MIN_SERVER_ERROR_STATUS } from "../../constants";
+import ExportDetails from "./ExportDetails";
 
 const ExportDetailsSidePanel: FC = () => {
-  const { name: jobId, popSidePathUntilClear } = usePageParams();
-  const { notify } = useNotify();
-  const debug = useDebug();
+  const { name: jobId } = usePageParams();
 
-  const { exportJob: job } = useGetExportJob(jobId ?? "");
-  const { cancelExportJob: onCancel } = useCancelExportJob();
-  const { discardExportJob: onDiscard } = useDiscardExportJob();
-  const { downloadExportJob: onDownload } = useDownloadExportJob();
+  const {
+    exportJob: job,
+    isLoading,
+    isError,
+    error: jobError,
+  } = useGetExportJob(jobId ?? "");
 
-  const handleDownload = async () => {
-    if (!job) {
-      return;
-    }
-
-    try {
-      const result = await onDownload(job);
-      if (result) {
-        notify.success({
-          title: "TSV download started",
-          message: `${job.name} has been downloaded and removed from the export list.`,
-        });
-      }
-    } catch (error) {
-      debug(error);
-    }
-  };
-
-  const handleConfirmCancel = async () => {
-    if (!job) {
-      return;
-    }
-
-    try {
-      await onCancel(job.id);
-      notify.success({
-        title: "TSV generation cancelled",
-        message: `${job.name} has been cancelled.`,
-      });
-    } catch (error) {
-      debug(error);
-    }
-  };
-
-  const handleConfirmDiscard = async () => {
-    if (!job) {
-      return;
-    }
-
-    try {
-      await onDiscard(job.id);
-      popSidePathUntilClear();
-      notify.success({
-        title: "TSV discarded",
-        message: `${job.name} has been discarded.`,
-      });
-    } catch (error) {
-      debug(error);
-    }
-  };
-
-  if (!job) {
+  if (isLoading) {
     return <SidePanel.LoadingState />;
   }
 
-  const countLabel = getTypeLabel(job);
+  if (!job) {
+    const status = jobError?.response?.status;
+    const isServerError =
+      isError && status !== undefined && status >= MIN_SERVER_ERROR_STATUS;
+
+    return (
+      <>
+        <SidePanel.Header>
+          {isServerError ? "Unable to load export" : "Export not found"}
+        </SidePanel.Header>
+        <SidePanel.Content>
+          <EmptyState
+            icon="export"
+            title={isServerError ? "Unable to load export" : "Export not found"}
+            body={
+              <p>
+                {isServerError
+                  ? "Something went wrong while loading this export. Please try again later."
+                  : "This export no longer exists or the link is invalid. It may have already been downloaded and removed, or discarded."}
+              </p>
+            }
+          />
+        </SidePanel.Content>
+      </>
+    );
+  }
 
   return (
     <>
       <SidePanel.Header>{job.name}</SidePanel.Header>
       <SidePanel.Content>
-        <div className="p-segmented-control">
-          <div className="p-segmented-control__list">
-            {job.status === "completed" && (
-              <Button
-                type="button"
-                hasIcon
-                className="p-segmented-control__button"
-                onClick={handleDownload}
-              >
-                <Icon name="begin-downloading" />
-                <span>Download</span>
-              </Button>
-            )}
-            {job.status === "processing" && (
-              <ConfirmationButton
-                type="button"
-                className="p-button has-icon p-segmented-control__button"
-                confirmationModalProps={{
-                  title: `Cancel "${job.name}"?`,
-                  confirmButtonLabel: "Confirm",
-                  confirmButtonAppearance: "negative",
-                  onConfirm: handleConfirmCancel,
-                  children: (
-                    <>
-                      <p>
-                        The export &quot;{job.name}&quot; is still being
-                        generated.
-                      </p>
-                      <p>
-                        Cancelling it will stop the generation and discard any
-                        partial results.
-                      </p>
-                      <p>
-                        This action is <strong>irreversible</strong>.
-                      </p>
-                    </>
-                  ),
-                }}
-              >
-                <Icon name="close--negative" />
-                <span className="u-text--negative">Cancel</span>
-              </ConfirmationButton>
-            )}
-            {job.status !== "processing" && (
-              <ConfirmationButton
-                type="button"
-                className="p-button has-icon p-segmented-control__button"
-                confirmationModalProps={{
-                  title: `Discard "${job.name}"?`,
-                  confirmButtonLabel: "Discard",
-                  confirmButtonAppearance: "negative",
-                  onConfirm: handleConfirmDiscard,
-                  children: (
-                    <>
-                      <p>
-                        The export &quot;{job.name}&quot; will be permanently
-                        deleted.
-                      </p>
-                      <p>
-                        This action is <strong>irreversible</strong>.
-                      </p>
-                    </>
-                  ),
-                }}
-              >
-                <Icon name={`${ICONS.delete}--negative`} />
-                <span className="u-text--negative">Discard</span>
-              </ConfirmationButton>
-            )}
-          </div>
-        </div>
-
-        <Blocks>
-          <Blocks.Item title="Details">
-            <InfoGrid dense>
-              <InfoGrid.Item
-                label="Status"
-                value={
-                  job.status === "processing" ? (
-                    <ExportProgressBar
-                      progress={job.progress}
-                      secondsRemaining={job.estimated_seconds_remaining ?? null}
-                      fullWidth
-                    />
-                  ) : (
-                    getStatusLabel(job)
-                  )
-                }
-                large
-              />
-              <InfoGrid.Item
-                label={countLabel}
-                value={job.row_count.toLocaleString()}
-              />
-              <InfoGrid.Item
-                label="Created"
-                value={moment(job.created_at).format(DISPLAY_DATE_TIME_FORMAT)}
-              />
-              <InfoGrid.Item
-                label="Expires"
-                value={moment(job.retain_until).format(
-                  DISPLAY_DATE_TIME_FORMAT,
-                )}
-              />
-              <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
-            </InfoGrid>
-          </Blocks.Item>
-        </Blocks>
+        <ExportDetails job={job} />
       </SidePanel.Content>
     </>
   );
diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss b/src/features/exports/components/ExportForm/ExportForm.module.scss
similarity index 100%
rename from src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.module.scss
rename to src/features/exports/components/ExportForm/ExportForm.module.scss
diff --git a/src/features/exports/components/ExportForm/ExportForm.tsx b/src/features/exports/components/ExportForm/ExportForm.tsx
new file mode 100644
index 0000000000..a3ce1de0d1
--- /dev/null
+++ b/src/features/exports/components/ExportForm/ExportForm.tsx
@@ -0,0 +1,253 @@
+import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
+import { INPUT_DATE_FORMAT } from "@/constants";
+import useSidePanel from "@/hooks/useSidePanel";
+import { getFormikError } from "@/utils/formikErrors";
+import {
+  Accordion,
+  CheckboxInput,
+  Form,
+  Input,
+} from "@canonical/react-components";
+import classNames from "classnames";
+import { useFormik } from "formik";
+import moment from "moment";
+import { useCallback, useMemo, useState, type FC } from "react";
+import SortableFieldList from "../SortableFieldList";
+import { VALIDATION_SCHEMA } from "./constants";
+import classes from "./ExportForm.module.scss";
+import type {
+  ExportField,
+  ExportFieldGroup,
+  ExportFormValues,
+  StepIndex,
+} from "../../types/ExportForm";
+
+interface ExportFormProps {
+  readonly fieldGroups: readonly ExportFieldGroup[];
+  readonly initialValues: ExportFormValues;
+  readonly isSubmitting: boolean;
+  readonly onGenerate: (args: {
+    values: ExportFormValues;
+    fieldsToExport: ExportField[];
+  }) => Promise<void>;
+}
+
+const ExportForm: FC<ExportFormProps> = ({
+  fieldGroups,
+  initialValues,
+  isSubmitting,
+  onGenerate,
+}) => {
+  const { closeSidePanel } = useSidePanel();
+  const [step, setStep] = useState<StepIndex>(0);
+  const [attributeSearch, setAttributeSearch] = useState("");
+  const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
+
+  const handleBack = () => {
+    setStep(0);
+  };
+
+  const formik = useFormik<ExportFormValues>({
+    initialValues,
+    validationSchema: VALIDATION_SCHEMA,
+    onSubmit: async (values) => {
+      const selectedFields = fieldGroups
+        .flatMap((group) => group.fields)
+        .filter((field) => values.selectedFieldIds.includes(field.id));
+
+      if (step === 0) {
+        setOrderedFields(selectedFields);
+        setStep(1);
+        return;
+      }
+
+      const fieldsToExport = orderedFields.length
+        ? orderedFields
+        : selectedFields;
+
+      await onGenerate({ values, fieldsToExport });
+    },
+  });
+
+  const toggleField = useCallback(
+    (fieldId: string) => {
+      const nextSelectedFieldIds = formik.values.selectedFieldIds.includes(
+        fieldId,
+      )
+        ? formik.values.selectedFieldIds.filter((id) => id !== fieldId)
+        : [...formik.values.selectedFieldIds, fieldId];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const toggleGroupSelect = useCallback(
+    (groupFields: readonly ExportField[]) => {
+      const groupIds = groupFields.map((field) => field.id);
+      const allSelected = groupIds.every((id) =>
+        formik.values.selectedFieldIds.includes(id),
+      );
+
+      const nextSelectedFieldIds = allSelected
+        ? formik.values.selectedFieldIds.filter((id) => !groupIds.includes(id))
+        : [...new Set([...formik.values.selectedFieldIds, ...groupIds])];
+
+      void formik.setFieldTouched("selectedFieldIds", true, false);
+      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
+    },
+    [formik],
+  );
+
+  const filteredFieldGroups = useMemo(() => {
+    const normalizedSearch = attributeSearch.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return fieldGroups;
+    }
+
+    return fieldGroups.flatMap((group) => {
+      if (group.title.toLowerCase().includes(normalizedSearch)) {
+        return [group];
+      }
+
+      const matchingFields = group.fields.filter((field) =>
+        field.label.toLowerCase().includes(normalizedSearch),
+      );
+
+      if (!matchingFields.length) {
+        return [];
+      }
+
+      return [{ ...group, fields: matchingFields }];
+    });
+  }, [attributeSearch, fieldGroups]);
+
+  const accordionSections = filteredFieldGroups.map((group) => {
+    const groupIds = group.fields.map((field) => field.id);
+    const allSelected = groupIds.every((id) =>
+      formik.values.selectedFieldIds.includes(id),
+    );
+    const someSelected =
+      !allSelected &&
+      groupIds.some((id) => formik.values.selectedFieldIds.includes(id));
+
+    return {
+      key: group.key,
+      title: (
+        <CheckboxInput
+          label={group.title}
+          checked={allSelected}
+          indeterminate={someSelected}
+          aria-label={`${group.title} select all`}
+          onChange={() => {
+            toggleGroupSelect(group.fields);
+          }}
+        />
+      ),
+      content: (
+        <div className={classes.optionList}>
+          {group.fields.map((field) => (
+            <CheckboxInput
+              key={field.id}
+              checked={formik.values.selectedFieldIds.includes(field.id)}
+              label={field.label}
+              onChange={() => {
+                toggleField(field.id);
+              }}
+            />
+          ))}
+        </div>
+      ),
+    };
+  });
+
+  const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
+
+  const stepContent =
+    step === 0 ? (
+      <>
+        <div className={classes.stepOneFields}>
+          <Input
+            type="text"
+            label="Export name"
+            required
+            error={getFormikError(formik, "name")}
+            {...formik.getFieldProps("name")}
+          />
+          <Input
+            type="date"
+            label="Keep until"
+            required
+            min={moment().add(1, "day").format(INPUT_DATE_FORMAT)}
+            max={moment().add(100, "years").format(INPUT_DATE_FORMAT)}
+            error={getFormikError(formik, "retainUntil")}
+            {...formik.getFieldProps("retainUntil")}
+          />
+          <Input
+            type="search"
+            label="Search attributes"
+            placeholder="Search attributes"
+            value={attributeSearch}
+            onChange={(event) => {
+              setAttributeSearch(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+              }
+            }}
+          />
+        </div>
+        <div className={classNames({ "is-error": !!selectedFieldIdsError })}>
+          {!!selectedFieldIdsError && (
+            <p className="p-form-validation__message">
+              {selectedFieldIdsError}
+            </p>
+          )}
+          {filteredFieldGroups.length ? (
+            <Accordion sections={accordionSections} titleElement="h5" />
+          ) : (
+            <p className={classes.emptyState}>
+              No attributes match your search.
+            </p>
+          )}
+        </div>
+      </>
+    ) : (
+      <SortableFieldList
+        fields={orderedFields}
+        onOrderChange={setOrderedFields}
+      />
+    );
+
+  return (
+    <Form noValidate onSubmit={formik.handleSubmit}>
+      {step === 0 && (
+        <p className={classes.description}>
+          Name your export, select the attributes you want to include, and
+          filter the list if needed.
+        </p>
+      )}
+
+      {stepContent}
+
+      <SidePanelFormButtons
+        hasBackButton={step === 1}
+        onBackButtonPress={step === 1 ? handleBack : undefined}
+        submitButtonDisabled={
+          (step === 0 &&
+            (!formik.values.name.trim() ||
+              formik.values.selectedFieldIds.length === 0)) ||
+          isSubmitting ||
+          formik.isSubmitting
+        }
+        submitButtonText={step === 0 ? "Next" : "Generate TSV"}
+        onCancel={closeSidePanel}
+      />
+    </Form>
+  );
+};
+
+export default ExportForm;
diff --git a/src/features/exports/components/ExportForm/constants.ts b/src/features/exports/components/ExportForm/constants.ts
new file mode 100644
index 0000000000..9f852cf40e
--- /dev/null
+++ b/src/features/exports/components/ExportForm/constants.ts
@@ -0,0 +1,22 @@
+import moment from "moment";
+import * as Yup from "yup";
+
+export const VALIDATION_SCHEMA = Yup.object().shape({
+  name: Yup.string().trim().required("This field is required"),
+  selectedFieldIds: Yup.array()
+    .of(Yup.string().required())
+    .min(1, "Select at least one attribute"),
+  retainUntil: Yup.string()
+    .required("This field is required")
+    .test(
+      "retain-until-future",
+      "Must be a date in the future",
+      (value) => !!value && moment(value).isAfter(moment().startOf("day")),
+    )
+    .test(
+      "retain-until-max",
+      "Must be within 100 years from today",
+      (value) =>
+        !!value && moment(value).isSameOrBefore(moment().add(100, "years")),
+    ),
+});
diff --git a/src/features/exports/components/ExportForm/index.ts b/src/features/exports/components/ExportForm/index.ts
new file mode 100644
index 0000000000..82affc22c8
--- /dev/null
+++ b/src/features/exports/components/ExportForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExportForm";
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
index 446597a3ff..fd65cd923b 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -20,6 +20,8 @@ const exportJobs = [
 
 describe("ExportsContainer", () => {
   it("renders empty state when there are no exports", async () => {
+    setEndpointStatus({ status: "empty", path: "exports" });
+
     renderWithProviders(<ExportsContainer />);
 
     await expectLoadingState();
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
index 68dec74e76..384e6ccbed 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
@@ -14,7 +14,10 @@ const ExportsContainer: FC = () => {
   const { exportJobs, totalCount, isLoading } = useGetAllExportJobsList();
 
   const { totalCount: unfilteredCount, isLoading: isLoadingUnfiltered } =
-    useGetAllExportJobsList({}, { listenToUrlParams: false });
+    useGetAllExportJobsList(
+      {},
+      { listenToUrlParams: false, enablePolling: false },
+    );
 
   if (isLoadingUnfiltered) {
     return <LoadingState />;
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index 9ca4e88378..1afa49ff4e 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -78,11 +78,11 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         accessor: "job",
         id: "createdAt",
         Cell: ({ row }: CellProps<ExportRowData>) => (
-          <>
+          <span className="font-monospace">
             {moment(row.original.job.created_at).format(
               DISPLAY_DATE_TIME_FORMAT,
             )}
-          </>
+          </span>
         ),
       },
       {
@@ -90,11 +90,11 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         accessor: "job",
         id: "retainUntil",
         Cell: ({ row }: CellProps<ExportRowData>) => (
-          <>
+          <span className="font-monospace">
             {moment(row.original.job.retain_until).format(
               DISPLAY_DATE_TIME_FORMAT,
             )}
-          </>
+          </span>
         ),
       },
       {
diff --git a/src/features/exports/components/ExportsList/helpers.test.ts b/src/features/exports/components/ExportsList/helpers.test.ts
index 6585b4473e..2670020e6c 100644
--- a/src/features/exports/components/ExportsList/helpers.test.ts
+++ b/src/features/exports/components/ExportsList/helpers.test.ts
@@ -8,14 +8,12 @@ import {
 } from "@/tests/mocks/exports";
 
 describe("getStatusIcon", () => {
-  it('returns "status-succeeded-small" for completed', () => {
-    expect(getStatusIcon(completedExportJob)).toBe("status-succeeded-small");
+  it('returns "success" for completed', () => {
+    expect(getStatusIcon(completedExportJob)).toBe("success");
   });
 
-  it('returns "status-failed-small" for failed', () => {
-    expect(getStatusIcon(failedActivitiesExportJob)).toBe(
-      "status-failed-small",
-    );
+  it('returns "error" for failed', () => {
+    expect(getStatusIcon(failedActivitiesExportJob)).toBe("error");
   });
 
   it('returns "status-in-progress-small" for processing', () => {
diff --git a/src/features/exports/components/ExportsList/helpers.ts b/src/features/exports/components/ExportsList/helpers.ts
index 5b4243a123..8eed3ffaf6 100644
--- a/src/features/exports/components/ExportsList/helpers.ts
+++ b/src/features/exports/components/ExportsList/helpers.ts
@@ -3,9 +3,9 @@ import type { ExportJob } from "../../types/ExportJob";
 export const getStatusIcon = (job: ExportJob): string => {
   switch (job.status) {
     case "completed":
-      return "status-succeeded-small";
+      return "success";
     case "failed":
-      return "status-failed-small";
+      return "error";
     case "processing":
     default:
       return "status-in-progress-small";
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
index fb68ed1129..c25be2a5d8 100644
--- a/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.test.tsx
@@ -2,7 +2,11 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect } from "vitest";
 import { renderWithProviders } from "@/tests/render";
-import { completedExportJob, processingExportJob } from "@/tests/mocks/exports";
+import {
+  completedExportJob,
+  failedExportJob,
+  processingExportJob,
+} from "@/tests/mocks/exports";
 import ExportsListActions from "./ExportsListActions";
 
 describe("ExportsListActions", () => {
@@ -47,6 +51,29 @@ describe("ExportsListActions", () => {
     expect(screen.getByText(/permanently deleted/i)).toBeInTheDocument();
   });
 
+  it("shows retry and discard for failed jobs", async () => {
+    renderWithProviders(<ExportsListActions job={failedExportJob} />);
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Retry" }),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByRole("menuitem", { name: "Discard" }),
+    ).toBeInTheDocument();
+  });
+
+  it("retries a failed job and shows a success notification", async () => {
+    renderWithProviders(<ExportsListActions job={failedExportJob} />);
+    await user.click(screen.getByRole("button", { name: /actions for/i }));
+
+    await user.click(await screen.findByRole("menuitem", { name: "Retry" }));
+
+    expect(
+      await screen.findByText(/is being generated again/i),
+    ).toBeInTheDocument();
+  });
+
   it("opens cancel confirmation modal for processing jobs", async () => {
     renderWithProviders(<ExportsListActions job={processingExportJob} />);
     await user.click(screen.getByRole("button", { name: /actions for/i }));
diff --git a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
index d8f5678bd9..8ca9e3c72b 100644
--- a/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
+++ b/src/features/exports/components/ExportsListActions/ExportsListActions.tsx
@@ -7,6 +7,7 @@ import { useBoolean } from "usehooks-ts";
 import { useCancelExportJob } from "../../api/useCancelExportJob";
 import { useDiscardExportJob } from "../../api/useDiscardExportJob";
 import { useDownloadExportJob } from "../../api/useDownloadExportJob";
+import { useRetryExportJob } from "../../api/useRetryExportJob";
 import type { ExportJob } from "../../types/ExportJob";
 
 interface ExportsListActionsProps {
@@ -19,6 +20,7 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
   const { cancelExportJob: onCancel } = useCancelExportJob();
   const { discardExportJob: onDiscard } = useDiscardExportJob();
   const { downloadExportJob: onDownload } = useDownloadExportJob();
+  const { retryExportJob: onRetry } = useRetryExportJob();
 
   const {
     value: isDiscardModalOpen,
@@ -74,13 +76,35 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
     }
   };
 
-  const downloadActions =
-    job.status === "completed"
+  const handleRetry = async () => {
+    try {
+      await onRetry(job.id);
+      notify.success({
+        title: "TSV generation restarted",
+        message: `${job.name} is being generated again.`,
+      });
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  const downloadActions = job.download_ready
+    ? [
+        {
+          icon: "begin-downloading" as const,
+          label: "Download",
+          onClick: handleDownload,
+        },
+      ]
+    : [];
+
+  const retryActions =
+    job.status === "failed"
       ? [
           {
-            icon: "begin-downloading" as const,
-            label: "Download",
-            onClick: handleDownload,
+            icon: "restart" as const,
+            label: "Retry",
+            onClick: handleRetry,
           },
         ]
       : [];
@@ -105,7 +129,7 @@ const ExportsListActions: FC<ExportsListActionsProps> = ({ job }) => {
   return (
     <>
       <ListActions
-        actions={downloadActions}
+        actions={[...downloadActions, ...retryActions]}
         destructiveActions={destructiveActions}
         toggleAriaLabel={`Actions for ${job.name}`}
       />
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
index 27b7dbf57b..bc47fc53d8 100644
--- a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
@@ -36,7 +36,7 @@
 .orderInput {
   min-width: 0;
   text-align: center;
-  width: 3.5rem;
+  width: 5rem;
 }
 
 .orderInputWrapper {
@@ -72,10 +72,11 @@
 // Rendered via React portal on document.body to escape any parent transform/overflow.
 .dragOverlay {
   align-items: center;
-  background: #fff;
-  border: 2px solid #06c;
+  background: var(--vf-color-background-default, #fff);
+  border: 2px solid var(--vf-color-link-default, #06c);
   border-radius: 4px;
   box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
+  color: var(--vf-color-text-default, #000);
   display: inline-flex;
   font-size: 0.875rem;
   gap: $sph--small;
@@ -89,10 +90,10 @@
 }
 
 .dragOverlayBadge {
-  background: #f0f6ff;
-  border: 1px solid #b3d1f5;
+  background: var(--vf-color-background-information-default, #f0f6ff);
+  border: 1px solid var(--vf-color-border-information, #b3d1f5);
   border-radius: 2px;
-  color: #06c;
+  color: var(--vf-color-link-default, #06c);
   font-size: 0.75rem;
   font-weight: 600;
   min-width: 1.25rem;
@@ -116,5 +117,5 @@
 }
 
 .justMoved > :global(td) {
-  animation: flash-blue 1.5s ease-out forwards;
+  animation: flash-blue 0.15s ease-out forwards;
 }
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.tsx b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
index fc5958888b..1aee381dcf 100644
--- a/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
@@ -13,10 +13,12 @@ import type { CellProps, Column, Row, TableRowProps } from "react-table";
 import classes from "./SortableFieldList.module.scss";
 import type { ExportField } from "../../types/ExportForm";
 import { JUST_MOVED_HIGHLIGHT_MS, OVERLAY_CURSOR_OFFSET_PX } from "./constants";
+import { createTransparentDragImage } from "./helpers";
 import {
   useDragOverlayPosition,
   useFlipAnimation,
   usePendingFieldScroll,
+  useRestoreFocusAfterMove,
   useSortableFieldCleanup,
   useSortableFieldRefs,
   useSyncSortableFields,
@@ -29,6 +31,8 @@ interface ReorderRowData extends Record<string, unknown> {
   currentOrder: string;
 }
 
+const TRANSPARENT_DRAG_IMAGE = createTransparentDragImage();
+
 interface SortableFieldListProps {
   readonly fields: ExportField[];
   readonly onOrderChange: (fields: ExportField[]) => void;
@@ -49,6 +53,12 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
   const justMovedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rowRefsMap = useRef<Map<string, HTMLTableRowElement>>(new Map());
   const pendingScrollRef = useRef<string | null>(null);
+  // After a keyboard arrow-move, restore focus to the same-direction button on
+  // the moved row at its new position so the user can keep moving continuously.
+  const pendingFocusRef = useRef<{
+    fieldId: string;
+    direction: "up" | "down";
+  } | null>(null);
   const flipPositionsRef = useRef<Map<string, number>>(new Map());
   const pendingFlipRef = useRef(false);
   const flipRafIdsRef = useRef<number[]>([]);
@@ -143,12 +153,13 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
     setDraggingFieldId(fieldId);
     e.dataTransfer.effectAllowed = "move";
 
-    // Replace the browser's native (always semi-transparent) drag ghost with a
-    // 1×1 transparent canvas. We render our own fully-opaque overlay instead.
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    e.dataTransfer.setDragImage(canvas, 0, 0);
+    // Suppress the browser's native drag ghost. A preloaded transparent image
+    // is honored reliably across browsers (including macOS Chrome, where a
+    // detached 1×1 canvas is ignored and a globe icon is shown instead). We
+    // render our own fully-opaque overlay for the dragged row.
+    if (TRANSPARENT_DRAG_IMAGE) {
+      e.dataTransfer.setDragImage(TRANSPARENT_DRAG_IMAGE, 0, 0);
+    }
   }, []);
 
   const handleDragEnter = useCallback((index: number) => {
@@ -216,6 +227,7 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
       capturePositionsForFlip();
       newOrder[index - 1] = curr;
       newOrder[index] = prev;
+      pendingFocusRef.current = { fieldId: curr.id, direction: "up" };
       setOrderedFields(newOrder);
       setOrderDrafts({});
       triggerMoveEffect(curr.id);
@@ -234,6 +246,7 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
       capturePositionsForFlip();
       newOrder[index] = next;
       newOrder[index + 1] = curr;
+      pendingFocusRef.current = { fieldId: curr.id, direction: "down" };
       setOrderedFields(newOrder);
       setOrderDrafts({});
       triggerMoveEffect(curr.id);
@@ -242,6 +255,10 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
     [orderedFields, triggerMoveEffect, capturePositionsForFlip, onOrderChange],
   );
 
+  // Restore focus to the moved row's same-direction button after a keyboard
+  // arrow-move re-renders the list (see useRestoreFocusAfterMove).
+  useRestoreFocusAfterMove({ orderedFields, pendingFocusRef, rowRefsMap });
+
   const handleOrderInputChange = useCallback(
     (fieldIndex: number, value: string) => {
       setOrderDrafts((prev) => ({ ...prev, [fieldIndex]: value }));
diff --git a/src/features/exports/components/SortableFieldList/constants.ts b/src/features/exports/components/SortableFieldList/constants.ts
index 7062f2c751..0dcb4de028 100644
--- a/src/features/exports/components/SortableFieldList/constants.ts
+++ b/src/features/exports/components/SortableFieldList/constants.ts
@@ -1,3 +1,10 @@
 export const OVERLAY_CURSOR_OFFSET_PX = 12;
-export const JUST_MOVED_HIGHLIGHT_MS = 1500;
+export const JUST_MOVED_HIGHLIGHT_MS = 150;
 export const FLIP_TRANSITION_CLEANUP_MS = 300;
+
+// A fully-transparent 1×1 GIF. Used as the native drag image so the browser
+// doesn't draw its own ghost (on macOS Chrome an empty/detached canvas is
+// ignored and a globe/link icon is shown instead). We render our own
+// fully-opaque overlay for the dragged row.
+export const TRANSPARENT_GIF_DATA_URI =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
diff --git a/src/features/exports/components/SortableFieldList/helpers.ts b/src/features/exports/components/SortableFieldList/helpers.ts
new file mode 100644
index 0000000000..1e6a1056b9
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/helpers.ts
@@ -0,0 +1,15 @@
+import { TRANSPARENT_GIF_DATA_URI } from "./constants";
+
+// Builds the transparent image used as the native HTML5 drag image so the
+// browser doesn't draw its own drag ghost. Returns null in non-DOM
+// environments (e.g. SSR / unit tests without `Image`). Intended to be called
+// once at module load and reused — the browser decodes the data URI eagerly.
+export const createTransparentDragImage = (): HTMLImageElement | null => {
+  if (typeof Image === "undefined") {
+    return null;
+  }
+
+  const image = new Image();
+  image.src = TRANSPARENT_GIF_DATA_URI;
+  return image;
+};
diff --git a/src/features/exports/components/SortableFieldList/hooks/index.ts b/src/features/exports/components/SortableFieldList/hooks/index.ts
index 37d406692a..9be7b91a36 100644
--- a/src/features/exports/components/SortableFieldList/hooks/index.ts
+++ b/src/features/exports/components/SortableFieldList/hooks/index.ts
@@ -1,6 +1,7 @@
 export { useDragOverlayPosition } from "./useDragOverlayPosition";
 export { useFlipAnimation } from "./useFlipAnimation";
 export { usePendingFieldScroll } from "./usePendingFieldScroll";
+export { useRestoreFocusAfterMove } from "./useRestoreFocusAfterMove";
 export { useSortableFieldCleanup } from "./useSortableFieldCleanup";
 export { useSortableFieldRefs } from "./useSortableFieldRefs";
 export { useSyncSortableFields } from "./useSyncSortableFields";
diff --git a/src/features/exports/components/SortableFieldList/hooks/useRestoreFocusAfterMove.ts b/src/features/exports/components/SortableFieldList/hooks/useRestoreFocusAfterMove.ts
new file mode 100644
index 0000000000..4110bec2e5
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/hooks/useRestoreFocusAfterMove.ts
@@ -0,0 +1,38 @@
+import { useEffect, type RefObject } from "react";
+import type { ExportField } from "../../../types/ExportForm";
+
+interface PendingFocus {
+  fieldId: string;
+  direction: "up" | "down";
+}
+
+export const useRestoreFocusAfterMove = ({
+  orderedFields,
+  pendingFocusRef,
+  rowRefsMap,
+}: {
+  readonly orderedFields: ExportField[];
+  readonly pendingFocusRef: RefObject<PendingFocus | null>;
+  readonly rowRefsMap: RefObject<Map<string, HTMLTableRowElement>>;
+}) => {
+  // Restore focus to the moved row's same-direction button after the reorder
+  // re-renders, unless that button is now disabled (e.g. the row reached the
+  // top/bottom). Canonical's Button stays focusable and signals disabled via
+  // aria-disabled, so we check that attribute explicitly.
+  useEffect(() => {
+    const pending = pendingFocusRef.current;
+    if (!pending) return;
+    pendingFocusRef.current = null;
+
+    const row = rowRefsMap.current.get(pending.fieldId);
+    const label = orderedFields.find((f) => f.id === pending.fieldId)?.label;
+    if (!row || !label) return;
+
+    const button = row.querySelector<HTMLButtonElement>(
+      `button[aria-label="Move ${label} ${pending.direction}"]`,
+    );
+    if (button && button.getAttribute("aria-disabled") !== "true") {
+      button.focus();
+    }
+  }, [orderedFields, pendingFocusRef, rowRefsMap]);
+};
diff --git a/src/features/exports/constants.ts b/src/features/exports/constants.ts
index 2cc645d9ce..83b1bf0294 100644
--- a/src/features/exports/constants.ts
+++ b/src/features/exports/constants.ts
@@ -1 +1,3 @@
 export const EXPORT_JOBS_POLL_INTERVAL_MS = 5000;
+
+export const MIN_SERVER_ERROR_STATUS = 500;
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
index 0dd4bb1635..aa56ec48bb 100644
--- a/src/features/exports/helpers.test.ts
+++ b/src/features/exports/helpers.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import {
+  buildExportQuery,
   hasProcessingExportJobs,
   getExportScope,
   getStatusLabel,
@@ -12,6 +13,36 @@ import {
   processingExportJob,
 } from "@/tests/mocks/exports";
 
+describe("buildExportQuery", () => {
+  const FIRST_ID = 11;
+  const SECOND_ID = 42;
+
+  it("returns the trimmed query when there is no selection", () => {
+    expect(buildExportQuery({ query: "  name:prod  ", selectedIds: [] })).toBe(
+      "name:prod",
+    );
+  });
+
+  it("returns an empty string when there is no query or selection", () => {
+    expect(buildExportQuery({})).toBe("");
+  });
+
+  it("builds an id-only query when there is no base query", () => {
+    expect(buildExportQuery({ selectedIds: [1, 2, 3] })).toBe(
+      "id:1 OR id:2 OR id:3",
+    );
+  });
+
+  it("uses only the selected ids when both a query and ids are provided", () => {
+    expect(
+      buildExportQuery({
+        query: "tag:server archived:false",
+        selectedIds: [FIRST_ID, SECOND_ID],
+      }),
+    ).toBe(`id:${FIRST_ID} OR id:${SECOND_ID}`);
+  });
+});
+
 describe("getExportScope", () => {
   const selectionForms = ["selected activity", "selected activities"] as const;
 
diff --git a/src/features/exports/helpers.ts b/src/features/exports/helpers.ts
index 19f5dba4eb..b3e8a3ce98 100644
--- a/src/features/exports/helpers.ts
+++ b/src/features/exports/helpers.ts
@@ -1,6 +1,20 @@
 import { pluralize } from "@/utils/_helpers";
 import type { ExportJob } from "./types/ExportJob";
 
+export const buildExportQuery = ({
+  query,
+  selectedIds,
+}: {
+  query?: string;
+  selectedIds?: number[];
+}): string => {
+  if (selectedIds?.length) {
+    return selectedIds.map((id) => `id:${id}`).join(" OR ");
+  }
+
+  return query?.trim() ?? "";
+};
+
 export const getExportScope = ({
   query,
   selectedCount,
diff --git a/src/features/exports/index.ts b/src/features/exports/index.ts
index 5a4362ceef..de7cd4b04f 100644
--- a/src/features/exports/index.ts
+++ b/src/features/exports/index.ts
@@ -1,6 +1,12 @@
 export { default as ExportsContainer } from "./components/ExportsContainer";
 export { default as ExportDetailsSidePanel } from "./components/ExportDetailsSidePanel";
+export { default as ExportForm } from "./components/ExportForm";
 export { default as SortableFieldList } from "./components/SortableFieldList";
-export { getExportScope } from "./helpers";
+export { buildExportQuery, getExportScope } from "./helpers";
 export type { ExportJob } from "./types/ExportJob";
-export type { ExportField, ExportFieldGroup } from "./types/ExportForm";
+export type {
+  ExportField,
+  ExportFieldGroup,
+  ExportFormValues,
+  StepIndex,
+} from "./types/ExportForm";
diff --git a/src/features/exports/types/ExportForm.ts b/src/features/exports/types/ExportForm.ts
index db8c13fec7..baaac6c76e 100644
--- a/src/features/exports/types/ExportForm.ts
+++ b/src/features/exports/types/ExportForm.ts
@@ -8,3 +8,11 @@ export interface ExportFieldGroup {
   key: string;
   fields: readonly ExportField[];
 }
+
+export type StepIndex = 0 | 1;
+
+export interface ExportFormValues {
+  name: string;
+  selectedFieldIds: string[];
+  retainUntil: string;
+}
diff --git a/src/features/instances/api/useExportInstancesTsv.ts b/src/features/instances/api/useExportInstancesTsv.ts
index 14135347df..1f599d9afb 100644
--- a/src/features/instances/api/useExportInstancesTsv.ts
+++ b/src/features/instances/api/useExportInstancesTsv.ts
@@ -6,9 +6,9 @@ import type { InstancesExportJob } from "../types/InstancesExportJob";
 import type { InstanceListParams } from "../helpers";
 
 interface CreateInstancesExportJobParams extends InstanceListParams {
-  name: string;
-  selected_field_ids: string[];
-  retain_until: string;
+  readonly name: string;
+  readonly selected_field_ids: string[];
+  readonly retain_until: string;
 }
 
 export const useExportInstancesTsv = () => {
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss b/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
deleted file mode 100644
index 77b9e12dfd..0000000000
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.module.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "vanilla-framework/scss/settings_colors";
-@import "vanilla-framework/scss/settings_spacing";
-
-.description {
-  margin-bottom: $spv--large;
-}
-
-.stepOneFields {
-  display: grid;
-  gap: $spv--medium;
-  margin-bottom: $spv--large;
-}
-
-.optionList {
-  display: grid;
-  gap: $sph--small;
-}
-
-.emptyState {
-  color: $colors--theme--text-muted;
-  margin-top: $spv--small;
-}
-
-:global(.p-accordion__tab) {
-  padding-right: $sph--x-large !important;
-}
-
-:global(.p-accordion__tab)::before {
-  margin-right: 0 !important;
-  position: absolute !important;
-  right: 1.5rem !important;
-  top: 50% !important;
-  transform: translateY(-50%) !important;
-}
-
-:global(.p-accordion__tab[aria-expanded="false"])::before {
-  transform: translateY(-50%) rotate(-90deg) !important;
-}
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
index bcc295adb5..4e2169f4c2 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -22,7 +22,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -58,7 +57,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -80,7 +78,7 @@ describe("InstancesExportForm", () => {
     expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
-  it("filters attributes by field name without matching group titles", async () => {
+  it("filters attributes by field name", async () => {
     const user = userEvent.setup();
     renderWithProviders(
       <InstancesExportForm
@@ -90,7 +88,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -106,7 +103,7 @@ describe("InstancesExportForm", () => {
     ).not.toBeInTheDocument();
 
     await user.clear(search);
-    await user.type(search, "primary");
+    await user.type(search, "no-such-attribute");
 
     expect(
       screen.getByText("No attributes match your search."),
@@ -116,6 +113,33 @@ describe("InstancesExportForm", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("matches a category name and shows all of its attributes", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+      />,
+    );
+
+    const search = screen.getByRole("searchbox", { name: "Search attributes" });
+    await user.type(search, "primary");
+
+    // The category title matches, so the whole group is shown including fields
+    // whose labels do not contain the search term.
+    await openAttributeGroup(user, /primary identity/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Instance name" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Hostname" }),
+    ).toBeInTheDocument();
+  });
+
   it("shows attribute validation after clearing every pre-selected field", async () => {
     const user = userEvent.setup();
     renderWithProviders(
@@ -126,7 +150,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -160,7 +183,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -199,7 +221,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={1}
       />,
     );
 
@@ -221,6 +242,42 @@ describe("InstancesExportForm", () => {
     expect(orderInput).toHaveValue(1);
   });
 
+  it("restores focus to the move button after a keyboard reorder so moves can be repeated", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <InstancesExportForm
+        exportParams={{
+          query: "name:prod",
+          archived_only: false,
+          wsl_children: false,
+          wsl_parents: false,
+        }}
+      />,
+    );
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Weekly export",
+    );
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    const [firstDownButton] = screen.getAllByRole("button", {
+      name: /move .* down/i,
+    });
+    const downLabel = firstDownButton?.getAttribute("aria-label") ?? "";
+
+    await user.click(firstDownButton as HTMLElement);
+
+    // The moved row's own "down" button regains focus at its new position so
+    // the user can keep pressing to move it further down.
+    const focusedDownButton = screen.getByRole("button", { name: downLabel });
+    expect(focusedDownButton).toHaveFocus();
+
+    // A second move keeps focus on the same button (continuous movement).
+    await user.click(focusedDownButton);
+    expect(screen.getByRole("button", { name: downLabel })).toHaveFocus();
+  });
+
   it("queues an export and shows a success notification with a status action", async () => {
     const user = userEvent.setup();
     renderWithProviders(
@@ -231,7 +288,6 @@ describe("InstancesExportForm", () => {
           wsl_children: false,
           wsl_parents: false,
         }}
-        instanceCount={8}
         selectedInstanceIds={[1, 2]}
       />,
     );
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index 17a92f0283..b11321802c 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -1,45 +1,30 @@
-import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
-import { INPUT_DATE_FORMAT } from "@/constants";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import useSidePanel from "@/hooks/useSidePanel";
 import usePageParams from "@/hooks/usePageParams";
 import { ROUTES } from "@/libs/routes";
-import { getFormikError } from "@/utils/formikErrors";
 import {
-  Accordion,
-  CheckboxInput,
-  Form,
-  Input,
-} from "@canonical/react-components";
-import { useFormik } from "formik";
+  buildExportQuery,
+  ExportForm,
+  getExportScope,
+  type ExportField,
+  type ExportFormValues,
+} from "@/features/exports";
 import moment from "moment";
-import { useCallback, useMemo, useState, type FC } from "react";
+import type { FC } from "react";
 import { useNavigate } from "react-router";
 import { useExportInstancesTsv } from "../../api/useExportInstancesTsv";
 import type { InstanceListParams } from "../../helpers";
-import classes from "./InstancesExportForm.module.scss";
-import { EXPORT_FIELD_GROUPS, VALIDATION_SCHEMA } from "./constants";
-import { buildExportQuery, getInitialValues } from "./helpers";
-import type {
-  ExportField,
-  InstancesExportFormValues,
-  StepIndex,
-} from "./types";
-import classNames from "classnames";
-import { getExportScope, SortableFieldList } from "@/features/exports";
+import { EXPORT_FIELD_GROUPS } from "./constants";
+import { getInitialValues } from "./helpers";
 
 interface InstancesExportFormProps {
   readonly exportParams: InstanceListParams;
-  readonly instanceCount: number | undefined;
-  readonly selectedInstanceCount?: number;
   readonly selectedInstanceIds?: number[];
 }
 
 const InstancesExportForm: FC<InstancesExportFormProps> = ({
   exportParams,
-  instanceCount: _instanceCount,
-  selectedInstanceCount: _selectedInstanceCount,
   selectedInstanceIds,
 }) => {
   const { closeSidePanel } = useSidePanel();
@@ -48,248 +33,63 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
   const debug = useDebug();
   const { exportInstancesTsv, isExportInstancesTsvLoading } =
     useExportInstancesTsv();
-  const [step, setStep] = useState<StepIndex>(0);
-  const [attributeSearch, setAttributeSearch] = useState("");
-  const [orderedFields, setOrderedFields] = useState<ExportField[]>([]);
   const { disabledColumns } = usePageParams();
 
-  const handleBack = () => {
-    setStep(0);
-  };
-
-  const formik = useFormik<InstancesExportFormValues>({
-    initialValues: getInitialValues(disabledColumns),
-    validationSchema: VALIDATION_SCHEMA,
-    onSubmit: async (values) => {
-      const selectedFields = EXPORT_FIELD_GROUPS.flatMap(
-        (group) => group.fields,
-      ).filter((field) => values.selectedFieldIds.includes(field.id));
-
-      if (step === 0) {
-        setOrderedFields(selectedFields);
-        setStep(1);
-        return;
-      }
+  const handleGenerate = async ({
+    values,
+    fieldsToExport,
+  }: {
+    values: ExportFormValues;
+    fieldsToExport: ExportField[];
+  }) => {
+    const query = buildExportQuery({
+      query: exportParams.query,
+      selectedIds: selectedInstanceIds,
+    });
 
-      const fieldsToExport = orderedFields.length
-        ? orderedFields
-        : selectedFields;
-      const query = buildExportQuery({
+    try {
+      const response = await exportInstancesTsv({
+        name: values.name.trim(),
+        query,
+        archived_only: exportParams.archived_only,
+        wsl_children: exportParams.wsl_children,
+        wsl_parents: exportParams.wsl_parents,
+        selected_field_ids: fieldsToExport.map((field) => field.id),
+        retain_until: moment(values.retainUntil).toISOString(),
+      });
+      const job = response.data;
+      const exportScope = getExportScope({
         query: exportParams.query,
-        selectedInstanceIds,
+        selectedCount: selectedInstanceIds?.length,
+        selectionForms: ["selected instance", "selected instances"],
       });
 
-      try {
-        const response = await exportInstancesTsv({
-          name: values.name.trim(),
-          query,
-          archived_only: exportParams.archived_only,
-          wsl_children: exportParams.wsl_children,
-          wsl_parents: exportParams.wsl_parents,
-          selected_field_ids: fieldsToExport.map((field) => field.id),
-          retain_until: moment(values.retainUntil).toISOString(),
-        });
-        const job = response.data;
-        const exportScope = getExportScope({
-          query: exportParams.query,
-          selectedCount: selectedInstanceIds?.length,
-          selectionForms: ["selected instance", "selected instances"],
-        });
-
-        closeSidePanel();
-        notify.success({
-          title: "TSV export in progress",
-          message: `Your instances export "${values.name.trim()}"${exportScope} is being generated.`,
-          actions: [
-            {
-              label: "View export status",
-              onClick: () =>
-                navigate(
-                  ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
-                ),
-            },
-          ],
-        });
-      } catch (error) {
-        debug(error);
-      }
-    },
-  });
-
-  const toggleField = useCallback(
-    (fieldId: string) => {
-      const nextSelectedFieldIds = formik.values.selectedFieldIds.includes(
-        fieldId,
-      )
-        ? formik.values.selectedFieldIds.filter((id) => id !== fieldId)
-        : [...formik.values.selectedFieldIds, fieldId];
-
-      void formik.setFieldTouched("selectedFieldIds", true, false);
-      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
-    },
-    [formik],
-  );
-
-  const toggleGroupSelect = useCallback(
-    (groupFields: readonly ExportField[]) => {
-      const groupIds = groupFields.map((field) => field.id);
-      const allSelected = groupIds.every((id) =>
-        formik.values.selectedFieldIds.includes(id),
-      );
-
-      const nextSelectedFieldIds = allSelected
-        ? formik.values.selectedFieldIds.filter((id) => !groupIds.includes(id))
-        : [...new Set([...formik.values.selectedFieldIds, ...groupIds])];
-
-      void formik.setFieldTouched("selectedFieldIds", true, false);
-      void formik.setFieldValue("selectedFieldIds", nextSelectedFieldIds);
-    },
-    [formik],
-  );
-
-  const filteredFieldGroups = useMemo(() => {
-    const normalizedSearch = attributeSearch.trim().toLowerCase();
-
-    if (!normalizedSearch) {
-      return EXPORT_FIELD_GROUPS;
+      closeSidePanel();
+      notify.success({
+        title: "TSV export in progress",
+        message: `Your instances export "${values.name.trim()}"${exportScope} is being generated.`,
+        actions: [
+          {
+            label: "View export status",
+            onClick: () =>
+              navigate(
+                ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+              ),
+          },
+        ],
+      });
+    } catch (error) {
+      debug(error);
     }
-
-    return EXPORT_FIELD_GROUPS.flatMap((group) => {
-      const matchingFields = group.fields.filter((field) =>
-        field.label.toLowerCase().includes(normalizedSearch),
-      );
-
-      if (!matchingFields.length) {
-        return [];
-      }
-
-      return [{ ...group, fields: matchingFields }];
-    });
-  }, [attributeSearch]);
-
-  const accordionSections = filteredFieldGroups.map((group) => {
-    const groupIds = group.fields.map((field) => field.id);
-    const allSelected = groupIds.every((id) =>
-      formik.values.selectedFieldIds.includes(id),
-    );
-    const someSelected =
-      !allSelected &&
-      groupIds.some((id) => formik.values.selectedFieldIds.includes(id));
-
-    return {
-      key: group.key,
-      title: (
-        <CheckboxInput
-          label={group.title}
-          checked={allSelected}
-          indeterminate={someSelected}
-          aria-label={`${group.title} select all`}
-          onChange={() => {
-            toggleGroupSelect(group.fields);
-          }}
-        />
-      ),
-      content: (
-        <div className={classes.optionList}>
-          {group.fields.map((field) => (
-            <CheckboxInput
-              key={field.id}
-              checked={formik.values.selectedFieldIds.includes(field.id)}
-              label={field.label}
-              onChange={() => {
-                toggleField(field.id);
-              }}
-            />
-          ))}
-        </div>
-      ),
-    };
-  });
-
-  const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
-
-  const stepContent =
-    step === 0 ? (
-      <>
-        <div className={classes.stepOneFields}>
-          <Input
-            type="text"
-            label="Export name"
-            required
-            error={getFormikError(formik, "name")}
-            {...formik.getFieldProps("name")}
-          />
-          <Input
-            type="date"
-            label="Keep until"
-            required
-            min={moment().add(1, "day").format(INPUT_DATE_FORMAT)}
-            max={moment().add(100, "years").format(INPUT_DATE_FORMAT)}
-            error={getFormikError(formik, "retainUntil")}
-            {...formik.getFieldProps("retainUntil")}
-          />
-          <Input
-            type="search"
-            label="Search attributes"
-            placeholder="Search attributes"
-            value={attributeSearch}
-            onChange={(event) => {
-              setAttributeSearch(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-              }
-            }}
-          />
-        </div>
-        <div className={classNames({ "is-error": !!selectedFieldIdsError })}>
-          {!!selectedFieldIdsError && (
-            <p className="p-form-validation__message">
-              {selectedFieldIdsError}
-            </p>
-          )}
-          {filteredFieldGroups.length ? (
-            <Accordion sections={accordionSections} titleElement="h5" />
-          ) : (
-            <p className={classes.emptyState}>
-              No attributes match your search.
-            </p>
-          )}
-        </div>
-      </>
-    ) : (
-      <SortableFieldList
-        fields={orderedFields}
-        onOrderChange={setOrderedFields}
-      />
-    );
+  };
 
   return (
-    <Form noValidate onSubmit={formik.handleSubmit}>
-      {step === 0 && (
-        <p className={classes.description}>
-          Name your export, select the attributes you want to include, and
-          filter the list if needed.
-        </p>
-      )}
-
-      {stepContent}
-
-      <SidePanelFormButtons
-        hasBackButton={step === 1}
-        onBackButtonPress={step === 1 ? handleBack : undefined}
-        submitButtonDisabled={
-          (step === 0 &&
-            (!formik.values.name.trim() ||
-              formik.values.selectedFieldIds.length === 0)) ||
-          isExportInstancesTsvLoading ||
-          formik.isSubmitting
-        }
-        submitButtonText={step === 0 ? "Next" : "Generate TSV"}
-        onCancel={closeSidePanel}
-      />
-    </Form>
+    <ExportForm
+      fieldGroups={EXPORT_FIELD_GROUPS}
+      initialValues={getInitialValues(disabledColumns)}
+      isSubmitting={isExportInstancesTsvLoading}
+      onGenerate={handleGenerate}
+    />
   );
 };
 
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
index 4b6d8f87f1..8345041e53 100644
--- a/src/features/instances/components/InstancesExportForm/constants.ts
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -1,34 +1,13 @@
-import type { ExportFieldGroup, InstancesExportFormValues } from "./types";
+import type { ExportFieldGroup, ExportFormValues } from "@/features/exports";
 import { INPUT_DATE_FORMAT } from "@/constants";
 import moment from "moment";
-import * as Yup from "yup";
 
-export const INITIAL_VALUES: InstancesExportFormValues = {
+export const INITIAL_VALUES: ExportFormValues = {
   name: "",
   selectedFieldIds: [],
   retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };
 
-export const VALIDATION_SCHEMA = Yup.object().shape({
-  name: Yup.string().trim().required("This field is required"),
-  selectedFieldIds: Yup.array()
-    .of(Yup.string().required())
-    .min(1, "Select at least one attribute"),
-  retainUntil: Yup.string()
-    .required("This field is required")
-    .test(
-      "retain-until-future",
-      "Must be a date in the future",
-      (value) => !!value && moment(value).isAfter(moment().startOf("day")),
-    )
-    .test(
-      "retain-until-max",
-      "Must be within 100 years from today",
-      (value) =>
-        !!value && moment(value).isSameOrBefore(moment().add(100, "years")),
-    ),
-});
-
 export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
   {
     title: "Primary Identity",
diff --git a/src/features/instances/components/InstancesExportForm/helpers.test.ts b/src/features/instances/components/InstancesExportForm/helpers.test.ts
index e193900560..252ea70f61 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.test.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.test.ts
@@ -1,28 +1,42 @@
 import { describe, expect, it } from "vitest";
-import { buildExportQuery } from "./helpers";
+import { getInitialValues } from "./helpers";
 
-const FIRST_INSTANCE_ID = 11;
-const SECOND_INSTANCE_ID = 42;
-
-describe("buildExportQuery", () => {
-  it("returns the original query when there is no row selection", () => {
-    expect(
-      buildExportQuery({ query: "name:prod", selectedInstanceIds: [] }),
-    ).toBe("name:prod");
+describe("getInitialValues", () => {
+  it("selects every export field when no columns are disabled", () => {
+    expect(getInitialValues([]).selectedFieldIds).toEqual([
+      "title",
+      "status",
+      "upgrades_security",
+      "upgrades_regular",
+      "os",
+      "tags",
+      "availability_zone",
+      "ubuntu_pro",
+      "last_ping_time",
+    ]);
   });
 
-  it("builds an id-only query when there is no base query", () => {
-    expect(buildExportQuery({ selectedInstanceIds: [1, 2, 3] })).toBe(
-      "id:1 OR id:2 OR id:3",
-    );
+  it("omits fields mapped to disabled columns", () => {
+    expect(getInitialValues(["status", "tags"]).selectedFieldIds).toEqual([
+      "title",
+      "upgrades_security",
+      "upgrades_regular",
+      "os",
+      "availability_zone",
+      "ubuntu_pro",
+      "last_ping_time",
+    ]);
   });
 
-  it("uses only the selected instance ids when both a query and ids are provided", () => {
-    expect(
-      buildExportQuery({
-        query: "tag:server archived:false",
-        selectedInstanceIds: [FIRST_INSTANCE_ID, SECOND_INSTANCE_ID],
-      }),
-    ).toBe(`id:${FIRST_INSTANCE_ID} OR id:${SECOND_INSTANCE_ID}`);
+  it("omits both export fields for a column mapped to multiple fields", () => {
+    expect(getInitialValues(["upgrades"]).selectedFieldIds).toEqual([
+      "title",
+      "status",
+      "os",
+      "tags",
+      "availability_zone",
+      "ubuntu_pro",
+      "last_ping_time",
+    ]);
   });
 });
diff --git a/src/features/instances/components/InstancesExportForm/helpers.ts b/src/features/instances/components/InstancesExportForm/helpers.ts
index 87e4b75fe3..63e262df8a 100644
--- a/src/features/instances/components/InstancesExportForm/helpers.ts
+++ b/src/features/instances/components/InstancesExportForm/helpers.ts
@@ -1,5 +1,5 @@
+import type { ExportFormValues } from "@/features/exports";
 import { INITIAL_VALUES } from "./constants";
-import type { InstancesExportFormValues } from "./types";
 
 const ACCESSOR_TO_EXPORT_FIELD_ID: Record<string, string | string[]> = {
   title: "title",
@@ -14,23 +14,9 @@ const ACCESSOR_TO_EXPORT_FIELD_ID: Record<string, string | string[]> = {
 
 export const getInitialValues = (
   disabledColumns: string[],
-): InstancesExportFormValues => ({
+): ExportFormValues => ({
   ...INITIAL_VALUES,
   selectedFieldIds: Object.entries(ACCESSOR_TO_EXPORT_FIELD_ID)
     .filter(([accessor]) => !disabledColumns.includes(accessor))
     .flatMap(([, value]) => (Array.isArray(value) ? value : [value])),
 });
-
-export const buildExportQuery = ({
-  query,
-  selectedInstanceIds,
-}: {
-  query?: string;
-  selectedInstanceIds?: number[];
-}) => {
-  if (selectedInstanceIds?.length) {
-    return `id:${selectedInstanceIds.join(" OR id:")}`;
-  }
-
-  return query?.trim();
-};
diff --git a/src/features/instances/components/InstancesExportForm/types.ts b/src/features/instances/components/InstancesExportForm/types.ts
deleted file mode 100644
index 77bc534c61..0000000000
--- a/src/features/instances/components/InstancesExportForm/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type { ExportField, ExportFieldGroup } from "@/features/exports";
-
-export type StepIndex = 0 | 1;
-
-export interface InstancesExportFormValues {
-  name: string;
-  selectedFieldIds: string[];
-  retainUntil: string;
-}
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index 53a7b9e085..e8b6394eb6 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -24,12 +24,12 @@ const ubuntuProInfo = {
 const MENU_LABELS = ["Operations", "Grouping", "Ubuntu Pro"];
 
 const OPERATIONS_LABELS = [
-  "Export",
   "Shut down",
   "Restart",
   "Remove from Landscape",
   "Upgrade",
   "Upgrade distributions",
+  "Export selection as TSV",
   "View report",
   "Run script",
 ];
@@ -254,7 +254,7 @@ describe("InstancesPageActions", () => {
         screen.getByRole("button", { name: MENU_LABELS[0] }),
       );
       await userEvent.click(
-        screen.getByRole("menuitem", { name: /^export$/i }),
+        screen.getByRole("menuitem", { name: /^export selection as tsv$/i }),
       );
 
       expect(
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
index dec5c20ede..b4024ddce3 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx
@@ -211,10 +211,6 @@ const InstancesPageActions = memo(function InstancesPageActions({
       <Suspense fallback={<LoadingState />}>
         <InstancesExportForm
           exportParams={exportParams}
-          instanceCount={instanceCount}
-          selectedInstanceCount={
-            isAllSelected ? undefined : selectedInstances.length
-          }
           selectedInstanceIds={
             isAllSelected ? undefined : selectedInstances.map(({ id }) => id)
           }
@@ -293,13 +289,13 @@ const InstancesPageActions = memo(function InstancesPageActions({
     {
       children: (
         <>
-          <Icon name="export" />
-          <span>Export</span>
+          <Icon name="restart" />
+          <span>Restart</span>
         </>
       ),
-      onClick: handleExport,
+      onClick: openRebootModal,
       hasIcon: true,
-      disabled: !hasInstancesToExport,
+      disabled: !hasSelectedInstances,
     },
     {
       children: (
@@ -315,24 +311,16 @@ const InstancesPageActions = memo(function InstancesPageActions({
     {
       children: (
         <>
-          <Icon name="restart" />
-          <span>Restart</span>
-        </>
-      ),
-      onClick: openRebootModal,
-      hasIcon: true,
-      disabled: !hasSelectedInstances,
-    },
-    {
-      children: (
-        <>
-          <Icon name="delete" />
-          <span>Remove from Landscape</span>
+          <Icon name="code" />
+          <span>Run script</span>
         </>
       ),
-      onClick: openRemoveModal,
+      onClick: handleRunScript,
       hasIcon: true,
-      disabled: !hasSelectedInstances,
+      disabled:
+        !hasSelectedInstances ||
+        isGettingInstances ||
+        selectedInstances.every((instance) => !getFeatures(instance).scripts),
     },
     {
       children: (
@@ -362,6 +350,28 @@ const InstancesPageActions = memo(function InstancesPageActions({
         isGettingInstances ||
         !selectedInstances.some((instance) => instance.has_release_upgrades),
     },
+    {
+      children: (
+        <>
+          <Icon name="delete" />
+          <span>Remove from Landscape</span>
+        </>
+      ),
+      onClick: openRemoveModal,
+      hasIcon: true,
+      disabled: !hasSelectedInstances,
+    },
+    {
+      children: (
+        <>
+          <Icon name="export" />
+          <span>Export selection as TSV</span>
+        </>
+      ),
+      onClick: handleExport,
+      hasIcon: true,
+      disabled: !hasInstancesToExport,
+    },
     REPORT_VIEW_ENABLED
       ? {
           children: (
@@ -375,20 +385,6 @@ const InstancesPageActions = memo(function InstancesPageActions({
           disabled: !hasSelectedInstances,
         }
       : {},
-    {
-      children: (
-        <>
-          <Icon name="code" />
-          <span>Run script</span>
-        </>
-      ),
-      onClick: handleRunScript,
-      hasIcon: true,
-      disabled:
-        !hasSelectedInstances ||
-        isGettingInstances ||
-        selectedInstances.every((instance) => !getFeatures(instance).scripts),
-    },
   ].filter((link) => link.children);
 
   return (
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 9ec905f227..7ce442895c 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -42,6 +42,20 @@ export const failedExportJob: ExportJob = {
   query: null,
 };
 
+export const newExportJob: ExportJob = {
+  id: "job-new",
+  name: "Instances export 2026-06-03 14:12:00",
+  filename: "instances-export-4.tsv",
+  row_count: 0,
+  type: "instance",
+  created_at: "2026-06-03T12:12:00.000Z",
+  status: "processing",
+  progress: 0,
+  download_ready: false,
+  retain_until: "2029-06-03T12:12:00.000Z",
+  query: "tag:production",
+};
+
 export const processingActivitiesExportJob: ExportJob = {
   id: "act-job-processing",
   name: "Activities export 2026-06-03 14:10:00",
@@ -83,3 +97,15 @@ export const failedActivitiesExportJob: ExportJob = {
   retain_until: "2029-06-03T12:06:00.000Z",
   query: null,
 };
+
+// Default fixtures served by the MSW exports handlers so the Exports UI is fully
+// browsable in dev mode (`VITE_MSW_ENABLED`) and resolvable by id in tests.
+export const DEFAULT_EXPORT_JOBS: ExportJob[] = [
+  processingExportJob,
+  completedExportJob,
+  failedExportJob,
+  newExportJob,
+  processingActivitiesExportJob,
+  completedActivitiesExportJob,
+  failedActivitiesExportJob,
+];
diff --git a/src/tests/server/handlers/exports.ts b/src/tests/server/handlers/exports.ts
index 880abe4482..97564376fe 100644
--- a/src/tests/server/handlers/exports.ts
+++ b/src/tests/server/handlers/exports.ts
@@ -2,6 +2,7 @@ import { API_URL } from "@/constants";
 import type { ExportJob } from "@/features/exports";
 import { PATHS } from "@/libs/routes";
 import { getEndpointStatus } from "@/tests/controllers/controller";
+import { DEFAULT_EXPORT_JOBS } from "@/tests/mocks/exports";
 import { http, HttpResponse } from "msw";
 import {
   createEndpointStatusError,
@@ -51,13 +52,15 @@ export default [
         );
       }
     }
-    return HttpResponse.json({ count: 0, results: [] });
+    return HttpResponse.json(
+      generateExportJobsResponse(request, DEFAULT_EXPORT_JOBS),
+    );
   }),
 
-  http.get(`${API_URL}${EXPORTS_PATH}/:jobId`, () => {
+  http.get(`${API_URL}${EXPORTS_PATH}/:jobId`, ({ params }) => {
     if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId`)) {
       const { status, response } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusNetworkError();
+      if (status === "error") return createEndpointStatusError();
       if (
         status === "variant" &&
         response &&
@@ -67,7 +70,29 @@ export default [
         return HttpResponse.json(response as unknown as ExportJob);
       }
     }
-    return new HttpResponse(null, { status: 404 });
+    const job = DEFAULT_EXPORT_JOBS.find((j) => j.id === params.jobId);
+    if (!job) {
+      return new HttpResponse(null, { status: 404 });
+    }
+    return HttpResponse.json(job);
+  }),
+
+  http.post(`${API_URL}${EXPORTS_PATH}/:jobId/retry`, ({ params }) => {
+    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/retry`)) {
+      const { status } = getEndpointStatus();
+      if (status === "error") return createEndpointStatusError();
+    }
+    const job = DEFAULT_EXPORT_JOBS.find((j) => j.id === params.jobId);
+    return HttpResponse.json(
+      {
+        ...(job ?? DEFAULT_EXPORT_JOBS[0]),
+        id: "job-new",
+        status: "processing",
+        progress: 0,
+        download_ready: false,
+      },
+      { status: 202 },
+    );
   }),
 
   http.post(`${API_URL}${EXPORTS_PATH}/:jobId/cancel`, () => {

From fc590c88ff1a5946dc97b013c8d6b4881d0cc3b3 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Wed, 24 Jun 2026 16:08:46 +0200
Subject: [PATCH 10/41] prettier fixes

---
 .../ActivitiesExportForm.test.tsx                 | 15 +++------------
 .../ExportDetailsSidePanel/ExportDetails.tsx      |  3 ++-
 .../ExportDetailsSidePanel.test.tsx               |  6 +++++-
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
index e6acfeca02..48c0cac2d3 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -66,10 +66,7 @@ describe("ActivitiesExportForm", () => {
   it("filters attributes by field name", async () => {
     const user = userEvent.setup();
     renderWithProviders(
-      <ActivitiesExportForm
-        {...defaultProps}
-        exportParams={{ query: "" }}
-      />,
+      <ActivitiesExportForm {...defaultProps} exportParams={{ query: "" }} />,
     );
 
     await user.type(
@@ -89,10 +86,7 @@ describe("ActivitiesExportForm", () => {
   it("moves to the review step and back without losing the selected field", async () => {
     const user = userEvent.setup();
     renderWithProviders(
-      <ActivitiesExportForm
-        {...defaultProps}
-        exportParams={{ query: "" }}
-      />,
+      <ActivitiesExportForm {...defaultProps} exportParams={{ query: "" }} />,
     );
 
     await user.type(
@@ -118,10 +112,7 @@ describe("ActivitiesExportForm", () => {
   it("queues an activities export and shows a success notification with a status action", async () => {
     const user = userEvent.setup();
     renderWithProviders(
-      <ActivitiesExportForm
-        {...defaultProps}
-        selectedActivityIds={[1, 2]}
-      />,
+      <ActivitiesExportForm {...defaultProps} selectedActivityIds={[1, 2]} />,
     );
 
     await user.type(
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index 05fbd53b25..37b520c1c3 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -123,7 +123,8 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
                 children: (
                   <>
                     <p>
-                      The export &quot;{job.name}&quot; is still being generated.
+                      The export &quot;{job.name}&quot; is still being
+                      generated.
                     </p>
                     <p>
                       Cancelling it will stop the generation and discard any
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
index a6c2a0711e..a5fa6dfd19 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
@@ -4,7 +4,11 @@ import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { expectLoadingState } from "@/tests/helpers";
-import { completedExportJob, processingExportJob, newExportJob } from "@/tests/mocks/exports";
+import {
+  completedExportJob,
+  processingExportJob,
+  newExportJob,
+} from "@/tests/mocks/exports";
 import ExportDetailsSidePanel from "./ExportDetailsSidePanel";
 
 const SIDE_PANEL_URL = "?sidePath=view&name=job-completed";

From d8993cc89f25ab756330474db415c0950819b0e2 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Wed, 24 Jun 2026 17:53:25 +0200
Subject: [PATCH 11/41] change export id to number

---
 .../ActivitiesExportForm/ActivitiesExportForm.tsx  |  5 ++++-
 src/features/exports/api/useCancelExportJob.ts     |  2 +-
 src/features/exports/api/useDiscardExportJob.ts    |  2 +-
 src/features/exports/api/useRetryExportJob.ts      |  9 ++++++---
 .../ExportDetailsSidePanel/ExportDetails.tsx       |  2 +-
 .../ExportDetailsSidePanel.test.tsx                |  8 ++++----
 .../exports/components/ExportsList/ExportsList.tsx |  2 +-
 src/features/exports/types/ExportJob.ts            |  2 +-
 .../InstancesExportForm/InstancesExportForm.tsx    |  5 ++++-
 src/tests/mocks/exports.ts                         | 14 +++++++-------
 src/tests/server/handlers/activity.ts              |  2 +-
 src/tests/server/handlers/exports.ts               |  6 +++---
 src/tests/server/handlers/instance.ts              |  2 +-
 13 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
index 93b0e16f9e..875e5be4c5 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.tsx
@@ -67,7 +67,10 @@ const ActivitiesExportForm: FC<ActivitiesExportFormProps> = ({
             label: "View export status",
             onClick: () =>
               navigate(
-                ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+                ROUTES.exports.root({
+                  sidePath: ["view"],
+                  name: String(job.id),
+                }),
               ),
           },
         ],
diff --git a/src/features/exports/api/useCancelExportJob.ts b/src/features/exports/api/useCancelExportJob.ts
index ce2b399dc9..ed90203191 100644
--- a/src/features/exports/api/useCancelExportJob.ts
+++ b/src/features/exports/api/useCancelExportJob.ts
@@ -10,7 +10,7 @@ export const useCancelExportJob = () => {
   const { mutateAsync } = useMutation<
     AxiosResponse<void>,
     AxiosError<ApiError>,
-    string
+    number
   >({
     mutationFn: async (jobId) => authFetch.post(`exports/${jobId}/cancel`),
     onSuccess: async () => {
diff --git a/src/features/exports/api/useDiscardExportJob.ts b/src/features/exports/api/useDiscardExportJob.ts
index 2f0889caa5..d40e08a645 100644
--- a/src/features/exports/api/useDiscardExportJob.ts
+++ b/src/features/exports/api/useDiscardExportJob.ts
@@ -10,7 +10,7 @@ export const useDiscardExportJob = () => {
   const { mutateAsync } = useMutation<
     AxiosResponse<void>,
     AxiosError<ApiError>,
-    string
+    number
   >({
     mutationFn: async (jobId) => authFetch.delete(`exports/${jobId}`),
     onSuccess: async () => {
diff --git a/src/features/exports/api/useRetryExportJob.ts b/src/features/exports/api/useRetryExportJob.ts
index 7bcd22a792..0125711e58 100644
--- a/src/features/exports/api/useRetryExportJob.ts
+++ b/src/features/exports/api/useRetryExportJob.ts
@@ -11,15 +11,18 @@ export const useRetryExportJob = () => {
   const { mutateAsync } = useMutation<
     AxiosResponse<ExportJob>,
     AxiosError<ApiError>,
-    string
+    number
   >({
     mutationFn: async (jobId) =>
       authFetch.post<ExportJob>(`exports/${jobId}/retry`),
     onSuccess: async (_, jobId) => {
       // Remove the old (failed) job from cache before invalidating so the
       // global QueryCache error handler doesn't fire when the backend returns
-      // 404 for the now-discarded job.
-      queryClient.removeQueries({ queryKey: ["all-export-jobs", jobId] });
+      // 404 for the now-discarded job. The detail query is keyed by the string
+      // URL param, so match that here.
+      queryClient.removeQueries({
+        queryKey: ["all-export-jobs", String(jobId)],
+      });
       await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
     },
   });
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index 37b520c1c3..f7260f8bd1 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -77,7 +77,7 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
   const handleRetry = async () => {
     try {
       const { data: newJob } = await onRetry(job.id);
-      setPageParams({ name: newJob.id });
+      setPageParams({ name: String(newJob.id) });
     } catch (error) {
       debug(error);
     }
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
index a5fa6dfd19..fe3283c4de 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.test.tsx
@@ -11,10 +11,10 @@ import {
 } from "@/tests/mocks/exports";
 import ExportDetailsSidePanel from "./ExportDetailsSidePanel";
 
-const SIDE_PANEL_URL = "?sidePath=view&name=job-completed";
-const PROCESSING_URL = "?sidePath=view&name=job-processing";
+const SIDE_PANEL_URL = "?sidePath=view&name=2";
+const PROCESSING_URL = "?sidePath=view&name=1";
 const LOADING_URL = "?sidePath=view&name=unknown";
-const FAILED_URL = "?sidePath=view&name=job-failed";
+const FAILED_URL = "?sidePath=view&name=3";
 
 describe("ExportDetailsSidePanel", () => {
   const user = userEvent.setup();
@@ -143,7 +143,7 @@ describe("ExportDetailsSidePanel", () => {
   it("shows the retry button for failed jobs", async () => {
     const failedJob = {
       ...completedExportJob,
-      id: "job-failed",
+      id: 3,
       status: "failed" as const,
       download_ready: false,
     };
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index 1afa49ff4e..55ccfdbaad 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -34,7 +34,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
             className="u-no-margin--bottom u-no-padding--top u-align-text--left"
             onClick={createPageParamsSetter({
               sidePath: ["view"],
-              name: row.original.job.id,
+              name: String(row.original.job.id),
             })}
           >
             {row.original.job.name}
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
index 1d6ad2f2dc..a5b2ef11a6 100644
--- a/src/features/exports/types/ExportJob.ts
+++ b/src/features/exports/types/ExportJob.ts
@@ -3,7 +3,7 @@ export type ExportJobType = "instance" | "activity";
 export type ExportJobStatus = "processing" | "completed" | "failed";
 
 export interface ExportJob {
-  id: string;
+  id: number;
   name: string;
   filename: string;
   type: ExportJobType;
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
index b11321802c..599253d64c 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.tsx
@@ -73,7 +73,10 @@ const InstancesExportForm: FC<InstancesExportFormProps> = ({
             label: "View export status",
             onClick: () =>
               navigate(
-                ROUTES.exports.root({ sidePath: ["view"], name: job.id }),
+                ROUTES.exports.root({
+                  sidePath: ["view"],
+                  name: String(job.id),
+                }),
               ),
           },
         ],
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 7ce442895c..fbd5c6fc54 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -1,7 +1,7 @@
 import type { ExportJob } from "@/features/exports";
 
 export const processingExportJob: ExportJob = {
-  id: "job-processing",
+  id: 1,
   name: "Instances export 2026-06-03 14:10:00",
   filename: "instances-export-1.tsv",
   row_count: 120,
@@ -15,7 +15,7 @@ export const processingExportJob: ExportJob = {
 };
 
 export const completedExportJob: ExportJob = {
-  id: "job-completed",
+  id: 2,
   name: "Instances export 2026-06-03 14:08:00",
   filename: "instances-export-2.tsv",
   row_count: 42,
@@ -29,7 +29,7 @@ export const completedExportJob: ExportJob = {
 };
 
 export const failedExportJob: ExportJob = {
-  id: "job-failed",
+  id: 3,
   name: "Instances export 2026-06-03 14:06:00",
   filename: "instances-export-3.tsv",
   row_count: 12,
@@ -43,7 +43,7 @@ export const failedExportJob: ExportJob = {
 };
 
 export const newExportJob: ExportJob = {
-  id: "job-new",
+  id: 4,
   name: "Instances export 2026-06-03 14:12:00",
   filename: "instances-export-4.tsv",
   row_count: 0,
@@ -57,7 +57,7 @@ export const newExportJob: ExportJob = {
 };
 
 export const processingActivitiesExportJob: ExportJob = {
-  id: "act-job-processing",
+  id: 5,
   name: "Activities export 2026-06-03 14:10:00",
   filename: "activities-export-1.tsv",
   row_count: 50,
@@ -71,7 +71,7 @@ export const processingActivitiesExportJob: ExportJob = {
 };
 
 export const completedActivitiesExportJob: ExportJob = {
-  id: "act-job-completed",
+  id: 6,
   name: "Activities export 2026-06-03 14:08:00",
   filename: "activities-export-2.tsv",
   row_count: 20,
@@ -85,7 +85,7 @@ export const completedActivitiesExportJob: ExportJob = {
 };
 
 export const failedActivitiesExportJob: ExportJob = {
-  id: "act-job-failed",
+  id: 7,
   name: "Activities export 2026-06-03 14:06:00",
   filename: "activities-export-3.tsv",
   row_count: 0,
diff --git a/src/tests/server/handlers/activity.ts b/src/tests/server/handlers/activity.ts
index 6ce419c0ed..e8b0f26d46 100644
--- a/src/tests/server/handlers/activity.ts
+++ b/src/tests/server/handlers/activity.ts
@@ -228,7 +228,7 @@ export default [
     }
     const body = (await request.json()) as Record<string, unknown>;
     const job: ExportJob = {
-      id: "act-job-new",
+      id: 8,
       name: typeof body.name === "string" ? body.name : "New activities export",
       filename: "activities-export.tsv",
       row_count: 0,
diff --git a/src/tests/server/handlers/exports.ts b/src/tests/server/handlers/exports.ts
index 97564376fe..cef2d1fae9 100644
--- a/src/tests/server/handlers/exports.ts
+++ b/src/tests/server/handlers/exports.ts
@@ -70,7 +70,7 @@ export default [
         return HttpResponse.json(response as unknown as ExportJob);
       }
     }
-    const job = DEFAULT_EXPORT_JOBS.find((j) => j.id === params.jobId);
+    const job = DEFAULT_EXPORT_JOBS.find((j) => String(j.id) === params.jobId);
     if (!job) {
       return new HttpResponse(null, { status: 404 });
     }
@@ -82,11 +82,11 @@ export default [
       const { status } = getEndpointStatus();
       if (status === "error") return createEndpointStatusError();
     }
-    const job = DEFAULT_EXPORT_JOBS.find((j) => j.id === params.jobId);
+    const job = DEFAULT_EXPORT_JOBS.find((j) => String(j.id) === params.jobId);
     return HttpResponse.json(
       {
         ...(job ?? DEFAULT_EXPORT_JOBS[0]),
-        id: "job-new",
+        id: 4,
         status: "processing",
         progress: 0,
         download_ready: false,
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index a06e6c64a1..84c7d96bba 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -662,7 +662,7 @@ export default [
     }
     const body = (await request.json()) as Record<string, unknown>;
     const job: ExportJob = {
-      id: "job-new",
+      id: 4,
       name: typeof body.name === "string" ? body.name : "New export",
       filename: "instances-export.tsv",
       row_count: 0,

From 594067baea16bdf8ccc375d5700e1fd78f12a58e Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Wed, 24 Jun 2026 18:19:33 +0200
Subject: [PATCH 12/41] fix eslint

---
 .../components/ActivitiesActions/ActivitiesActions.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
index 622f54fdfc..0bc35ce773 100644
--- a/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
+++ b/src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx
@@ -3,7 +3,7 @@ import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
 import usePageParams from "@/hooks/usePageParams";
 import useSidePanel from "@/hooks/useSidePanel";
-import { Button, ConfirmationButton, Icon } from "@canonical/react-components";
+import { Button, ConfirmationButton } from "@canonical/react-components";
 import { lazy, Suspense, type FC } from "react";
 import type { ActivityCommon } from "../../types";
 import { pluralize } from "@/utils/_helpers";

From a8f9c1f3a36d804ad395abc2d1794f99dcecfb25 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 11:26:30 -0700
Subject: [PATCH 13/41] add tsv export form and mock handler for reports

---
 src/features/reports/api/index.ts             |   1 +
 .../reports/api/useExportComplianceTsv.ts     |  35 +++++
 .../ReportExportForm/ReportExportForm.tsx     | 131 ++++++++++++++++++
 .../components/ReportExportForm/constants.ts  |  19 +++
 .../components/ReportExportForm/index.ts      |   2 +
 .../ReportForm/ReportForm.module.scss         |   6 -
 .../components/ReportForm/ReportForm.test.tsx | 100 -------------
 .../components/ReportForm/ReportForm.tsx      |  84 -----------
 .../reports/components/ReportForm/index.ts    |   1 -
 .../components/ReportView/ReportView.tsx      |  21 ++-
 src/features/reports/index.ts                 |   2 +-
 src/tests/mocks/exports.ts                    |  14 ++
 src/tests/server/handlers/instance.ts         |  21 +++
 13 files changed, 239 insertions(+), 198 deletions(-)
 create mode 100644 src/features/reports/api/useExportComplianceTsv.ts
 create mode 100644 src/features/reports/components/ReportExportForm/ReportExportForm.tsx
 create mode 100644 src/features/reports/components/ReportExportForm/constants.ts
 create mode 100644 src/features/reports/components/ReportExportForm/index.ts
 delete mode 100644 src/features/reports/components/ReportForm/ReportForm.module.scss
 delete mode 100644 src/features/reports/components/ReportForm/ReportForm.test.tsx
 delete mode 100644 src/features/reports/components/ReportForm/ReportForm.tsx
 delete mode 100644 src/features/reports/components/ReportForm/index.ts

diff --git a/src/features/reports/api/index.ts b/src/features/reports/api/index.ts
index b76152b6a4..37e3e3d67f 100644
--- a/src/features/reports/api/index.ts
+++ b/src/features/reports/api/index.ts
@@ -1,2 +1,3 @@
 export { useGetComplianceReport } from "./useGetComplianceReport";
 export type { GetComplianceReportParams } from "./useGetComplianceReport";
+export { useExportComplianceTsv } from "./useExportComplianceTsv";
diff --git a/src/features/reports/api/useExportComplianceTsv.ts b/src/features/reports/api/useExportComplianceTsv.ts
new file mode 100644
index 0000000000..935a88d5d5
--- /dev/null
+++ b/src/features/reports/api/useExportComplianceTsv.ts
@@ -0,0 +1,35 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import type { ExportJob } from "@/features/exports";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+
+interface CreateComplianceExportParams {
+  readonly name: string;
+  readonly query: string;
+  readonly by_cve: boolean;
+  readonly selected_field_ids: string[];
+  readonly retain_until: string;
+}
+
+export const useExportComplianceTsv = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { isPending, mutateAsync } = useMutation<
+    AxiosResponse<ExportJob>,
+    AxiosError<ApiError>,
+    CreateComplianceExportParams
+  >({
+    mutationFn: async (params) =>
+      authFetch.post<ExportJob>("computers/report:export", params),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["all-export-jobs"] });
+    },
+  });
+
+  return {
+    exportComplianceTsv: mutateAsync,
+    isExportComplianceTsvLoading: isPending,
+  };
+};
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
new file mode 100644
index 0000000000..92e0370756
--- /dev/null
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -0,0 +1,131 @@
+import useDebug from "@/hooks/useDebug";
+import useNotify from "@/hooks/useNotify";
+import useSidePanel from "@/hooks/useSidePanel";
+import { ROUTES } from "@/libs/routes";
+import {
+  ExportForm,
+  type ExportField,
+  type ExportFormValues,
+} from "@/features/exports";
+import { EXPORT_FIELD_GROUPS } from "@/features/instances/components/InstancesExportForm/constants";
+import { CheckboxInput, Select } from "@canonical/react-components";
+import moment from "moment";
+import { useState, type FC } from "react";
+import { useNavigate } from "react-router";
+import { useExportComplianceTsv } from "../../api/useExportComplianceTsv";
+import {
+  BUCKET_OPTIONS,
+  INITIAL_EXPORT_VALUES,
+  type BucketKey,
+} from "./constants";
+
+interface ReportExportFormProps {
+  readonly bucketIds: Record<BucketKey, readonly number[]>;
+  readonly otherIds: readonly number[];
+}
+
+const ReportExportForm: FC<ReportExportFormProps> = ({
+  bucketIds,
+  otherIds,
+}) => {
+  const { closeSidePanel } = useSidePanel();
+  const { notify } = useNotify();
+  const navigate = useNavigate();
+  const debug = useDebug();
+  const { exportComplianceTsv, isExportComplianceTsvLoading } =
+    useExportComplianceTsv();
+
+  const [selectedBucket, setSelectedBucket] = useState<BucketKey>("over-60");
+  const [includeOther, setIncludeOther] = useState(false);
+  const [byCve, setByCve] = useState(false);
+
+  const resolvedIds = [
+    ...bucketIds[selectedBucket],
+    ...(includeOther ? otherIds : []),
+  ];
+  const emptyBucket = resolvedIds.length === 0;
+  const query = `id:${resolvedIds.join(" OR id:")}`;
+
+  const handleGenerate = async ({
+    values,
+    fieldsToExport,
+  }: {
+    values: ExportFormValues;
+    fieldsToExport: ExportField[];
+  }) => {
+    if (emptyBucket) return;
+    try {
+      const response = await exportComplianceTsv({
+        name: values.name.trim(),
+        query,
+        by_cve: byCve,
+        selected_field_ids: fieldsToExport.map((f) => f.id),
+        retain_until: moment(values.retainUntil).toISOString(),
+      });
+      const job = response.data;
+      closeSidePanel();
+      notify.success({
+        title: "TSV export in progress",
+        message: `Your compliance export "${values.name.trim()}" is being generated.`,
+        actions: [
+          {
+            label: "View export status",
+            onClick: () =>
+              navigate(
+                ROUTES.exports.root({
+                  sidePath: ["view"],
+                  name: String(job.id),
+                }),
+              ),
+          },
+        ],
+      });
+    } catch (error) {
+      debug(error);
+    }
+  };
+
+  return (
+    <>
+      <Select
+        label="Bucket"
+        options={BUCKET_OPTIONS.map((o) => ({
+          label: o.label,
+          value: o.value,
+        }))}
+        value={selectedBucket}
+        onChange={(e) => {
+          setSelectedBucket(e.target.value as BucketKey);
+        }}
+      />
+      <CheckboxInput
+        label="Include Other"
+        checked={includeOther}
+        onChange={() => {
+          setIncludeOther((v) => !v);
+        }}
+      />
+      {emptyBucket && (
+        <p className="p-form-validation__message">
+          The selected bucket contains no instances. Choose a different bucket
+          or include Other.
+        </p>
+      )}
+      <CheckboxInput
+        label="Report by CVE"
+        checked={byCve}
+        onChange={() => {
+          setByCve((v) => !v);
+        }}
+      />
+      <ExportForm
+        fieldGroups={EXPORT_FIELD_GROUPS}
+        initialValues={INITIAL_EXPORT_VALUES}
+        isSubmitting={isExportComplianceTsvLoading}
+        onGenerate={handleGenerate}
+      />
+    </>
+  );
+};
+
+export default ReportExportForm;
diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
new file mode 100644
index 0000000000..0c028b9cb2
--- /dev/null
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -0,0 +1,19 @@
+import type { ExportFormValues } from "@/features/exports";
+import { INPUT_DATE_FORMAT } from "@/constants";
+import moment from "moment";
+
+export const BUCKET_OPTIONS = [
+  { value: "over-60", label: "60+ days outstanding" },
+  { value: "30-60", label: "30–60 days" },
+  { value: "14-30", label: "14–30 days" },
+  { value: "2-14", label: "2–14 days" },
+  { value: "within-2", label: "Within 2 days" },
+] as const;
+
+export type BucketKey = (typeof BUCKET_OPTIONS)[number]["value"];
+
+export const INITIAL_EXPORT_VALUES: ExportFormValues = {
+  name: "",
+  selectedFieldIds: [],
+  retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
+};
diff --git a/src/features/reports/components/ReportExportForm/index.ts b/src/features/reports/components/ReportExportForm/index.ts
new file mode 100644
index 0000000000..43ac013561
--- /dev/null
+++ b/src/features/reports/components/ReportExportForm/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ReportExportForm";
+export { default as ReportExportForm } from "./ReportExportForm";
diff --git a/src/features/reports/components/ReportForm/ReportForm.module.scss b/src/features/reports/components/ReportForm/ReportForm.module.scss
deleted file mode 100644
index 82e0546b25..0000000000
--- a/src/features/reports/components/ReportForm/ReportForm.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.rangeContainer {
-  align-items: end;
-  column-gap: 1rem;
-  display: flex;
-  margin-bottom: 1rem;
-}
diff --git a/src/features/reports/components/ReportForm/ReportForm.test.tsx b/src/features/reports/components/ReportForm/ReportForm.test.tsx
deleted file mode 100644
index 3ed49c41fc..0000000000
--- a/src/features/reports/components/ReportForm/ReportForm.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { API_URL_OLD } from "@/constants";
-import { setEndpointStatus } from "@/tests/controllers/controller";
-import server from "@/tests/server";
-import { isAction } from "@/tests/server/handlers/_helpers";
-import { renderWithProviders } from "@/tests/render";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
-import { describe, expect, it, vi } from "vitest";
-import ReportForm from "./ReportForm";
-
-describe("ReportForm", () => {
-  it("renders report controls", () => {
-    renderWithProviders(<ReportForm instanceIds={[1, 2]} />);
-
-    expect(screen.getByLabelText("Report by CVE")).toBeInTheDocument();
-    expect(screen.getByLabelText("Range")).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Download" }),
-    ).toBeInTheDocument();
-  });
-
-  it("downloads CSV when submitting the form", async () => {
-    const user = userEvent.setup();
-    const clickSpy = vi
-      .spyOn(HTMLAnchorElement.prototype, "click")
-      .mockImplementation(() => undefined);
-    const createObjectUrl = vi
-      .spyOn(URL, "createObjectURL")
-      .mockReturnValue("blob:report");
-
-    renderWithProviders(<ReportForm instanceIds={[3]} />);
-
-    await user.click(screen.getByRole("button", { name: "Download" }));
-
-    expect(createObjectUrl).toHaveBeenCalledTimes(1);
-
-    const [csvBlob] = createObjectUrl.mock.calls[0] ?? [];
-    expect(csvBlob).toBeInstanceOf(Blob);
-    expect(await (csvBlob as Blob).text()).toContain("name,status");
-
-    expect(clickSpy).toHaveBeenCalledTimes(1);
-
-    clickSpy.mockRestore();
-    createObjectUrl.mockRestore();
-  });
-
-  it("sends the selected range and grouping to the server", async () => {
-    const user = userEvent.setup();
-    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(
-      () => undefined,
-    );
-    vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:report");
-
-    let requestUrl: URL | null = null;
-    server.use(
-      http.get(API_URL_OLD, ({ request }) => {
-        if (!isAction(request, "GetCSVComplianceData")) {
-          return;
-        }
-        requestUrl = new URL(request.url);
-        return HttpResponse.json("name,status\ninstance-1,ok");
-      }),
-    );
-
-    renderWithProviders(<ReportForm instanceIds={[3]} />);
-
-    const rangeInput = screen.getByLabelText("Range");
-    await user.clear(rangeInput);
-    await user.type(rangeInput, "7");
-    await user.click(screen.getByLabelText("Report by CVE")); // default true -> false
-
-    await user.click(screen.getByRole("button", { name: "Download" }));
-
-    const params = (requestUrl as unknown as URL).searchParams;
-    expect(params.get("query")).toBe("id:3");
-    expect(params.get("max_days")).toBe("7");
-    expect(params.get("by_cve")).toBe("false");
-
-    vi.restoreAllMocks();
-  });
-
-  it("downloads empty CSV when endpoint is empty", async () => {
-    const user = userEvent.setup();
-    const createObjectUrl = vi
-      .spyOn(URL, "createObjectURL")
-      .mockReturnValue("blob:report");
-    setEndpointStatus({ status: "empty", path: "reports" });
-
-    renderWithProviders(<ReportForm instanceIds={[3]} />);
-
-    await user.click(screen.getByRole("button", { name: "Download" }));
-
-    const [csvBlob] = createObjectUrl.mock.calls[0] ?? [];
-    expect(csvBlob).toBeInstanceOf(Blob);
-    expect(await (csvBlob as Blob).text()).toBe("");
-
-    createObjectUrl.mockRestore();
-  });
-});
diff --git a/src/features/reports/components/ReportForm/ReportForm.tsx b/src/features/reports/components/ReportForm/ReportForm.tsx
deleted file mode 100644
index e124475f93..0000000000
--- a/src/features/reports/components/ReportForm/ReportForm.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { FC } from "react";
-import useReports from "@/hooks/useReports";
-import { CheckboxInput, Form, Input } from "@canonical/react-components";
-import { useFormik } from "formik";
-import * as Yup from "yup";
-import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
-import classes from "./ReportForm.module.scss";
-import { getFormikError } from "@/utils/formikErrors";
-
-const DEFAULT_RANGE_DAYS = 30;
-import { downloadBlob } from "@/utils/browserDownload";
-
-interface ReportFormProps {
-  readonly instanceIds: readonly number[];
-}
-
-const ReportForm: FC<ReportFormProps> = ({ instanceIds }) => {
-  const { getCsvComplianceData } = useReports();
-
-  const formik = useFormik({
-    initialValues: { range: DEFAULT_RANGE_DAYS, reportByCve: true },
-    validationSchema: Yup.object({
-      range: Yup.number()
-        .min(1, "Range must be at least 1 day")
-        .required("This field is required"),
-      reportByCve: Yup.boolean(),
-    }),
-    onSubmit: async () => {
-      // `refetch` is declared just below: the query must read the latest form
-      // values, so the hook is set up after the form it depends on.
-      // eslint-disable-next-line no-use-before-define
-      const { data } = await refetch();
-      downloadCSV(data?.data ?? "", "report.csv");
-    },
-  });
-
-  // Fetched on submit (not on mount) so the report reflects the chosen range
-  // and CVE/USN grouping, and so we make the heavy compliance query only when
-  // the user actually downloads.
-  const { refetch, isFetching } = getCsvComplianceData(
-    {
-      query: `id:${instanceIds.join(" OR id:")}`,
-      max_days: Number(formik.values.range),
-      by_cve: formik.values.reportByCve,
-    },
-    { enabled: false },
-  );
-
-  return (
-    <Form onSubmit={formik.handleSubmit} noValidate>
-      <CheckboxInput
-        label="Report by CVE"
-        inline
-        {...formik.getFieldProps("reportByCve")}
-        checked={formik.values.reportByCve}
-      />
-      <div className={classes.rangeContainer}>
-        <Input
-          type="number"
-          label="Range"
-          className="u-no-margin--bottom"
-          style={{ maxWidth: "min-content" }}
-          {...formik.getFieldProps("range")}
-          error={getFormikError(formik, "range")}
-        />
-        <span>Days</span>
-      </div>
-
-      <p className="p-text--small u-text--muted">
-        The CSV reports each instance against the USNs or CVEs released within
-        the selected range. USNs outstanding for longer than the range (such as
-        the &ldquo;60+ days outstanding&rdquo; metric in the report) are not
-        included.
-      </p>
-
-      <SidePanelFormButtons
-        submitButtonDisabled={isFetching}
-        submitButtonText="Download"
-      />
-    </Form>
-  );
-};
-
-export default ReportForm;
diff --git a/src/features/reports/components/ReportForm/index.ts b/src/features/reports/components/ReportForm/index.ts
deleted file mode 100644
index 1dcccaa6bc..0000000000
--- a/src/features/reports/components/ReportForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ReportForm";
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index d14e78023a..0ebf0d3c0e 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -19,7 +19,8 @@ import { useState, useSyncExternalStore } from "react";
 import { useGetComplianceReport } from "../../api";
 import type { DonutSegment } from "../ReportDonutChart";
 import ReportDonutChart from "../ReportDonutChart";
-import ReportForm from "../ReportForm";
+import ReportExportForm from "../ReportExportForm";
+import type { BucketKey } from "../ReportExportForm/constants";
 import type { MetricRow } from "../MetricBarTable";
 import MetricBarTable from "../MetricBarTable";
 import classes from "./ReportView.module.scss";
@@ -114,6 +115,14 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
     ...fourteenToThirtyIds,
     ...thirtyToSixtyIds,
   ]);
+
+  const bucketIds: Record<BucketKey, readonly number[]> = {
+    "over-60": sixtyPlusIds,
+    "30-60": thirtyToSixtyIds,
+    "14-30": fourteenToThirtyIds,
+    "2-14": twoToFourteenIds,
+    "within-2": withinTwoBucket,
+  };
   // "Other" is the accounted instances not in any named bucket. Derive the
   // universe from the report's own id sets (every accounted instance appears
   // in securely/not-securely-patched and/or the USN sets) rather than from the
@@ -219,10 +228,10 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
     },
   ];
 
-  const handleDownloadDialog = () => {
+  const handleExportDialog = () => {
     setSidePanelContent(
-      "Download report as CSV",
-      <ReportForm instanceIds={reportIds} />,
+      "Export report as TSV",
+      <ReportExportForm bucketIds={bucketIds} otherIds={otherIds} />,
     );
   };
 
@@ -267,8 +276,8 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
       </p>
       <SidePanelFormButtons
         submitButtonDisabled={false}
-        submitButtonText="Download as CSV"
-        onSubmit={handleDownloadDialog}
+        submitButtonText="Export as TSV"
+        onSubmit={handleExportDialog}
       />
     </>
   );
diff --git a/src/features/reports/index.ts b/src/features/reports/index.ts
index 12054ba41d..17b343a248 100644
--- a/src/features/reports/index.ts
+++ b/src/features/reports/index.ts
@@ -1,4 +1,4 @@
 export * from "./api";
-export { default as ReportForm } from "./components/ReportForm";
+export { default as ReportExportForm } from "./components/ReportExportForm";
 export { default as ReportView } from "./components/ReportView";
 export type * from "./types";
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index fbd5c6fc54..7496452955 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -98,6 +98,20 @@ export const failedActivitiesExportJob: ExportJob = {
   query: null,
 };
 
+export const newComplianceExportJob: ExportJob = {
+  id: 8,
+  name: "Compliance export 2026-06-24 10:00:00",
+  filename: "compliance-export-1.tsv",
+  row_count: 0,
+  type: "instance",
+  created_at: "2026-06-24T10:00:00.000Z",
+  status: "processing",
+  progress: 0,
+  download_ready: false,
+  retain_until: "2029-06-24T10:00:00.000Z",
+  query: "id:42 OR id:107",
+};
+
 // Default fixtures served by the MSW exports handlers so the Exports UI is fully
 // browsable in dev mode (`VITE_MSW_ENABLED`) and resolvable by id in tests.
 export const DEFAULT_EXPORT_JOBS: ExportJob[] = [
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index 1772bd61a9..d4918f1307 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -13,6 +13,7 @@ import {
   getMockRecoveryKeyActivity,
   RELEASE_UPGRADE_ACTIVITY,
 } from "@/tests/mocks/activity";
+import { newComplianceExportJob } from "@/tests/mocks/exports";
 import {
   instanceCanceledActivityNoKey,
   instanceCanceledActivityWithKey,
@@ -685,4 +686,24 @@ export default [
     };
     return HttpResponse.json(job, { status: 201 });
   }),
+
+  http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+    if (shouldApplyEndpointStatus("computers/report:export")) {
+      const { status } = getEndpointStatus();
+      if (status === "error") {
+        return createEndpointStatusError();
+      }
+    }
+    const body = (await request.json()) as Record<string, unknown>;
+    const job: ExportJob = {
+      ...newComplianceExportJob,
+      name: typeof body.name === "string" ? body.name : newComplianceExportJob.name,
+      retain_until:
+        typeof body.retain_until === "string"
+          ? body.retain_until
+          : newComplianceExportJob.retain_until,
+      query: typeof body.query === "string" ? body.query : newComplianceExportJob.query,
+    };
+    return HttpResponse.json(job, { status: 201 });
+  }),
 ];

From edb8148af541d9f8d0f63d2a146743a28842af3f Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 11:42:22 -0700
Subject: [PATCH 14/41] add tests for report export

---
 .../ReportExportForm.test.tsx                 | 215 ++++++++++++++++++
 .../components/ReportView/ReportView.test.tsx |  10 +-
 2 files changed, 221 insertions(+), 4 deletions(-)
 create mode 100644 src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx

diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
new file mode 100644
index 0000000000..be3e9f9869
--- /dev/null
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -0,0 +1,215 @@
+import { API_URL } from "@/constants";
+import server from "@/tests/server";
+import { renderWithProviders } from "@/tests/render";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { describe, expect, it } from "vitest";
+import ReportExportForm from "./ReportExportForm";
+import type { BucketKey } from "./constants";
+
+// Bucket ID arrays derived from the complianceReport fixture in
+// src/tests/server/handlers/reports.ts, matching the disjoint set logic in
+// ReportView so the test props are consistent with what a real parent passes.
+const BUCKET_IDS: Record<BucketKey, readonly number[]> = {
+  "over-60": [7, 8, 9, 10, 16],
+  "30-60": [],
+  "14-30": [],
+  "2-14": [5, 6],
+  "within-2": [1, 2, 3, 4],
+};
+const OTHER_IDS: readonly number[] = [];
+
+const renderForm = () =>
+  renderWithProviders(
+    <ReportExportForm bucketIds={BUCKET_IDS} otherIds={OTHER_IDS} />,
+  );
+
+const openAttributeGroup = async (
+  user: ReturnType<typeof userEvent.setup>,
+  name: RegExp,
+) => {
+  await user.click(screen.getByRole("tab", { name }));
+};
+
+describe("ReportExportForm", () => {
+  it("renders the bucket selector, Include Other, Report by CVE and the ExportForm shell", () => {
+    renderForm();
+
+    expect(screen.getByRole("combobox", { name: "Bucket" })).toBeVisible();
+    expect(
+      screen.getByRole("checkbox", { name: "Include Other" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Report by CVE" }),
+    ).toBeInTheDocument();
+    // ExportForm Step 0 content
+    expect(
+      screen.getByRole("textbox", { name: "Export name" }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Keep until")).toBeInTheDocument();
+  });
+
+  it("defaults to the 60+ days outstanding bucket", () => {
+    renderForm();
+
+    expect(screen.getByRole("combobox", { name: "Bucket" })).toHaveValue(
+      "over-60",
+    );
+  });
+
+  it("shows the empty-bucket validation message when the selected bucket has no instances", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    // Switch to a bucket with no instances in the fixture
+    const select = screen.getByRole("combobox", { name: "Bucket" });
+    await user.selectOptions(select, "30-60");
+
+    expect(
+      screen.getByText(
+        /the selected bucket contains no instances/i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("hides the empty-bucket message when Include Other is ticked for an empty bucket", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const select = screen.getByRole("combobox", { name: "Bucket" });
+    await user.selectOptions(select, "30-60");
+
+    expect(
+      screen.getByText(/the selected bucket contains no instances/i),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("checkbox", { name: "Include Other" }));
+
+    // OTHER_IDS is empty in our fixture too, so the message should still show —
+    // both the bucket and Other are empty.
+    expect(
+      screen.getByText(/the selected bucket contains no instances/i),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show the empty-bucket message for the default populated bucket", () => {
+    renderForm();
+
+    expect(
+      screen.queryByText(/the selected bucket contains no instances/i),
+    ).not.toBeInTheDocument();
+  });
+
+  it("submits with the correct query, by_cve and field ids and shows the success toast", async () => {
+    const user = userEvent.setup();
+    let requestBody: Record<string, unknown> = {};
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        requestBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: requestBody.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "instance",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: requestBody.retain_until,
+            query: requestBody.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderForm();
+
+    // Enable by_cve
+    await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
+
+    // Fill ExportForm Step 0
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "My compliance export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    // Step 1 — submit
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(requestBody.by_cve).toBe(true);
+    });
+
+    // Query built from the default "over-60" bucket IDs
+    expect(requestBody.query).toBe("id:7 OR id:8 OR id:9 OR id:10 OR id:16");
+    expect(requestBody.name).toBe("My compliance export");
+    expect(requestBody.selected_field_ids).toContain("hostname");
+
+    expect(
+      await screen.findByText("TSV export in progress"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Your compliance export "My compliance export"/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "View export status" }),
+    ).toBeInTheDocument();
+  });
+
+  it("builds the query from the selected bucket's instance IDs", async () => {
+    const user = userEvent.setup();
+    let capturedQuery = "";
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        const body = (await request.json()) as Record<string, unknown>;
+        capturedQuery = typeof body.query === "string" ? body.query : "";
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: body.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "instance",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: body.retain_until,
+            query: body.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderForm();
+
+    // Switch to the within-2 bucket
+    await user.selectOptions(
+      screen.getByRole("combobox", { name: "Bucket" }),
+      "within-2",
+    );
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Within 2 days export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(capturedQuery).toBe("id:1 OR id:2 OR id:3 OR id:4");
+    });
+  });
+});
diff --git a/src/features/reports/components/ReportView/ReportView.test.tsx b/src/features/reports/components/ReportView/ReportView.test.tsx
index f572ee348b..92c6ea06f6 100644
--- a/src/features/reports/components/ReportView/ReportView.test.tsx
+++ b/src/features/reports/components/ReportView/ReportView.test.tsx
@@ -269,15 +269,17 @@ describe("ReportView", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("handles download dialog", async () => {
+  it("opens the export panel when Export as TSV is clicked", async () => {
     const { setSidePanelContent } = useSidePanel();
     renderWithProviders(<ReportView instanceIds={instanceIds} />);
 
-    const downloadButton = await screen.findByText("Download as CSV");
-    downloadButton.click();
+    const exportButton = await screen.findByRole("button", {
+      name: "Export as TSV",
+    });
+    exportButton.click();
 
     expect(setSidePanelContent).toHaveBeenCalledWith(
-      "Download report as CSV",
+      "Export report as TSV",
       expect.anything(),
     );
   });

From ef0e2c17031ade72d497bf6a4a7bc295a7ae865b Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 11:43:59 -0700
Subject: [PATCH 15/41] add changeset

---
 .changeset/ripe-planets-boil.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ripe-planets-boil.md

diff --git a/.changeset/ripe-planets-boil.md b/.changeset/ripe-planets-boil.md
new file mode 100644
index 0000000000..9dd06ad533
--- /dev/null
+++ b/.changeset/ripe-planets-boil.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add tsv export feature using v2 endpoint for instance reports

From c707b3a48db6bc31cddd50bc9bb6f7e2a8e60147 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 11:54:07 -0700
Subject: [PATCH 16/41] run prettier, fix lint error

---
 src/features/instances/index.ts               |  1 +
 .../ReportDonutChart.test.tsx                 | 12 +++++-----
 .../ReportExportForm.test.tsx                 |  4 +---
 .../ReportExportForm/ReportExportForm.tsx     |  2 +-
 .../ReportLegendTable/ReportLegendTable.tsx   |  4 +++-
 .../components/ReportView/ReportView.test.tsx | 22 +++++++++++++------
 .../components/ReportView/ReportView.tsx      |  4 +---
 src/tests/server/handlers/instance.ts         |  8 +++++--
 8 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/features/instances/index.ts b/src/features/instances/index.ts
index 2709c7ec8d..2416889143 100644
--- a/src/features/instances/index.ts
+++ b/src/features/instances/index.ts
@@ -7,6 +7,7 @@ export { default as InstancesPageActions } from "./components/InstancesPageActio
 export { default as RecoveryKeyStatus } from "./components/RecoveryKeyStatus";
 export { default as TagsAddConfirmationModal } from "./components/TagsAddConfirmationModal";
 export { FILTERS, ALERT_STATUSES, STATUS_FILTERS } from "./constants";
+export { EXPORT_FIELD_GROUPS } from "./components/InstancesExportForm/constants";
 export {
   getFeatures,
   getInstanceListParams,
diff --git a/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx b/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
index 37251afb77..92097f833c 100644
--- a/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
+++ b/src/features/reports/components/ReportDonutChart/ReportDonutChart.test.tsx
@@ -97,9 +97,9 @@ describe("ReportDonutChart", () => {
 
     fireEvent.mouseEnter(arc);
     expect(arc.getAttribute("class")).toMatch(/arcActive/);
-    expect(
-      screen.getByText("Within 2 days").closest("tr")?.className,
-    ).toMatch(/rowActive/);
+    expect(screen.getByText("Within 2 days").closest("tr")?.className).toMatch(
+      /rowActive/,
+    );
     expect(screen.getByText("60+ days").closest("tr")?.className).toMatch(
       /rowDimmed/,
     );
@@ -117,8 +117,8 @@ describe("ReportDonutChart", () => {
     fireEvent.mouseEnter(
       screen.getByText("60+ days").closest("tr") as HTMLElement,
     );
-    expect(screen.getByTestId("donut-arc-over-60").getAttribute("class")).toMatch(
-      /arcActive/,
-    );
+    expect(
+      screen.getByTestId("donut-arc-over-60").getAttribute("class"),
+    ).toMatch(/arcActive/);
   });
 });
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
index be3e9f9869..525c9f2021 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -67,9 +67,7 @@ describe("ReportExportForm", () => {
     await user.selectOptions(select, "30-60");
 
     expect(
-      screen.getByText(
-        /the selected bucket contains no instances/i,
-      ),
+      screen.getByText(/the selected bucket contains no instances/i),
     ).toBeInTheDocument();
   });
 
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 92e0370756..b7efd46c6e 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -7,7 +7,7 @@ import {
   type ExportField,
   type ExportFormValues,
 } from "@/features/exports";
-import { EXPORT_FIELD_GROUPS } from "@/features/instances/components/InstancesExportForm/constants";
+import { EXPORT_FIELD_GROUPS } from "@/features/instances";
 import { CheckboxInput, Select } from "@canonical/react-components";
 import moment from "moment";
 import { useState, type FC } from "react";
diff --git a/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
index e7225f510c..75e7dad214 100644
--- a/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
+++ b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
@@ -38,7 +38,9 @@ const ReportLegendTable: FC<ReportLegendTableProps> = ({
   activeKey,
   onRowHover,
 }) => (
-  <table className={classNames(classes.table, variant === "bar" && classes.bar)}>
+  <table
+    className={classNames(classes.table, variant === "bar" && classes.bar)}
+  >
     <thead>
       <tr>
         <th scope="col" className={classes.markerCell}>
diff --git a/src/features/reports/components/ReportView/ReportView.test.tsx b/src/features/reports/components/ReportView/ReportView.test.tsx
index 92c6ea06f6..4291ec3c04 100644
--- a/src/features/reports/components/ReportView/ReportView.test.tsx
+++ b/src/features/reports/components/ReportView/ReportView.test.tsx
@@ -102,7 +102,19 @@ describe("ReportView", () => {
     renderWithProviders(
       <ReportView
         instanceIds={[
-          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 16, UNACCOUNTED_ID_A, UNACCOUNTED_ID_B,
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          16,
+          UNACCOUNTED_ID_A,
+          UNACCOUNTED_ID_B,
         ]}
       />,
     );
@@ -245,13 +257,9 @@ describe("ReportView", () => {
       setSelectedInstanceIds([1, 2]);
     });
 
-    await user.click(
-      screen.getByRole("button", { name: "Regenerate report" }),
-    );
+    await user.click(screen.getByRole("button", { name: "Regenerate report" }));
 
-    expect(
-      screen.queryByText("Selection has changed"),
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Selection has changed")).not.toBeInTheDocument();
     expect(setSidePanelTitle).toHaveBeenCalledWith("Report for 2 instances");
   });
 
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index 0ebf0d3c0e..1d5f0ca722 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -210,9 +210,7 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
       count: report.covered_by_upgrade_profiles.count,
       total,
       color: "link",
-      countHref: instancesHref(
-        report.covered_by_upgrade_profiles.computer_ids,
-      ),
+      countHref: instancesHref(report.covered_by_upgrade_profiles.computer_ids),
       onCountActivate: closeSidePanel,
       countAriaLabel: `View the ${report.covered_by_upgrade_profiles.count} instances covered by upgrade profiles`,
     },
diff --git a/src/tests/server/handlers/instance.ts b/src/tests/server/handlers/instance.ts
index d4918f1307..edaa835cb2 100644
--- a/src/tests/server/handlers/instance.ts
+++ b/src/tests/server/handlers/instance.ts
@@ -697,12 +697,16 @@ export default [
     const body = (await request.json()) as Record<string, unknown>;
     const job: ExportJob = {
       ...newComplianceExportJob,
-      name: typeof body.name === "string" ? body.name : newComplianceExportJob.name,
+      name:
+        typeof body.name === "string" ? body.name : newComplianceExportJob.name,
       retain_until:
         typeof body.retain_until === "string"
           ? body.retain_until
           : newComplianceExportJob.retain_until,
-      query: typeof body.query === "string" ? body.query : newComplianceExportJob.query,
+      query:
+        typeof body.query === "string"
+          ? body.query
+          : newComplianceExportJob.query,
     };
     return HttpResponse.json(job, { status: 201 });
   }),

From c49d5e282938653eac52f0c61b8e5e38c5da0e96 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 13:31:52 -0700
Subject: [PATCH 17/41] integrate changes from other feature branches, add
 tests

---
 .../ExportsContainer.test.tsx                 | 16 +++++++++++++++
 .../components/ExportsContainer/constants.ts  |  1 +
 .../ExportsList/ExportsList.test.tsx          |  7 +++++++
 .../components/ExportsList/helpers.test.ts    |  5 +++++
 .../exports/components/ExportsList/helpers.ts | 12 +++++++++--
 src/features/exports/helpers.test.ts          |  5 +++++
 src/features/exports/helpers.ts               | 12 +++++++++--
 src/features/exports/types/ExportJob.ts       |  2 +-
 .../instances/InstancesPage/InstancesPage.tsx | 20 ++++++++++++++++++-
 src/tests/mocks/exports.ts                    |  3 ++-
 src/utils/_helpers.ts                         |  3 +++
 11 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
index fd65cd923b..c156d81d45 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -8,6 +8,7 @@ import {
   processingExportJob,
   failedExportJob,
   completedActivitiesExportJob,
+  newComplianceExportJob,
 } from "@/tests/mocks/exports";
 import ExportsContainer from "./ExportsContainer";
 
@@ -60,4 +61,19 @@ describe("ExportsContainer", () => {
 
     expect(screen.getByRole("button", { name: /type/i })).toBeInTheDocument();
   });
+
+  it("renders report exports with the Reports type label", async () => {
+    setEndpointStatus({
+      status: "variant",
+      path: "exports",
+      response: [newComplianceExportJob],
+    });
+
+    renderWithProviders(<ExportsContainer />);
+
+    await expectLoadingState();
+
+    expect(screen.getByText(newComplianceExportJob.name)).toBeInTheDocument();
+    expect(screen.getByText("Reports")).toBeInTheDocument();
+  });
 });
diff --git a/src/features/exports/components/ExportsContainer/constants.ts b/src/features/exports/components/ExportsContainer/constants.ts
index bc7075af9d..98e93c0bdc 100644
--- a/src/features/exports/components/ExportsContainer/constants.ts
+++ b/src/features/exports/components/ExportsContainer/constants.ts
@@ -2,4 +2,5 @@ export const EXPORT_TYPE_OPTIONS = [
   { label: "All", value: "" },
   { label: "Instances", value: "instance" },
   { label: "Activities", value: "activity" },
+  { label: "Reports", value: "report" },
 ];
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
index 842b2e14b8..f251fe9344 100644
--- a/src/features/exports/components/ExportsList/ExportsList.test.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -5,6 +5,7 @@ import {
   completedExportJob,
   processingExportJob,
   failedExportJob,
+  newComplianceExportJob,
 } from "@/tests/mocks/exports";
 import ExportsList from "./ExportsList";
 
@@ -26,6 +27,12 @@ describe("ExportsList", () => {
     expect(typeCells.length).toBe(3);
   });
 
+  it('renders "Reports" as the type label for report exports', () => {
+    renderWithProviders(<ExportsList exportJobs={[newComplianceExportJob]} />);
+
+    expect(screen.getByText("Reports")).toBeInTheDocument();
+  });
+
   it("renders the status labels", () => {
     renderWithProviders(<ExportsList exportJobs={exportJobs} />);
 
diff --git a/src/features/exports/components/ExportsList/helpers.test.ts b/src/features/exports/components/ExportsList/helpers.test.ts
index 2670020e6c..28eee08e0f 100644
--- a/src/features/exports/components/ExportsList/helpers.test.ts
+++ b/src/features/exports/components/ExportsList/helpers.test.ts
@@ -5,6 +5,7 @@ import {
   completedActivitiesExportJob,
   failedActivitiesExportJob,
   processingExportJob,
+  newComplianceExportJob,
 } from "@/tests/mocks/exports";
 
 describe("getStatusIcon", () => {
@@ -31,4 +32,8 @@ describe("getTypeIcon", () => {
       "switcher-environments",
     );
   });
+
+  it('returns "documents" for report exports', () => {
+    expect(getTypeIcon(newComplianceExportJob)).toBe("documents");
+  });
 });
diff --git a/src/features/exports/components/ExportsList/helpers.ts b/src/features/exports/components/ExportsList/helpers.ts
index 8eed3ffaf6..cb7de73776 100644
--- a/src/features/exports/components/ExportsList/helpers.ts
+++ b/src/features/exports/components/ExportsList/helpers.ts
@@ -12,5 +12,13 @@ export const getStatusIcon = (job: ExportJob): string => {
   }
 };
 
-export const getTypeIcon = (job: ExportJob): string =>
-  job.type === "activity" ? "switcher-environments" : "machines";
+export const getTypeIcon = (job: ExportJob): string => {
+  switch (job.type) {
+    case "activity":
+      return "switcher-environments";
+    case "report":
+      return "documents";
+    default:
+      return "machines";
+  }
+};
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
index aa56ec48bb..180d819213 100644
--- a/src/features/exports/helpers.test.ts
+++ b/src/features/exports/helpers.test.ts
@@ -11,6 +11,7 @@ import {
   completedActivitiesExportJob,
   failedExportJob,
   processingExportJob,
+  newComplianceExportJob,
 } from "@/tests/mocks/exports";
 
 describe("buildExportQuery", () => {
@@ -113,4 +114,8 @@ describe("getTypeLabel", () => {
   it('returns "Activities" for activity exports', () => {
     expect(getTypeLabel(completedActivitiesExportJob)).toBe("Activities");
   });
+
+  it('returns "Reports" for report exports', () => {
+    expect(getTypeLabel(newComplianceExportJob)).toBe("Reports");
+  });
 });
diff --git a/src/features/exports/helpers.ts b/src/features/exports/helpers.ts
index b3e8a3ce98..e8ff37a049 100644
--- a/src/features/exports/helpers.ts
+++ b/src/features/exports/helpers.ts
@@ -46,5 +46,13 @@ export const getStatusLabel = (job: ExportJob): string => {
   }
 };
 
-export const getTypeLabel = (job: ExportJob): string =>
-  job.type === "activity" ? "Activities" : "Instances";
+export const getTypeLabel = (job: ExportJob): string => {
+  switch (job.type) {
+    case "activity":
+      return "Activities";
+    case "report":
+      return "Reports";
+    default:
+      return "Instances";
+  }
+};
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
index a5b2ef11a6..4796deb8b1 100644
--- a/src/features/exports/types/ExportJob.ts
+++ b/src/features/exports/types/ExportJob.ts
@@ -1,4 +1,4 @@
-export type ExportJobType = "instance" | "activity";
+export type ExportJobType = "instance" | "activity" | "report";
 
 export type ExportJobStatus = "processing" | "completed" | "failed";
 
diff --git a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
index b6c861f135..b661de3dd1 100644
--- a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
+++ b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
@@ -3,18 +3,23 @@ import PageHeader from "@/components/layout/PageHeader";
 import PageMain from "@/components/layout/PageMain";
 import { DETAILED_UPGRADES_VIEW_ENABLED } from "@/constants";
 import {
+  getInstanceListParams,
   InstancesPageActions,
   setSelectedInstanceIds,
   useGetInstances,
 } from "@/features/instances";
 import usePageParams from "@/hooks/usePageParams";
 import type { Instance } from "@/types/Instance";
-import { useCallback, useEffect, useState, type FC } from "react";
+import { useCallback, useEffect, useMemo, useState, type FC } from "react";
 import InstancesContainer from "../InstancesContainer";
 import { getQuery } from "./helpers";
 
 const InstancesPage: FC = () => {
   const { currentPage, pageSize, wsl, ...filters } = usePageParams();
+  const instanceListParams = useMemo(
+    () => getInstanceListParams({ filters, wsl }),
+    [filters, wsl],
+  );
   const { query } = filters;
 
   const { instances, instancesCount, isGettingInstances } = useGetInstances({
@@ -35,6 +40,7 @@ const InstancesPage: FC = () => {
   // deep link), matching how header filter changes reset it. Resetting state
   // during render (React's documented pattern) avoids an extra commit.
   const [trackedQuery, setTrackedQuery] = useState(query);
+  const [isAllSelected, setIsAllSelected] = useState(false);
   if (trackedQuery !== query) {
     setTrackedQuery(query);
     setSelectedInstances([]);
@@ -48,6 +54,12 @@ const InstancesPage: FC = () => {
 
   const clearSelection = useCallback(() => {
     setSelectedInstances([]);
+    setIsAllSelected(false);
+  }, []);
+
+  const selectAll = useCallback(() => {
+    setIsAllSelected(true);
+    setSelectedInstances([]);
   }, []);
 
   return (
@@ -57,8 +69,11 @@ const InstancesPage: FC = () => {
         actions={[
           <InstancesPageActions
             key="actions"
+            instanceCount={instancesCount}
+            exportParams={instanceListParams}
             isGettingInstances={isGettingInstances}
             selectedInstances={selectedInstances}
+            isAllSelected={isAllSelected}
           />,
         ]}
       />
@@ -69,6 +84,9 @@ const InstancesPage: FC = () => {
           isGettingInstances={isGettingInstances}
           selectedInstances={selectedInstances}
           setSelectedInstances={setSelectedInstances}
+          isAllSelected={isAllSelected}
+          onSelectAll={selectAll}
+          onClearSelection={clearSelection}
           onChangeFilter={clearSelection}
         />
       </PageContent>
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 7496452955..13c2273729 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -103,7 +103,7 @@ export const newComplianceExportJob: ExportJob = {
   name: "Compliance export 2026-06-24 10:00:00",
   filename: "compliance-export-1.tsv",
   row_count: 0,
-  type: "instance",
+  type: "report",
   created_at: "2026-06-24T10:00:00.000Z",
   status: "processing",
   progress: 0,
@@ -122,4 +122,5 @@ export const DEFAULT_EXPORT_JOBS: ExportJob[] = [
   processingActivitiesExportJob,
   completedActivitiesExportJob,
   failedActivitiesExportJob,
+  newComplianceExportJob,
 ];
diff --git a/src/utils/_helpers.ts b/src/utils/_helpers.ts
index 27f0aaa023..979d228f89 100644
--- a/src/utils/_helpers.ts
+++ b/src/utils/_helpers.ts
@@ -77,6 +77,9 @@ export const handleParams = ({
     } else {
       switch (typeof value) {
         case "string":
+          if (!isOld && value === "") {
+            break;
+          }
           paramsToPass[param] = value;
           break;
 

From 48186d9bfc1b5e3f95751371ffdcbbd25a0c5171 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 13:33:59 -0700
Subject: [PATCH 18/41] remove extra changeset

---
 .changeset/reports-side-panel.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/reports-side-panel.md

diff --git a/.changeset/reports-side-panel.md b/.changeset/reports-side-panel.md
deleted file mode 100644
index a09c48841a..0000000000
--- a/.changeset/reports-side-panel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"landscape-ui": minor
----
-
-Redesign the instances reports side panel on a single V2 `computers/report` endpoint, with deep-linked counts and a working CSV download. Gated behind the `instance-reports` feature flag (on by default).

From ed390b2fb2d59b3d4c41594bee06d42ead617797 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 13:47:49 -0700
Subject: [PATCH 19/41] Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../components/ExportProgressBar/ExportProgressBar.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss b/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
index b2cb69d84f..4d523aa646 100644
--- a/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
+++ b/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
@@ -32,7 +32,7 @@
   width: 100%;
 
   .fill {
-    background-color: #06c;
+    background-color: $colors--theme--link-default;
     height: 100%;
     transition: width 0.3s ease;
   }

From a79cbdff7fcf75d611d154313406389c34b42d74 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 13:49:20 -0700
Subject: [PATCH 20/41] add Other tooltip to form, close side panel on export
 download

---
 .../ExportDetailsSidePanel/ExportDetails.tsx  |  1 +
 .../ReportExportForm.module.scss              | 10 ++++++
 .../ReportExportForm/ReportExportForm.tsx     | 28 +++++++++++----
 .../reports/components/ReportHelpTooltip.tsx  | 20 +++++++++++
 .../ReportLegendTable/ReportLegendTable.tsx   | 10 ++----
 .../components/ReportView/ReportView.tsx      | 11 ++++--
 src/hooks/useReports.ts                       | 34 -------------------
 7 files changed, 62 insertions(+), 52 deletions(-)
 create mode 100644 src/features/reports/components/ReportExportForm/ReportExportForm.module.scss
 create mode 100644 src/features/reports/components/ReportHelpTooltip.tsx
 delete mode 100644 src/hooks/useReports.ts

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index f7260f8bd1..2cc5077b7c 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -44,6 +44,7 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
           message: `${job.name} has been downloaded and removed from the export list.`,
         });
       }
+      popSidePathUntilClear();
     } catch (error) {
       debug(error);
     }
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.module.scss b/src/features/reports/components/ReportExportForm/ReportExportForm.module.scss
new file mode 100644
index 0000000000..9562734b55
--- /dev/null
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.module.scss
@@ -0,0 +1,10 @@
+@import "vanilla-framework/scss/settings_spacing";
+
+.includeOtherRow {
+  display: flex;
+  gap: $sph--x-small;
+}
+
+.includeOtherTooltip {
+  padding-top: 0.375rem;
+}
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index b7efd46c6e..9e090cebe4 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -13,6 +13,8 @@ import moment from "moment";
 import { useState, type FC } from "react";
 import { useNavigate } from "react-router";
 import { useExportComplianceTsv } from "../../api/useExportComplianceTsv";
+import ReportHelpTooltip from "../ReportHelpTooltip";
+import classes from "./ReportExportForm.module.scss";
 import {
   BUCKET_OPTIONS,
   INITIAL_EXPORT_VALUES,
@@ -22,11 +24,13 @@ import {
 interface ReportExportFormProps {
   readonly bucketIds: Record<BucketKey, readonly number[]>;
   readonly otherIds: readonly number[];
+  readonly otherDetail?: string;
 }
 
 const ReportExportForm: FC<ReportExportFormProps> = ({
   bucketIds,
   otherIds,
+  otherDetail,
 }) => {
   const { closeSidePanel } = useSidePanel();
   const { notify } = useNotify();
@@ -98,13 +102,23 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
           setSelectedBucket(e.target.value as BucketKey);
         }}
       />
-      <CheckboxInput
-        label="Include Other"
-        checked={includeOther}
-        onChange={() => {
-          setIncludeOther((v) => !v);
-        }}
-      />
+      <div className={classes.includeOtherRow}>
+        <CheckboxInput
+          label="Include Other"
+          checked={includeOther}
+          onChange={() => {
+            setIncludeOther((v) => !v);
+          }}
+        />
+        <div className={classes.includeOtherTooltip}>
+          <ReportHelpTooltip
+            message={
+              otherDetail ||
+              "Other includes instances that are not in any of the buckets."
+            }
+          />
+        </div>
+      </div>
       {emptyBucket && (
         <p className="p-form-validation__message">
           The selected bucket contains no instances. Choose a different bucket
diff --git a/src/features/reports/components/ReportHelpTooltip.tsx b/src/features/reports/components/ReportHelpTooltip.tsx
new file mode 100644
index 0000000000..bd963bb168
--- /dev/null
+++ b/src/features/reports/components/ReportHelpTooltip.tsx
@@ -0,0 +1,20 @@
+import { Tooltip } from "@canonical/react-components";
+import type { FC } from "react";
+
+interface ReportHelpTooltipProps {
+  readonly message: string;
+  readonly position?: "top-center" | "btm-left";
+  readonly followMouse?: boolean;
+}
+
+const ReportHelpTooltip: FC<ReportHelpTooltipProps> = ({
+  message,
+  position = "top-center",
+  followMouse,
+}) => (
+  <Tooltip message={message} position={position} followMouse={followMouse}>
+    <i className="p-icon--help" role="img" aria-label={message} />
+  </Tooltip>
+);
+
+export default ReportHelpTooltip;
diff --git a/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
index 75e7dad214..178f3ff423 100644
--- a/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
+++ b/src/features/reports/components/ReportLegendTable/ReportLegendTable.tsx
@@ -1,7 +1,7 @@
-import { Tooltip } from "@canonical/react-components";
 import classNames from "classnames";
 import type { FC, ReactNode } from "react";
 import { Link } from "react-router";
+import ReportHelpTooltip from "../ReportHelpTooltip";
 import classes from "./ReportLegendTable.module.scss";
 
 export interface ReportLegendRow {
@@ -96,13 +96,7 @@ const ReportLegendTable: FC<ReportLegendTableProps> = ({
             {row.detail ? (
               <span className={classes.labelWithHelp}>
                 {row.label}
-                <Tooltip message={row.detail} position="top-center">
-                  <i
-                    className="p-icon--help"
-                    role="img"
-                    aria-label={row.detail}
-                  />
-                </Tooltip>
+                <ReportHelpTooltip message={row.detail} />
               </span>
             ) : (
               <span>{row.label}</span>
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index 1d5f0ca722..003c5bc6df 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -134,6 +134,8 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
     ...pendingIds,
   ]);
   const otherIds = [...accountedIds].filter((id) => !classified.has(id));
+  const OTHER_DETAIL =
+    "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days.";
 
   const segmentDefs: {
     key: string;
@@ -177,8 +179,7 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
       label: "Other",
       ids: otherIds,
       color: "grey",
-      detail:
-        "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days.",
+      detail: OTHER_DETAIL,
     },
   ];
 
@@ -229,7 +230,11 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
   const handleExportDialog = () => {
     setSidePanelContent(
       "Export report as TSV",
-      <ReportExportForm bucketIds={bucketIds} otherIds={otherIds} />,
+      <ReportExportForm
+        bucketIds={bucketIds}
+        otherIds={otherIds}
+        otherDetail={OTHER_DETAIL}
+      />,
     );
   };
 
diff --git a/src/hooks/useReports.ts b/src/hooks/useReports.ts
deleted file mode 100644
index ebdd5862d2..0000000000
--- a/src/hooks/useReports.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import useFetchOld from "@/hooks/useFetchOld";
-import type { QueryFnType } from "@/types/api/QueryFnType";
-import type { AxiosError, AxiosResponse } from "axios";
-import type { ApiError } from "@/types/api/ApiError";
-
-interface CommonGetParams {
-  query?: string;
-  /** Only include USN/CVE issues released within this many days. */
-  max_days?: number;
-  /** Key the CSV columns by CVE instead of by USN. */
-  by_cve?: boolean;
-}
-
-export default function useReports() {
-  const authFetchOld = useFetchOld();
-
-  const getCsvComplianceData: QueryFnType<
-    AxiosResponse<string>,
-    CommonGetParams
-  > = (queryParams = {}, config = {}) =>
-    useQuery<AxiosResponse<string>, AxiosError<ApiError>>({
-      queryKey: ["csvComplianceData", queryParams],
-      queryFn: async () =>
-        authFetchOld.get("GetCSVComplianceData", {
-          params: queryParams,
-        }),
-      ...config,
-    });
-
-  return {
-    getCsvComplianceData,
-  };
-}

From 1adc3aa8f47a42f0e2f99e60f3db4ca40c991976 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 13:52:06 -0700
Subject: [PATCH 21/41] remove dead code

---
 src/tests/server/handlers/reports.ts | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/tests/server/handlers/reports.ts b/src/tests/server/handlers/reports.ts
index 081b6607d9..74e22fd3d6 100644
--- a/src/tests/server/handlers/reports.ts
+++ b/src/tests/server/handlers/reports.ts
@@ -1,9 +1,9 @@
-import { API_URL, API_URL_OLD } from "@/constants";
+import { API_URL } from "@/constants";
 import type { ComplianceReport } from "@/features/reports";
 import { getEndpointStatus } from "@/tests/controllers/controller";
 import { http, HttpResponse } from "msw";
 import { createEndpointStatusNetworkError } from "./_constants";
-import { isAction, shouldApplyEndpointStatus } from "./_helpers";
+import { shouldApplyEndpointStatus } from "./_helpers";
 
 export const complianceReport: ComplianceReport = {
   generated_at: "2026-06-11T10:38:00Z",
@@ -56,20 +56,4 @@ export default [
 
     return HttpResponse.json(complianceReport);
   }),
-  http.get(API_URL_OLD, ({ request }) => {
-    if (!isAction(request, "GetCSVComplianceData")) {
-      return;
-    }
-
-    const endpointStatus = getEndpointStatus();
-
-    if (
-      endpointStatus.status === "empty" &&
-      (!endpointStatus.path || endpointStatus.path === "reports")
-    ) {
-      return HttpResponse.json("");
-    }
-
-    return HttpResponse.json("name,status\ninstance-1,ok");
-  }),
 ];

From d2bc0ac3b99ce5213cf991810d2c0d9b1bf151f2 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Wed, 24 Jun 2026 14:04:40 -0700
Subject: [PATCH 22/41] Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../ExportDetailsSidePanel.tsx                |  3 +-
 .../ReportExportForm/ReportExportForm.tsx     |  9 +++++-
 src/tests/server/handlers/exports.ts          | 31 +++++++++++--------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index a4b0d3b05a..e82058c447 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -23,8 +23,7 @@ const ExportDetailsSidePanel: FC = () => {
   if (!job) {
     const status = jobError?.response?.status;
     const isServerError =
-      isError && status !== undefined && status >= MIN_SERVER_ERROR_STATUS;
-
+      isError && (status === undefined || status >= MIN_SERVER_ERROR_STATUS);
     return (
       <>
         <SidePanel.Header>
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 9e090cebe4..4cf4ea6f28 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -57,7 +57,14 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
     values: ExportFormValues;
     fieldsToExport: ExportField[];
   }) => {
-    if (emptyBucket) return;
+    if (emptyBucket) {
+      notify.info({
+        title: "No instances in bucket",
+        message:
+          "The selected bucket contains no instances. Choose a different bucket or include Other.",
+      });
+      return;
+    }
     try {
       const response = await exportComplianceTsv({
         name: values.name.trim(),
diff --git a/src/tests/server/handlers/exports.ts b/src/tests/server/handlers/exports.ts
index cef2d1fae9..4563172236 100644
--- a/src/tests/server/handlers/exports.ts
+++ b/src/tests/server/handlers/exports.ts
@@ -40,8 +40,8 @@ const generateExportJobsResponse = (
 export default [
   http.get(`${API_URL}${EXPORTS_PATH}`, ({ request }) => {
     if (shouldApplyEndpointStatus(EXPORTS_PATH)) {
-      const { status, response } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusNetworkError();
+      const { status, response } = getEndpointStatus(EXPORTS_PATH);
+      if (status === "error") throw createEndpointStatusNetworkError();
       if (status === "loading") return new Promise(() => undefined);
       if (status === "empty") {
         return HttpResponse.json({ count: 0, results: [] });
@@ -58,8 +58,9 @@ export default [
   }),
 
   http.get(`${API_URL}${EXPORTS_PATH}/:jobId`, ({ params }) => {
-    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId`)) {
-      const { status, response } = getEndpointStatus();
+    const endpointPath = `${EXPORTS_PATH}/:jobId`;
+    if (shouldApplyEndpointStatus(endpointPath)) {
+      const { status, response } = getEndpointStatus(endpointPath);
       if (status === "error") return createEndpointStatusError();
       if (
         status === "variant" &&
@@ -78,8 +79,9 @@ export default [
   }),
 
   http.post(`${API_URL}${EXPORTS_PATH}/:jobId/retry`, ({ params }) => {
-    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/retry`)) {
-      const { status } = getEndpointStatus();
+    const endpointPath = `${EXPORTS_PATH}/:jobId/retry`;
+    if (shouldApplyEndpointStatus(endpointPath)) {
+      const { status } = getEndpointStatus(endpointPath);
       if (status === "error") return createEndpointStatusError();
     }
     const job = DEFAULT_EXPORT_JOBS.find((j) => String(j.id) === params.jobId);
@@ -96,25 +98,28 @@ export default [
   }),
 
   http.post(`${API_URL}${EXPORTS_PATH}/:jobId/cancel`, () => {
-    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/cancel`)) {
-      const { status } = getEndpointStatus();
+    const endpointPath = `${EXPORTS_PATH}/:jobId/cancel`;
+    if (shouldApplyEndpointStatus(endpointPath)) {
+      const { status } = getEndpointStatus(endpointPath);
       if (status === "error") return createEndpointStatusError();
     }
     return new HttpResponse(null, { status: 204 });
   }),
 
   http.delete(`${API_URL}${EXPORTS_PATH}/:jobId`, () => {
-    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId`)) {
-      const { status } = getEndpointStatus();
+    const endpointPath = `${EXPORTS_PATH}/:jobId`;
+    if (shouldApplyEndpointStatus(endpointPath)) {
+      const { status } = getEndpointStatus(endpointPath);
       if (status === "error") return createEndpointStatusError();
     }
     return new HttpResponse(null, { status: 204 });
   }),
 
   http.get(`${API_URL}${EXPORTS_PATH}/:jobId/download`, () => {
-    if (shouldApplyEndpointStatus(`${EXPORTS_PATH}/:jobId/download`)) {
-      const { status } = getEndpointStatus();
-      if (status === "error") return createEndpointStatusNetworkError();
+    const endpointPath = `${EXPORTS_PATH}/:jobId/download`;
+    if (shouldApplyEndpointStatus(endpointPath)) {
+      const { status } = getEndpointStatus(endpointPath);
+      if (status === "error") throw createEndpointStatusNetworkError();
     }
     return new HttpResponse("tsv-data", {
       headers: {

From 81d87e6e4b858f80c538173b07d52f0eb932fd06 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 25 Jun 2026 11:33:47 +0200
Subject: [PATCH 23/41] change progressbar design

---
 .../ProgressBar/ProgressBar.module.scss       | 43 ++++++++++++
 .../ProgressBar/ProgressBar.test.tsx}         | 16 ++---
 .../ProgressBar/ProgressBar.tsx}              | 21 +++---
 .../ProgressBar}/constants.ts                 |  1 +
 src/components/ProgressBar/helpers.test.ts    | 47 +++++++++++++
 src/components/ProgressBar/helpers.ts         | 37 ++++++++++
 src/components/ProgressBar/index.ts           |  1 +
 .../exports/api/useDownloadExportJob.ts       |  7 +-
 .../ExportDetailsSidePanel/ExportDetails.tsx  |  4 +-
 .../ExportProgressBar.module.scss             | 39 -----------
 .../ExportProgressBar/helpers.test.ts         | 39 -----------
 .../components/ExportProgressBar/helpers.ts   | 28 --------
 .../components/ExportProgressBar/index.ts     |  1 -
 .../ExportsContainer/ExportsContainer.tsx     |  2 +-
 .../ExportsList/ExportsList.module.scss       |  3 +
 .../components/ExportsList/ExportsList.tsx    | 16 ++---
 src/tests/mocks/exports.ts                    | 70 +++++++++++++++++++
 17 files changed, 234 insertions(+), 141 deletions(-)
 create mode 100644 src/components/ProgressBar/ProgressBar.module.scss
 rename src/{features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx => components/ProgressBar/ProgressBar.test.tsx} (60%)
 rename src/{features/exports/components/ExportProgressBar/ExportProgressBar.tsx => components/ProgressBar/ProgressBar.tsx} (56%)
 rename src/{features/exports/components/ExportProgressBar => components/ProgressBar}/constants.ts (75%)
 create mode 100644 src/components/ProgressBar/helpers.test.ts
 create mode 100644 src/components/ProgressBar/helpers.ts
 create mode 100644 src/components/ProgressBar/index.ts
 delete mode 100644 src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
 delete mode 100644 src/features/exports/components/ExportProgressBar/helpers.test.ts
 delete mode 100644 src/features/exports/components/ExportProgressBar/helpers.ts
 delete mode 100644 src/features/exports/components/ExportProgressBar/index.ts
 create mode 100644 src/features/exports/components/ExportsList/ExportsList.module.scss

diff --git a/src/components/ProgressBar/ProgressBar.module.scss b/src/components/ProgressBar/ProgressBar.module.scss
new file mode 100644
index 0000000000..6cbd7ea815
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.module.scss
@@ -0,0 +1,43 @@
+@import "vanilla-framework/scss/settings_colors";
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.fullWidth {
+  .bar {
+    max-width: none;
+  }
+}
+
+.bar {
+  background-color: $color-mid-x-light;
+  flex: 1 1 auto;
+  height: 0.5rem;
+  max-width: 8rem;
+  min-width: 0;
+  overflow: hidden;
+
+  .fill {
+    background-color: $colors--theme--link-default;
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+}
+
+.percentage {
+  flex: 0 0 auto;
+  font-weight: 600;
+  min-width: 2.75rem;
+}
+
+.eta {
+  color: $colors--theme--text-muted;
+  flex: 0 0 6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx b/src/components/ProgressBar/ProgressBar.test.tsx
similarity index 60%
rename from src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx
rename to src/components/ProgressBar/ProgressBar.test.tsx
index 555a4fe1df..a6e631e245 100644
--- a/src/features/exports/components/ExportProgressBar/ExportProgressBar.test.tsx
+++ b/src/components/ProgressBar/ProgressBar.test.tsx
@@ -1,20 +1,20 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import ExportProgressBar from "./ExportProgressBar";
+import ProgressBar from "./ProgressBar";
 
-describe("ExportProgressBar", () => {
+describe("ProgressBar", () => {
   it("renders the progress percentage", () => {
-    render(<ExportProgressBar progress={50} secondsRemaining={null} />);
+    render(<ProgressBar progress={50} secondsRemaining={null} />);
     expect(screen.getByText("50%")).toBeInTheDocument();
   });
 
   it("renders the ETA label", () => {
-    render(<ExportProgressBar progress={50} secondsRemaining={120} />);
-    expect(screen.getByText("2m left")).toBeInTheDocument();
+    render(<ProgressBar progress={50} secondsRemaining={120} />);
+    expect(screen.getByText("2m")).toBeInTheDocument();
   });
 
   it("renders a progress bar with correct aria attributes", () => {
-    render(<ExportProgressBar progress={75} secondsRemaining={null} />);
+    render(<ProgressBar progress={75} secondsRemaining={null} />);
     const progressbar = screen.getByRole("progressbar");
     expect(progressbar).toHaveAttribute("aria-valuenow", "75");
     expect(progressbar).toHaveAttribute("aria-valuemin", "0");
@@ -22,12 +22,12 @@ describe("ExportProgressBar", () => {
   });
 
   it("clamps progress to 0-100", () => {
-    render(<ExportProgressBar progress={150} secondsRemaining={null} />);
+    render(<ProgressBar progress={150} secondsRemaining={null} />);
     expect(screen.getByText("100%")).toBeInTheDocument();
   });
 
   it("rounds progress to nearest integer", () => {
-    render(<ExportProgressBar progress={33.7} secondsRemaining={null} />);
+    render(<ProgressBar progress={33.7} secondsRemaining={null} />);
     expect(screen.getByText("34%")).toBeInTheDocument();
   });
 });
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
similarity index 56%
rename from src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx
rename to src/components/ProgressBar/ProgressBar.tsx
index a4e300729b..5dd84deb70 100644
--- a/src/features/exports/components/ExportProgressBar/ExportProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -1,15 +1,15 @@
 import type { FC } from "react";
 import { MAX_PROGRESS } from "./constants";
 import { getEtaLabel } from "./helpers";
-import classes from "./ExportProgressBar.module.scss";
+import classes from "./ProgressBar.module.scss";
 
-export interface ExportProgressBarProps {
+export interface ProgressBarProps {
   readonly progress: number;
   readonly secondsRemaining: number | null;
   readonly fullWidth?: boolean;
 }
 
-const ExportProgressBar: FC<ExportProgressBarProps> = ({
+const ProgressBar: FC<ProgressBarProps> = ({
   progress,
   secondsRemaining,
   fullWidth = false,
@@ -21,25 +21,20 @@ const ExportProgressBar: FC<ExportProgressBarProps> = ({
 
   return (
     <div className={`${classes.wrapper} ${fullWidth ? classes.fullWidth : ""}`}>
-      <div className={classes.labels}>
-        <span className={classes.percentage}>{clampedProgress}%</span>
-        <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
-      </div>
       <div
         className={classes.bar}
         role="progressbar"
         aria-valuenow={clampedProgress}
         aria-valuemin={0}
         aria-valuemax={MAX_PROGRESS}
-        aria-label="Export progress"
+        aria-label="Progress"
       >
-        <div
-          className={classes.fill}
-          style={{ width: `${clampedProgress}%` }}
-        />
+        <div className={classes.fill} style={{ width: `${clampedProgress}%` }} />
       </div>
+      <span className={classes.percentage}>{clampedProgress}%</span>
+      <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
     </div>
   );
 };
 
-export default ExportProgressBar;
+export default ProgressBar;
diff --git a/src/features/exports/components/ExportProgressBar/constants.ts b/src/components/ProgressBar/constants.ts
similarity index 75%
rename from src/features/exports/components/ExportProgressBar/constants.ts
rename to src/components/ProgressBar/constants.ts
index 4a2cb4663f..dc77a6453a 100644
--- a/src/features/exports/components/ExportProgressBar/constants.ts
+++ b/src/components/ProgressBar/constants.ts
@@ -1,3 +1,4 @@
 export const SECONDS_PER_MINUTE = 60;
+export const SECONDS_PER_HOUR = 3600;
 export const ALMOST_DONE_THRESHOLD_SECONDS = 5;
 export const MAX_PROGRESS = 100;
diff --git a/src/components/ProgressBar/helpers.test.ts b/src/components/ProgressBar/helpers.test.ts
new file mode 100644
index 0000000000..97ff82e207
--- /dev/null
+++ b/src/components/ProgressBar/helpers.test.ts
@@ -0,0 +1,47 @@
+/* eslint @typescript-eslint/no-magic-numbers: 0 */
+import { describe, it, expect } from "vitest";
+import { formatSecondsRemaining, getEtaLabel } from "./helpers";
+
+describe("formatSecondsRemaining", () => {
+  it('formats seconds as "Xs" when under a minute', () => {
+    expect(formatSecondsRemaining(30)).toBe("30s");
+  });
+
+  it("rounds to the nearest second", () => {
+    expect(formatSecondsRemaining(30.7)).toBe("31s");
+  });
+
+  it("clamps to zero for negative values", () => {
+    expect(formatSecondsRemaining(-5)).toBe("0s");
+  });
+
+  it('formats as "Xm" for whole minutes', () => {
+    expect(formatSecondsRemaining(120)).toBe("2m");
+  });
+
+  it('formats as "Xm Ys" for minutes with remainder', () => {
+    expect(formatSecondsRemaining(150)).toBe("2m 30s");
+  });
+
+  it('formats as "Xh Ym" for hours with remainder minutes', () => {
+    expect(formatSecondsRemaining(19800)).toBe("5h 30m");
+  });
+
+  it('formats as "Xh" for whole hours', () => {
+    expect(formatSecondsRemaining(7200)).toBe("2h");
+  });
+});
+
+describe("getEtaLabel", () => {
+  it('returns "Estimating..." when secondsRemaining is null', () => {
+    expect(getEtaLabel(null)).toBe("Estimating...");
+  });
+
+  it('returns "Almost done" when within threshold', () => {
+    expect(getEtaLabel(3)).toBe("Almost done");
+  });
+
+  it("delegates to formatSecondsRemaining for larger values", () => {
+    expect(getEtaLabel(120)).toBe("2m");
+  });
+});
diff --git a/src/components/ProgressBar/helpers.ts b/src/components/ProgressBar/helpers.ts
new file mode 100644
index 0000000000..6ec9f3e832
--- /dev/null
+++ b/src/components/ProgressBar/helpers.ts
@@ -0,0 +1,37 @@
+import {
+  ALMOST_DONE_THRESHOLD_SECONDS,
+  SECONDS_PER_HOUR,
+  SECONDS_PER_MINUTE,
+} from "./constants";
+
+export const formatSecondsRemaining = (seconds: number): string => {
+  const safe = Math.max(0, Math.round(seconds));
+
+  if (safe >= SECONDS_PER_HOUR) {
+    const hours = Math.floor(safe / SECONDS_PER_HOUR);
+    const minutes = Math.floor((safe % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
+
+    return minutes ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+
+  if (safe >= SECONDS_PER_MINUTE) {
+    const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
+    const remainderSeconds = safe % SECONDS_PER_MINUTE;
+
+    return remainderSeconds ? `${minutes}m ${remainderSeconds}s` : `${minutes}m`;
+  }
+
+  return `${safe}s`;
+};
+
+export const getEtaLabel = (secondsRemaining: number | null): string => {
+  if (secondsRemaining === null) {
+    return "Estimating...";
+  }
+
+  if (secondsRemaining <= ALMOST_DONE_THRESHOLD_SECONDS) {
+    return "Almost done";
+  }
+
+  return formatSecondsRemaining(secondsRemaining);
+};
diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts
new file mode 100644
index 0000000000..7b773c6e18
--- /dev/null
+++ b/src/components/ProgressBar/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProgressBar";
diff --git a/src/features/exports/api/useDownloadExportJob.ts b/src/features/exports/api/useDownloadExportJob.ts
index 4061018502..c56cd24029 100644
--- a/src/features/exports/api/useDownloadExportJob.ts
+++ b/src/features/exports/api/useDownloadExportJob.ts
@@ -33,8 +33,11 @@ export const useDownloadExportJob = () => {
           { responseType: "blob" },
         );
         const writable = await handle.createWritable();
-        await writable.write(response.data);
-        await writable.close();
+        try {
+          await writable.write(response.data);
+        } finally {
+          await writable.close();
+        }
         return job;
       }
 
diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index f7260f8bd1..bcc2980f30 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -18,7 +18,7 @@ import { useDownloadExportJob } from "../../api/useDownloadExportJob";
 import { useRetryExportJob } from "../../api/useRetryExportJob";
 import { getStatusLabel, getTypeLabel } from "../../helpers";
 import type { ExportJob } from "../../types/ExportJob";
-import ExportProgressBar from "../ExportProgressBar";
+import ProgressBar from "@/components/ProgressBar";
 import { getFilterValue } from "./helpers";
 
 interface ExportDetailsProps {
@@ -177,7 +177,7 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
               label="Status"
               value={
                 job.status === "processing" ? (
-                  <ExportProgressBar
+                  <ProgressBar
                     progress={job.progress}
                     secondsRemaining={job.estimated_seconds_remaining ?? null}
                     fullWidth
diff --git a/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss b/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
deleted file mode 100644
index b2cb69d84f..0000000000
--- a/src/features/exports/components/ExportProgressBar/ExportProgressBar.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "vanilla-framework/scss/settings_colors";
-
-.wrapper {
-  max-width: 280px;
-  width: 100%;
-}
-
-.fullWidth {
-  max-width: none;
-}
-
-.labels {
-  display: flex;
-  justify-content: space-between;
-}
-
-.percentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.eta {
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
-
-.bar {
-  border: 1px solid $colors--theme--border-default;
-  height: 16px;
-  margin-top: 4px;
-  padding: 2px;
-  width: 100%;
-
-  .fill {
-    background-color: #06c;
-    height: 100%;
-    transition: width 0.3s ease;
-  }
-}
diff --git a/src/features/exports/components/ExportProgressBar/helpers.test.ts b/src/features/exports/components/ExportProgressBar/helpers.test.ts
deleted file mode 100644
index b0d86c67a7..0000000000
--- a/src/features/exports/components/ExportProgressBar/helpers.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* eslint @typescript-eslint/no-magic-numbers: 0 */
-import { describe, it, expect } from "vitest";
-import { formatSecondsRemaining, getEtaLabel } from "./helpers";
-
-describe("formatSecondsRemaining", () => {
-  it('formats seconds as "Xs left" when under a minute', () => {
-    expect(formatSecondsRemaining(30)).toBe("30s left");
-  });
-
-  it("rounds to the nearest second", () => {
-    expect(formatSecondsRemaining(30.7)).toBe("31s left");
-  });
-
-  it("clamps to zero for negative values", () => {
-    expect(formatSecondsRemaining(-5)).toBe("0s left");
-  });
-
-  it('formats as "Xm left" for whole minutes', () => {
-    expect(formatSecondsRemaining(120)).toBe("2m left");
-  });
-
-  it('formats as "Xm Ys left" for minutes with remainder', () => {
-    expect(formatSecondsRemaining(150)).toBe("2m 30s left");
-  });
-});
-
-describe("getEtaLabel", () => {
-  it('returns "Estimating..." when secondsRemaining is null', () => {
-    expect(getEtaLabel(null)).toBe("Estimating...");
-  });
-
-  it('returns "Almost done" when within threshold', () => {
-    expect(getEtaLabel(3)).toBe("Almost done");
-  });
-
-  it("delegates to formatSecondsRemaining for larger values", () => {
-    expect(getEtaLabel(120)).toBe("2m left");
-  });
-});
diff --git a/src/features/exports/components/ExportProgressBar/helpers.ts b/src/features/exports/components/ExportProgressBar/helpers.ts
deleted file mode 100644
index c26d863b41..0000000000
--- a/src/features/exports/components/ExportProgressBar/helpers.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ALMOST_DONE_THRESHOLD_SECONDS, SECONDS_PER_MINUTE } from "./constants";
-
-export const formatSecondsRemaining = (seconds: number): string => {
-  const safe = Math.max(0, Math.round(seconds));
-
-  if (safe < SECONDS_PER_MINUTE) {
-    return `${safe}s left`;
-  }
-
-  const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
-  const remainderSeconds = safe % SECONDS_PER_MINUTE;
-
-  return remainderSeconds
-    ? `${minutes}m ${remainderSeconds}s left`
-    : `${minutes}m left`;
-};
-
-export const getEtaLabel = (secondsRemaining: number | null): string => {
-  if (secondsRemaining === null) {
-    return "Estimating...";
-  }
-
-  if (secondsRemaining <= ALMOST_DONE_THRESHOLD_SECONDS) {
-    return "Almost done";
-  }
-
-  return formatSecondsRemaining(secondsRemaining);
-};
diff --git a/src/features/exports/components/ExportProgressBar/index.ts b/src/features/exports/components/ExportProgressBar/index.ts
deleted file mode 100644
index d5f2ddaf0a..0000000000
--- a/src/features/exports/components/ExportProgressBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ExportProgressBar";
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
index 384e6ccbed..53b13b58c4 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.tsx
@@ -15,7 +15,7 @@ const ExportsContainer: FC = () => {
 
   const { totalCount: unfilteredCount, isLoading: isLoadingUnfiltered } =
     useGetAllExportJobsList(
-      {},
+      { limit: 1 },
       { listenToUrlParams: false, enablePolling: false },
     );
 
diff --git a/src/features/exports/components/ExportsList/ExportsList.module.scss b/src/features/exports/components/ExportsList/ExportsList.module.scss
new file mode 100644
index 0000000000..9b6f83a9ce
--- /dev/null
+++ b/src/features/exports/components/ExportsList/ExportsList.module.scss
@@ -0,0 +1,3 @@
+.status {
+  width: 25%;
+}
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index 55ccfdbaad..f640c64525 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -7,12 +7,13 @@ import moment from "moment";
 import type { FC } from "react";
 import { useMemo } from "react";
 import type { CellProps, Column } from "react-table";
-import ExportProgressBar from "../ExportProgressBar";
+import ProgressBar from "@/components/ProgressBar";
 import ExportsListActions from "../ExportsListActions";
 import { getStatusLabel, getTypeLabel } from "../../helpers";
 import { getStatusIcon, getTypeIcon } from "./helpers";
 import type { ExportJob } from "../../types/ExportJob";
 import type { ExportRowData } from "./types";
+import classes from "./ExportsList.module.scss";
 
 interface ExportsListProps {
   readonly exportJobs: ExportJob[];
@@ -25,8 +26,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
     () => [
       {
         Header: "Name",
-        accessor: "job",
-        id: "name",
+        accessor: "job.name",
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <Button
             type="button"
@@ -45,6 +45,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         Header: "Type",
         accessor: "job",
         id: "type",
+        className: classes.type,
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <>{getTypeLabel(row.original.job)}</>
         ),
@@ -55,11 +56,12 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         Header: "Status",
         accessor: "job",
         id: "status",
+        className: classes.status,
         Cell: ({ row }: CellProps<ExportRowData>) => {
           const { job } = row.original;
           if (job.status === "processing") {
             return (
-              <ExportProgressBar
+              <ProgressBar
                 progress={job.progress}
                 secondsRemaining={job.estimated_seconds_remaining ?? null}
               />
@@ -75,8 +77,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
       },
       {
         Header: "Created",
-        accessor: "job",
-        id: "createdAt",
+        accessor: "job.created_at",
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <span className="font-monospace">
             {moment(row.original.job.created_at).format(
@@ -87,8 +88,7 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
       },
       {
         Header: "Expires",
-        accessor: "job",
-        id: "retainUntil",
+        accessor: "job.retain_until",
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <span className="font-monospace">
             {moment(row.original.job.retain_until).format(
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index fbd5c6fc54..345af523dc 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -9,6 +9,7 @@ export const processingExportJob: ExportJob = {
   created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 35,
+  estimated_seconds_remaining: 150,
   download_ready: false,
   retain_until: "2029-06-03T12:10:00.000Z",
   query: "tag:production",
@@ -51,6 +52,7 @@ export const newExportJob: ExportJob = {
   created_at: "2026-06-03T12:12:00.000Z",
   status: "processing",
   progress: 0,
+  estimated_seconds_remaining: null,
   download_ready: false,
   retain_until: "2029-06-03T12:12:00.000Z",
   query: "tag:production",
@@ -65,6 +67,7 @@ export const processingActivitiesExportJob: ExportJob = {
   created_at: "2026-06-03T12:10:00.000Z",
   status: "processing",
   progress: 30,
+  estimated_seconds_remaining: 19800,
   download_ready: false,
   retain_until: "2029-06-03T12:10:00.000Z",
   query: "status:succeeded",
@@ -98,6 +101,69 @@ export const failedActivitiesExportJob: ExportJob = {
   query: null,
 };
 
+// Processing jobs covering every ETA label state in the progress bar:
+// id 4 → "Estimating..." (null), id 5 → hours + minutes, id 1 → minutes + seconds,
+// plus the four below for hours, minutes, seconds and "Almost done".
+export const processingHoursExportJob: ExportJob = {
+  id: 8,
+  name: "Instances export 2026-06-03 14:14:00",
+  filename: "instances-export-8.tsv",
+  row_count: 300,
+  type: "instance",
+  created_at: "2026-06-03T12:14:00.000Z",
+  status: "processing",
+  progress: 45,
+  estimated_seconds_remaining: 7200,
+  download_ready: false,
+  retain_until: "2029-06-03T12:14:00.000Z",
+  query: "tag:production",
+};
+
+export const processingMinutesExportJob: ExportJob = {
+  id: 9,
+  name: "Instances export 2026-06-03 14:16:00",
+  filename: "instances-export-9.tsv",
+  row_count: 200,
+  type: "instance",
+  created_at: "2026-06-03T12:16:00.000Z",
+  status: "processing",
+  progress: 60,
+  estimated_seconds_remaining: 120,
+  download_ready: false,
+  retain_until: "2029-06-03T12:16:00.000Z",
+  query: "tag:production",
+};
+
+export const processingSecondsExportJob: ExportJob = {
+  id: 10,
+  name: "Instances export 2026-06-03 14:18:00",
+  filename: "instances-export-10.tsv",
+  row_count: 80,
+  type: "instance",
+  created_at: "2026-06-03T12:18:00.000Z",
+  status: "processing",
+  progress: 88,
+  estimated_seconds_remaining: 30,
+  download_ready: false,
+  retain_until: "2029-06-03T12:18:00.000Z",
+  query: "tag:production",
+};
+
+export const processingAlmostDoneExportJob: ExportJob = {
+  id: 11,
+  name: "Instances export 2026-06-03 14:20:00",
+  filename: "instances-export-11.tsv",
+  row_count: 60,
+  type: "instance",
+  created_at: "2026-06-03T12:20:00.000Z",
+  status: "processing",
+  progress: 99,
+  estimated_seconds_remaining: 3,
+  download_ready: false,
+  retain_until: "2029-06-03T12:20:00.000Z",
+  query: "tag:production",
+};
+
 // Default fixtures served by the MSW exports handlers so the Exports UI is fully
 // browsable in dev mode (`VITE_MSW_ENABLED`) and resolvable by id in tests.
 export const DEFAULT_EXPORT_JOBS: ExportJob[] = [
@@ -108,4 +174,8 @@ export const DEFAULT_EXPORT_JOBS: ExportJob[] = [
   processingActivitiesExportJob,
   completedActivitiesExportJob,
   failedActivitiesExportJob,
+  processingHoursExportJob,
+  processingMinutesExportJob,
+  processingSecondsExportJob,
+  processingAlmostDoneExportJob,
 ];

From e4866d84f8c54268f2b14286433c3e7a4d3812b9 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 25 Jun 2026 11:45:30 +0200
Subject: [PATCH 24/41] prettier fixes

---
 src/components/ProgressBar/ProgressBar.tsx | 5 ++++-
 src/components/ProgressBar/helpers.ts      | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 5dd84deb70..7b2e18e782 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -29,7 +29,10 @@ const ProgressBar: FC<ProgressBarProps> = ({
         aria-valuemax={MAX_PROGRESS}
         aria-label="Progress"
       >
-        <div className={classes.fill} style={{ width: `${clampedProgress}%` }} />
+        <div
+          className={classes.fill}
+          style={{ width: `${clampedProgress}%` }}
+        />
       </div>
       <span className={classes.percentage}>{clampedProgress}%</span>
       <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
diff --git a/src/components/ProgressBar/helpers.ts b/src/components/ProgressBar/helpers.ts
index 6ec9f3e832..e3cfb6c729 100644
--- a/src/components/ProgressBar/helpers.ts
+++ b/src/components/ProgressBar/helpers.ts
@@ -18,7 +18,9 @@ export const formatSecondsRemaining = (seconds: number): string => {
     const minutes = Math.floor(safe / SECONDS_PER_MINUTE);
     const remainderSeconds = safe % SECONDS_PER_MINUTE;
 
-    return remainderSeconds ? `${minutes}m ${remainderSeconds}s` : `${minutes}m`;
+    return remainderSeconds
+      ? `${minutes}m ${remainderSeconds}s`
+      : `${minutes}m`;
   }
 
   return `${safe}s`;

From 14fe183d3d19d042cd2051d8fe4b757e3d08f443 Mon Sep 17 00:00:00 2001
From: Rubin Aga <rubin.aga@canonical.com>
Date: Thu, 25 Jun 2026 12:31:46 +0200
Subject: [PATCH 25/41] add copilot suggestions

---
 .../ExportDetailsSidePanel/ExportDetailsSidePanel.tsx           | 2 +-
 .../exports/components/ExportsList/ExportsList.test.tsx         | 2 +-
 src/features/exports/components/ExportsList/ExportsList.tsx     | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
index a4b0d3b05a..7ccb683375 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetailsSidePanel.tsx
@@ -23,7 +23,7 @@ const ExportDetailsSidePanel: FC = () => {
   if (!job) {
     const status = jobError?.response?.status;
     const isServerError =
-      isError && status !== undefined && status >= MIN_SERVER_ERROR_STATUS;
+      isError && (status === undefined || status >= MIN_SERVER_ERROR_STATUS);
 
     return (
       <>
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
index 842b2e14b8..ce00d85089 100644
--- a/src/features/exports/components/ExportsList/ExportsList.test.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -39,7 +39,7 @@ describe("ExportsList", () => {
     expect(screen.getByText("35%")).toBeInTheDocument();
   });
 
-  it("renders sortable header columns", () => {
+  it("renders header columns", () => {
     renderWithProviders(<ExportsList exportJobs={exportJobs} />);
 
     expect(screen.getByText("Name")).toBeInTheDocument();
diff --git a/src/features/exports/components/ExportsList/ExportsList.tsx b/src/features/exports/components/ExportsList/ExportsList.tsx
index f640c64525..bdb51c76a6 100644
--- a/src/features/exports/components/ExportsList/ExportsList.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.tsx
@@ -45,7 +45,6 @@ const ExportsList: FC<ExportsListProps> = ({ exportJobs }) => {
         Header: "Type",
         accessor: "job",
         id: "type",
-        className: classes.type,
         Cell: ({ row }: CellProps<ExportRowData>) => (
           <>{getTypeLabel(row.original.job)}</>
         ),

From 811fb238aa74d8d56686d8be8a5c3e6fe919b0c9 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Thu, 25 Jun 2026 10:07:15 -0700
Subject: [PATCH 26/41] update by_cve report export format

---
 .../ReportExportForm.test.tsx                 | 106 +++++++++++++++++-
 .../ReportExportForm/ReportExportForm.tsx     |  13 ++-
 .../components/ReportExportForm/constants.ts  |  30 ++++-
 3 files changed, 144 insertions(+), 5 deletions(-)

diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
index 525c9f2021..346979aa0a 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -130,13 +130,17 @@ describe("ReportExportForm", () => {
     // Enable by_cve
     await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
 
+    // Verify the CVE note appears
+    expect(
+      screen.getByText(/CVE exports add a cve_id and status column/i),
+    ).toBeInTheDocument();
+
     // Fill ExportForm Step 0
     await user.type(
       screen.getByRole("textbox", { name: "Export name" }),
       "My compliance export",
     );
     await openAttributeGroup(user, /primary identity/i);
-    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
     await user.click(screen.getByRole("button", { name: "Next" }));
 
     // Step 1 — submit
@@ -210,4 +214,104 @@ describe("ReportExportForm", () => {
       expect(capturedQuery).toBe("id:1 OR id:2 OR id:3 OR id:4");
     });
   });
+
+  it("renders the Compliance field group with all expected fields", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await openAttributeGroup(user, /compliance/i);
+
+    expect(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Covered by upgrade profile" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Contacted in last 5 min" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Time to patch (days)" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Upgrade profile schedule" }),
+    ).toBeInTheDocument();
+  });
+
+  it("defaults to selecting title, hostname and all compliance fields", async () => {
+    const user = userEvent.setup();
+    let requestBody: Record<string, unknown> = {};
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        requestBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: requestBody.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "instance",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: requestBody.retain_until,
+            query: requestBody.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderForm();
+
+    // Verify default selections are checked
+    await openAttributeGroup(user, /primary identity/i);
+    expect(screen.getByRole("checkbox", { name: "Hostname" })).toBeChecked();
+    expect(
+      screen.getByRole("checkbox", { name: "Instance name" }),
+    ).toBeChecked();
+
+    await openAttributeGroup(user, /compliance/i);
+    expect(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole("checkbox", { name: "Covered by upgrade profile" }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole("checkbox", { name: "Contacted in last 5 min" }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole("checkbox", { name: "Time to patch (days)" }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole("checkbox", { name: "Upgrade profile schedule" }),
+    ).toBeChecked();
+
+    // Submit and verify the default field IDs are sent
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Default fields export",
+    );
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(requestBody.selected_field_ids).toEqual(
+        expect.arrayContaining([
+          "title",
+          "hostname",
+          "securely_patched",
+          "covered_by_upgrade_profile",
+          "contacted_recently",
+          "time_to_patch_days",
+          "upgrade_profile_schedule",
+        ]),
+      );
+    });
+
+    expect((requestBody.selected_field_ids as string[]).length).toBe(7);
+  });
 });
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 4cf4ea6f28..00ea9678bc 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -7,7 +7,6 @@ import {
   type ExportField,
   type ExportFormValues,
 } from "@/features/exports";
-import { EXPORT_FIELD_GROUPS } from "@/features/instances";
 import { CheckboxInput, Select } from "@canonical/react-components";
 import moment from "moment";
 import { useState, type FC } from "react";
@@ -18,6 +17,7 @@ import classes from "./ReportExportForm.module.scss";
 import {
   BUCKET_OPTIONS,
   INITIAL_EXPORT_VALUES,
+  REPORT_EXPORT_FIELD_GROUPS,
   type BucketKey,
 } from "./constants";
 
@@ -139,8 +139,17 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
           setByCve((v) => !v);
         }}
       />
+      {byCve && (
+        <p className="u-text--muted">
+          <small>
+            CVE exports add a cve_id and status column and emit one row per
+            instance and CVE. The fields selected below are included on every
+            row.
+          </small>
+        </p>
+      )}
       <ExportForm
-        fieldGroups={EXPORT_FIELD_GROUPS}
+        fieldGroups={REPORT_EXPORT_FIELD_GROUPS}
         initialValues={INITIAL_EXPORT_VALUES}
         isSubmitting={isExportComplianceTsvLoading}
         onGenerate={handleGenerate}
diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
index 0c028b9cb2..af447ef236 100644
--- a/src/features/reports/components/ReportExportForm/constants.ts
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -1,4 +1,5 @@
-import type { ExportFormValues } from "@/features/exports";
+import type { ExportFieldGroup, ExportFormValues } from "@/features/exports";
+import { EXPORT_FIELD_GROUPS } from "@/features/instances";
 import { INPUT_DATE_FORMAT } from "@/constants";
 import moment from "moment";
 
@@ -12,8 +13,33 @@ export const BUCKET_OPTIONS = [
 
 export type BucketKey = (typeof BUCKET_OPTIONS)[number]["value"];
 
+export const REPORT_EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
+  {
+    title: "Compliance",
+    key: "compliance",
+    fields: [
+      { id: "securely_patched", label: "Securely patched" },
+      { id: "covered_by_upgrade_profile", label: "Covered by upgrade profile" },
+      { id: "contacted_recently", label: "Contacted in last 5 min" },
+      { id: "time_to_patch_days", label: "Time to patch (days)" },
+      { id: "upgrade_profile_schedule", label: "Upgrade profile schedule" },
+      { id: "resolved_cves", label: "Resolved CVEs" },
+      { id: "unresolved_cves", label: "Unresolved CVEs" },
+    ],
+  },
+  ...EXPORT_FIELD_GROUPS,
+];
+
 export const INITIAL_EXPORT_VALUES: ExportFormValues = {
   name: "",
-  selectedFieldIds: [],
+  selectedFieldIds: [
+    "title",
+    "hostname",
+    "securely_patched",
+    "covered_by_upgrade_profile",
+    "contacted_recently",
+    "time_to_patch_days",
+    "upgrade_profile_schedule",
+  ],
   retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };

From a6a5d997fd1b8c1897fe342b3e9bacd968a00b61 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 09:35:57 -0700
Subject: [PATCH 27/41] update form and detail view with description field,
 fields for by_cve=True

---
 .../ExportDetailsSidePanel/ExportDetails.tsx  |  10 +-
 .../components/ExportForm/ExportForm.test.tsx | 215 ++++++++++++++++++
 .../components/ExportForm/ExportForm.tsx      |  19 +-
 .../ExportsContainer.test.tsx                 |   4 +-
 .../ExportsList/ExportsList.test.tsx          |   4 +-
 src/features/exports/helpers.test.ts          |   4 +-
 src/features/exports/helpers.ts               |   2 +-
 src/features/exports/types/ExportJob.ts       |   1 +
 .../reports/api/useExportComplianceTsv.ts     |   1 +
 .../ReportExportForm.test.tsx                 | 173 ++++++++++++++
 .../ReportExportForm/ReportExportForm.tsx     |  28 ++-
 .../components/ReportExportForm/constants.ts  |  21 ++
 .../components/ReportView/ReportView.tsx      |  18 +-
 src/tests/mocks/exports.ts                    |   1 +
 src/utils/_helpers.test.ts                    |   4 +-
 15 files changed, 481 insertions(+), 24 deletions(-)
 create mode 100644 src/features/exports/components/ExportForm/ExportForm.test.tsx

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index 2cc5077b7c..228f8bc4dd 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -215,7 +215,15 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
                 </span>
               }
             />
-            <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
+            {job.type === "report" ? (
+              <InfoGrid.Item
+                label="Scope"
+                value={job.description ?? null}
+                large
+              />
+            ) : (
+              <InfoGrid.Item label="Filter" value={getFilterValue(job)} large />
+            )}
           </InfoGrid>
         </Blocks.Item>
       </Blocks>
diff --git a/src/features/exports/components/ExportForm/ExportForm.test.tsx b/src/features/exports/components/ExportForm/ExportForm.test.tsx
new file mode 100644
index 0000000000..e1486c31a6
--- /dev/null
+++ b/src/features/exports/components/ExportForm/ExportForm.test.tsx
@@ -0,0 +1,215 @@
+import { INPUT_DATE_FORMAT } from "@/constants";
+import { renderWithProviders } from "@/tests/render";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import moment from "moment";
+import { describe, expect, it, vi } from "vitest";
+import ExportForm from "./ExportForm";
+import type {
+  ExportFieldGroup,
+  ExportFormValues,
+} from "../../types/ExportForm";
+
+const FIELD_GROUPS: readonly ExportFieldGroup[] = [
+  {
+    title: "Primary Identity",
+    key: "primary-identity",
+    fields: [
+      { id: "hostname", label: "Hostname" },
+      { id: "title", label: "Instance name" },
+    ],
+  },
+  {
+    title: "Compliance",
+    key: "compliance",
+    fields: [
+      { id: "securely_patched", label: "Securely patched" },
+      { id: "time_to_patch_days", label: "Time to patch (days)" },
+    ],
+  },
+];
+
+const INITIAL_VALUES: ExportFormValues = {
+  name: "",
+  selectedFieldIds: [],
+  retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
+};
+
+const renderForm = (
+  overrides: Partial<{
+    initialValues: ExportFormValues;
+    onGenerate: (args: {
+      values: ExportFormValues;
+      fieldsToExport: { id: string; label: string }[];
+    }) => Promise<void>;
+  }> = {},
+) => {
+  const onGenerate =
+    overrides.onGenerate ?? vi.fn().mockResolvedValue(undefined);
+
+  renderWithProviders(
+    <ExportForm
+      fieldGroups={FIELD_GROUPS}
+      initialValues={overrides.initialValues ?? INITIAL_VALUES}
+      isSubmitting={false}
+      onGenerate={onGenerate}
+    />,
+  );
+
+  return { onGenerate };
+};
+
+const openAttributeGroup = async (
+  user: ReturnType<typeof userEvent.setup>,
+  name: RegExp,
+) => {
+  await user.click(screen.getByRole("tab", { name }));
+};
+
+describe("ExportForm", () => {
+  it("keeps Next disabled until an export name and at least one attribute are selected", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const nextButton = screen.getByRole("button", { name: "Next" });
+
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "My export",
+    );
+
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+
+    expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("filters attributes by search text and shows the empty state when nothing matches", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const searchInput = screen.getByRole("searchbox", {
+      name: "Search attributes",
+    });
+
+    await user.type(searchInput, "securely");
+
+    expect(
+      screen.getByRole("tab", { name: /compliance/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("tab", { name: /primary identity/i }),
+    ).not.toBeInTheDocument();
+
+    await user.clear(searchInput);
+    await user.type(searchInput, "does not exist");
+
+    expect(
+      screen.getByText("No attributes match your search."),
+    ).toBeInTheDocument();
+  });
+
+  it("selects and deselects all fields in a group from the group checkbox", async () => {
+    const user = userEvent.setup();
+    const onGenerate = vi.fn().mockResolvedValue(undefined);
+
+    renderForm({ onGenerate });
+
+    const exportName = screen.getByRole("textbox", { name: "Export name" });
+    const nextButton = screen.getByRole("button", { name: "Next" });
+    const groupSelectAll = screen.getByRole("checkbox", {
+      name: "Primary Identity",
+    });
+
+    await user.type(exportName, "Group selection export");
+    await user.click(groupSelectAll);
+
+    expect(nextButton).not.toHaveAttribute("aria-disabled", "true");
+
+    await user.click(nextButton);
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(onGenerate).toHaveBeenCalledWith({
+        values: expect.objectContaining({
+          selectedFieldIds: ["hostname", "title"],
+        }),
+        fieldsToExport: [
+          { id: "hostname", label: "Hostname" },
+          { id: "title", label: "Instance name" },
+        ],
+      });
+    });
+
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    await user.click(
+      screen.getByRole("checkbox", { name: "Primary Identity" }),
+    );
+
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("moves to the reorder step on the first submit and returns to step 0 with Back", async () => {
+    const user = userEvent.setup();
+    const { onGenerate } = renderForm();
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Ordered export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(onGenerate).not.toHaveBeenCalled();
+    expect(
+      screen.getByRole("button", { name: "Generate TSV" }),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "Export name" }),
+    ).toBeInTheDocument();
+  });
+
+  it("submits selected fields and form values on the second step", async () => {
+    const user = userEvent.setup();
+    const onGenerate = vi.fn().mockResolvedValue(undefined);
+
+    renderForm({ onGenerate });
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Compliance export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await openAttributeGroup(user, /compliance/i);
+    await user.click(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(onGenerate).toHaveBeenCalledWith({
+        values: expect.objectContaining({
+          name: "Compliance export",
+          selectedFieldIds: ["hostname", "securely_patched"],
+          retainUntil: INITIAL_VALUES.retainUntil,
+        }),
+        fieldsToExport: [
+          { id: "hostname", label: "Hostname" },
+          { id: "securely_patched", label: "Securely patched" },
+        ],
+      });
+    });
+  });
+});
diff --git a/src/features/exports/components/ExportForm/ExportForm.tsx b/src/features/exports/components/ExportForm/ExportForm.tsx
index a3ce1de0d1..8588347c37 100644
--- a/src/features/exports/components/ExportForm/ExportForm.tsx
+++ b/src/features/exports/components/ExportForm/ExportForm.tsx
@@ -11,7 +11,7 @@ import {
 import classNames from "classnames";
 import { useFormik } from "formik";
 import moment from "moment";
-import { useCallback, useMemo, useState, type FC } from "react";
+import { useCallback, useMemo, useState, type FC, type ReactNode } from "react";
 import SortableFieldList from "../SortableFieldList";
 import { VALIDATION_SCHEMA } from "./constants";
 import classes from "./ExportForm.module.scss";
@@ -30,6 +30,7 @@ interface ExportFormProps {
     values: ExportFormValues;
     fieldsToExport: ExportField[];
   }) => Promise<void>;
+  readonly sortableNote?: ReactNode;
 }
 
 const ExportForm: FC<ExportFormProps> = ({
@@ -37,6 +38,7 @@ const ExportForm: FC<ExportFormProps> = ({
   initialValues,
   isSubmitting,
   onGenerate,
+  sortableNote,
 }) => {
   const { closeSidePanel } = useSidePanel();
   const [step, setStep] = useState<StepIndex>(0);
@@ -216,10 +218,17 @@ const ExportForm: FC<ExportFormProps> = ({
         </div>
       </>
     ) : (
-      <SortableFieldList
-        fields={orderedFields}
-        onOrderChange={setOrderedFields}
-      />
+      <>
+        {sortableNote && (
+          <p className="u-text--muted">
+            <small>{sortableNote}</small>
+          </p>
+        )}
+        <SortableFieldList
+          fields={orderedFields}
+          onOrderChange={setOrderedFields}
+        />
+      </>
     );
 
   return (
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
index c156d81d45..c5a7ee8618 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -62,7 +62,7 @@ describe("ExportsContainer", () => {
     expect(screen.getByRole("button", { name: /type/i })).toBeInTheDocument();
   });
 
-  it("renders report exports with the Reports type label", async () => {
+  it('renders report exports with the "Instances in report" type label', async () => {
     setEndpointStatus({
       status: "variant",
       path: "exports",
@@ -74,6 +74,6 @@ describe("ExportsContainer", () => {
     await expectLoadingState();
 
     expect(screen.getByText(newComplianceExportJob.name)).toBeInTheDocument();
-    expect(screen.getByText("Reports")).toBeInTheDocument();
+    expect(screen.getByText("Instances in report")).toBeInTheDocument();
   });
 });
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
index f251fe9344..93d690653e 100644
--- a/src/features/exports/components/ExportsList/ExportsList.test.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -27,10 +27,10 @@ describe("ExportsList", () => {
     expect(typeCells.length).toBe(3);
   });
 
-  it('renders "Reports" as the type label for report exports', () => {
+  it('renders "Instances in report" as the type label for report exports', () => {
     renderWithProviders(<ExportsList exportJobs={[newComplianceExportJob]} />);
 
-    expect(screen.getByText("Reports")).toBeInTheDocument();
+    expect(screen.getByText("Instances in report")).toBeInTheDocument();
   });
 
   it("renders the status labels", () => {
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
index 180d819213..177de17ec6 100644
--- a/src/features/exports/helpers.test.ts
+++ b/src/features/exports/helpers.test.ts
@@ -115,7 +115,7 @@ describe("getTypeLabel", () => {
     expect(getTypeLabel(completedActivitiesExportJob)).toBe("Activities");
   });
 
-  it('returns "Reports" for report exports', () => {
-    expect(getTypeLabel(newComplianceExportJob)).toBe("Reports");
+  it('returns "Instances in report" for report exports', () => {
+    expect(getTypeLabel(newComplianceExportJob)).toBe("Instances in report");
   });
 });
diff --git a/src/features/exports/helpers.ts b/src/features/exports/helpers.ts
index e8ff37a049..4fc3bbdefb 100644
--- a/src/features/exports/helpers.ts
+++ b/src/features/exports/helpers.ts
@@ -51,7 +51,7 @@ export const getTypeLabel = (job: ExportJob): string => {
     case "activity":
       return "Activities";
     case "report":
-      return "Reports";
+      return "Instances in report";
     default:
       return "Instances";
   }
diff --git a/src/features/exports/types/ExportJob.ts b/src/features/exports/types/ExportJob.ts
index 4796deb8b1..2cff4e9d41 100644
--- a/src/features/exports/types/ExportJob.ts
+++ b/src/features/exports/types/ExportJob.ts
@@ -15,4 +15,5 @@ export interface ExportJob {
   download_ready: boolean;
   retain_until: string;
   query?: string | null;
+  description?: string | null;
 }
diff --git a/src/features/reports/api/useExportComplianceTsv.ts b/src/features/reports/api/useExportComplianceTsv.ts
index 935a88d5d5..00888499b4 100644
--- a/src/features/reports/api/useExportComplianceTsv.ts
+++ b/src/features/reports/api/useExportComplianceTsv.ts
@@ -6,6 +6,7 @@ import type { AxiosError, AxiosResponse } from "axios";
 
 interface CreateComplianceExportParams {
   readonly name: string;
+  readonly description?: string;
   readonly query: string;
   readonly by_cve: boolean;
   readonly selected_field_ids: string[];
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
index 346979aa0a..f48cf9fc66 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -314,4 +314,177 @@ describe("ReportExportForm", () => {
 
     expect((requestBody.selected_field_ids as string[]).length).toBe(7);
   });
+
+  it("shows Resolved CVEs and Unresolved CVEs in the Compliance group when byCve is off", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await openAttributeGroup(user, /compliance/i);
+
+    expect(
+      screen.getByRole("checkbox", { name: "Resolved CVEs" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Unresolved CVEs" }),
+    ).toBeInTheDocument();
+  });
+
+  it("hides Resolved CVEs and Unresolved CVEs from the Compliance group when byCve is on", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
+    await openAttributeGroup(user, /compliance/i);
+
+    expect(
+      screen.queryByRole("checkbox", { name: "Resolved CVEs" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("checkbox", { name: "Unresolved CVEs" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps other Compliance fields visible when byCve is on", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
+    await openAttributeGroup(user, /compliance/i);
+
+    expect(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Covered by upgrade profile" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Time to patch (days)" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows the cve_id/cve_status column note on step 1 when byCve is on", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "CVE export",
+    );
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(
+      screen.getByText(
+        /cve_id and cve_status will always be the first two columns/i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show the cve_id/cve_status column note on step 1 when byCve is off", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Instance export",
+    );
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(
+      screen.queryByText(
+        /cve_id and cve_status will always be the first two columns/i,
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it("sends a human-readable bucket description", async () => {
+    const user = userEvent.setup();
+    let capturedDescription = "";
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        const body = (await request.json()) as Record<string, unknown>;
+        capturedDescription =
+          typeof body.description === "string" ? body.description : "";
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: body.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "report",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: body.retain_until,
+            query: body.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderForm();
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Test export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(capturedDescription).toBe(
+        "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days",
+      );
+    });
+  });
+
+  it("appends 'organized by CVE' to description when byCve is on", async () => {
+    const user = userEvent.setup();
+    let capturedDescription = "";
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        const body = (await request.json()) as Record<string, unknown>;
+        capturedDescription =
+          typeof body.description === "string" ? body.description : "";
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: body.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "report",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: body.retain_until,
+            query: body.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderForm();
+
+    await user.click(screen.getByRole("checkbox", { name: "Report by CVE" }));
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Test export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(capturedDescription).toBe(
+        "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days organized by CVE",
+      );
+    });
+  });
 });
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 00ea9678bc..2543aaa09c 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -9,13 +9,14 @@ import {
 } from "@/features/exports";
 import { CheckboxInput, Select } from "@canonical/react-components";
 import moment from "moment";
-import { useState, type FC } from "react";
+import { useMemo, useState, type FC } from "react";
 import { useNavigate } from "react-router";
 import { useExportComplianceTsv } from "../../api/useExportComplianceTsv";
 import ReportHelpTooltip from "../ReportHelpTooltip";
 import classes from "./ReportExportForm.module.scss";
 import {
   BUCKET_OPTIONS,
+  buildExportDescription,
   INITIAL_EXPORT_VALUES,
   REPORT_EXPORT_FIELD_GROUPS,
   type BucketKey,
@@ -43,6 +44,22 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
   const [includeOther, setIncludeOther] = useState(false);
   const [byCve, setByCve] = useState(false);
 
+  // Hide aggregate CVE columns when byCve=true — they are always empty in that
+  // mode because _build_cve_tsv emits one row per (instance, CVE) and never
+  // populates the resolved_cves/unresolved_cves metrics.
+  const CVE_AGGREGATE_IDS = new Set(["resolved_cves", "unresolved_cves"]);
+  const fieldGroups = useMemo(
+    () =>
+      byCve
+        ? REPORT_EXPORT_FIELD_GROUPS.map((group) => ({
+            ...group,
+            fields: group.fields.filter((f) => !CVE_AGGREGATE_IDS.has(f.id)),
+          })).filter((group) => group.fields.length > 0)
+        : REPORT_EXPORT_FIELD_GROUPS,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [byCve],
+  );
+
   const resolvedIds = [
     ...bucketIds[selectedBucket],
     ...(includeOther ? otherIds : []),
@@ -66,8 +83,10 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
       return;
     }
     try {
+      const description = buildExportDescription(selectedBucket, byCve);
       const response = await exportComplianceTsv({
         name: values.name.trim(),
+        description,
         query,
         by_cve: byCve,
         selected_field_ids: fieldsToExport.map((f) => f.id),
@@ -149,10 +168,15 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
         </p>
       )}
       <ExportForm
-        fieldGroups={REPORT_EXPORT_FIELD_GROUPS}
+        fieldGroups={fieldGroups}
         initialValues={INITIAL_EXPORT_VALUES}
         isSubmitting={isExportComplianceTsvLoading}
         onGenerate={handleGenerate}
+        sortableNote={
+          byCve
+            ? "cve_id and cve_status will always be the first two columns in this export."
+            : undefined
+        }
       />
     </>
   );
diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
index af447ef236..0b744be076 100644
--- a/src/features/reports/components/ReportExportForm/constants.ts
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -30,6 +30,27 @@ export const REPORT_EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
   ...EXPORT_FIELD_GROUPS,
 ];
 
+const BUCKET_TIME_PHRASES: Record<BucketKey, string> = {
+  "over-60": "more than 60 days",
+  "30-60": "30\u201360 days",
+  "14-30": "14\u201330 days",
+  "2-14": "2\u201314 days",
+  "within-2": "fewer than 2 days",
+};
+
+export const buildExportDescription = (
+  bucket: BucketKey,
+  byCve: boolean,
+): string => {
+  const timePhrase = BUCKET_TIME_PHRASES[bucket];
+  const pendingSuffix =
+    bucket === "over-60"
+      ? ", or have an unapplied USN released within the last 60 days"
+      : "";
+  const cveSuffix = byCve ? " organized by CVE" : "";
+  return `Instances that took ${timePhrase} to apply a USN${pendingSuffix}${cveSuffix}`;
+};
+
 export const INITIAL_EXPORT_VALUES: ExportFormValues = {
   name: "",
   selectedFieldIds: [
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index 003c5bc6df..d12446b5b6 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -1,4 +1,3 @@
-import SidePanelFormButtons from "@/components/form/SidePanelFormButtons";
 import LoadingState from "@/components/layout/LoadingState";
 import {
   CONTACT_SUPPORT_TEAM_MESSAGE,
@@ -11,7 +10,7 @@ import {
 import { ROUTES } from "@/libs/routes";
 import useSidePanel from "@/hooks/useSidePanel";
 import { pluralize } from "@/utils/_helpers";
-import { Notification } from "@canonical/react-components";
+import { Button, Notification } from "@canonical/react-components";
 import classNames from "classnames";
 import moment from "moment";
 import type { FC } from "react";
@@ -240,6 +239,16 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
 
   return (
     <>
+      <div className="p-segmented-control">
+        <Button
+          type="button"
+          appearance="positive"
+          className="p-segmented-control__button"
+          onClick={handleExportDialog}
+        >
+          <span>Export as TSV</span>
+        </Button>
+      </div>
       {selectionChanged && (
         <Notification
           severity="information"
@@ -277,11 +286,6 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
       <p className="u-text--muted p-text--small">
         {`Report generated ${moment(report.generated_at).format(DISPLAY_DATE_TIME_FORMAT)}`}
       </p>
-      <SidePanelFormButtons
-        submitButtonDisabled={false}
-        submitButtonText="Export as TSV"
-        onSubmit={handleExportDialog}
-      />
     </>
   );
 };
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 13c2273729..4de9c6908c 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -110,6 +110,7 @@ export const newComplianceExportJob: ExportJob = {
   download_ready: false,
   retain_until: "2029-06-24T10:00:00.000Z",
   query: "id:42 OR id:107",
+  description: "All instances | 60+ days outstanding",
 };
 
 // Default fixtures served by the MSW exports handlers so the Exports UI is fully
diff --git a/src/utils/_helpers.test.ts b/src/utils/_helpers.test.ts
index 5244d880be..4e38c69ebd 100644
--- a/src/utils/_helpers.test.ts
+++ b/src/utils/_helpers.test.ts
@@ -154,7 +154,7 @@ describe("handleParams", () => {
     expect(result.filter).toBe(JSON.stringify(payload));
   });
 
-  it("only ignores undefined", () => {
+  it("ignores undefined and empty strings", () => {
     const config = makeConfig({
       method: "get",
       params: {
@@ -166,7 +166,7 @@ describe("handleParams", () => {
     });
 
     const result = handleParams({ config, isOld: false });
-    expect(result).toStrictEqual({ emptyStr: "", emptyArr: "", valid: "yes" });
+    expect(result).toStrictEqual({ emptyArr: "", valid: "yes" });
   });
 
   it("throws when encountering an unsupported type", () => {

From 8f2da0ecd36a4328f9dc3b41caae7f2e8566f2f9 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 11:55:33 -0700
Subject: [PATCH 28/41] Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../instances/InstancesPage/InstancesPage.tsx | 19 ++++++++-----------
 src/tests/server/handlers/reports.ts          |  2 +-
 src/utils/_helpers.ts                         |  6 +++++-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
index b661de3dd1..205fd51f78 100644
--- a/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
+++ b/src/pages/dashboard/instances/InstancesPage/InstancesPage.tsx
@@ -10,16 +10,13 @@ import {
 } from "@/features/instances";
 import usePageParams from "@/hooks/usePageParams";
 import type { Instance } from "@/types/Instance";
-import { useCallback, useEffect, useMemo, useState, type FC } from "react";
+import { useCallback, useEffect, useState, type FC } from "react";
 import InstancesContainer from "../InstancesContainer";
 import { getQuery } from "./helpers";
 
 const InstancesPage: FC = () => {
   const { currentPage, pageSize, wsl, ...filters } = usePageParams();
-  const instanceListParams = useMemo(
-    () => getInstanceListParams({ filters, wsl }),
-    [filters, wsl],
-  );
+  const instanceListParams = getInstanceListParams({ filters, wsl });
   const { query } = filters;
 
   const { instances, instancesCount, isGettingInstances } = useGetInstances({
@@ -37,14 +34,14 @@ const InstancesPage: FC = () => {
   const [selectedInstances, setSelectedInstances] = useState<Instance[]>([]);
 
   // Clear the selection when the search query changes (e.g. following a report
-  // deep link), matching how header filter changes reset it. Resetting state
-  // during render (React's documented pattern) avoids an extra commit.
-  const [trackedQuery, setTrackedQuery] = useState(query);
+  // deep link), matching how header filter changes reset it.
   const [isAllSelected, setIsAllSelected] = useState(false);
-  if (trackedQuery !== query) {
-    setTrackedQuery(query);
+
+  useEffect(() => {
     setSelectedInstances([]);
-  }
+    setIsAllSelected(false);
+    setIsAllSelected(false);
+  }, [query]);
 
   // Mirror the selection into an external store so side panel content (whose
   // props are frozen when the panel opens) can detect selection changes.
diff --git a/src/tests/server/handlers/reports.ts b/src/tests/server/handlers/reports.ts
index 74e22fd3d6..34fb87b434 100644
--- a/src/tests/server/handlers/reports.ts
+++ b/src/tests/server/handlers/reports.ts
@@ -43,7 +43,7 @@ export const emptyComplianceReport: ComplianceReport = {
 export default [
   http.get(`${API_URL}computers/report`, () => {
     if (shouldApplyEndpointStatus("computers/report")) {
-      const { status } = getEndpointStatus();
+      const { status } = getEndpointStatus("computers/report");
 
       if (status === "error") {
         throw createEndpointStatusNetworkError();
diff --git a/src/utils/_helpers.ts b/src/utils/_helpers.ts
index 979d228f89..b0cb8857b1 100644
--- a/src/utils/_helpers.ts
+++ b/src/utils/_helpers.ts
@@ -77,7 +77,11 @@ export const handleParams = ({
     } else {
       switch (typeof value) {
         case "string":
-          if (!isOld && value === "") {
+          if (
+            !isOld &&
+            ["get", "delete"].includes(config.method ?? "get") &&
+            value === ""
+          ) {
             break;
           }
           paramsToPass[param] = value;

From 0442bbfe63cd148ee2680568a4eea9c3158be17b Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 12:51:43 -0700
Subject: [PATCH 29/41] update description field

---
 .../ReportExportForm.test.tsx                 | 58 +++++++++++++++++++
 .../ReportExportForm/ReportExportForm.tsx     |  2 +-
 .../components/ReportExportForm/constants.ts  |  6 +-
 .../components/ReportView/ReportView.tsx      |  2 +-
 4 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
index f48cf9fc66..8a8c51e2bb 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -1,5 +1,6 @@
 import { API_URL } from "@/constants";
 import server from "@/tests/server";
+import { complianceReport } from "@/tests/server/handlers/reports";
 import { renderWithProviders } from "@/tests/render";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -19,6 +20,12 @@ const BUCKET_IDS: Record<BucketKey, readonly number[]> = {
   "within-2": [1, 2, 3, 4],
 };
 const OTHER_IDS: readonly number[] = [];
+// Securely-patched IDs not in the over-60 bucket represent real "other" instances
+// for a parent that opens the export form with the default bucket selected.
+const OTHER_IDS_WITH_CONTENT: readonly number[] =
+  complianceReport.securely_patched.computer_ids.filter(
+    (id) => !BUCKET_IDS["over-60"].includes(id),
+  );
 
 const renderForm = () =>
   renderWithProviders(
@@ -397,6 +404,57 @@ describe("ReportExportForm", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("appends 'including other unclassified instances' to description when Include Other is checked", async () => {
+    const user = userEvent.setup();
+    let capturedDescription = "";
+
+    server.use(
+      http.post(`${API_URL}computers/report\\:export`, async ({ request }) => {
+        const body = (await request.json()) as Record<string, unknown>;
+        capturedDescription =
+          typeof body.description === "string" ? body.description : "";
+        return HttpResponse.json(
+          {
+            id: 8,
+            name: body.name,
+            filename: "compliance-export-1.tsv",
+            row_count: 0,
+            type: "report",
+            created_at: new Date().toISOString(),
+            status: "processing",
+            progress: 0,
+            download_ready: false,
+            retain_until: body.retain_until,
+            query: body.query,
+          },
+          { status: 201 },
+        );
+      }),
+    );
+
+    renderWithProviders(
+      <ReportExportForm
+        bucketIds={BUCKET_IDS}
+        otherIds={OTHER_IDS_WITH_CONTENT}
+      />,
+    );
+
+    await user.click(screen.getByRole("checkbox", { name: "Include Other" }));
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Test export",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(capturedDescription).toBe(
+        "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days, including other unclassified instances",
+      );
+    });
+  });
+
   it("sends a human-readable bucket description", async () => {
     const user = userEvent.setup();
     let capturedDescription = "";
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 2543aaa09c..3449d3e0c0 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -83,7 +83,7 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
       return;
     }
     try {
-      const description = buildExportDescription(selectedBucket, byCve);
+      const description = buildExportDescription(selectedBucket, includeOther, byCve);
       const response = await exportComplianceTsv({
         name: values.name.trim(),
         description,
diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
index 0b744be076..663854844c 100644
--- a/src/features/reports/components/ReportExportForm/constants.ts
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -40,6 +40,7 @@ const BUCKET_TIME_PHRASES: Record<BucketKey, string> = {
 
 export const buildExportDescription = (
   bucket: BucketKey,
+  includeOther: boolean,
   byCve: boolean,
 ): string => {
   const timePhrase = BUCKET_TIME_PHRASES[bucket];
@@ -47,8 +48,11 @@ export const buildExportDescription = (
     bucket === "over-60"
       ? ", or have an unapplied USN released within the last 60 days"
       : "";
+  const otherSuffix = includeOther
+    ? ", including other unclassified instances"
+    : "";
   const cveSuffix = byCve ? " organized by CVE" : "";
-  return `Instances that took ${timePhrase} to apply a USN${pendingSuffix}${cveSuffix}`;
+  return `Instances that took ${timePhrase} to apply a USN${pendingSuffix}${otherSuffix}${cveSuffix}`;
 };
 
 export const INITIAL_EXPORT_VALUES: ExportFormValues = {
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index d12446b5b6..aae1632761 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -134,7 +134,7 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
   ]);
   const otherIds = [...accountedIds].filter((id) => !classified.has(id));
   const OTHER_DETAIL =
-    "Instances that took more than 60 days to apply a USN, or have an unapplied USN released within the last 60 days.";
+    "Instances with a USN outstanding for under 60 days, or that last applied a USN more than 60 days ago.";
 
   const segmentDefs: {
     key: string;

From 1fb0957bbca885ae8360b5b67db0e89b6cbabd11 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 12:56:36 -0700
Subject: [PATCH 30/41] fix failing tests

---
 .../InstancesPageActions/InstancesPageActions.test.tsx         | 3 +++
 src/tests/server/handlers/exports.ts                           | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index ba6ee22639..52570974ad 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -153,6 +153,9 @@ describe("InstancesPageActions", () => {
         <InstancesPageActions
           isGettingInstances={false}
           selectedInstances={selected}
+          instanceCount={selected.length}
+          isAllSelected={false}
+          exportParams={exportParams}
         />,
       );
 
diff --git a/src/tests/server/handlers/exports.ts b/src/tests/server/handlers/exports.ts
index 4563172236..5db830ff8c 100644
--- a/src/tests/server/handlers/exports.ts
+++ b/src/tests/server/handlers/exports.ts
@@ -42,7 +42,7 @@ export default [
     if (shouldApplyEndpointStatus(EXPORTS_PATH)) {
       const { status, response } = getEndpointStatus(EXPORTS_PATH);
       if (status === "error") throw createEndpointStatusNetworkError();
-      if (status === "loading") return new Promise(() => undefined);
+      if (status === "loading") return new Promise<never>(() => undefined);
       if (status === "empty") {
         return HttpResponse.json({ count: 0, results: [] });
       }

From 5f40b9ef1752287792f635a86f0dd86e4299366f Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 13:19:34 -0700
Subject: [PATCH 31/41] run prettier

---
 .../components/ReportExportForm/ReportExportForm.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
index 3449d3e0c0..03e016cb09 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.tsx
@@ -83,7 +83,11 @@ const ReportExportForm: FC<ReportExportFormProps> = ({
       return;
     }
     try {
-      const description = buildExportDescription(selectedBucket, includeOther, byCve);
+      const description = buildExportDescription(
+        selectedBucket,
+        includeOther,
+        byCve,
+      );
       const response = await exportComplianceTsv({
         name: values.name.trim(),
         description,

From 29ace65d06069e9092d8c0af5f7bc904322c53d1 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 13:31:50 -0700
Subject: [PATCH 32/41] Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../exports/components/ExportDetailsSidePanel/ExportDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index 81ef9e2a17..563fad8511 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -43,8 +43,8 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
           title: "TSV download started",
           message: `${job.name} has been downloaded and removed from the export list.`,
         });
+        popSidePathUntilClear();
       }
-      popSidePathUntilClear();
     } catch (error) {
       debug(error);
     }

From 3beae26ac12eebb4d6bb77e38e7b7c1c3e76c918 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 13:49:13 -0700
Subject: [PATCH 33/41] update exportsList label and tests

---
 .../components/ExportDetailsSidePanel/ExportDetails.tsx    | 2 +-
 .../components/ExportsContainer/ExportsContainer.test.tsx  | 4 ++--
 .../exports/components/ExportsList/ExportsList.test.tsx    | 4 ++--
 src/features/exports/helpers.test.ts                       | 4 ++--
 src/features/exports/helpers.ts                            | 7 +++++--
 src/tests/mocks/exports.ts                                 | 2 +-
 6 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
index 563fad8511..b0dd2ee853 100644
--- a/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
+++ b/src/features/exports/components/ExportDetailsSidePanel/ExportDetails.tsx
@@ -84,7 +84,7 @@ const ExportDetails: FC<ExportDetailsProps> = ({ job }) => {
     }
   };
 
-  const countLabel = getTypeLabel(job);
+  const countLabel = getTypeLabel(job, "details");
 
   return (
     <>
diff --git a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
index c5a7ee8618..20996c29a0 100644
--- a/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
+++ b/src/features/exports/components/ExportsContainer/ExportsContainer.test.tsx
@@ -62,7 +62,7 @@ describe("ExportsContainer", () => {
     expect(screen.getByRole("button", { name: /type/i })).toBeInTheDocument();
   });
 
-  it('renders report exports with the "Instances in report" type label', async () => {
+  it('renders report exports with the "Report" type label', async () => {
     setEndpointStatus({
       status: "variant",
       path: "exports",
@@ -74,6 +74,6 @@ describe("ExportsContainer", () => {
     await expectLoadingState();
 
     expect(screen.getByText(newComplianceExportJob.name)).toBeInTheDocument();
-    expect(screen.getByText("Instances in report")).toBeInTheDocument();
+    expect(screen.getByText("Report")).toBeInTheDocument();
   });
 });
diff --git a/src/features/exports/components/ExportsList/ExportsList.test.tsx b/src/features/exports/components/ExportsList/ExportsList.test.tsx
index 6489387dc0..c33fa5fb27 100644
--- a/src/features/exports/components/ExportsList/ExportsList.test.tsx
+++ b/src/features/exports/components/ExportsList/ExportsList.test.tsx
@@ -27,10 +27,10 @@ describe("ExportsList", () => {
     expect(typeCells.length).toBe(3);
   });
 
-  it('renders "Instances in report" as the type label for report exports', () => {
+  it('renders "Report" as the type label for report exports', () => {
     renderWithProviders(<ExportsList exportJobs={[newComplianceExportJob]} />);
 
-    expect(screen.getByText("Instances in report")).toBeInTheDocument();
+    expect(screen.getByText("Report")).toBeInTheDocument();
   });
 
   it("renders the status labels", () => {
diff --git a/src/features/exports/helpers.test.ts b/src/features/exports/helpers.test.ts
index 177de17ec6..e960195491 100644
--- a/src/features/exports/helpers.test.ts
+++ b/src/features/exports/helpers.test.ts
@@ -115,7 +115,7 @@ describe("getTypeLabel", () => {
     expect(getTypeLabel(completedActivitiesExportJob)).toBe("Activities");
   });
 
-  it('returns "Instances in report" for report exports', () => {
-    expect(getTypeLabel(newComplianceExportJob)).toBe("Instances in report");
+  it('returns "Report" for report exports', () => {
+    expect(getTypeLabel(newComplianceExportJob)).toBe("Report");
   });
 });
diff --git a/src/features/exports/helpers.ts b/src/features/exports/helpers.ts
index 4fc3bbdefb..8f4076c9ae 100644
--- a/src/features/exports/helpers.ts
+++ b/src/features/exports/helpers.ts
@@ -46,12 +46,15 @@ export const getStatusLabel = (job: ExportJob): string => {
   }
 };
 
-export const getTypeLabel = (job: ExportJob): string => {
+export const getTypeLabel = (job: ExportJob, source?: string): string => {
   switch (job.type) {
     case "activity":
       return "Activities";
     case "report":
-      return "Instances in report";
+      if (source === "details") {
+        return "Instances in report";
+      }
+      return "Report";
     default:
       return "Instances";
   }
diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index 3c72a8b6e2..a026e69d02 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -165,7 +165,7 @@ export const processingAlmostDoneExportJob: ExportJob = {
 };
 
 export const newComplianceExportJob: ExportJob = {
-  id: 8,
+  id: 12,
   name: "Compliance export 2026-06-24 10:00:00",
   filename: "compliance-export-1.tsv",
   row_count: 0,

From 5565745b810db78d5f7f58c4f0b410e16ec14dbf Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Fri, 26 Jun 2026 13:51:40 -0700
Subject: [PATCH 34/41] update sample description

---
 src/tests/mocks/exports.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tests/mocks/exports.ts b/src/tests/mocks/exports.ts
index a026e69d02..b7452a9664 100644
--- a/src/tests/mocks/exports.ts
+++ b/src/tests/mocks/exports.ts
@@ -176,7 +176,8 @@ export const newComplianceExportJob: ExportJob = {
   download_ready: false,
   retain_until: "2029-06-24T10:00:00.000Z",
   query: "id:42 OR id:107",
-  description: "All instances | 60+ days outstanding",
+  description:
+    "Instances that took 14-30 days to apply a USN, including other unclassified instances, organized by CVE",
 };
 
 // Default fixtures served by the MSW exports handlers so the Exports UI is fully

From ec88683b9cc58b56129c3e47e35d64ee76672a1e Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Mon, 29 Jun 2026 10:41:20 -0700
Subject: [PATCH 35/41] add cve fields to default selection for instance
 compliance reports

---
 src/features/reports/components/ReportExportForm/constants.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
index 663854844c..97bd9315f0 100644
--- a/src/features/reports/components/ReportExportForm/constants.ts
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -65,6 +65,8 @@ export const INITIAL_EXPORT_VALUES: ExportFormValues = {
     "contacted_recently",
     "time_to_patch_days",
     "upgrade_profile_schedule",
+    "resolved_cves",
+    "unresolved_cves",
   ],
   retainUntil: moment().add(3, "years").format(INPUT_DATE_FORMAT),
 };

From c448b7b8bc4c0d0a6de9dc2ed231a743e6f794dc Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Mon, 29 Jun 2026 11:10:31 -0700
Subject: [PATCH 36/41] display primary identity group before compliance in
 report export fields

---
 .../components/ReportExportForm/constants.ts  | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/features/reports/components/ReportExportForm/constants.ts b/src/features/reports/components/ReportExportForm/constants.ts
index 97bd9315f0..a7357b4ac4 100644
--- a/src/features/reports/components/ReportExportForm/constants.ts
+++ b/src/features/reports/components/ReportExportForm/constants.ts
@@ -13,21 +13,27 @@ export const BUCKET_OPTIONS = [
 
 export type BucketKey = (typeof BUCKET_OPTIONS)[number]["value"];
 
+const COMPLIANCE_FIELD_GROUP: ExportFieldGroup = {
+  title: "Compliance",
+  key: "compliance",
+  fields: [
+    { id: "securely_patched", label: "Securely patched" },
+    { id: "covered_by_upgrade_profile", label: "Covered by upgrade profile" },
+    { id: "contacted_recently", label: "Contacted in last 5 min" },
+    { id: "time_to_patch_days", label: "Time to patch (days)" },
+    { id: "upgrade_profile_schedule", label: "Upgrade profile schedule" },
+    { id: "resolved_cves", label: "Resolved CVEs" },
+    { id: "unresolved_cves", label: "Unresolved CVEs" },
+  ],
+};
+
+const [primaryIdentityGroup, ...remainingInstanceGroups] = EXPORT_FIELD_GROUPS;
+
 export const REPORT_EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
-  {
-    title: "Compliance",
-    key: "compliance",
-    fields: [
-      { id: "securely_patched", label: "Securely patched" },
-      { id: "covered_by_upgrade_profile", label: "Covered by upgrade profile" },
-      { id: "contacted_recently", label: "Contacted in last 5 min" },
-      { id: "time_to_patch_days", label: "Time to patch (days)" },
-      { id: "upgrade_profile_schedule", label: "Upgrade profile schedule" },
-      { id: "resolved_cves", label: "Resolved CVEs" },
-      { id: "unresolved_cves", label: "Unresolved CVEs" },
-    ],
-  },
-  ...EXPORT_FIELD_GROUPS,
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  primaryIdentityGroup!,
+  COMPLIANCE_FIELD_GROUP,
+  ...remainingInstanceGroups,
 ];
 
 const BUCKET_TIME_PHRASES: Record<BucketKey, string> = {

From 54837ebd139a860aa666a68452f16d01ffe034dd Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Mon, 29 Jun 2026 13:10:45 -0700
Subject: [PATCH 37/41] merge in field updates, fix tests

---
 .../ProgressBar/ProgressBar.module.scss       |  11 +-
 src/components/ProgressBar/ProgressBar.tsx    |  48 +++-
 .../components/ExportForm/ExportForm.test.tsx | 113 ++++++++-
 .../components/ExportForm/ExportForm.tsx      |  37 ++-
 .../SortableFieldList.module.scss             |  20 +-
 .../SortableFieldList.test.tsx                | 239 ++++++++++++++++++
 .../SortableFieldList/SortableFieldList.tsx   |  35 ++-
 src/features/exports/types/ExportForm.ts      |   1 +
 .../InstancesExportForm.test.tsx              |   4 +-
 .../InstancesExportForm/constants.ts          | 106 ++++----
 .../InstancesPageActions.test.tsx             |  12 +-
 .../instances}/helpers.test.ts                |  22 ++
 .../ReportExportForm.test.tsx                 |   4 +-
 .../components/ReportView/ReportView.test.tsx |   1 +
 .../components/ReportView/ReportView.tsx      |   1 +
 15 files changed, 558 insertions(+), 96 deletions(-)
 create mode 100644 src/features/exports/components/SortableFieldList/SortableFieldList.test.tsx
 rename src/{pages/dashboard/instances/InstancesPage => features/instances}/helpers.test.ts (86%)

diff --git a/src/components/ProgressBar/ProgressBar.module.scss b/src/components/ProgressBar/ProgressBar.module.scss
index 6cbd7ea815..7ec95e2241 100644
--- a/src/components/ProgressBar/ProgressBar.module.scss
+++ b/src/components/ProgressBar/ProgressBar.module.scss
@@ -3,10 +3,17 @@
 .wrapper {
   align-items: center;
   display: flex;
-  gap: 0.5rem;
   width: 100%;
 }
 
+.content {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .fullWidth {
   .bar {
     max-width: none;
@@ -30,8 +37,6 @@
 
 .percentage {
   flex: 0 0 auto;
-  font-weight: 600;
-  min-width: 2.75rem;
 }
 
 .eta {
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 7b2e18e782..4b1c79ba0a 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -2,17 +2,20 @@ import type { FC } from "react";
 import { MAX_PROGRESS } from "./constants";
 import { getEtaLabel } from "./helpers";
 import classes from "./ProgressBar.module.scss";
+import classNames from "classnames";
 
 export interface ProgressBarProps {
   readonly progress: number;
   readonly secondsRemaining: number | null;
   readonly fullWidth?: boolean;
+  readonly loading?: boolean;
 }
 
 const ProgressBar: FC<ProgressBarProps> = ({
   progress,
   secondsRemaining,
   fullWidth = false,
+  loading = false,
 }) => {
   const clampedProgress = Math.min(
     MAX_PROGRESS,
@@ -21,21 +24,40 @@ const ProgressBar: FC<ProgressBarProps> = ({
 
   return (
     <div className={`${classes.wrapper} ${fullWidth ? classes.fullWidth : ""}`}>
-      <div
-        className={classes.bar}
-        role="progressbar"
-        aria-valuenow={clampedProgress}
-        aria-valuemin={0}
-        aria-valuemax={MAX_PROGRESS}
-        aria-label="Progress"
-      >
+      {loading && (
+        <i className="p-icon--spinner u-animation--spin" aria-hidden="true" />
+      )}
+      <div className={classes.content}>
         <div
-          className={classes.fill}
-          style={{ width: `${clampedProgress}%` }}
-        />
+          className={classes.bar}
+          role="progressbar"
+          aria-valuenow={clampedProgress}
+          aria-valuemin={0}
+          aria-valuemax={MAX_PROGRESS}
+          aria-label="Progress"
+        >
+          <div
+            className={classes.fill}
+            style={{ width: `${clampedProgress}%` }}
+          />
+        </div>
+        <span
+          className={classNames(
+            classes.percentage,
+            "p-text--small u-no-margin--bottom",
+          )}
+        >
+          {clampedProgress}%
+        </span>
+        <span
+          className={classNames(
+            classes.eta,
+            "p-text--small u-no-margin--bottom",
+          )}
+        >
+          {getEtaLabel(secondsRemaining)}
+        </span>
       </div>
-      <span className={classes.percentage}>{clampedProgress}%</span>
-      <span className={classes.eta}>{getEtaLabel(secondsRemaining)}</span>
     </div>
   );
 };
diff --git a/src/features/exports/components/ExportForm/ExportForm.test.tsx b/src/features/exports/components/ExportForm/ExportForm.test.tsx
index e1486c31a6..1c91a370b8 100644
--- a/src/features/exports/components/ExportForm/ExportForm.test.tsx
+++ b/src/features/exports/components/ExportForm/ExportForm.test.tsx
@@ -40,7 +40,7 @@ const renderForm = (
     initialValues: ExportFormValues;
     onGenerate: (args: {
       values: ExportFormValues;
-      fieldsToExport: { id: string; label: string }[];
+      fieldsToExport: { id: string; label: string; groupTitle?: string }[];
     }) => Promise<void>;
   }> = {},
 ) => {
@@ -113,6 +113,41 @@ describe("ExportForm", () => {
     ).toBeInTheDocument();
   });
 
+  it("auto-expands matching groups so fields are visible without clicking the group header", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    expect(
+      screen.queryByRole("checkbox", { name: "Hostname" }),
+    ).not.toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole("searchbox", { name: "Search attributes" }),
+      "host",
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: "Hostname" }),
+    ).toBeInTheDocument();
+  });
+
+  it("auto-expands groups matched by group title so all their fields are visible", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.type(
+      screen.getByRole("searchbox", { name: "Search attributes" }),
+      "compliance",
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Time to patch (days)" }),
+    ).toBeInTheDocument();
+  });
+
   it("selects and deselects all fields in a group from the group checkbox", async () => {
     const user = userEvent.setup();
     const onGenerate = vi.fn().mockResolvedValue(undefined);
@@ -139,8 +174,12 @@ describe("ExportForm", () => {
           selectedFieldIds: ["hostname", "title"],
         }),
         fieldsToExport: [
-          { id: "hostname", label: "Hostname" },
-          { id: "title", label: "Instance name" },
+          { id: "hostname", label: "Hostname", groupTitle: "Primary Identity" },
+          {
+            id: "title",
+            label: "Instance name",
+            groupTitle: "Primary Identity",
+          },
         ],
       });
     });
@@ -206,10 +245,74 @@ describe("ExportForm", () => {
           retainUntil: INITIAL_VALUES.retainUntil,
         }),
         fieldsToExport: [
-          { id: "hostname", label: "Hostname" },
-          { id: "securely_patched", label: "Securely patched" },
+          { id: "hostname", label: "Hostname", groupTitle: "Primary Identity" },
+          {
+            id: "securely_patched",
+            label: "Securely patched",
+            groupTitle: "Compliance",
+          },
         ],
       });
     });
   });
+
+  it("shows group badges and reset button on step 2", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Badge test",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await openAttributeGroup(user, /compliance/i);
+    await user.click(
+      screen.getByRole("checkbox", { name: "Securely patched" }),
+    );
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByText("Primary Identity")).toBeInTheDocument();
+    expect(screen.getByText("Compliance")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("reset to default order restores group-declaration sequence after manual reorder", async () => {
+    const user = userEvent.setup();
+    const onGenerate = vi.fn().mockResolvedValue(undefined);
+
+    renderForm({ onGenerate });
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Export name" }),
+      "Reset test",
+    );
+    await openAttributeGroup(user, /primary identity/i);
+    await user.click(screen.getByRole("checkbox", { name: "Hostname" }));
+    await user.click(screen.getByRole("checkbox", { name: "Instance name" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    await user.click(
+      screen.getByRole("button", { name: /move hostname down/i }),
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    );
+
+    await user.click(screen.getByRole("button", { name: "Generate TSV" }));
+
+    await waitFor(() => {
+      expect(onGenerate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          fieldsToExport: [
+            expect.objectContaining({ id: "hostname" }),
+            expect.objectContaining({ id: "title" }),
+          ],
+        }),
+      );
+    });
+  });
 });
diff --git a/src/features/exports/components/ExportForm/ExportForm.tsx b/src/features/exports/components/ExportForm/ExportForm.tsx
index 8588347c37..c735e72444 100644
--- a/src/features/exports/components/ExportForm/ExportForm.tsx
+++ b/src/features/exports/components/ExportForm/ExportForm.tsx
@@ -54,7 +54,9 @@ const ExportForm: FC<ExportFormProps> = ({
     validationSchema: VALIDATION_SCHEMA,
     onSubmit: async (values) => {
       const selectedFields = fieldGroups
-        .flatMap((group) => group.fields)
+        .flatMap((group) =>
+          group.fields.map((field) => ({ ...field, groupTitle: group.title })),
+        )
         .filter((field) => values.selectedFieldIds.includes(field.id));
 
       if (step === 0) {
@@ -167,6 +169,31 @@ const ExportForm: FC<ExportFormProps> = ({
 
   const selectedFieldIdsError = getFormikError(formik, "selectedFieldIds");
 
+  const renderFieldGroups = () => {
+    if (!filteredFieldGroups.length) {
+      return (
+        <p className={classes.emptyState}>No attributes match your search.</p>
+      );
+    }
+
+    if (attributeSearch.trim()) {
+      return filteredFieldGroups.map((group) => {
+        const section = accordionSections.find((s) => s.key === group.key);
+        if (!section) return null;
+        return (
+          <Accordion
+            key={group.key}
+            expanded={group.key}
+            sections={[section]}
+            titleElement="h5"
+          />
+        );
+      });
+    }
+
+    return <Accordion sections={accordionSections} titleElement="h5" />;
+  };
+
   const stepContent =
     step === 0 ? (
       <>
@@ -208,13 +235,7 @@ const ExportForm: FC<ExportFormProps> = ({
               {selectedFieldIdsError}
             </p>
           )}
-          {filteredFieldGroups.length ? (
-            <Accordion sections={accordionSections} titleElement="h5" />
-          ) : (
-            <p className={classes.emptyState}>
-              No attributes match your search.
-            </p>
-          )}
+          {renderFieldGroups()}
         </div>
       </>
     ) : (
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
index bc47fc53d8..5a0b54d4ed 100644
--- a/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.module.scss
@@ -5,16 +5,34 @@
   padding-top: $spv--small;
 }
 
-.selectedColumnsIntro {
+.selectedColumnsHeader {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
   margin-bottom: $spv--medium;
 }
 
+.selectedColumnsIntro {
+  margin-bottom: 0;
+}
+
 .nameCell {
   align-items: center;
   display: flex;
   gap: $sph--small;
 }
 
+.groupBadge {
+  background: var(--vf-color-background-alt, #f5f5f5);
+  border: 1px solid var(--vf-color-border-default, #d9d9d9);
+  border-radius: 2px;
+  color: var(--vf-color-text-muted, #666);
+  font-size: 0.688rem;
+  margin-left: auto;
+  padding: 0 $sph--x-small;
+  white-space: nowrap;
+}
+
 .dragHandle {
   cursor: grab;
   flex-shrink: 0;
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.test.tsx b/src/features/exports/components/SortableFieldList/SortableFieldList.test.tsx
new file mode 100644
index 0000000000..261f5bf253
--- /dev/null
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.test.tsx
@@ -0,0 +1,239 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import SortableFieldList from "./SortableFieldList";
+import type { ExportField } from "../../types/ExportForm";
+
+const FIELDS: ExportField[] = [
+  { id: "hostname", label: "Hostname", groupTitle: "Primary Identity" },
+  { id: "status", label: "Status", groupTitle: "Primary Identity" },
+  {
+    id: "securely_patched",
+    label: "Securely patched",
+    groupTitle: "Compliance",
+  },
+];
+
+describe("SortableFieldList", () => {
+  it("renders all field labels", () => {
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    expect(screen.getByText("Hostname")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Securely patched")).toBeInTheDocument();
+  });
+
+  it("renders group badges for each field", () => {
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    const primaryBadges = screen.getAllByText("Primary Identity");
+    expect(primaryBadges).toHaveLength(2);
+    expect(screen.getByText("Compliance")).toBeInTheDocument();
+  });
+
+  it("does not render a group badge when groupTitle is absent", () => {
+    const fields: ExportField[] = [{ id: "hostname", label: "Hostname" }];
+
+    renderWithProviders(
+      <SortableFieldList fields={fields} onOrderChange={vi.fn()} />,
+    );
+
+    expect(screen.queryByText("Primary Identity")).not.toBeInTheDocument();
+  });
+
+  it("shows the Reset to default order button", () => {
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onOrderChange with original fields when Reset is clicked", async () => {
+    const user = userEvent.setup();
+    const onOrderChange = vi.fn();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={onOrderChange} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /move hostname down/i }),
+    );
+    onOrderChange.mockClear();
+
+    await user.click(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    );
+
+    expect(onOrderChange).toHaveBeenCalledWith(FIELDS);
+  });
+
+  it("restores the displayed row order after Reset is clicked", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /move hostname down/i }),
+    );
+
+    expect(
+      screen.getByRole("spinbutton", { name: /order for status/i }),
+    ).toHaveValue(1);
+    expect(
+      screen.getByRole("spinbutton", { name: /order for hostname/i }),
+    ).toHaveValue(2);
+
+    await user.click(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    );
+
+    expect(
+      screen.getByRole("spinbutton", { name: /order for hostname/i }),
+    ).toHaveValue(1);
+    expect(
+      screen.getByRole("spinbutton", { name: /order for status/i }),
+    ).toHaveValue(2);
+  });
+
+  it("moves a field up using the arrow button", async () => {
+    const user = userEvent.setup();
+    const onOrderChange = vi.fn();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={onOrderChange} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /move status up/i }));
+
+    expect(onOrderChange).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "status" }),
+      expect.objectContaining({ id: "hostname" }),
+      expect.objectContaining({ id: "securely_patched" }),
+    ]);
+  });
+
+  it("moves a field down using the arrow button", async () => {
+    const user = userEvent.setup();
+    const onOrderChange = vi.fn();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={onOrderChange} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /move hostname down/i }),
+    );
+
+    expect(onOrderChange).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "status" }),
+      expect.objectContaining({ id: "hostname" }),
+      expect.objectContaining({ id: "securely_patched" }),
+    ]);
+  });
+
+  it("disables the Up button for the first row and the Down button for the last row", () => {
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: /move hostname up/i }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("button", { name: /move securely patched down/i }),
+    ).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("reset restores original order even when parent state is kept in sync with each move", async () => {
+    const user = userEvent.setup();
+
+    // Mirror ExportForm's usage: parent updates fields on every onOrderChange call
+    const ControlledWrapper = () => {
+      const [fields, setFields] = useState<ExportField[]>(FIELDS);
+      return <SortableFieldList fields={fields} onOrderChange={setFields} />;
+    };
+
+    renderWithProviders(<ControlledWrapper />);
+
+    await user.click(
+      screen.getByRole("button", { name: /move hostname down/i }),
+    );
+
+    expect(
+      screen.getByRole("spinbutton", { name: /order for status/i }),
+    ).toHaveValue(1);
+
+    await user.click(
+      screen.getByRole("button", { name: /reset to default order/i }),
+    );
+
+    expect(
+      screen.getByRole("spinbutton", { name: /order for hostname/i }),
+    ).toHaveValue(1);
+    expect(
+      screen.getByRole("spinbutton", { name: /order for status/i }),
+    ).toHaveValue(2);
+  });
+
+  it("renders the reorder instructions", () => {
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={vi.fn()} />,
+    );
+
+    expect(
+      screen.getByText(/review and reorder the columns for your export/i),
+    ).toBeInTheDocument();
+  });
+
+  it("moves a field to a specific position via the order input", async () => {
+    const user = userEvent.setup();
+    const onOrderChange = vi.fn();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={onOrderChange} />,
+    );
+
+    const hostnameInput = screen.getByRole("spinbutton", {
+      name: /order for hostname/i,
+    });
+    await user.clear(hostnameInput);
+    await user.type(hostnameInput, "3");
+    await user.keyboard("{Enter}");
+
+    expect(onOrderChange).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "status" }),
+      expect.objectContaining({ id: "securely_patched" }),
+      expect.objectContaining({ id: "hostname" }),
+    ]);
+  });
+
+  it("ignores an out-of-range value entered in the order input", async () => {
+    const user = userEvent.setup();
+    const onOrderChange = vi.fn();
+
+    renderWithProviders(
+      <SortableFieldList fields={FIELDS} onOrderChange={onOrderChange} />,
+    );
+
+    const hostnameInput = screen.getByRole("spinbutton", {
+      name: /order for hostname/i,
+    });
+    await user.clear(hostnameInput);
+    await user.type(hostnameInput, "99");
+    await user.keyboard("{Enter}");
+
+    expect(onOrderChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/features/exports/components/SortableFieldList/SortableFieldList.tsx b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
index 1aee381dcf..6853539a86 100644
--- a/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
+++ b/src/features/exports/components/SortableFieldList/SortableFieldList.tsx
@@ -28,6 +28,7 @@ interface ReorderRowData extends Record<string, unknown> {
   index: number;
   fieldId: string;
   label: string;
+  groupTitle: string | undefined;
   currentOrder: string;
 }
 
@@ -73,6 +74,10 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
 
   const orderedFieldsRef = useRef(orderedFields);
   const draggingFieldIdRef = useRef(draggingFieldId);
+  // Capture the field list as it exists on first render so Reset can always
+  // return to the group-declaration order, regardless of how many moves the
+  // parent state has accumulated since then.
+  const initialFieldsRef = useRef<ExportField[]>(fields);
 
   // Stable per-row ref callbacks, cached by fieldId, so the row's ref doesn't
   // churn (null then re-set) on every render.
@@ -95,6 +100,12 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
   });
   usePendingFieldScroll({ orderedFields, pendingScrollRef, rowRefsMap });
 
+  const handleResetOrder = useCallback(() => {
+    setOrderedFields([...initialFieldsRef.current]);
+    setOrderDrafts({});
+    onOrderChange([...initialFieldsRef.current]);
+  }, [onOrderChange]);
+
   const triggerMoveEffect = useCallback((fieldId: string) => {
     if (justMovedTimerRef.current) clearTimeout(justMovedTimerRef.current);
     setJustMovedFieldId(fieldId);
@@ -338,11 +349,14 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
         Header: "Attribute name",
         accessor: "fieldId",
         Cell: ({ row }: CellProps<ReorderRowData>) => {
-          const { label } = row.original;
+          const { label, groupTitle } = row.original;
           return (
             <div className={classes.nameCell}>
               <i className={"p-icon--drag " + classes.dragHandle} />
               <span>{label}</span>
+              {groupTitle && (
+                <span className={classes.groupBadge}>{groupTitle}</span>
+              )}
             </div>
           );
         },
@@ -421,6 +435,7 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
         index,
         fieldId: field.id,
         label: field.label,
+        groupTitle: field.groupTitle,
         currentOrder: orderDrafts[index] ?? String(index + 1),
       })),
     [orderDrafts, orderedFields],
@@ -484,10 +499,20 @@ const SortableFieldList: FC<SortableFieldListProps> = ({
 
   return (
     <div className={classes.selectedColumns}>
-      <p className={classes.selectedColumnsIntro}>
-        Review and reorder the columns for your export. Drag rows or use the
-        controls to change the order.
-      </p>
+      <div className={classes.selectedColumnsHeader}>
+        <p className={classes.selectedColumnsIntro}>
+          Review and reorder the columns for your export. Drag rows or use the
+          controls to change the order.
+        </p>
+        <Button
+          type="button"
+          className="u-no-margin--bottom"
+          onClick={handleResetOrder}
+        >
+          <i className="p-icon--restart" />
+          <span>Reset to default order</span>
+        </Button>
+      </div>
       <ModularTable
         columns={reorderColumns}
         data={reorderData}
diff --git a/src/features/exports/types/ExportForm.ts b/src/features/exports/types/ExportForm.ts
index baaac6c76e..54bbd0b892 100644
--- a/src/features/exports/types/ExportForm.ts
+++ b/src/features/exports/types/ExportForm.ts
@@ -1,6 +1,7 @@
 export interface ExportField {
   id: string;
   label: string;
+  groupTitle?: string;
 }
 
 export interface ExportFieldGroup {
diff --git a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
index 4e2169f4c2..0bb8b02d05 100644
--- a/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
+++ b/src/features/instances/components/InstancesExportForm/InstancesExportForm.test.tsx
@@ -38,7 +38,7 @@ describe("InstancesExportForm", () => {
     ).toBeInTheDocument();
     expect(
       screen.getByRole("tab", {
-        name: /granular metadata & deep diagnostics/i,
+        name: /advanced infrastructure & cloud/i,
       }),
     ).toBeInTheDocument();
     await openAttributeGroup(user, /business logic/i);
@@ -94,7 +94,6 @@ describe("InstancesExportForm", () => {
     const search = screen.getByRole("searchbox", { name: "Search attributes" });
     await user.type(search, "host");
 
-    await openAttributeGroup(user, /primary identity/i);
     expect(
       screen.getByRole("checkbox", { name: "Hostname" }),
     ).toBeInTheDocument();
@@ -131,7 +130,6 @@ describe("InstancesExportForm", () => {
 
     // The category title matches, so the whole group is shown including fields
     // whose labels do not contain the search term.
-    await openAttributeGroup(user, /primary identity/i);
     expect(
       screen.getByRole("checkbox", { name: "Instance name" }),
     ).toBeInTheDocument();
diff --git a/src/features/instances/components/InstancesExportForm/constants.ts b/src/features/instances/components/InstancesExportForm/constants.ts
index 8345041e53..cc76ed2f80 100644
--- a/src/features/instances/components/InstancesExportForm/constants.ts
+++ b/src/features/instances/components/InstancesExportForm/constants.ts
@@ -13,10 +13,10 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     title: "Primary Identity",
     key: "primary-identity",
     fields: [
+      { id: "id", label: "ID" },
       { id: "hostname", label: "Hostname" },
       { id: "title", label: "Instance name" },
       { id: "os", label: "OS" },
-      { id: "id", label: "ID" },
       { id: "status", label: "Status" },
     ],
   },
@@ -27,6 +27,10 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "network_ip_address", label: "IP address" },
       { id: "network_interface", label: "Interface" },
       { id: "network_mac_address", label: "MAC address" },
+      { id: "network_broadcast_address", label: "Broadcast address" },
+      { id: "network_netmask", label: "Netmask" },
+      { id: "network_speed", label: "Speed" },
+      { id: "network_duplex", label: "Duplex" },
     ],
   },
   {
@@ -35,8 +39,14 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     fields: [
       { id: "reboot_required_flag", label: "Reboot required" },
       { id: "alert_count", label: "Alert count" },
+      { id: "alerts", label: "Active alerts" },
       { id: "upgrades_security", label: "Security upgrades count" },
+      { id: "upgrades_regular", label: "Regular upgrades count" },
+      { id: "has_release_upgrades", label: "Release upgrade available" },
       { id: "livepatch_info", label: "Livepatch status" },
+      { id: "reboot_packages", label: "Packages needing reboot" },
+      { id: "update_manager_prompt", label: "Update manager prompt" },
+      { id: "ubuntu_pro_reboot_required_info", label: "Pro reboot info" },
     ],
   },
   {
@@ -44,9 +54,20 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
     key: "compute-storage",
     fields: [
       { id: "hardware_cpu_cores", label: "CPU cores" },
+      { id: "hardware_cpu_model", label: "CPU model" },
+      { id: "hardware_cpu_vendor", label: "CPU vendor" },
       { id: "total_memory", label: "Total memory" },
+      { id: "hardware_memory_size", label: "Memory size (Hardware)" },
+      { id: "total_swap", label: "Total swap" },
       { id: "hardware_disk_size", label: "Total disk size" },
       { id: "computer_type", label: "Computer type" },
+      { id: "hardware_system_serial", label: "System serial" },
+      { id: "hardware_system_vendor", label: "System vendor" },
+      { id: "hardware_system_model", label: "System model" },
+      { id: "mount_device", label: "Mount device" },
+      { id: "mount_point", label: "Mount point" },
+      { id: "mount_filesystem", label: "Filesystem type" },
+      { id: "mount_total_space", label: "Total space" },
     ],
   },
   {
@@ -57,71 +78,62 @@ export const EXPORT_FIELD_GROUPS: readonly ExportFieldGroup[] = [
       { id: "access_group", label: "Access group" },
       { id: "annotations", label: "Annotations" },
       { id: "ubuntu_pro", label: "Ubuntu Pro expiration" },
+      {
+        id: "ubuntu_pro_subscription_type",
+        label: "Ubuntu Pro subscription type",
+      },
       { id: "license_type", label: "License type" },
+      { id: "account_id", label: "Account ID" },
+      { id: "employee_id", label: "Employee ID" },
+      { id: "profiles", label: "Associated profiles" },
+      { id: "comment", label: "Comment" },
+      { id: "archived", label: "Archived" },
     ],
   },
   {
-    title: "Granular Metadata & Deep Diagnostics",
-    key: "granular-metadata-diagnostics",
+    title: "Advanced Infrastructure & Cloud",
+    key: "advanced-infra-cloud",
     fields: [
-      { id: "last_ping_time", label: "Last ping" },
-      { id: "juju_machine_id", label: "Juju machine ID" },
       { id: "cloud_instance_metadata", label: "Cloud instance metadata" },
+      { id: "availability_zone", label: "Availability zone" },
+      { id: "vm_info", label: "VM type" },
+      { id: "container_info", label: "Container type" },
+      { id: "wsl", label: "WSL instance" },
+      { id: "wsl_profiles", label: "WSL profiles" },
+      { id: "juju_machine_id", label: "Juju machine ID" },
+      { id: "juju_model_uuid", label: "Juju model UUID" },
+      { id: "create_instance_supported", label: "Instance creation supported" },
+    ],
+  },
+  {
+    title: "System IDs & Agent Logs",
+    key: "system-ids-logs",
+    fields: [
       { id: "hostagent_uid", label: "Host agent UID" },
       { id: "machine_id", label: "Machine ID" },
       { id: "secure_id", label: "Secure ID" },
       { id: "insecure_id", label: "Insecure ID" },
+      { id: "clone_id", label: "Clone ID" },
       { id: "current_api", label: "Client API version" },
       { id: "current_version", label: "Client version" },
-      { id: "comment", label: "Comment" },
-      { id: "archived", label: "Archived" },
-      { id: "account_id", label: "Account ID" },
-      { id: "employee_id", label: "Employee ID" },
-      { id: "profiles", label: "Associated profiles" },
-      { id: "alerts", label: "Active alerts" },
-      { id: "reboot_packages", label: "Packages needing reboot" },
-      { id: "update_manager_prompt", label: "Update manager prompt" },
-      { id: "upgrades_regular", label: "Regular upgrades count" },
-      { id: "has_release_upgrades", label: "Release upgrade available" },
+      { id: "last_ping_time", label: "Last ping" },
+      { id: "registered_at", label: "Registered at" },
+      { id: "last_exchange_time", label: "Last exchange time" },
+      { id: "last_exchange_duration", label: "Last exchange duration" },
+      { id: "last_exchange_size", label: "Last exchange size" },
       { id: "consecutive_errors", label: "Consecutive errors" },
       { id: "is_inconsistent", label: "Inconsistent" },
-      {
-        id: "ubuntu_pro_subscription_type",
-        label: "Ubuntu Pro subscription type",
-      },
-      { id: "ubuntu_pro_reboot_required_info", label: "Pro reboot info" },
-      { id: "vm_info", label: "VM type" },
-      { id: "container_info", label: "Container type" },
-      { id: "wsl", label: "WSL instance" },
-      { id: "wsl_profiles", label: "WSL profiles" },
+    ],
+  },
+  {
+    title: "Instance Hierarchy",
+    key: "instance-hierarchy",
+    fields: [
       { id: "parent", label: "Parent instance" },
       { id: "children", label: "Child instances" },
       { id: "num_child", label: "Child instance count" },
       { id: "default_child", label: "Default child" },
       { id: "is_default_child", label: "Is default child" },
-      { id: "create_instance_supported", label: "Instance creation supported" },
-      { id: "clone_id", label: "Clone ID" },
-      { id: "hardware_cpu_model", label: "CPU model" },
-      { id: "hardware_cpu_vendor", label: "CPU vendor" },
-      { id: "hardware_memory_size", label: "Memory size (Hardware)" },
-      { id: "total_swap", label: "Total swap" },
-      { id: "hardware_system_serial", label: "System serial" },
-      { id: "hardware_system_vendor", label: "System vendor" },
-      { id: "hardware_system_model", label: "System model" },
-      { id: "mount_device", label: "Mount device" },
-      { id: "mount_point", label: "Mount point" },
-      { id: "mount_filesystem", label: "Filesystem type" },
-      { id: "mount_total_space", label: "Total space" },
-      { id: "network_broadcast_address", label: "Broadcast address" },
-      { id: "network_netmask", label: "Netmask" },
-      { id: "network_speed", label: "Speed" },
-      { id: "network_duplex", label: "Duplex" },
-      { id: "registered_at", label: "Registered at" },
-      { id: "last_exchange_time", label: "Last exchange time" },
-      { id: "last_exchange_duration", label: "Last exchange duration" },
-      { id: "last_exchange_size", label: "Last exchange size" },
-      { id: "availability_zone", label: "Availability zone" },
-      { id: "juju_model_uuid", label: "Juju model UUID" },
     ],
   },
 ];
diff --git a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
index 52570974ad..778e09a6ee 100644
--- a/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
+++ b/src/features/instances/components/InstancesPageActions/InstancesPageActions.test.tsx
@@ -11,13 +11,13 @@ import server from "@/tests/server";
 import { generatePaginatedResponse } from "@/tests/server/handlers/_helpers";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
 import type { ComponentProps } from "react";
 import { beforeEach } from "vitest";
 import InstancesPageActions from "./InstancesPageActions";
 import { pluralize } from "@/utils/_helpers";
 import { setEndpointStatus } from "@/tests/controllers/controller";
 import type { UbuntuProInfo } from "@/types/Instance";
+import { http, HttpResponse } from "msw";
 
 const selected = instances.slice(0, 2);
 const ubuntuProInfo = {
@@ -149,15 +149,7 @@ describe("InstancesPageActions", () => {
         ),
       );
 
-      renderWithProviders(
-        <InstancesPageActions
-          isGettingInstances={false}
-          selectedInstances={selected}
-          instanceCount={selected.length}
-          isAllSelected={false}
-          exportParams={exportParams}
-        />,
-      );
+      renderPageActions();
 
       await userEvent.click(
         screen.getByRole("button", { name: MENU_LABELS[0] }),
diff --git a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts b/src/features/instances/helpers.test.ts
similarity index 86%
rename from src/pages/dashboard/instances/InstancesPage/helpers.test.ts
rename to src/features/instances/helpers.test.ts
index 271ab9eee7..0d927e7eda 100644
--- a/src/pages/dashboard/instances/InstancesPage/helpers.test.ts
+++ b/src/features/instances/helpers.test.ts
@@ -118,4 +118,26 @@ describe("InstancesPage helpers", () => {
       wsl_parents: true,
     });
   });
+
+  it("builds list params that preserve archived and WSL filters", () => {
+    expect(
+      getInstanceListParams({
+        filters: {
+          os: "",
+          status: "archived",
+          contractExpiryDays: "",
+          query: "name:web",
+          tags: [],
+          accessGroups: [],
+          availabilityZones: [],
+        },
+        wsl: ["child", "parent"],
+      }),
+    ).toEqual({
+      archived_only: true,
+      query: "name:web",
+      wsl_children: true,
+      wsl_parents: true,
+    });
+  });
 });
diff --git a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
index 8a8c51e2bb..404ec336ed 100644
--- a/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
+++ b/src/features/reports/components/ReportExportForm/ReportExportForm.test.tsx
@@ -315,11 +315,13 @@ describe("ReportExportForm", () => {
           "contacted_recently",
           "time_to_patch_days",
           "upgrade_profile_schedule",
+          "resolved_cves",
+          "unresolved_cves",
         ]),
       );
     });
 
-    expect((requestBody.selected_field_ids as string[]).length).toBe(7);
+    expect((requestBody.selected_field_ids as string[]).length).toBe(9);
   });
 
   it("shows Resolved CVEs and Unresolved CVEs in the Compliance group when byCve is off", async () => {
diff --git a/src/features/reports/components/ReportView/ReportView.test.tsx b/src/features/reports/components/ReportView/ReportView.test.tsx
index 4291ec3c04..9e75b187fd 100644
--- a/src/features/reports/components/ReportView/ReportView.test.tsx
+++ b/src/features/reports/components/ReportView/ReportView.test.tsx
@@ -289,6 +289,7 @@ describe("ReportView", () => {
     expect(setSidePanelContent).toHaveBeenCalledWith(
       "Export report as TSV",
       expect.anything(),
+      "medium",
     );
   });
 });
diff --git a/src/features/reports/components/ReportView/ReportView.tsx b/src/features/reports/components/ReportView/ReportView.tsx
index aae1632761..fe5ea3ab6f 100644
--- a/src/features/reports/components/ReportView/ReportView.tsx
+++ b/src/features/reports/components/ReportView/ReportView.tsx
@@ -234,6 +234,7 @@ const ReportView: FC<ReportViewProps> = ({ instanceIds }) => {
         otherIds={otherIds}
         otherDetail={OTHER_DETAIL}
       />,
+      "medium",
     );
   };
 

From acbb0087ce2e328ede854f7fcdff63eaf34c17f2 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Tue, 30 Jun 2026 08:18:16 -0700
Subject: [PATCH 38/41] restore empty changeset from main

---
 .changeset/open-donkeys-clean.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .changeset/open-donkeys-clean.md

diff --git a/.changeset/open-donkeys-clean.md b/.changeset/open-donkeys-clean.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/open-donkeys-clean.md
@@ -0,0 +1,2 @@
+---
+---

From ab9f51dee1b9a8f3aee252b0e7d600819eaf128f Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Tue, 30 Jun 2026 09:34:24 -0700
Subject: [PATCH 39/41] fix failing test

---
 .../ActivitiesExportForm/ActivitiesExportForm.test.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
index 48c0cac2d3..948c21f16b 100644
--- a/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
+++ b/src/features/activities/components/ActivitiesExportForm/ActivitiesExportForm.test.tsx
@@ -74,7 +74,6 @@ describe("ActivitiesExportForm", () => {
       "creator",
     );
 
-    await openAttributeGroup(user, /audit & time/i);
     expect(
       screen.getByRole("checkbox", { name: "Creator" }),
     ).toBeInTheDocument();

From 43a7e4a4829034834fd11c557a5de35cd32cf4b1 Mon Sep 17 00:00:00 2001
From: Marc Bucchieri <marc.bucchieri@canonical.com>
Date: Tue, 30 Jun 2026 01:31:50 -0700
Subject: [PATCH 40/41] fix: pagination for mirrors (#686)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- resolves LNDENG-4707 and [this launchpad
bug](https://bugs.launchpad.net/landscape/+bug/2158126)
- adds TablePagination label prop for resources to show eg "Mirrors per
page" instead of "Instances per page" everywhere

## Release Impact

Pick the target branch (see [RELEASES.md](../RELEASES.md) for the full
model):

- [ ] `dev` — internal testing → publishes to `ppa-build-dev`
- [X] `main` — next beta → publishes to `ppa-build`
- [ ] `release/YY.MM` — point release on a maintained cycle → publishes
to `ppa-build-YY.MM` (and to `ppa-build-stable` if this is the
currently-promoted branch). Specify cycle: `release/____`

Change type (tick one):

- [X] Patch (fix)
- [ ] Minor (feature)
- [ ] Major (breaking)

> The change-type label is informational and only affects how the entry
is rendered in the CHANGELOG. The actual version is computed from the
branch and CalVer cycle — `pnpm changeset`'s `patch`/`minor` choice does
not influence it.

## Checklist

- [X] **Changeset added** — I have run `pnpm changeset` (or `pnpm
changeset --empty` if no CHANGELOG line is warranted) and committed the
resulting `.md` file. Required for PRs targeting `main` and `release/*`;
enforced by the `Changeset check` workflow.
- [X] **UI verified** — I have verified the changes locally.
- [X] **Linting clean** — No linting errors are present (especially in
`scripts/`).

## Versioning Reminder

> [!IMPORTANT]
> Landscape UI uses **CalVer** (`YY.MM.Point.Build`). Version derivation
by branch:
>
> - `main` / `point/*` → `YY.MM.0.<run>-beta`
> - `dev` → `YY.MM.0.<run>-dev`
> - `release/YY.MM` → `YY.MM.1.<run>` (cycle pinned by branch name)

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .changeset/early-mice-wait.md                 |   5 +
 .../TablePagination/TablePagination.tsx       |   7 +-
 .../TablePaginationBase.test.tsx              |   2 +-
 .../TablePaginationBase.tsx                   |   4 +-
 src/features/mirrors/api/useListMirrors.ts    |   8 +-
 .../MirrorsList/MirrorsList.test.tsx          |  30 ++
 .../components/MirrorsList/MirrorsList.tsx    |  31 +-
 .../repositories/mirrors/MirrorsPage.tsx      |   1 -
 src/tests/mocks/mirrors.ts                    | 293 ++++++++++++++++++
 9 files changed, 364 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/early-mice-wait.md

diff --git a/.changeset/early-mice-wait.md b/.changeset/early-mice-wait.md
new file mode 100644
index 0000000000..a18af7f2ac
--- /dev/null
+++ b/.changeset/early-mice-wait.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": patch
+---
+
+Fix pagination for mirrors when number of mirrors is >20
diff --git a/src/components/layout/TablePagination/components/TablePagination/TablePagination.tsx b/src/components/layout/TablePagination/components/TablePagination/TablePagination.tsx
index 749c0abb89..2e981c8c7e 100644
--- a/src/components/layout/TablePagination/components/TablePagination/TablePagination.tsx
+++ b/src/components/layout/TablePagination/components/TablePagination/TablePagination.tsx
@@ -10,6 +10,7 @@ interface TablePaginationProps {
   readonly className?: string;
   readonly handleClearSelection?: () => void;
   readonly currentItemCount?: number;
+  readonly pageSizeLabel?: string;
 }
 
 const TablePagination: FC<TablePaginationProps> = ({
@@ -17,6 +18,7 @@ const TablePagination: FC<TablePaginationProps> = ({
   className = "",
   currentItemCount = 0,
   handleClearSelection,
+  pageSizeLabel,
 }) => {
   const { currentPage, pageSize, setPageParams } = usePageParams();
   const totalPages = useTotalPages(totalItems, pageSize);
@@ -39,8 +41,8 @@ const TablePagination: FC<TablePaginationProps> = ({
     }
   };
 
-  const setPageSize = (pageSize: number) => {
-    setPageParams({ pageSize });
+  const setPageSize = (newPageSize: number) => {
+    setPageParams({ pageSize: newPageSize });
   };
 
   return (
@@ -52,6 +54,7 @@ const TablePagination: FC<TablePaginationProps> = ({
       paginate={paginate}
       setPageSize={setPageSize}
       totalItems={totalItems}
+      pageSizeLabel={pageSizeLabel}
     />
   );
 };
diff --git a/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.test.tsx b/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.test.tsx
index 0ef06da6d2..bde5d4b075 100644
--- a/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.test.tsx
+++ b/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.test.tsx
@@ -68,7 +68,7 @@ describe("TablePaginationBase", () => {
   it("should change the page size", async () => {
     render(<TablePaginationBase {...props} currentPage={2} />);
 
-    const pageSizeOption = PAGE_SIZE_OPTIONS[1];
+    const [, pageSizeOption] = PAGE_SIZE_OPTIONS;
 
     await userEvent.selectOptions(
       screen.getByRole("combobox", { name: "Instances per page" }),
diff --git a/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.tsx b/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.tsx
index eb96bc9d72..c74670b7c9 100644
--- a/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.tsx
+++ b/src/components/layout/TablePagination/components/TablePaginationBase/TablePaginationBase.tsx
@@ -15,6 +15,7 @@ interface TablePaginationBaseProps {
   readonly paginate: (page: number) => void;
   readonly setPageSize: (itemsNumber: number) => void;
   readonly totalItems?: number | undefined;
+  readonly pageSizeLabel?: string;
 }
 
 const TablePaginationBase: FC<TablePaginationBaseProps> = ({
@@ -25,6 +26,7 @@ const TablePaginationBase: FC<TablePaginationBaseProps> = ({
   paginate,
   setPageSize,
   currentPage,
+  pageSizeLabel = "Instances per page",
 }) => {
   const totalPages = useTotalPages(totalItems, pageSize);
 
@@ -68,7 +70,7 @@ const TablePaginationBase: FC<TablePaginationBaseProps> = ({
         <div className={classes.paginationContainer}>
           <Select
             name="pageSize"
-            label="Instances per page"
+            label={pageSizeLabel}
             labelClassName="u-off-screen"
             className="u-no-margin--bottom"
             options={PAGE_SIZE_OPTIONS}
diff --git a/src/features/mirrors/api/useListMirrors.ts b/src/features/mirrors/api/useListMirrors.ts
index 39cc95a61d..b55dc872f8 100644
--- a/src/features/mirrors/api/useListMirrors.ts
+++ b/src/features/mirrors/api/useListMirrors.ts
@@ -9,7 +9,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 
 export function useListMirrors(
-  params: MirrorServiceListMirrorsData["query"] = {},
+  params: MirrorServiceListMirrorsData["query"] = { pageSize: 1000 },
   options: Omit<
     UseQueryOptions<
       AxiosResponse<MirrorServiceListMirrorsResponse>,
@@ -19,13 +19,15 @@ export function useListMirrors(
   > = {},
 ) {
   const authFetchDebArchive = useFetchDebArchive();
+  const queryParams = { pageSize: 1000, ...params };
 
   return useSuspenseQuery<
     AxiosResponse<MirrorServiceListMirrorsResponse>,
     AxiosError<MirrorServiceListMirrorsError>
   >({
-    queryKey: ["mirrors", params],
-    queryFn: async () => authFetchDebArchive.get("mirrors", { params }),
+    queryKey: ["mirrors", queryParams],
+    queryFn: async () =>
+      authFetchDebArchive.get("mirrors", { params: queryParams }),
     ...options,
   });
 }
diff --git a/src/features/mirrors/components/MirrorsList/MirrorsList.test.tsx b/src/features/mirrors/components/MirrorsList/MirrorsList.test.tsx
index dfcfe5482d..69d8bf5587 100644
--- a/src/features/mirrors/components/MirrorsList/MirrorsList.test.tsx
+++ b/src/features/mirrors/components/MirrorsList/MirrorsList.test.tsx
@@ -35,4 +35,34 @@ describe("MirrorsList", () => {
 
     expect(screen.getAllByText(NO_DATA_TEXT)).toHaveLength(4);
   });
+
+  describe("pagination", () => {
+    it("shows only the first page of mirrors when there are more than the page size", () => {
+      renderWithProviders(<MirrorsList mirrors={[...mirrors]} />);
+
+      const lastMirror = mirrors.at(-1);
+      assert(lastMirror);
+
+      expect(screen.getByText(mirrors[0].displayName)).toBeInTheDocument();
+      expect(
+        screen.queryByText(lastMirror.displayName),
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders pagination controls when mirrors exceed page size", () => {
+      renderWithProviders(<MirrorsList mirrors={[...mirrors]} />);
+
+      expect(
+        screen.getByRole("navigation", { name: /pagination/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("does not render pagination controls when all mirrors fit on one page", () => {
+      renderWithProviders(<MirrorsList mirrors={mirrors.slice(0, 3)} />);
+
+      expect(
+        screen.queryByRole("navigation", { name: /pagination/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/features/mirrors/components/MirrorsList/MirrorsList.tsx b/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
index fbe3647cf8..c6bf40344e 100644
--- a/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
+++ b/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
@@ -11,6 +11,7 @@ import NoData from "@/components/layout/NoData";
 import usePageParams from "@/hooks/usePageParams";
 import MirrorPackagesCount from "../MirrorPackagesCount";
 import MirrorActions from "../MirrorActions";
+import { TablePagination } from "@/components/layout/TablePagination";
 
 interface MirrorsListProps {
   readonly mirrors: Mirror[];
@@ -18,7 +19,12 @@ interface MirrorsListProps {
 }
 
 const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
-  const { createPageParamsSetter } = usePageParams();
+  const { createPageParamsSetter, currentPage, pageSize } = usePageParams();
+
+  const pagedMirrors = useMemo(
+    () => mirrors.slice((currentPage - 1) * pageSize, currentPage * pageSize),
+    [mirrors, currentPage, pageSize],
+  );
 
   const columns = useMemo<Column<Mirror>[]>(
     () => [
@@ -41,7 +47,7 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
       {
         Header: "Distribution",
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
-          mirror.distribution,
+          mirror.distribution ?? <NoData />,
       },
       {
         Header: "Last update",
@@ -92,13 +98,20 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
   );
 
   return (
-    <ResponsiveTable
-      columns={columns}
-      data={mirrors}
-      emptyMsg={
-        emptyMsg ?? "No mirrors found according to your search parameters."
-      }
-    />
+    <>
+      <ResponsiveTable
+        columns={columns}
+        data={pagedMirrors}
+        emptyMsg={
+          emptyMsg ?? "No mirrors found according to your search parameters."
+        }
+      />
+      <TablePagination
+        totalItems={mirrors.length}
+        currentItemCount={pagedMirrors.length}
+        pageSizeLabel="Mirrors per page"
+      />
+    </>
   );
 };
 
diff --git a/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx b/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
index f8d6dde00e..119e390757 100644
--- a/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
+++ b/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
@@ -41,7 +41,6 @@ const MirrorsPage: FC = () => {
 
   const { data } = useListMirrors({
     filter: search ? `display_name=${JSON.stringify(`${search}*`)}` : undefined,
-    pageSize: 20,
   });
 
   const openAddMirrorForm = createPageParamsSetter({
diff --git a/src/tests/mocks/mirrors.ts b/src/tests/mocks/mirrors.ts
index 3bfe967769..d1c3890ccd 100644
--- a/src/tests/mocks/mirrors.ts
+++ b/src/tests/mocks/mirrors.ts
@@ -50,4 +50,297 @@ export const mirrors = [
       fingerprint: "ABCDEF1234567890",
     },
   },
+  {
+    name: "mirrors/bionic-mirror",
+    mirrorId: "bionic-mirror",
+    displayName: "Bionic archive mirror",
+    archiveRoot: "https://archive.ubuntu.com/ubuntu",
+    mirrorType: "UBUNTU_ARCHIVE",
+    distribution: "bionic",
+    components: ["main", "universe"],
+    architectures: ["amd64"],
+    preserveSignatures: false,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-01T12:00:00Z"),
+  },
+  {
+    name: "mirrors/focal-mirror",
+    mirrorId: "focal-mirror",
+    displayName: "Focal archive mirror",
+    archiveRoot: "https://archive.ubuntu.com/ubuntu",
+    mirrorType: "UBUNTU_ARCHIVE",
+    distribution: "focal",
+    components: ["main", "restricted"],
+    architectures: ["amd64", "arm64"],
+    preserveSignatures: false,
+    downloadInstaller: false,
+    downloadSources: true,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-15T12:00:00Z"),
+  },
+  {
+    name: "mirrors/noble-mirror",
+    mirrorId: "noble-mirror",
+    displayName: "Noble archive mirror",
+    archiveRoot: "https://archive.ubuntu.com/ubuntu",
+    mirrorType: "UBUNTU_ARCHIVE",
+    distribution: "noble",
+    components: ["main", "universe", "restricted"],
+    architectures: ["amd64"],
+    preserveSignatures: false,
+    downloadInstaller: true,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-06-10T12:00:00Z"),
+  },
+  {
+    name: "mirrors/partner-mirror",
+    mirrorId: "partner-mirror",
+    displayName: "Canonical partner mirror",
+    archiveRoot: "https://archive.canonical.com/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["partner"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-05-20T12:00:00Z"),
+  },
+  {
+    name: "mirrors/docker-mirror",
+    mirrorId: "docker-mirror",
+    displayName: "Docker CE mirror",
+    archiveRoot: "https://download.docker.com/linux/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["stable"],
+    architectures: ["amd64", "arm64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-06-05T12:00:00Z"),
+    gpgKey: {
+      armor: "-----BEGIN PGP PUBLIC KEY BLOCK-----",
+      fingerprint: "9DC858229FC7DD38854AE2D88D81803C0EBFCD88",
+    },
+  },
+  {
+    name: "mirrors/kubernetes-mirror",
+    mirrorId: "kubernetes-mirror",
+    displayName: "Kubernetes mirror",
+    archiveRoot: "https://pkgs.k8s.io/core:/stable:/v1.30/deb",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["/"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-05-28T12:00:00Z"),
+    gpgKey: {
+      armor: "-----BEGIN PGP PUBLIC KEY BLOCK-----",
+      fingerprint: "DE15B14486CD377B9E876E1A234654DA9A296436",
+    },
+  },
+  {
+    name: "mirrors/grafana-mirror",
+    mirrorId: "grafana-mirror",
+    displayName: "Grafana mirror",
+    archiveRoot: "https://packages.grafana.com/oss/deb",
+    mirrorType: "THIRD_PARTY",
+    distribution: "stable",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-04-20T12:00:00Z"),
+  },
+  {
+    name: "mirrors/elasticsearch-mirror",
+    mirrorId: "elasticsearch-mirror",
+    displayName: "Elasticsearch mirror",
+    archiveRoot: "https://artifacts.elastic.co/packages/8.x/apt",
+    mirrorType: "THIRD_PARTY",
+    distribution: "stable",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-04-15T12:00:00Z"),
+  },
+  {
+    name: "mirrors/postgresql-mirror",
+    mirrorId: "postgresql-mirror",
+    displayName: "PostgreSQL mirror",
+    archiveRoot: "https://apt.postgresql.org/pub/repos/apt",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy-pgdg",
+    components: ["main"],
+    architectures: ["amd64", "arm64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-04-10T12:00:00Z"),
+  },
+  {
+    name: "mirrors/mongodb-mirror",
+    mirrorId: "mongodb-mirror",
+    displayName: "MongoDB mirror",
+    archiveRoot: "https://repo.mongodb.org/apt/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy/mongodb-org/7.0",
+    components: ["multiverse"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-30T12:00:00Z"),
+  },
+  {
+    name: "mirrors/nginx-mirror",
+    mirrorId: "nginx-mirror",
+    displayName: "NGINX mirror",
+    archiveRoot: "https://nginx.org/packages/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["nginx"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-25T12:00:00Z"),
+  },
+  {
+    name: "mirrors/rabbitmq-mirror",
+    mirrorId: "rabbitmq-mirror",
+    displayName: "RabbitMQ mirror",
+    archiveRoot: "https://packagecloud.io/rabbitmq/rabbitmq-server/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: false,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-20T12:00:00Z"),
+  },
+  {
+    name: "mirrors/redis-mirror",
+    mirrorId: "redis-mirror",
+    displayName: "Redis mirror",
+    archiveRoot: "https://packages.redis.io/deb",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-03-10T12:00:00Z"),
+  },
+  {
+    name: "mirrors/influxdb-mirror",
+    mirrorId: "influxdb-mirror",
+    displayName: "InfluxDB mirror",
+    archiveRoot: "https://repos.influxdata.com/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "focal",
+    components: ["stable"],
+    architectures: ["amd64"],
+    preserveSignatures: false,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-02-28T12:00:00Z"),
+  },
+  {
+    name: "mirrors/nodejs-mirror",
+    mirrorId: "nodejs-mirror",
+    displayName: "Node.js 20 mirror",
+    archiveRoot: "https://deb.nodesource.com/node_20.x",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64", "arm64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-02-20T12:00:00Z"),
+  },
+  {
+    name: "mirrors/puppet-mirror",
+    mirrorId: "puppet-mirror",
+    displayName: "Puppet mirror",
+    archiveRoot: "https://apt.puppet.com",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["puppet8"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-02-15T12:00:00Z"),
+  },
+  {
+    name: "mirrors/hashicorp-mirror",
+    mirrorId: "hashicorp-mirror",
+    displayName: "HashiCorp mirror",
+    archiveRoot: "https://apt.releases.hashicorp.com",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64", "arm64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-02-10T12:00:00Z"),
+  },
+  {
+    name: "mirrors/ceph-mirror",
+    mirrorId: "ceph-mirror",
+    displayName: "Ceph mirror",
+    archiveRoot: "https://download.ceph.com/debian-reef",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: true,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-02-05T12:00:00Z"),
+  },
+  {
+    name: "mirrors/ansible-mirror",
+    mirrorId: "ansible-mirror",
+    displayName: "Ansible mirror",
+    archiveRoot: "https://ppa.launchpad.net/ansible/ansible/ubuntu",
+    mirrorType: "THIRD_PARTY",
+    distribution: "jammy",
+    components: ["main"],
+    architectures: ["amd64"],
+    preserveSignatures: false,
+    downloadInstaller: false,
+    downloadSources: false,
+    downloadUdebs: false,
+    lastDownloadDate: new Date("2024-01-30T12:00:00Z"),
+  },
 ] as const satisfies Mirror[];

From 87552f25d111387680d1bf9d34d341e95a536aaa Mon Sep 17 00:00:00 2001
From: Yurii Vasyliev <113896226+yurii-vasyliev@users.noreply.github.com>
Date: Tue, 30 Jun 2026 18:23:35 +0200
Subject: [PATCH 41/41] feat: restore LRO Mirrors and Publications onto main
 (#693)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Re-integrates the two LRO features that were developed on
`point/26.04.2` back onto `main`, so `main` becomes the single
integration trunk again (the release slice will be cut closer to the
August release).

- **LRO Mirrors** (#666) — previously reverted on `main` via #668
(deferred), restored here.
- **LRO Publications** (#680).

## Why this is a rebuild, not a plain merge

`point/26.04.2` branched at `150fa0a45` (the LRO Mirrors commit),
*before* the revert. A plain `git merge` hit the revert trap
(modify/deletes silently dropping the feature) plus collisions with
`main`'s later work. This PR reconciles the features with everything
`main` did since:

- **MirrorDetails** keeps `main`'s segmented-control redesign
(#682/#686), now **operation-aware** — disabled "Updating" state while
an operation runs — plus the Status row and failed-update notification.
(The feature's standalone `MirrorDetailsActionBlock` was dropped in
favour of the redesigned control.)
- **MirrorsList** combines the operation-status column with `main`'s
pagination (#686).
- **Operations** types/hooks adapted from **openapi 0.0.60 → 0.0.70**
(#681): renamed error types, local `Operation` typing retained.
- `main`'s release-process overhaul (#674) is kept; `point/26.04.2`'s
superseded versioning infra is dropped.
- `main`'s intentional removals (the `snaps`/`EditSnap` feature) are
**not** reintroduced.

## Reviewers

Tagging the authors of the `main` changes that this had to reconcile
against:
- @marqode — mirror pagination (#686) and mirror type (#682)
- @gesquivelgaghi — openapi 0.0.70 bump (#681)

## Verification

- `tsc --noEmit`: clean (incl. the openapi 0.0.70 adaptation)
- ESLint: 0 errors · Prettier: clean
- Vitest: full suite green in isolation; **+55 tests** restored from the
LRO feature. (3 unrelated, pre-existing load-sensitive tests flake only
under full-suite CPU contention — they pass in isolation.)
- Completeness audit: every revert-dropped feature file restored; only
the intentionally-dropped `MirrorDetailsActionBlock` is absent.

Both feature changesets (`fuzzy-toes-hug`, `better-boats-eat`) are
included for the CHANGELOG.
---
 .changeset/better-boats-eat.md                |   5 +
 .changeset/fuzzy-toes-hug.md                  |   5 +
 src/constants.ts                              |   1 +
 .../ImportRepositoryPackagesSidePanel.tsx     |   6 +-
 .../ValidationResult.test.tsx                 |  17 +-
 .../ValidationResult/ValidationResult.tsx     |   6 +-
 .../types/PackagesValidationState.ts          |   9 +
 .../local-repositories/types/index.ts         |   1 +
 .../MirrorDetails/MirrorDetails.module.scss   |   4 +
 .../MirrorDetails/MirrorDetails.test.tsx      | 143 ++++++++++--
 .../MirrorDetails/MirrorDetails.tsx           |  87 +++++++-
 .../components/MirrorsList/MirrorsList.tsx    |  63 +++++-
 src/features/operations/api/index.ts          |   2 +
 .../operations/api/useBatchGetOperations.ts   |  44 ++++
 .../operations/api/useGetOperation.ts         |  12 +-
 .../operations/api/useGetOperationResource.ts |  20 ++
 .../OperationStatusCell.module.scss           |  18 ++
 .../OperationStatusCell.test.tsx              |  75 +++++++
 .../OperationStatusCell.tsx                   |  57 +++++
 .../components/OperationStatusCell/helpers.ts |  34 +++
 .../components/OperationStatusCell/index.ts   |   1 +
 .../ViewLogsButton/ViewLogsButton.test.tsx    |  43 ++++
 .../ViewLogsButton/ViewLogsButton.tsx         |  35 +++
 .../components/ViewLogsButton/index.ts        |   1 +
 .../ViewLogsSidePanel.module.scss             |  20 ++
 .../ViewLogsSidePanel.test.tsx                | 211 ++++++++++++++++++
 .../ViewLogsSidePanel/ViewLogsSidePanel.tsx   | 135 +++++++++++
 .../components/ViewLogsSidePanel/index.ts     |   1 +
 src/features/operations/helpers.ts            |  20 ++
 src/features/operations/index.ts              |  14 +-
 src/features/operations/types/Operation.ts    |  48 +++-
 .../types/PackagesValidationOperation.ts      |  29 ---
 src/features/operations/types/index.ts        |  11 +-
 .../PublicationDetails.module.scss            |   5 +
 .../PublicationDetails.test.tsx               | 105 ++++++++-
 .../PublicationDetails/PublicationDetails.tsx | 123 +++++++---
 .../PublicationsList.module.scss              |   3 +
 .../PublicationsList.test.tsx                 |  35 ++-
 .../PublicationsList/PublicationsList.tsx     |  72 +++++-
 .../repositories/mirrors/MirrorsPage.test.tsx |  31 ++-
 .../repositories/mirrors/MirrorsPage.tsx      |  17 +-
 .../publications/PublicationsPage.test.tsx    |  29 ++-
 .../publications/PublicationsPage.tsx         |  18 +-
 src/tests/helpers.ts                          |   4 +-
 src/tests/mocks/mirrors.ts                    |   5 +
 src/tests/mocks/operations.ts                 | 164 +++++++++++++-
 src/tests/mocks/publications.ts               |   5 +-
 src/tests/server/handlers/operations.ts       |  94 +++++---
 .../server/handlers/publicationTargets.ts     |   2 +-
 src/tests/server/handlers/publications.ts     |  22 +-
 src/tests/setup.ts                            |   8 +-
 51 files changed, 1703 insertions(+), 217 deletions(-)
 create mode 100644 .changeset/better-boats-eat.md
 create mode 100644 .changeset/fuzzy-toes-hug.md
 create mode 100644 src/features/local-repositories/types/PackagesValidationState.ts
 create mode 100644 src/features/operations/api/useBatchGetOperations.ts
 create mode 100644 src/features/operations/api/useGetOperationResource.ts
 create mode 100644 src/features/operations/components/OperationStatusCell/OperationStatusCell.module.scss
 create mode 100644 src/features/operations/components/OperationStatusCell/OperationStatusCell.test.tsx
 create mode 100644 src/features/operations/components/OperationStatusCell/OperationStatusCell.tsx
 create mode 100644 src/features/operations/components/OperationStatusCell/helpers.ts
 create mode 100644 src/features/operations/components/OperationStatusCell/index.ts
 create mode 100644 src/features/operations/components/ViewLogsButton/ViewLogsButton.test.tsx
 create mode 100644 src/features/operations/components/ViewLogsButton/ViewLogsButton.tsx
 create mode 100644 src/features/operations/components/ViewLogsButton/index.ts
 create mode 100644 src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.module.scss
 create mode 100644 src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.test.tsx
 create mode 100644 src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.tsx
 create mode 100644 src/features/operations/components/ViewLogsSidePanel/index.ts
 create mode 100644 src/features/operations/helpers.ts
 delete mode 100644 src/features/operations/types/PackagesValidationOperation.ts
 create mode 100644 src/features/publications/components/PublicationDetails/PublicationDetails.module.scss
 create mode 100644 src/features/publications/components/PublicationsList/PublicationsList.module.scss

diff --git a/.changeset/better-boats-eat.md b/.changeset/better-boats-eat.md
new file mode 100644
index 0000000000..b1ca29a6a5
--- /dev/null
+++ b/.changeset/better-boats-eat.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add publishing status for publications
diff --git a/.changeset/fuzzy-toes-hug.md b/.changeset/fuzzy-toes-hug.md
new file mode 100644
index 0000000000..749c039402
--- /dev/null
+++ b/.changeset/fuzzy-toes-hug.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add syncing status for mirrors
diff --git a/src/constants.ts b/src/constants.ts
index 106672e3a9..df4313231e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -43,3 +43,4 @@ export const MAX_PASSWORD_LENGTH = 50;
 export const DEFAULT_MODAL_PAGE_SIZE = 10;
 export const GENERIC_DOMAIN = "landscape.canonical.com";
 export const MASKED_VALUE = "****************";
+export const DEFAULT_POLLING_INTERVAL = 2000;
diff --git a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ImportRepositoryPackagesSidePanel.tsx b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ImportRepositoryPackagesSidePanel.tsx
index e8c1ad2b22..a77f306050 100644
--- a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ImportRepositoryPackagesSidePanel.tsx
+++ b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ImportRepositoryPackagesSidePanel.tsx
@@ -13,10 +13,8 @@ import { useImportRepositoryPackages } from "../../api/useImportRepositoryPackag
 import { useGetOperation } from "@/features/operations";
 import classes from "./ImportRepositoryPackagesSidePanel.module.scss";
 import { pluralize } from "@/utils/_helpers";
-import type {
-  OperationStatus,
-  PackagesValidationState,
-} from "@/features/operations";
+import type { OperationStatus } from "@/features/operations";
+import type { PackagesValidationState } from "../../types";
 import { getPackageList } from "./helpers";
 import ValidationResult from "./ValidationResult/ValidationResult";
 
diff --git a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
index cd4ae1705a..832fd1725a 100644
--- a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
+++ b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
@@ -2,10 +2,7 @@ import { renderWithProviders } from "@/tests/render";
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import ValidationResult from "./ValidationResult";
-import type {
-  PackagesValidationState,
-  PackagesValidationOperation,
-} from "@/features/operations";
+import type { Operation } from "@/features/operations";
 import {
   emptyOperation,
   overCountOperation,
@@ -14,13 +11,12 @@ import {
   timeoutOperation,
 } from "@/tests/mocks/operations";
 import { getPackageList } from "../helpers";
+import type { PackagesValidationState } from "../../../types";
 
-const makeTask = (
-  operation: PackagesValidationOperation,
-): PackagesValidationState => {
+const makeTask = (operation: Operation): PackagesValidationState => {
   const { response, count } = getPackageList(operation.response?.output ?? "");
   return {
-    status: operation.metadata?.status,
+    status: operation.metadata.status,
     count: count,
     response: response,
     done: operation.done,
@@ -54,7 +50,10 @@ describe("ValidationResult", () => {
   it("renders default error notification when failed without error message", () => {
     renderWithProviders(
       <ValidationResult
-        validationTask={makeTask({ ...failedOperation, error: undefined })}
+        validationTask={makeTask({
+          ...failedOperation,
+          error: { ...failedOperation.error, message: "" },
+        })}
       />,
     );
 
diff --git a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.tsx b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.tsx
index 0f45c09831..7214e48e8d 100644
--- a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.tsx
+++ b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { Notification } from "@canonical/react-components";
-import type { PackagesValidationState } from "@/features/operations";
 import LocalRepositoryPackagesList from "../../LocalRepositoryPackagesList";
+import type { PackagesValidationState } from "../../../types";
 
 interface ValidationResultProps {
   readonly validationTask: PackagesValidationState;
@@ -23,7 +23,7 @@ const ValidationResult: FC<ValidationResultProps> = ({ validationTask }) => {
     );
   }
 
-  if (validationTask.status === "failed") {
+  if (validationTask.error) {
     return (
       <Notification
         severity="negative"
@@ -31,7 +31,7 @@ const ValidationResult: FC<ValidationResultProps> = ({ validationTask }) => {
         borderless
       >
         <span>
-          {validationTask.error?.message ??
+          {validationTask.error.message ||
             "An unknown error occurred. Please try again later."}
         </span>
       </Notification>
diff --git a/src/features/local-repositories/types/PackagesValidationState.ts b/src/features/local-repositories/types/PackagesValidationState.ts
new file mode 100644
index 0000000000..1ff5a923c9
--- /dev/null
+++ b/src/features/local-repositories/types/PackagesValidationState.ts
@@ -0,0 +1,9 @@
+import type { OperationStatus, OperationError } from "@/features/operations";
+
+export interface PackagesValidationState {
+  done: boolean;
+  status: OperationStatus;
+  response: string[];
+  count: number;
+  error?: Omit<OperationError, "details">;
+}
diff --git a/src/features/local-repositories/types/index.ts b/src/features/local-repositories/types/index.ts
index 3c144fcb30..1e5b9cbfce 100644
--- a/src/features/local-repositories/types/index.ts
+++ b/src/features/local-repositories/types/index.ts
@@ -1 +1,2 @@
 export type { Local, LocalPackage } from "./LocalRepository";
+export type { PackagesValidationState } from "./PackagesValidationState";
diff --git a/src/features/mirrors/components/MirrorDetails/MirrorDetails.module.scss b/src/features/mirrors/components/MirrorDetails/MirrorDetails.module.scss
index 8c6269d8d2..dbeb4a06f0 100644
--- a/src/features/mirrors/components/MirrorDetails/MirrorDetails.module.scss
+++ b/src/features/mirrors/components/MirrorDetails/MirrorDetails.module.scss
@@ -3,3 +3,7 @@
 .marginBottom {
   margin-bottom: $spv--x-large;
 }
+
+.icon {
+  margin-right: $sph--small;
+}
diff --git a/src/features/mirrors/components/MirrorDetails/MirrorDetails.test.tsx b/src/features/mirrors/components/MirrorDetails/MirrorDetails.test.tsx
index ebd272ec1d..be78afd9d3 100644
--- a/src/features/mirrors/components/MirrorDetails/MirrorDetails.test.tsx
+++ b/src/features/mirrors/components/MirrorDetails/MirrorDetails.test.tsx
@@ -3,13 +3,17 @@ import { describe, expect } from "vitest";
 import MirrorDetails from "./MirrorDetails";
 import { mirrors } from "@/tests/mocks/mirrors";
 import { Suspense } from "react";
+import userEvent from "@testing-library/user-event";
 import LoadingState from "@/components/layout/LoadingState";
 import { expectLoadingState } from "@/tests/helpers";
-import { screen } from "@testing-library/react";
+import { screen, waitFor, within } from "@testing-library/react";
+import type { Mirror } from "@canonical/landscape-openapi";
 import { API_URL_DEB_ARCHIVE } from "@/constants";
 import server from "@/tests/server";
 import { http, HttpResponse } from "msw";
 
+const typedMirrors = mirrors as Mirror[];
+
 describe("MirrorDetails", () => {
   it("renders", async () => {
     renderWithProviders(
@@ -23,7 +27,7 @@ describe("MirrorDetails", () => {
     await expectLoadingState();
 
     expect(
-      screen.getByRole("heading", { name: mirrors[0].displayName }),
+      await screen.findByRole("heading", { name: mirrors[0].displayName }),
     ).toBeInTheDocument();
 
     expect(
@@ -31,10 +35,13 @@ describe("MirrorDetails", () => {
     ).toBeInTheDocument();
     expect(screen.getByText("Name")).toBeInTheDocument();
     expect(screen.getByText("Source type")).toBeInTheDocument();
-    expect(screen.getByText("Ubuntu archive")).toBeInTheDocument();
     expect(screen.getByText("Source URL")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
     expect(screen.getByText("Last update")).toBeInTheDocument();
     expect(screen.getAllByText("Packages")).toHaveLength(2);
+    expect(
+      screen.getByText("Preserve upstream signing key"),
+    ).toBeInTheDocument();
 
     expect(
       screen.getByRole("heading", { name: "Contents" }),
@@ -42,10 +49,10 @@ describe("MirrorDetails", () => {
     expect(screen.getByText("Distribution")).toBeInTheDocument();
     expect(screen.getByText("Components")).toBeInTheDocument();
     expect(screen.getByText("Architectures")).toBeInTheDocument();
-    expect(
-      screen.getByText("Preserve upstream signing key"),
-    ).toBeInTheDocument();
     expect(screen.getByText("Filter")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Include dependencies in filter"),
+    ).not.toBeInTheDocument();
     expect(screen.getByText(/Download .udeb/i)).toBeInTheDocument();
     expect(screen.getByText("Download sources")).toBeInTheDocument();
     expect(screen.getByText(/Download installer files/i)).toBeInTheDocument();
@@ -59,35 +66,54 @@ describe("MirrorDetails", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders GPG key fingerprint", async () => {
+  it("renders without operation", async () => {
+    const mirrorNoLro = typedMirrors.find(
+      ({ lastOperation }) => !lastOperation,
+    );
+    assert(mirrorNoLro, "Missing mock mirror without lastOperation");
+
     renderWithProviders(
       <Suspense fallback={<LoadingState />}>
         <MirrorDetails />
       </Suspense>,
       undefined,
-      `?name=${mirrors[2].name}`,
+      `?name=${mirrorNoLro.name}`,
     );
 
     await expectLoadingState();
 
+    expect(await screen.findByText("Not yet updated")).toBeInTheDocument();
+  });
+
+  it("renders failed update notification", async () => {
+    const failedMirror = typedMirrors.find(({ lastOperation }) =>
+      lastOperation?.includes("ffff-llll-dddd"),
+    );
+    assert(failedMirror, "Missing mock mirror with a failed operation");
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <MirrorDetails />
+      </Suspense>,
+      undefined,
+      `?name=${failedMirror.name}`,
+    );
+
     expect(
-      screen.getByRole("heading", { name: "Authentication" }),
+      await screen.findByRole("heading", { name: "Update failed" }),
     ).toBeInTheDocument();
-    expect(screen.getByText("Verification GPG Key")).toBeInTheDocument();
     expect(
-      screen.getByText(mirrors[2].gpgKey?.fingerprint),
+      screen.getByText(
+        "Your last mirror update was not completed successfully.",
+      ),
     ).toBeInTheDocument();
-  });
-
-  it("shows authentication for legacy mirrors that have a GPG key but no mirrorType", async () => {
-    const legacyMirror = { ...mirrors[2], mirrorType: undefined };
 
-    server.use(
-      http.get(`${API_URL_DEB_ARCHIVE}mirrors/:mirrorId`, () =>
-        HttpResponse.json(legacyMirror),
-      ),
+    expect(screen.getAllByRole("button", { name: "View logs" })).toHaveLength(
+      2,
     );
+  });
 
+  it("renders GPG key fingerprint", async () => {
     renderWithProviders(
       <Suspense fallback={<LoadingState />}>
         <MirrorDetails />
@@ -99,8 +125,9 @@ describe("MirrorDetails", () => {
     await expectLoadingState();
 
     expect(
-      screen.getByRole("heading", { name: "Authentication" }),
+      await screen.findByRole("heading", { name: "Authentication" }),
     ).toBeInTheDocument();
+    expect(screen.getByText("Verification GPG Key")).toBeInTheDocument();
     expect(
       screen.getByText(mirrors[2].gpgKey?.fingerprint),
     ).toBeInTheDocument();
@@ -123,11 +150,85 @@ describe("MirrorDetails", () => {
 
     await expectLoadingState();
 
-    const label = screen.getByText("Preserve upstream signing key");
+    const label = await screen.findByText("Preserve upstream signing key");
     expect(label).toBeInTheDocument();
     expect(label.closest("div")?.nextSibling?.textContent).toBe("Yes");
   });
 
+  it("shows include dependencies in filter field only if mirror has filter", async () => {
+    const mirrorWithFilter = typedMirrors.find(({ filter }) => filter);
+    assert(mirrorWithFilter, "Test data should include a mirror with a filter");
+
+    const { container } = renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <MirrorDetails />
+      </Suspense>,
+      undefined,
+      `?name=${mirrorWithFilter.name}`,
+    );
+
+    await expectLoadingState();
+
+    await waitFor(() => {
+      expect(container).toHaveInfoItem("Include dependencies in filter", "Yes");
+    });
+  });
+
+  it("renders packages tab when clicked", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <MirrorDetails />
+      </Suspense>,
+      undefined,
+      `?name=${mirrors[0].name}`,
+    );
+
+    await expectLoadingState();
+
+    await screen.findByRole("heading", { name: mirrors[0].displayName });
+
+    const packagesTab = within(screen.getByRole("navigation")).getByText(
+      "Packages",
+    );
+    await user.click(packagesTab);
+
+    expect(
+      screen.queryByRole("heading", { name: "Details" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("columnheader", { name: /Package name/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows authentication for legacy mirrors that have a GPG key but no mirrorType", async () => {
+    const legacyMirror = { ...mirrors[2], mirrorType: undefined };
+
+    server.use(
+      http.get(`${API_URL_DEB_ARCHIVE}mirrors/:mirrorId`, () =>
+        HttpResponse.json(legacyMirror),
+      ),
+    );
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <MirrorDetails />
+      </Suspense>,
+      undefined,
+      `?name=${mirrors[2].name}`,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      screen.getByRole("heading", { name: "Authentication" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mirrors[2].gpgKey?.fingerprint),
+    ).toBeInTheDocument();
+  });
+
   it("opens UpdateMirrorModal if updateModal param is true", async () => {
     renderWithProviders(
       <Suspense fallback={<LoadingState />}>
diff --git a/src/features/mirrors/components/MirrorDetails/MirrorDetails.tsx b/src/features/mirrors/components/MirrorDetails/MirrorDetails.tsx
index 965b960ec4..13c89568f1 100644
--- a/src/features/mirrors/components/MirrorDetails/MirrorDetails.tsx
+++ b/src/features/mirrors/components/MirrorDetails/MirrorDetails.tsx
@@ -1,6 +1,13 @@
 import { useEffect, useState, type FC } from "react";
 import SidePanel from "@/components/layout/SidePanel/SidePanel";
-import { Button, Icon, ICONS, Tabs } from "@canonical/react-components";
+import {
+  Button,
+  Icon,
+  ICONS,
+  Notification,
+  Tabs,
+  Tooltip,
+} from "@canonical/react-components";
 import Blocks from "@/components/layout/Blocks";
 import InfoGrid from "@/components/layout/InfoGrid";
 import { useGetMirror, useListPublicationTargets } from "../../api";
@@ -8,7 +15,10 @@ import usePageParams from "@/hooks/usePageParams";
 import { getSourceType, shouldShowAuthentication } from "./helpers";
 import MirrorPackagesCount from "../MirrorPackagesCount";
 import moment from "moment";
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import {
+  DEFAULT_POLLING_INTERVAL,
+  DISPLAY_DATE_TIME_FORMAT,
+} from "@/constants";
 import UpdateMirrorModal from "../UpdateMirrorModal";
 import { useBoolean } from "usehooks-ts";
 import RemoveMirrorModal from "../RemoveMirrorModal";
@@ -21,6 +31,12 @@ import {
 import classes from "./MirrorDetails.module.scss";
 import MirrorPackagesList from "../MirrorPackagesList";
 import LoadingState from "@/components/layout/LoadingState";
+import {
+  getOperationStatusIcon,
+  OperationStatusCell,
+  useGetOperation,
+  ViewLogsButton,
+} from "@/features/operations";
 
 const MirrorDetails: FC = () => {
   const { name, updateModal, createSidePathPusher, sidePath, setPageParams } =
@@ -46,6 +62,14 @@ const MirrorDetails: FC = () => {
 
   const mirror = useGetMirror(name).data.data;
 
+  const { operation } = useGetOperation(mirror.lastOperation ?? "", {
+    enabled: !!mirror.lastOperation,
+    refetchInterval: ({ state }) =>
+      state.data?.data?.done ? false : DEFAULT_POLLING_INTERVAL,
+  });
+
+  const iconName = getOperationStatusIcon(operation);
+
   const { publications, isGettingPublications } =
     useGetPublicationsBySource(name);
 
@@ -99,6 +123,15 @@ const MirrorDetails: FC = () => {
     <>
       <SidePanel.Header>{mirror.displayName}</SidePanel.Header>
       <SidePanel.Content>
+        {!!operation?.error && (
+          <Notification
+            severity="negative"
+            title="Update failed"
+            actions={[<ViewLogsButton resource={name} key="view-logs" />]}
+          >
+            Your last mirror update was not completed successfully.
+          </Notification>
+        )}
         <div className="p-segmented-control">
           <Button
             type="button"
@@ -109,15 +142,32 @@ const MirrorDetails: FC = () => {
             <Icon name="edit" />
             <span>Edit</span>
           </Button>
-          <Button
-            type="button"
-            hasIcon
-            className="p-segmented-control__button"
-            onClick={openUpdateModal}
-          >
-            <Icon name="restart" />
-            <span>Update</span>
-          </Button>
+          {operation && !operation.done ? (
+            <Tooltip
+              message="You must wait for this action to be completed to trigger a new update."
+              position="btm-center"
+            >
+              <Button
+                type="button"
+                hasIcon
+                className="p-segmented-control__button"
+                disabled
+              >
+                <Icon name="spinner" className="u-animation--spin" />
+                <span>Updating</span>
+              </Button>
+            </Tooltip>
+          ) : (
+            <Button
+              type="button"
+              hasIcon
+              className="p-segmented-control__button"
+              onClick={openUpdateModal}
+            >
+              <Icon name="restart" />
+              <span>Update</span>
+            </Button>
+          )}
           <Button
             type="button"
             hasIcon
@@ -160,7 +210,20 @@ const MirrorDetails: FC = () => {
                   }
                   large
                 />
-
+                <InfoGrid.Item
+                  label="Status"
+                  value={
+                    <>
+                      {!!iconName && (
+                        <Icon name={iconName} className={classes.icon} />
+                      )}
+                      <OperationStatusCell
+                        operation={operation}
+                        type="mirror"
+                      />
+                    </>
+                  }
+                />
                 <InfoGrid.Item
                   label="Preserve upstream signing key"
                   value={boolToLabel(mirror.preserveSignatures)}
diff --git a/src/features/mirrors/components/MirrorsList/MirrorsList.tsx b/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
index c6bf40344e..fa55ab9b48 100644
--- a/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
+++ b/src/features/mirrors/components/MirrorsList/MirrorsList.tsx
@@ -1,7 +1,10 @@
 import ResponsiveTable from "@/components/layout/ResponsiveTable";
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import {
+  DEFAULT_POLLING_INTERVAL,
+  DISPLAY_DATE_TIME_FORMAT,
+} from "@/constants";
 import type { Mirror } from "@canonical/landscape-openapi";
-import { Button, Spinner } from "@canonical/react-components";
+import { Button } from "@canonical/react-components";
 import moment from "moment";
 import { Suspense, useMemo, type FC } from "react";
 import type { CellProps, Column } from "react-table";
@@ -11,6 +14,12 @@ import NoData from "@/components/layout/NoData";
 import usePageParams from "@/hooks/usePageParams";
 import MirrorPackagesCount from "../MirrorPackagesCount";
 import MirrorActions from "../MirrorActions";
+import LoadingState from "@/components/layout/LoadingState";
+import {
+  useBatchGetOperations,
+  OperationStatusCell,
+  getOperationStatusIcon,
+} from "@/features/operations";
 import { TablePagination } from "@/components/layout/TablePagination";
 
 interface MirrorsListProps {
@@ -26,15 +35,30 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
     [mirrors, currentPage, pageSize],
   );
 
+  const operationNames = mirrors
+    .filter((mirror) => mirror.lastOperation)
+    .map((mirror) => mirror.lastOperation ?? "");
+
+  const { operations, isGettingOperations } = useBatchGetOperations(
+    operationNames,
+    {
+      refetchInterval: ({ state }) =>
+        Object.values(state.data ?? {}).some((operation) => !operation.done)
+          ? DEFAULT_POLLING_INTERVAL
+          : false,
+    },
+  );
+
   const columns = useMemo<Column<Mirror>[]>(
     () => [
       {
         Header: "Mirror name",
+        className: "large-cell",
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) => (
           <Button
             type="button"
             appearance="link"
-            className="u-no-margin--bottom u-no-padding--top"
+            className="u-no-margin--bottom u-no-padding--top u-align-text--left"
             onClick={createPageParamsSetter({
               sidePath: ["view"],
               name: mirror.name,
@@ -45,12 +69,27 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
         ),
       },
       {
-        Header: "Distribution",
-        Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
-          mirror.distribution ?? <NoData />,
+        Header: "Status",
+        className: "large-cell",
+        Cell: ({ row: { original: mirror } }: CellProps<Mirror>) => {
+          const operation = operations[mirror.lastOperation ?? ""];
+          return (
+            <OperationStatusCell
+              isGettingOperation={isGettingOperations}
+              operation={operation}
+              type="mirror"
+            />
+          );
+        },
+        getCellIcon: ({ row: { original: mirror } }: CellProps<Mirror>) => {
+          // eslint-disable-next-line react/prop-types
+          const operation = operations[mirror.lastOperation ?? ""];
+          return getOperationStatusIcon(operation);
+        },
       },
       {
         Header: "Last update",
+        className: "medium-cell",
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
           mirror.lastDownloadDate ? (
             moment(mirror.lastDownloadDate).format(DISPLAY_DATE_TIME_FORMAT)
@@ -58,6 +97,11 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
             <NoData />
           ),
       },
+      {
+        Header: "Distribution",
+        Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
+          mirror.distribution ?? <NoData />,
+      },
       {
         Header: "Packages",
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
@@ -71,7 +115,7 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
         Header: "Publications",
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
           mirror.name ? (
-            <Suspense fallback={<Spinner />}>
+            <Suspense fallback={<LoadingState inline />}>
               <MirrorPublicationsLink mirrorName={mirror.name} />
             </Suspense>
           ) : (
@@ -83,7 +127,7 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
         accessor: undefined,
         Cell: ({ row: { original: mirror } }: CellProps<Mirror>) =>
           mirror.name ? (
-            <Suspense fallback={<Spinner />}>
+            <Suspense fallback={<LoadingState inline />}>
               <MirrorActions
                 mirrorDisplayName={mirror.displayName}
                 mirrorName={mirror.name}
@@ -94,7 +138,7 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
           ),
       },
     ],
-    [createPageParamsSetter],
+    [createPageParamsSetter, isGettingOperations, operations],
   );
 
   return (
@@ -105,6 +149,7 @@ const MirrorsList: FC<MirrorsListProps> = ({ mirrors, emptyMsg }) => {
         emptyMsg={
           emptyMsg ?? "No mirrors found according to your search parameters."
         }
+        minWidth={1150}
       />
       <TablePagination
         totalItems={mirrors.length}
diff --git a/src/features/operations/api/index.ts b/src/features/operations/api/index.ts
index 0c790dbdcb..face62734a 100644
--- a/src/features/operations/api/index.ts
+++ b/src/features/operations/api/index.ts
@@ -1 +1,3 @@
 export * from "./useGetOperation";
+export * from "./useBatchGetOperations";
+export * from "./useGetOperationResource";
diff --git a/src/features/operations/api/useBatchGetOperations.ts b/src/features/operations/api/useBatchGetOperations.ts
new file mode 100644
index 0000000000..4cce518818
--- /dev/null
+++ b/src/features/operations/api/useBatchGetOperations.ts
@@ -0,0 +1,44 @@
+import useFetchDebArchive from "@/hooks/useFetchDebArchive";
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+import type { Operation } from "../types";
+
+type BatchGetOperationsReturnType = Record<string, Operation>;
+
+interface BatchGetOperationsResponse {
+  operations?: Operation[] | undefined;
+}
+export const useBatchGetOperations = (
+  names: string[],
+  config: Omit<
+    UseQueryOptions<BatchGetOperationsReturnType>,
+    "queryKey" | "queryFn"
+  > = {},
+) => {
+  const authFetchDebArchive = useFetchDebArchive();
+
+  const { data, isLoading } = useQuery<BatchGetOperationsReturnType>({
+    queryKey: ["operations", "batch", names],
+    queryFn: async () => {
+      const response =
+        await authFetchDebArchive.post<BatchGetOperationsResponse>(
+          "operations:batchGet",
+          { names },
+        );
+
+      const lookup: Record<string, Operation> = {};
+      for (const operation of response.data.operations ?? []) {
+        if (operation.name) {
+          lookup[operation.name] = operation;
+        }
+      }
+      return lookup;
+    },
+    enabled: names.length > 0,
+    ...config,
+  });
+
+  return {
+    operations: data ?? {},
+    isGettingOperations: isLoading,
+  };
+};
diff --git a/src/features/operations/api/useGetOperation.ts b/src/features/operations/api/useGetOperation.ts
index c60f02a4fe..c801b2246e 100644
--- a/src/features/operations/api/useGetOperation.ts
+++ b/src/features/operations/api/useGetOperation.ts
@@ -1,16 +1,14 @@
 import useFetchDebArchive from "@/hooks/useFetchDebArchive";
 import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
-import type {
-  OperationServiceGetOperationError,
-  OperationServiceGetOperationResponse,
-} from "@canonical/landscape-openapi";
+import type { OperationServiceGetOperationError } from "@canonical/landscape-openapi";
+import type { Operation } from "../types";
 
 export const useGetOperation = (
   name: string,
   config: Omit<
     UseQueryOptions<
-      AxiosResponse<OperationServiceGetOperationResponse>,
+      AxiosResponse<Operation>,
       AxiosError<OperationServiceGetOperationError>
     >,
     "queryKey" | "queryFn"
@@ -23,10 +21,10 @@ export const useGetOperation = (
     isPending,
     error,
   } = useQuery<
-    AxiosResponse<OperationServiceGetOperationResponse>,
+    AxiosResponse<Operation>,
     AxiosError<OperationServiceGetOperationError>
   >({
-    queryKey: ["local", name],
+    queryKey: ["operation", name],
     queryFn: async () => authFetchDebArchive.get(name),
     ...config,
   });
diff --git a/src/features/operations/api/useGetOperationResource.ts b/src/features/operations/api/useGetOperationResource.ts
new file mode 100644
index 0000000000..d933908290
--- /dev/null
+++ b/src/features/operations/api/useGetOperationResource.ts
@@ -0,0 +1,20 @@
+import useFetchDebArchive from "@/hooks/useFetchDebArchive";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+
+interface OperationResource {
+  readonly name: string;
+  readonly displayName: string;
+  readonly lastOperation?: string;
+}
+
+export const useGetOperationResource = (name: string) => {
+  const authFetchDebArchive = useFetchDebArchive();
+
+  const { data } = useSuspenseQuery<AxiosResponse<OperationResource>>({
+    queryKey: ["resource", name],
+    queryFn: async () => authFetchDebArchive.get(name),
+  });
+
+  return data.data;
+};
diff --git a/src/features/operations/components/OperationStatusCell/OperationStatusCell.module.scss b/src/features/operations/components/OperationStatusCell/OperationStatusCell.module.scss
new file mode 100644
index 0000000000..b8dbcc0a81
--- /dev/null
+++ b/src/features/operations/components/OperationStatusCell/OperationStatusCell.module.scss
@@ -0,0 +1,18 @@
+@import "vanilla-framework/scss/settings_spacing";
+@import "vanilla-framework/scss/settings_colors";
+
+.failedText {
+  margin-right: $sph--small;
+}
+
+.progressBar {
+  background-color: $colors--theme--background-active;
+  display: inline-flex;
+  height: $spv--small;
+  margin: 0 $sph--small;
+  width: 4rem;
+
+  > div {
+    background-color: $colors--theme--link-default;
+  }
+}
diff --git a/src/features/operations/components/OperationStatusCell/OperationStatusCell.test.tsx b/src/features/operations/components/OperationStatusCell/OperationStatusCell.test.tsx
new file mode 100644
index 0000000000..e713857b32
--- /dev/null
+++ b/src/features/operations/components/OperationStatusCell/OperationStatusCell.test.tsx
@@ -0,0 +1,75 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import OperationStatusCell from "./OperationStatusCell";
+import {
+  failedMirrorOperation,
+  idleOperation,
+  succeededOperation,
+  inProgressOperation,
+} from "@/tests/mocks/operations";
+import { resetLroProgress } from "@/tests/server/handlers/operations";
+
+describe("OperationStatusCell", () => {
+  it("renders loading while fetching", () => {
+    renderWithProviders(
+      <OperationStatusCell
+        operation={undefined}
+        isGettingOperation={true}
+        type={"mirror"}
+      />,
+    );
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("renders operation status when operation is undefined", () => {
+    renderWithProviders(
+      <OperationStatusCell operation={undefined} type={"mirror"} />,
+    );
+
+    expect(screen.getByText("Not yet updated")).toBeInTheDocument();
+  });
+
+  it("renders successful publication operation status", () => {
+    renderWithProviders(
+      <OperationStatusCell
+        operation={succeededOperation}
+        type={"publication"}
+      />,
+    );
+
+    expect(screen.getByText("Published")).toBeInTheDocument();
+  });
+
+  it("renders failed mirror operation status", () => {
+    renderWithProviders(
+      <OperationStatusCell operation={failedMirrorOperation} type={"mirror"} />,
+    );
+
+    expect(screen.getByText("Update failed")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /view logs/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders in progress mirror operation status", () => {
+    resetLroProgress();
+
+    renderWithProviders(
+      <OperationStatusCell operation={inProgressOperation} type={"mirror"} />,
+    );
+
+    expect(screen.getByText("Updating")).toBeInTheDocument();
+    expect(screen.getByText("78%")).toBeInTheDocument();
+  });
+
+  it("renders idle local operation status", () => {
+    renderWithProviders(
+      <OperationStatusCell operation={idleOperation} type={"local"} />,
+    );
+
+    expect(screen.getByText("Importing packages")).toBeInTheDocument();
+    expect(screen.getByText("0%")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/operations/components/OperationStatusCell/OperationStatusCell.tsx b/src/features/operations/components/OperationStatusCell/OperationStatusCell.tsx
new file mode 100644
index 0000000000..6f142286fd
--- /dev/null
+++ b/src/features/operations/components/OperationStatusCell/OperationStatusCell.tsx
@@ -0,0 +1,57 @@
+import type { Operation } from "@/features/operations";
+import type { FC } from "react";
+import classes from "./OperationStatusCell.module.scss";
+import ViewLogsButton from "../ViewLogsButton";
+import LoadingState from "@/components/layout/LoadingState";
+import { getOperationTypeTexts } from "./helpers";
+
+interface OperationStatusCellProps {
+  readonly operation: Operation | undefined;
+  readonly isGettingOperation?: boolean;
+  readonly type: "publication" | "mirror" | "local";
+}
+
+const OperationStatusCell: FC<OperationStatusCellProps> = ({
+  operation,
+  isGettingOperation = false,
+  type,
+}) => {
+  if (isGettingOperation) {
+    return <LoadingState inline />;
+  }
+
+  const { inexistent, successful, failed, ongoing } =
+    getOperationTypeTexts(type);
+  const { status, resource, progressPercent = 0 } = operation?.metadata ?? {};
+  const resourceIdentifier =
+    type === "mirror" ? resource : resource?.split("/").pop();
+
+  if (!status) {
+    return inexistent;
+  }
+
+  if (status === "succeeded") {
+    return successful;
+  }
+
+  if (status === "failed") {
+    return (
+      <>
+        <span className={classes.failedText}>{failed}</span>
+        <ViewLogsButton resource={resourceIdentifier} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      {ongoing}
+      <div className={classes.progressBar}>
+        <div style={{ width: `${progressPercent}%` }} />
+      </div>
+      <span className="u-text--muted">{progressPercent}%</span>
+    </>
+  );
+};
+
+export default OperationStatusCell;
diff --git a/src/features/operations/components/OperationStatusCell/helpers.ts b/src/features/operations/components/OperationStatusCell/helpers.ts
new file mode 100644
index 0000000000..049e9daa47
--- /dev/null
+++ b/src/features/operations/components/OperationStatusCell/helpers.ts
@@ -0,0 +1,34 @@
+interface OperationTypeTexts {
+  inexistent: string;
+  successful: string;
+  failed: string;
+  ongoing: string;
+}
+
+export const getOperationTypeTexts = (
+  type: "publication" | "mirror" | "local",
+): OperationTypeTexts => {
+  switch (type) {
+    case "publication":
+      return {
+        inexistent: "Not yet published",
+        successful: "Published",
+        failed: "Publishing failed",
+        ongoing: "Publishing",
+      };
+    case "local":
+      return {
+        inexistent: "No packages have been imported",
+        successful: "Packages imported",
+        failed: "Import failed",
+        ongoing: "Importing packages",
+      };
+    case "mirror":
+      return {
+        inexistent: "Not yet updated",
+        successful: "Updated",
+        failed: "Update failed",
+        ongoing: "Updating",
+      };
+  }
+};
diff --git a/src/features/operations/components/OperationStatusCell/index.ts b/src/features/operations/components/OperationStatusCell/index.ts
new file mode 100644
index 0000000000..272f896b5b
--- /dev/null
+++ b/src/features/operations/components/OperationStatusCell/index.ts
@@ -0,0 +1 @@
+export { default } from "./OperationStatusCell";
diff --git a/src/features/operations/components/ViewLogsButton/ViewLogsButton.test.tsx b/src/features/operations/components/ViewLogsButton/ViewLogsButton.test.tsx
new file mode 100644
index 0000000000..68f2571116
--- /dev/null
+++ b/src/features/operations/components/ViewLogsButton/ViewLogsButton.test.tsx
@@ -0,0 +1,43 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import ViewLogsButton from "./ViewLogsButton";
+import { useLocation } from "react-router";
+
+const ComponentWrapper = () => {
+  const { search } = useLocation();
+
+  return (
+    <>
+      <ViewLogsButton resource="test-resource" />
+      <div data-testid="location">{search}</div>
+    </>
+  );
+};
+
+describe("ViewLogsButton", () => {
+  it("opens side panel with logs action when sidePath is empty", async () => {
+    renderWithProviders(<ComponentWrapper />);
+
+    await userEvent.click(screen.getByRole("button", { name: /view logs/i }));
+
+    expect(screen.getByTestId("location")).toHaveTextContent(
+      "?sidePath=logs&name=test-resource",
+    );
+  });
+
+  it("pushes side path when sidePath is not empty", async () => {
+    renderWithProviders(
+      <ComponentWrapper />,
+      undefined,
+      "?sidePath=view&name=test-resource",
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: /view logs/i }));
+
+    const location = screen.getByTestId("location");
+    expect(location).toHaveTextContent("name=test-resource");
+    expect(location).toHaveTextContent("sidePath=view%2Clogs");
+  });
+});
diff --git a/src/features/operations/components/ViewLogsButton/ViewLogsButton.tsx b/src/features/operations/components/ViewLogsButton/ViewLogsButton.tsx
new file mode 100644
index 0000000000..80a1e7fe8f
--- /dev/null
+++ b/src/features/operations/components/ViewLogsButton/ViewLogsButton.tsx
@@ -0,0 +1,35 @@
+import usePageParams from "@/hooks/usePageParams";
+import { Button } from "@canonical/react-components";
+import type { FC } from "react";
+
+interface ViewLogsButtonProps {
+  readonly resource?: string;
+}
+
+const ViewLogsButton: FC<ViewLogsButtonProps> = ({ resource }) => {
+  const { createPageParamsSetter, createSidePathPusher, sidePath } =
+    usePageParams();
+
+  const openSidePanel = (action: string) => {
+    if (!sidePath.length) {
+      return createPageParamsSetter({
+        sidePath: [action],
+        name: resource,
+      });
+    }
+    return createSidePathPusher(action);
+  };
+
+  return (
+    <Button
+      className="u-no-margin--bottom u-no-padding--top"
+      type="button"
+      appearance="link"
+      onClick={openSidePanel("logs")}
+    >
+      View logs
+    </Button>
+  );
+};
+
+export default ViewLogsButton;
diff --git a/src/features/operations/components/ViewLogsButton/index.ts b/src/features/operations/components/ViewLogsButton/index.ts
new file mode 100644
index 0000000000..b27bb401cc
--- /dev/null
+++ b/src/features/operations/components/ViewLogsButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./ViewLogsButton";
diff --git a/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.module.scss b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.module.scss
new file mode 100644
index 0000000000..ae9e76dff9
--- /dev/null
+++ b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.module.scss
@@ -0,0 +1,20 @@
+@import "vanilla-framework/scss/settings_spacing";
+
+.actionRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: $spv--x-small;
+}
+
+:global(.p-panel__content):has(.code) {
+  overflow: hidden;
+}
+
+.code {
+  margin-bottom: 0;
+  overflow: hidden;
+
+  > :global(.p-code-snippet__block) {
+    height: calc(100% - 2.5rem);
+  }
+}
diff --git a/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.test.tsx b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.test.tsx
new file mode 100644
index 0000000000..783d8a66b7
--- /dev/null
+++ b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.test.tsx
@@ -0,0 +1,211 @@
+import { renderWithProviders } from "@/tests/render";
+import { screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import ViewLogsSidePanel from "./ViewLogsSidePanel";
+import userEvent from "@testing-library/user-event";
+import { expectLoadingState } from "@/tests/helpers";
+import Suspense from "@/components/layout/SidePanel/Suspense";
+import LoadingState from "@/components/layout/SidePanel/LoadingState";
+import { mirrors } from "@/tests/mocks/mirrors";
+import type { Mirror } from "@canonical/landscape-openapi";
+import { publications } from "@/tests/mocks/publications";
+
+const COPIED_FEEDBACK_TIMEOUT = 2010;
+const typedMirrors = mirrors as Mirror[];
+
+const failedMirror = typedMirrors.find(
+  (mirror) => mirror.lastOperation === "operations/mirror-ffff-llll-dddd",
+);
+assert(failedMirror, "Missing mock mirror with a failed operation");
+
+describe("ViewLogsSidePanel", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders loading state when fetching", () => {
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("renders operation logs when available", async () => {
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      await screen.findByRole("heading", {
+        name: `Update logs for ${failedMirror.displayName}`,
+      }),
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole("heading", { name: "Output" })).toBeInTheDocument();
+    expect(screen.getByText(/0% \[Working\]/)).toBeInTheDocument();
+  });
+
+  it("displays actions when logs are available", async () => {
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      await screen.findByRole("button", { name: /copy/i }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("button", { name: /download/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("downloads the logs file when download button is clicked", async () => {
+    const user = userEvent.setup();
+
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, "click")
+      .mockImplementation(() => undefined);
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    await expectLoadingState();
+
+    const createElementSpy = vi.spyOn(document, "createElement");
+
+    await user.click(await screen.findByRole("button", { name: /download/i }));
+
+    const anchor = createElementSpy.mock.results.find(
+      (result) => result.value instanceof HTMLAnchorElement,
+    )?.value as HTMLAnchorElement;
+
+    expect(anchor).toBeDefined();
+    expect(anchor.download).toBe(
+      "Third-party-mirror_mirror-ffff-llll-dddd.log",
+    );
+    expect(anchorClick).toHaveBeenCalledOnce();
+  });
+
+  it("updates button content when copy button is clicked", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    await expectLoadingState();
+
+    const copyButton = await screen.findByRole("button", { name: /copy/i });
+    await user.click(copyButton);
+    expect(screen.getByRole("button", { name: /copied/i })).toBeInTheDocument();
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByRole("button", { name: /copy/i }),
+        ).toBeInTheDocument();
+      },
+      { timeout: COPIED_FEEDBACK_TIMEOUT },
+    );
+  });
+
+  it("doesn't change copy button when clipboard write fails", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(navigator.clipboard, "writeText").mockRejectedValueOnce(
+      new Error("Clipboard denied"),
+    );
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${failedMirror.name}`,
+    );
+
+    await expectLoadingState();
+
+    const copyButton = await screen.findByRole("button", { name: /copy/i });
+    await user.click(copyButton);
+    expect(screen.getByRole("button", { name: /copy/i })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /copied/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows empty state when operation has no error details", async () => {
+    const noLogsPublication = publications.find(
+      (pub) => pub.lastOperation === "operations/ssss-cccc-dddd",
+    );
+    assert(
+      noLogsPublication,
+      "Missing mock publication with a successful operation",
+    );
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="publications" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${noLogsPublication.publicationId}`,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      await screen.findByRole("heading", {
+        name: `Publication logs for ${noLogsPublication.displayName}`,
+      }),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText("Logs not found")).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole("button", { name: /copy/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /download/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("handles mirrors with no lastOperation gracefully", async () => {
+    const unsyncedMirror = typedMirrors.find((mirror) => !mirror.lastOperation);
+    assert(unsyncedMirror, "Missing mock mirror with no lastOperation");
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <ViewLogsSidePanel resourceType="mirrors" />
+      </Suspense>,
+      undefined,
+      `?sidePath=logs&name=${unsyncedMirror.name}`,
+    );
+
+    expect(await screen.findByText("Logs not found")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.tsx b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.tsx
new file mode 100644
index 0000000000..bb5cac6104
--- /dev/null
+++ b/src/features/operations/components/ViewLogsSidePanel/ViewLogsSidePanel.tsx
@@ -0,0 +1,135 @@
+import SidePanel from "@/components/layout/SidePanel";
+import usePageParams from "@/hooks/usePageParams";
+import { Button, CodeSnippet, Icon } from "@canonical/react-components";
+import { useEffect, useRef, useState, type FC } from "react";
+import { useGetOperation, useGetOperationResource } from "../../api";
+import classes from "./ViewLogsSidePanel.module.scss";
+import EmptyState from "@/components/layout/EmptyState";
+
+const COPIED_FEEDBACK_TIMEOUT = 2000;
+
+interface ViewLogsSidePanelProps {
+  readonly resourceType: "mirrors" | "publications" | "locals";
+}
+
+const ViewLogsSidePanel: FC<ViewLogsSidePanelProps> = ({ resourceType }) => {
+  const { name } = usePageParams();
+  const resourceIdentifier =
+    resourceType === "mirrors" ? name : `${resourceType}/${name}`;
+  const resource = useGetOperationResource(resourceIdentifier);
+  const { operation, isGettingOperation } = useGetOperation(
+    resource.lastOperation ?? "",
+    { enabled: !!resource.lastOperation },
+  );
+
+  const { error: { details } = {}, metadata: { operationId } = {} } =
+    operation ?? {};
+
+  const logs = details?.join("\n") ?? "";
+
+  const getOperationType = () => {
+    switch (resourceType) {
+      case "publications":
+        return "Publication";
+      case "mirrors":
+        return "Update";
+      case "locals":
+        return "Import";
+    }
+  };
+  const operationType = getOperationType();
+
+  const [copied, setCopied] = useState(false);
+  const copiedTimeoutRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(copiedTimeoutRef.current);
+    };
+  }, []);
+
+  const fileName = resource.displayName.replaceAll(" ", "-");
+
+  const handleDownload = () => {
+    const blob = new Blob([logs], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${fileName}_${operationId}.log`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(logs);
+      setCopied(true);
+      window.clearTimeout(copiedTimeoutRef.current);
+      copiedTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, COPIED_FEEDBACK_TIMEOUT);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  if (resource.lastOperation && isGettingOperation) {
+    return <SidePanel.LoadingState />;
+  }
+
+  return (
+    <>
+      <SidePanel.Header>
+        {operationType} logs for {resource.displayName}
+      </SidePanel.Header>
+      <SidePanel.Content>
+        {!logs ? (
+          <EmptyState
+            icon="file"
+            title="Logs not found"
+            body="It seems that the logs you're looking for don't exist."
+          />
+        ) : (
+          <>
+            <div className={classes.actionRow}>
+              <Button
+                appearance="base"
+                className="u-no-margin"
+                hasIcon
+                onClick={handleCopy}
+                type="button"
+              >
+                <Icon name={copied ? "success" : "copy"} />
+                <span>{copied ? "Copied" : "Copy"}</span>
+              </Button>
+              <Button
+                appearance="base"
+                className="u-no-margin--bottom"
+                hasIcon
+                onClick={handleDownload}
+                type="button"
+              >
+                <Icon name="begin-downloading" />
+                <span>Download</span>
+              </Button>
+            </div>
+            <CodeSnippet
+              blocks={[
+                {
+                  title: "Output",
+                  code: logs,
+                  wrapLines: true,
+                },
+              ]}
+              className={classes.code}
+            />
+          </>
+        )}
+      </SidePanel.Content>
+    </>
+  );
+};
+
+export default ViewLogsSidePanel;
diff --git a/src/features/operations/components/ViewLogsSidePanel/index.ts b/src/features/operations/components/ViewLogsSidePanel/index.ts
new file mode 100644
index 0000000000..44879d5177
--- /dev/null
+++ b/src/features/operations/components/ViewLogsSidePanel/index.ts
@@ -0,0 +1 @@
+export { default } from "./ViewLogsSidePanel";
diff --git a/src/features/operations/helpers.ts b/src/features/operations/helpers.ts
new file mode 100644
index 0000000000..6903b60d9d
--- /dev/null
+++ b/src/features/operations/helpers.ts
@@ -0,0 +1,20 @@
+import type { Operation } from "@/features/operations";
+import { ICONS } from "@canonical/react-components";
+
+export const getOperationStatusIcon = (operation: Operation | undefined) => {
+  const { status } = operation?.metadata ?? {};
+
+  if (!status) {
+    return null;
+  }
+
+  if (status === "succeeded") {
+    return "success-grey";
+  }
+
+  if (status === "failed") {
+    return ICONS.error;
+  }
+
+  return `${ICONS.spinner} u-animation--spin`;
+};
diff --git a/src/features/operations/index.ts b/src/features/operations/index.ts
index 5366659a62..10fa1a6301 100644
--- a/src/features/operations/index.ts
+++ b/src/features/operations/index.ts
@@ -1,8 +1,16 @@
 export * from "./api";
 
+export { default as OperationStatusCell } from "./components/OperationStatusCell";
+export { default as ViewLogsSidePanel } from "./components/ViewLogsSidePanel";
+export { default as ViewLogsButton } from "./components/ViewLogsButton";
+
+export { getOperationStatusIcon } from "./helpers";
+
 export type {
-  OperationMetadata,
   OperationStatus,
-  PackagesValidationState,
-  PackagesValidationOperation,
+  OperationError,
+  Operation,
+  SuccessfulOperation,
+  UnfinishedOperation,
+  FailedOperation,
 } from "./types";
diff --git a/src/features/operations/types/Operation.ts b/src/features/operations/types/Operation.ts
index f62c5c9d3c..6d0191ebec 100644
--- a/src/features/operations/types/Operation.ts
+++ b/src/features/operations/types/Operation.ts
@@ -1,7 +1,51 @@
 export type OperationStatus = "idle" | "in progress" | "succeeded" | "failed";
 
-export interface OperationMetadata {
+interface OperationMetadata {
+  "@type": string;
   description: string;
-  operation_id: string;
+  operationId: string;
   status: OperationStatus;
+  progressPercent: number;
+  resource: string;
 }
+
+interface OperationResponse {
+  "@type": string;
+  output?: string;
+}
+
+export interface OperationError {
+  code: number;
+  message: string;
+  details?: string[];
+}
+
+interface BaseOperation {
+  name: string;
+  metadata: OperationMetadata;
+  done: boolean;
+  response?: OperationResponse;
+  error?: OperationError;
+}
+
+export interface UnfinishedOperation extends BaseOperation {
+  done: false;
+  error?: never;
+}
+
+export interface SuccessfulOperation extends BaseOperation {
+  done: true;
+  response: OperationResponse;
+  error?: never;
+}
+
+export interface FailedOperation extends BaseOperation {
+  done: true;
+  response?: never;
+  error: OperationError;
+}
+
+export type Operation =
+  | UnfinishedOperation
+  | SuccessfulOperation
+  | FailedOperation;
diff --git a/src/features/operations/types/PackagesValidationOperation.ts b/src/features/operations/types/PackagesValidationOperation.ts
deleted file mode 100644
index d83689dc87..0000000000
--- a/src/features/operations/types/PackagesValidationOperation.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Status } from "@canonical/landscape-openapi";
-import type { OperationStatus } from "./Operation";
-
-export interface PackagesValidationState {
-  done: boolean;
-  status: OperationStatus;
-  response: string[];
-  count: number;
-  error?: {
-    code?: number;
-    message?: string;
-  };
-}
-
-export interface PackagesValidationOperation {
-  name: string;
-  done: boolean;
-  metadata: {
-    status: OperationStatus;
-    "@type": string;
-    description: string;
-    operationId: string;
-  };
-  response?: {
-    "@type": string;
-    output?: string;
-  };
-  error?: Status;
-}
diff --git a/src/features/operations/types/index.ts b/src/features/operations/types/index.ts
index 87429cde76..e2709a723b 100644
--- a/src/features/operations/types/index.ts
+++ b/src/features/operations/types/index.ts
@@ -1,5 +1,8 @@
-export type { OperationMetadata, OperationStatus } from "./Operation";
 export type {
-  PackagesValidationState,
-  PackagesValidationOperation,
-} from "./PackagesValidationOperation";
+  OperationStatus,
+  OperationError,
+  Operation,
+  SuccessfulOperation,
+  UnfinishedOperation,
+  FailedOperation,
+} from "./Operation";
diff --git a/src/features/publications/components/PublicationDetails/PublicationDetails.module.scss b/src/features/publications/components/PublicationDetails/PublicationDetails.module.scss
new file mode 100644
index 0000000000..da4da2db60
--- /dev/null
+++ b/src/features/publications/components/PublicationDetails/PublicationDetails.module.scss
@@ -0,0 +1,5 @@
+@import "vanilla-framework/scss/settings_spacing";
+
+.icon {
+  margin-right: $sph--small;
+}
diff --git a/src/features/publications/components/PublicationDetails/PublicationDetails.test.tsx b/src/features/publications/components/PublicationDetails/PublicationDetails.test.tsx
index 6e517e4d45..7c7be3f3e2 100644
--- a/src/features/publications/components/PublicationDetails/PublicationDetails.test.tsx
+++ b/src/features/publications/components/PublicationDetails/PublicationDetails.test.tsx
@@ -10,6 +10,9 @@ import { getSourceType } from "../..";
 import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
 import moment from "moment";
 import { AUTOMATIC_LABELS } from "../../constants";
+import { expectLoadingState } from "@/tests/helpers";
+import { NO_DATA_TEXT } from "@/components/layout/NoData";
+import { resetLroProgress } from "@/tests/server/handlers/operations";
 
 describe("PublicationDetails", () => {
   const user = userEvent.setup();
@@ -22,7 +25,7 @@ describe("PublicationDetails", () => {
     publicationTargets.find((t) => t.name === publication.publicationTarget)
       ?.displayName ?? publication.publicationTarget;
 
-  it("renders all info sections and values", () => {
+  it("renders all info sections and values", async () => {
     const { container } = renderWithProviders(
       <PublicationDetails
         publication={publication}
@@ -31,13 +34,16 @@ describe("PublicationDetails", () => {
       />,
     );
 
+    await expectLoadingState();
+
     const infoItems = [
       { label: "Name", value: publication.displayName },
       { label: "Source type", value: getSourceType(publication.source) },
       { label: "Source", value: sourceDisplayName },
       { label: "Publication target", value: publicationTargetDisplayName },
+      { label: "Status", value: "Published" },
       {
-        label: "Date published",
+        label: "Last published",
         value: moment(publication.publishTime).format(DISPLAY_DATE_TIME_FORMAT),
       },
       { label: "Distribution", value: publication.distribution },
@@ -59,6 +65,81 @@ describe("PublicationDetails", () => {
     }
   });
 
+  it("renders unpublished values", async () => {
+    const { container } = renderWithProviders(
+      <PublicationDetails
+        publication={{
+          ...publication,
+          lastOperation: undefined,
+          publishTime: undefined,
+        }}
+        sourceDisplayName={sourceDisplayName}
+        publicationTargetDisplayName={publicationTargetDisplayName}
+      />,
+    );
+
+    const infoItems = [
+      { label: "Status", value: "Not yet published" },
+      {
+        label: "Last published",
+        value: NO_DATA_TEXT,
+      },
+    ];
+
+    for (const { label, value } of infoItems) {
+      expect(container).toHaveInfoItem(label, value);
+    }
+
+    expect(
+      screen.queryByRole("heading", { name: "Publishing failed" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders failed publication notification", async () => {
+    renderWithProviders(
+      <PublicationDetails
+        publication={manualPublication}
+        sourceDisplayName={sourceDisplayName}
+        publicationTargetDisplayName={publicationTargetDisplayName}
+      />,
+    );
+
+    expect(
+      await screen.findByRole("heading", { name: "Publishing failed" }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText("Your last publication was not completed successfully."),
+    ).toBeInTheDocument();
+
+    expect(screen.getAllByRole("button", { name: "View logs" })).toHaveLength(
+      2,
+    );
+  });
+
+  it("renders disabled button while publishing", async () => {
+    resetLroProgress();
+
+    renderWithProviders(
+      <PublicationDetails
+        publication={publicationWithKey}
+        sourceDisplayName={sourceDisplayName}
+        publicationTargetDisplayName={publicationTargetDisplayName}
+      />,
+    );
+
+    await expectLoadingState();
+
+    expect(
+      screen.queryByRole("button", { name: "Republish" }),
+    ).not.toBeInTheDocument();
+
+    expect(screen.getByRole("button", { name: "Publishing" })).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
   it("renders GPG key fingerprint when it exists", async () => {
     const { container } = renderWithProviders(
       <PublicationDetails
@@ -68,6 +149,8 @@ describe("PublicationDetails", () => {
       />,
     );
 
+    await expectLoadingState();
+
     expect(container).toHaveInfoItem(
       "Signing GPG Key",
       publicationWithKey.gpgKey?.fingerprint,
@@ -83,6 +166,8 @@ describe("PublicationDetails", () => {
       />,
     );
 
+    await expectLoadingState();
+
     expect(container).toHaveInfoItem(
       "Installs and upgrades",
       AUTOMATIC_LABELS.autoUpgrades,
@@ -98,6 +183,8 @@ describe("PublicationDetails", () => {
       />,
     );
 
+    await expectLoadingState();
+
     expect(container).toHaveInfoItem(
       "Installs and upgrades",
       AUTOMATIC_LABELS.manual,
@@ -114,11 +201,9 @@ describe("PublicationDetails", () => {
     );
     const publicationDisplayName = publication.displayName;
 
-    await user.click(
-      screen.getByRole("button", {
-        name: `Republish ${publicationDisplayName}`,
-      }),
-    );
+    await expectLoadingState();
+
+    await user.click(screen.getByRole("button", { name: "Republish" }));
 
     expect(
       screen.getByRole("heading", {
@@ -137,9 +222,9 @@ describe("PublicationDetails", () => {
     );
     const publicationDisplayName = publication.displayName;
 
-    await user.click(
-      screen.getByRole("button", { name: `Remove ${publicationDisplayName}` }),
-    );
+    await expectLoadingState();
+
+    await user.click(screen.getByRole("button", { name: "Remove" }));
 
     expect(
       screen.getByRole("heading", { name: `Remove ${publicationDisplayName}` }),
diff --git a/src/features/publications/components/PublicationDetails/PublicationDetails.tsx b/src/features/publications/components/PublicationDetails/PublicationDetails.tsx
index 1fa406e25c..fe2e011a10 100644
--- a/src/features/publications/components/PublicationDetails/PublicationDetails.tsx
+++ b/src/features/publications/components/PublicationDetails/PublicationDetails.tsx
@@ -2,19 +2,36 @@ import Blocks from "@/components/layout/Blocks";
 import InfoGrid from "@/components/layout/InfoGrid";
 import { boolToLabel } from "@/utils/output";
 import type { Publication } from "@canonical/landscape-openapi";
-import { Button, Icon, ICONS } from "@canonical/react-components";
+import {
+  Button,
+  Icon,
+  ICONS,
+  Notification,
+  Tooltip,
+} from "@canonical/react-components";
 import { useBoolean } from "usehooks-ts";
 import RemovePublicationModal from "../RemovePublicationModal";
 import RepublishPublicationModal from "../RepublishPublicationModal";
 import { getInstallsAndUpgradesText, getSourceType } from "../../helpers";
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import {
+  DISPLAY_DATE_TIME_FORMAT,
+  DEFAULT_POLLING_INTERVAL,
+} from "@/constants";
 import moment from "moment";
 import { NO_DATA_TEXT } from "@/components/layout/NoData/constants";
+import {
+  getOperationStatusIcon,
+  OperationStatusCell,
+  useGetOperation,
+  ViewLogsButton,
+} from "@/features/operations";
+import LoadingState from "@/components/layout/LoadingState";
+import classes from "./PublicationDetails.module.scss";
 
 interface PublicationDetailsProps {
   readonly publication: Publication;
-  readonly sourceDisplayName?: string;
-  readonly publicationTargetDisplayName?: string;
+  readonly sourceDisplayName: string;
+  readonly publicationTargetDisplayName: string;
 }
 
 const PublicationDetails = ({
@@ -34,32 +51,70 @@ const PublicationDetails = ({
     setFalse: closeRepublishModal,
   } = useBoolean();
 
+  const { operation, isGettingOperation } = useGetOperation(
+    publication.lastOperation ?? "",
+    {
+      enabled: !!publication.lastOperation,
+      refetchInterval: ({ state }) =>
+        state.data?.data?.done ? false : DEFAULT_POLLING_INTERVAL,
+    },
+  );
+
+  if (publication.lastOperation && isGettingOperation) {
+    return <LoadingState />;
+  }
+
+  const iconName = getOperationStatusIcon(operation);
+
   return (
     <>
-      <div
-        className="p-segmented-control"
-        style={{
-          marginBottom: "1.5rem",
-        }}
-      >
-        <div className="p-segmented-control__list">
-          <Button
-            type="button"
-            className="p-segmented-control__button"
-            onClick={openRepublishModal}
-            hasIcon
-            aria-label={`Republish ${publication.displayName}`}
+      <div className="p-segmented-control u-sv2">
+        {!!operation?.error && (
+          <Notification
+            severity="negative"
+            title="Publishing failed"
+            actions={[
+              <ViewLogsButton
+                resource={publication.publicationId}
+                key="view-logs"
+              />,
+            ]}
           >
-            <Icon name="upload" />
-            <span>Republish</span>
-          </Button>
-
+            Your last publication was not completed successfully.
+          </Notification>
+        )}
+        <div className="p-segmented-control__list">
+          {operation && !operation.done ? (
+            <Tooltip
+              message="You must wait for this action to be completed to republish it."
+              position="btm-center"
+            >
+              <Button
+                type="button"
+                hasIcon
+                className="p-segmented-control__button"
+                disabled
+              >
+                <Icon name="spinner" className="u-animation--spin" />
+                <span>Publishing</span>
+              </Button>
+            </Tooltip>
+          ) : (
+            <Button
+              type="button"
+              className="p-segmented-control__button"
+              onClick={openRepublishModal}
+              hasIcon
+            >
+              <Icon name="upload" />
+              <span>Republish</span>
+            </Button>
+          )}
           <Button
             type="button"
             className="p-segmented-control__button"
             onClick={openRemoveModal}
             hasIcon
-            aria-label={`Remove ${publication.displayName}`}
           >
             <Icon name={`${ICONS.delete}--negative`} />
             <span className="u-text--negative">Remove</span>
@@ -70,22 +125,34 @@ const PublicationDetails = ({
       <Blocks>
         <Blocks.Item title="Details">
           <InfoGrid dense>
-            <InfoGrid.Item label="Name" large value={publication.displayName} />
+            <InfoGrid.Item label="Name" value={publication.displayName} />
+            <InfoGrid.Item
+              label="Publication target"
+              value={publicationTargetDisplayName}
+            />
 
             <InfoGrid.Item
               label="Source type"
               value={getSourceType(publication.source)}
             />
-
             <InfoGrid.Item label="Source" value={sourceDisplayName} />
 
             <InfoGrid.Item
-              label="Publication target"
-              value={publicationTargetDisplayName}
+              label="Status"
+              value={
+                <>
+                  {!!iconName && (
+                    <Icon name={iconName} className={classes.icon} />
+                  )}
+                  <OperationStatusCell
+                    operation={operation}
+                    type="publication"
+                  />
+                </>
+              }
             />
-
             <InfoGrid.Item
-              label="Date published"
+              label="Last published"
               value={
                 publication.publishTime
                   ? moment(publication.publishTime).format(
diff --git a/src/features/publications/components/PublicationsList/PublicationsList.module.scss b/src/features/publications/components/PublicationsList/PublicationsList.module.scss
new file mode 100644
index 0000000000..54a72aa002
--- /dev/null
+++ b/src/features/publications/components/PublicationsList/PublicationsList.module.scss
@@ -0,0 +1,3 @@
+.status {
+  width: 15rem;
+}
diff --git a/src/features/publications/components/PublicationsList/PublicationsList.test.tsx b/src/features/publications/components/PublicationsList/PublicationsList.test.tsx
index 9d97f434db..feb0f8ff6a 100644
--- a/src/features/publications/components/PublicationsList/PublicationsList.test.tsx
+++ b/src/features/publications/components/PublicationsList/PublicationsList.test.tsx
@@ -5,6 +5,8 @@ import { screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import PublicationsList from "./PublicationsList";
 import { mirrors } from "@/tests/mocks/mirrors";
+import { NO_DATA_TEXT } from "@/components/layout/NoData";
+import { resetLroProgress } from "@/tests/server/handlers/operations";
 
 const buildDisplayNameMaps = (pubs: typeof publications) => {
   const sourceDisplayNames: Record<string, string> = {};
@@ -29,7 +31,9 @@ describe("PublicationsList", () => {
   const { sourceDisplayNames, publicationTargetDisplayNames } =
     buildDisplayNameMaps(publications);
 
-  it("renders list columns and row data", () => {
+  it("renders list columns and row data", async () => {
+    resetLroProgress();
+
     renderWithProviders(
       <PublicationsList
         publications={publications}
@@ -39,6 +43,10 @@ describe("PublicationsList", () => {
     );
 
     expect(screen.getByRole("columnheader", { name: "name" })).toBeVisible();
+    expect(screen.getByRole("columnheader", { name: "status" })).toBeVisible();
+    expect(
+      screen.getByRole("columnheader", { name: "last published" }),
+    ).toBeVisible();
     expect(
       screen.getByRole("columnheader", { name: "source type" }),
     ).toBeVisible();
@@ -53,6 +61,12 @@ describe("PublicationsList", () => {
       }),
     ).toBeInTheDocument();
 
+    expect(await screen.findByText("Publishing")).toBeInTheDocument();
+    expect(screen.getByText("Published")).toBeInTheDocument();
+    expect(screen.getByText("Publishing failed")).toBeInTheDocument();
+
+    expect(screen.getByText("Mar 12, 2026, 00:00")).toBeInTheDocument();
+
     const mirrorsCount = publications.filter((pub) =>
       pub.source.startsWith("mirrors/"),
     ).length;
@@ -74,6 +88,25 @@ describe("PublicationsList", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders status cell for no operation as fallback", async () => {
+    renderWithProviders(
+      <PublicationsList
+        publications={[
+          {
+            ...publication,
+            lastOperation: undefined,
+            publishTime: undefined,
+          },
+        ]}
+        sourceDisplayNames={sourceDisplayNames}
+        publicationTargetDisplayNames={publicationTargetDisplayNames}
+      />,
+    );
+
+    expect(screen.getByText("Not yet published")).toBeInTheDocument();
+    expect(screen.getByText(NO_DATA_TEXT)).toBeInTheDocument();
+  });
+
   it("shows empty message with search query", () => {
     renderWithProviders(
       <PublicationsList publications={[]} />,
diff --git a/src/features/publications/components/PublicationsList/PublicationsList.tsx b/src/features/publications/components/PublicationsList/PublicationsList.tsx
index 2f59b7209d..4557e1018d 100644
--- a/src/features/publications/components/PublicationsList/PublicationsList.tsx
+++ b/src/features/publications/components/PublicationsList/PublicationsList.tsx
@@ -13,10 +13,19 @@ import {
   getSourceType,
 } from "../../helpers";
 import type { Publication } from "@canonical/landscape-openapi";
-import { DISPLAY_DATE_TIME_FORMAT } from "@/constants";
+import {
+  DEFAULT_POLLING_INTERVAL,
+  DISPLAY_DATE_TIME_FORMAT,
+} from "@/constants";
 import moment from "moment";
 import { ROUTES } from "@/libs/routes";
 import { NO_DATA_TEXT } from "@/components/layout/NoData";
+import {
+  getOperationStatusIcon,
+  OperationStatusCell,
+  useBatchGetOperations,
+} from "@/features/operations";
+import classes from "./PublicationsList.module.scss";
 
 interface PublicationsListProps {
   readonly publications: Publication[];
@@ -30,6 +39,21 @@ const PublicationsList: FC<PublicationsListProps> = ({
   publicationTargetDisplayNames = {},
 }) => {
   const { query, createPageParamsSetter } = usePageParams();
+
+  const operationNames = publications
+    .filter((publication) => publication.lastOperation)
+    .map((publication) => publication.lastOperation ?? "");
+
+  const { operations, isGettingOperations } = useBatchGetOperations(
+    operationNames,
+    {
+      refetchInterval: ({ state }) =>
+        Object.values(state.data ?? {}).some((operation) => !operation.done)
+          ? DEFAULT_POLLING_INTERVAL
+          : false,
+    },
+  );
+
   const columns = useMemo<Column<Publication>[]>(
     () => [
       {
@@ -49,6 +73,35 @@ const PublicationsList: FC<PublicationsListProps> = ({
           </Button>
         ),
       },
+      {
+        Header: "status",
+        className: classes.status,
+        Cell: ({ row: { original: publication } }: CellProps<Publication>) => {
+          const operation = operations[publication.lastOperation ?? ""];
+          return (
+            <OperationStatusCell
+              isGettingOperation={isGettingOperations}
+              operation={operation}
+              type="publication"
+            />
+          );
+        },
+        getCellIcon: ({
+          row: { original: publication },
+        }: CellProps<Publication>) => {
+          const operation = operations[publication.lastOperation ?? ""];
+          return getOperationStatusIcon(operation);
+        },
+      },
+      {
+        accessor: "publishTime",
+        Header: "last published",
+        className: "medium-cell",
+        Cell: ({ row: { original } }: CellProps<Publication>) =>
+          original.publishTime
+            ? moment(original.publishTime).format(DISPLAY_DATE_TIME_FORMAT)
+            : NO_DATA_TEXT,
+      },
       {
         id: "sourceType",
         accessor: "source",
@@ -97,14 +150,6 @@ const PublicationsList: FC<PublicationsListProps> = ({
           </StaticLink>
         ),
       },
-      {
-        accessor: "publishTime",
-        Header: "Date published",
-        Cell: ({ row: { original } }: CellProps<Publication>) =>
-          original.publishTime
-            ? moment(original.publishTime).format(DISPLAY_DATE_TIME_FORMAT)
-            : NO_DATA_TEXT,
-      },
       {
         ...LIST_ACTIONS_COLUMN_PROPS,
         Cell: ({ row: { original } }: CellProps<Publication>) => (
@@ -112,7 +157,13 @@ const PublicationsList: FC<PublicationsListProps> = ({
         ),
       },
     ],
-    [createPageParamsSetter, sourceDisplayNames, publicationTargetDisplayNames],
+    [
+      createPageParamsSetter,
+      operations,
+      isGettingOperations,
+      sourceDisplayNames,
+      publicationTargetDisplayNames,
+    ],
   );
 
   return (
@@ -120,6 +171,7 @@ const PublicationsList: FC<PublicationsListProps> = ({
       columns={columns}
       data={publications}
       emptyMsg={`No publications found with the search: "${query}"`}
+      minWidth={1250}
     />
   );
 };
diff --git a/src/pages/dashboard/repositories/mirrors/MirrorsPage.test.tsx b/src/pages/dashboard/repositories/mirrors/MirrorsPage.test.tsx
index f6ab3eb843..f9d668e0fd 100644
--- a/src/pages/dashboard/repositories/mirrors/MirrorsPage.test.tsx
+++ b/src/pages/dashboard/repositories/mirrors/MirrorsPage.test.tsx
@@ -31,11 +31,7 @@ describe("MirrorsPage", () => {
     expect(
       await screen.findByRole("heading", { name: "Mirrors" }),
     ).toBeInTheDocument();
-
-    expect(
-      await screen.findByText("Ubuntu archive mirror"),
-    ).toBeInTheDocument();
-
+    expect(screen.getByText("Ubuntu archive mirror")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Add mirror" })).toBeEnabled();
   });
 
@@ -152,4 +148,29 @@ describe("MirrorsPage", () => {
       }),
     ).toBeInTheDocument();
   });
+
+  it("renders the logs side panel when sidePath=logs is in the URL", async () => {
+    setScreenSize("xxl");
+
+    renderWithProviders(
+      <Suspense fallback={<LoadingState />}>
+        <MirrorsPage />
+      </Suspense>,
+      undefined,
+      "/?sidePath=logs&name=mirrors/third-party-mirror",
+    );
+
+    await expectLoadingState();
+
+    expect(
+      await screen.findByRole("heading", {
+        name: /Update logs for Third party mirror/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      await within(screen.getByLabelText("Side panel")).findByRole("button", {
+        name: /copy/i,
+      }),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx b/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
index 119e390757..33230b9214 100644
--- a/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
+++ b/src/pages/dashboard/repositories/mirrors/MirrorsPage.tsx
@@ -28,6 +28,10 @@ const PublishMirrorForm = lazy(
   async () => import("@/features/mirrors/components/PublishMirrorForm"),
 );
 
+const ViewLogsSidePanel = lazy(
+  async () => import("@/features/operations/components/ViewLogsSidePanel"),
+);
+
 const MirrorsPage: FC = () => {
   const {
     search,
@@ -37,7 +41,13 @@ const MirrorsPage: FC = () => {
     createPageParamsSetter,
   } = usePageParams();
 
-  useSetDynamicFilterValidation("sidePath", ["add", "edit", "publish", "view"]);
+  useSetDynamicFilterValidation("sidePath", [
+    "add",
+    "edit",
+    "publish",
+    "view",
+    "logs",
+  ]);
 
   const { data } = useListMirrors({
     filter: search ? `display_name=${JSON.stringify(`${search}*`)}` : undefined,
@@ -112,6 +122,11 @@ const MirrorsPage: FC = () => {
             <MirrorDetails />
           </SidePanel.Suspense>
         )}
+        {lastSidePathSegment === "logs" && (
+          <SidePanel.Suspense key="logs">
+            <ViewLogsSidePanel resourceType="mirrors" />
+          </SidePanel.Suspense>
+        )}
       </SidePanel>
     </PageMain>
   );
diff --git a/src/pages/dashboard/repositories/publications/PublicationsPage.test.tsx b/src/pages/dashboard/repositories/publications/PublicationsPage.test.tsx
index 837bd72100..9a28af5f2f 100644
--- a/src/pages/dashboard/repositories/publications/PublicationsPage.test.tsx
+++ b/src/pages/dashboard/repositories/publications/PublicationsPage.test.tsx
@@ -44,10 +44,35 @@ describe("PublicationsPage", () => {
       "/?sidePath=view&name=7b1d5c2f-0c4e-4d8e-8f2f-99d4f2d9a123",
     );
 
+    const sidePanel = await screen.findByLabelText("Side panel");
+
     expect(
-      await within(screen.getByLabelText("Side panel")).findByRole("button", {
-        name: /republish/i,
+      await within(sidePanel).findByRole(
+        "button",
+        { name: /republish/i },
+        { timeout: 2000 },
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the logs side panel when sidePath=logs is in the URL", async () => {
+    setScreenSize("xxl");
+
+    renderWithProviders(
+      <PublicationsPage />,
+      undefined,
+      "/?sidePath=logs&name=g8h8888e-c8f8-8e88-ab8c-ef8a8c8af8c8",
+    );
+
+    const sidePanel = await screen.findByLabelText("Side panel");
+
+    expect(
+      await within(sidePanel).findByRole("heading", {
+        name: /Publication logs for local publication/i,
       }),
     ).toBeInTheDocument();
+    expect(
+      within(sidePanel).getByRole("button", { name: /copy/i }),
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/pages/dashboard/repositories/publications/PublicationsPage.tsx b/src/pages/dashboard/repositories/publications/PublicationsPage.tsx
index ff0cdfef24..20f6281ffe 100644
--- a/src/pages/dashboard/repositories/publications/PublicationsPage.tsx
+++ b/src/pages/dashboard/repositories/publications/PublicationsPage.tsx
@@ -14,16 +14,25 @@ const PublicationDetailsSidePanel = lazy(
     import("@/features/publications/components/PublicationDetailsSidePanel"),
 );
 
+const ViewLogsSidePanel = lazy(
+  async () => import("@/features/operations/components/ViewLogsSidePanel"),
+);
+
 const PublicationsPage: FC = () => {
   const { sidePath, lastSidePathSegment, popSidePathUntilClear } =
     usePageParams();
 
-  useSetDynamicFilterValidation("sidePath", ["add", "add-target", "view"]);
+  useSetDynamicFilterValidation("sidePath", ["add", "view", "logs"]);
+
   return (
     <PageMain>
       <PublicationsContainer />
 
-      <SidePanel isOpen={!!sidePath.length} onClose={popSidePathUntilClear}>
+      <SidePanel
+        isOpen={!!sidePath.length}
+        onClose={popSidePathUntilClear}
+        size={lastSidePathSegment === "logs" ? "medium" : "small"}
+      >
         {lastSidePathSegment === "add" && (
           <SidePanel.Suspense key="add">
             <SidePanel.Header>Add publication</SidePanel.Header>
@@ -37,6 +46,11 @@ const PublicationsPage: FC = () => {
             <PublicationDetailsSidePanel />
           </SidePanel.Suspense>
         )}
+        {lastSidePathSegment === "logs" && (
+          <SidePanel.Suspense key="logs">
+            <ViewLogsSidePanel resourceType="publications" />
+          </SidePanel.Suspense>
+        )}
       </SidePanel>
     </PageMain>
   );
diff --git a/src/tests/helpers.ts b/src/tests/helpers.ts
index 53513530d3..3105b7de83 100644
--- a/src/tests/helpers.ts
+++ b/src/tests/helpers.ts
@@ -5,9 +5,7 @@ import { BREAKPOINT_PX } from "@/constants";
 export const expectLoadingState = async (): Promise<void> => {
   const loadingSpinner = await screen.findByRole("status");
   expect(loadingSpinner).toHaveTextContent("Loading...");
-  await waitForElementToBeRemoved(loadingSpinner, {
-    timeout: 2000,
-  });
+  await waitForElementToBeRemoved(loadingSpinner);
 };
 
 export const expectErrorNotification = async (): Promise<void> => {
diff --git a/src/tests/mocks/mirrors.ts b/src/tests/mocks/mirrors.ts
index d1c3890ccd..25c1cf620f 100644
--- a/src/tests/mocks/mirrors.ts
+++ b/src/tests/mocks/mirrors.ts
@@ -15,6 +15,7 @@ export const mirrors = [
     downloadSources: false,
     downloadUdebs: true,
     lastDownloadDate: new Date("2024-06-01T12:00:00Z"),
+    lastOperation: "operations/ssss-cccc-dddd",
   },
   {
     name: "mirrors/ubuntu-security-mirror",
@@ -30,6 +31,7 @@ export const mirrors = [
     downloadSources: true,
     downloadUdebs: false,
     lastDownloadDate: new Date("2024-05-01T12:00:00Z"),
+    lastOperation: "operations/pppp-gggg-ssss",
   },
   {
     name: "mirrors/third-party-mirror",
@@ -44,11 +46,14 @@ export const mirrors = [
     downloadInstaller: false,
     downloadSources: false,
     downloadUdebs: false,
+    filter: "!package1 | !package2",
+    filterWithDeps: true,
     lastDownloadDate: new Date("2024-04-01T12:00:00Z"),
     gpgKey: {
       armor: "-----BEGIN PGP PUBLIC KEY BLOCK-----",
       fingerprint: "ABCDEF1234567890",
     },
+    lastOperation: "operations/mirror-ffff-llll-dddd",
   },
   {
     name: "mirrors/bionic-mirror",
diff --git a/src/tests/mocks/operations.ts b/src/tests/mocks/operations.ts
index bd3cda8412..19f8172d22 100644
--- a/src/tests/mocks/operations.ts
+++ b/src/tests/mocks/operations.ts
@@ -1,6 +1,11 @@
-import type { PackagesValidationOperation } from "@/features/operations";
+import type {
+  FailedOperation,
+  Operation,
+  SuccessfulOperation,
+  UnfinishedOperation,
+} from "@/features/operations";
 
-export const idleOperation: PackagesValidationOperation = {
+export const idleOperation: UnfinishedOperation = {
   name: "operations/iiii-dddd-llll",
   metadata: {
     "@type":
@@ -9,6 +14,8 @@ export const idleOperation: PackagesValidationOperation = {
       "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
     operationId: "iiii-dddd-llll",
     status: "idle",
+    progressPercent: 0,
+    resource: "locals/e755a4bd-8044-4529-8b5d-53f1c3887e9e",
   },
   done: false,
   response: {
@@ -17,7 +24,7 @@ export const idleOperation: PackagesValidationOperation = {
   },
 };
 
-export const succeededOperation: PackagesValidationOperation = {
+export const succeededOperation: SuccessfulOperation = {
   name: "operations/ssss-cccc-dddd",
   metadata: {
     "@type":
@@ -26,6 +33,8 @@ export const succeededOperation: PackagesValidationOperation = {
       "Validate import into local repo test-local-3 (9c0b813f-6436-42e6-bd26-22b868f474cb)",
     operationId: "ssss-cccc-dddd",
     status: "succeeded",
+    progressPercent: 100,
+    resource: "locals/9c0b813f-6436-42e6-bd26-22b868f474cb",
   },
   done: true,
   response: {
@@ -36,7 +45,7 @@ export const succeededOperation: PackagesValidationOperation = {
   },
 };
 
-export const failedOperation: PackagesValidationOperation = {
+export const failedOperation: FailedOperation = {
   name: "operations/ffff-llll-dddd",
   metadata: {
     "@type":
@@ -45,16 +54,43 @@ export const failedOperation: PackagesValidationOperation = {
       "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
     operationId: "ffff-llll-dddd",
     status: "failed",
+    progressPercent: 62,
+    resource: "locals/cccc-dddd-eeee",
   },
   done: true,
   error: {
     code: 13,
     message: "The operation failed unexpectedly.",
-    details: [],
+    details: [
+      "0% [Working]",
+      "0% [Connecting to 10.0.1.13]",
+      "0% [Waiting for headers]",
+      "Get:1 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl-dev amd64 1.0.1f-1ubuntu2.2 [1066 kB]",
+      "0% [1 libssl-dev 2465 B/1066 kB 0%]",
+      "1% [1 libssl-dev 21.9 kB/1066 kB 2%]",
+      "15% [1 libssl-dev 749 kB/1066 kB 70%]",
+      "21% [Working]",
+      "21% [Waiting for headers]",
+      "Get:2 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 i386 1.0.1f-1ubuntu2.2 [779 kB]",
+      "21% [2 libssl1.0.0:i386 1080 B/779 kB 0%]",
+      "36% [Working]",
+      "36% [Waiting for headers]",
+      "Get:3 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 amd64 1.0.1f-1ubuntu2.2 [826 kB]",
+      "36% [3 libssl1.0.0 1080 B/826 kB 0%]",
+      "39% [3 libssl1.0.0 129 kB/826 kB 15%]",
+      "52% [Working]",
+      "52% [Waiting for headers]",
+      "Get:4 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main openssl amd64 1.0.1f-1ubuntu2.2 [488 kB]",
+      "52% [4 openssl 2468 B/488 kB 0%]",
+      "62% [Working]",
+      "62% [Waiting for headers]",
+      "Get:5 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main unity amd64 7.2.1+14.04.20140513-0ubuntu2 [1452 kB]",
+      "62% [5 unity 1078 B/1452 kB 0%]",
+    ],
   },
 };
 
-export const timeoutOperation: PackagesValidationOperation = {
+export const timeoutOperation: FailedOperation = {
   name: "operations/tttt-mmmm-oooo",
   metadata: {
     "@type":
@@ -63,6 +99,8 @@ export const timeoutOperation: PackagesValidationOperation = {
       "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
     operationId: "tttt-mmmm-oooo",
     status: "failed",
+    progressPercent: 39,
+    resource: "locals/e755a4bd-8044-4529-8b5d-53f1c3887e9e",
   },
   done: true,
   error: {
@@ -73,7 +111,7 @@ export const timeoutOperation: PackagesValidationOperation = {
   },
 };
 
-export const inProgressOperation: PackagesValidationOperation = {
+export const inProgressOperation: UnfinishedOperation = {
   name: "operations/pppp-gggg-ssss",
   metadata: {
     "@type":
@@ -82,6 +120,8 @@ export const inProgressOperation: PackagesValidationOperation = {
       "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
     operationId: "pppp-gggg-ssss",
     status: "in progress",
+    progressPercent: 78,
+    resource: "locals/e755a4bd-8044-4529-8b5d-53f1c3887e9e",
   },
   done: false,
   response: {
@@ -90,7 +130,7 @@ export const inProgressOperation: PackagesValidationOperation = {
   },
 };
 
-export const emptyOperation: PackagesValidationOperation = {
+export const emptyOperation: SuccessfulOperation = {
   name: "operations/mmmm-pppp-tttt",
   metadata: {
     "@type":
@@ -99,6 +139,8 @@ export const emptyOperation: PackagesValidationOperation = {
       "Validate import into local repo test-local-3 (9c0b813f-6436-42e6-bd26-22b868f474cb)",
     operationId: "mmmm-pppp-tttt",
     status: "succeeded",
+    progressPercent: 100,
+    resource: "locals/9c0b813f-6436-42e6-bd26-22b868f474cb",
   },
   done: true,
   response: {
@@ -107,7 +149,7 @@ export const emptyOperation: PackagesValidationOperation = {
   },
 };
 
-export const overCountOperation: PackagesValidationOperation = {
+export const overCountOperation: SuccessfulOperation = {
   name: "operations/oooo-vvvv-cccc",
   metadata: {
     "@type":
@@ -116,6 +158,8 @@ export const overCountOperation: PackagesValidationOperation = {
       "Validate import into local repo test-local-3 (9c0b813f-6436-42e6-bd26-22b868f474cb)",
     operationId: "oooo-vvvv-cccc",
     status: "succeeded",
+    progressPercent: 100,
+    resource: "locals/9c0b813f-6436-42e6-bd26-22b868f474cb",
   },
   done: true,
   response: {
@@ -227,3 +271,105 @@ export const overCountOperation: PackagesValidationOperation = {
     ].join("\n"),
   },
 };
+
+export const failedMirrorOperation: FailedOperation = {
+  name: "operations/mirror-ffff-llll-dddd",
+  metadata: {
+    "@type":
+      "type.googleapis.com/canonical.landscape.debarchive.v1beta1.TaskMetadata",
+    description:
+      "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
+    operationId: "mirror-ffff-llll-dddd",
+    status: "failed",
+    progressPercent: 62,
+    resource: "mirrors/third-party-mirror",
+  },
+  done: true,
+  error: {
+    code: 13,
+    message: "The operation failed unexpectedly.",
+    details: [
+      "0% [Working]",
+      "0% [Connecting to 10.0.1.13]",
+      "0% [Waiting for headers]",
+      "Get:1 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl-dev amd64 1.0.1f-1ubuntu2.2 [1066 kB]",
+      "0% [1 libssl-dev 2465 B/1066 kB 0%]",
+      "1% [1 libssl-dev 21.9 kB/1066 kB 2%]",
+      "15% [1 libssl-dev 749 kB/1066 kB 70%]",
+      "21% [Working]",
+      "21% [Waiting for headers]",
+      "Get:2 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 i386 1.0.1f-1ubuntu2.2 [779 kB]",
+      "21% [2 libssl1.0.0:i386 1080 B/779 kB 0%]",
+      "36% [Working]",
+      "36% [Waiting for headers]",
+      "Get:3 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 amd64 1.0.1f-1ubuntu2.2 [826 kB]",
+      "36% [3 libssl1.0.0 1080 B/826 kB 0%]",
+      "39% [3 libssl1.0.0 129 kB/826 kB 15%]",
+      "52% [Working]",
+      "52% [Waiting for headers]",
+      "Get:4 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main openssl amd64 1.0.1f-1ubuntu2.2 [488 kB]",
+      "52% [4 openssl 2468 B/488 kB 0%]",
+      "62% [Working]",
+      "62% [Waiting for headers]",
+      "Get:5 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main unity amd64 7.2.1+14.04.20140513-0ubuntu2 [1452 kB]",
+      "62% [5 unity 1078 B/1452 kB 0%]",
+    ],
+  },
+};
+
+export const failedPublicationOperation: FailedOperation = {
+  name: "operations/publication-ffff-llll-dddd",
+  metadata: {
+    "@type":
+      "type.googleapis.com/canonical.landscape.debarchive.v1beta1.TaskMetadata",
+    description:
+      "Validate import into local repo Noble Security Patches (e755a4bd-8044-4529-8b5d-53f1c3887e9e)",
+    operationId: "publication-ffff-llll-dddd",
+    status: "failed",
+    progressPercent: 62,
+    resource: "publications/g8h8888e-c8f8-8e88-ab8c-ef8a8c8af8c8",
+  },
+  done: true,
+  error: {
+    code: 13,
+    message: "The operation failed unexpectedly.",
+    details: [
+      "0% [Working]",
+      "0% [Connecting to 10.0.1.13]",
+      "0% [Waiting for headers]",
+      "Get:1 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl-dev amd64 1.0.1f-1ubuntu2.2 [1066 kB]",
+      "0% [1 libssl-dev 2465 B/1066 kB 0%]",
+      "1% [1 libssl-dev 21.9 kB/1066 kB 2%]",
+      "15% [1 libssl-dev 749 kB/1066 kB 70%]",
+      "21% [Working]",
+      "21% [Waiting for headers]",
+      "Get:2 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 i386 1.0.1f-1ubuntu2.2 [779 kB]",
+      "21% [2 libssl1.0.0:i386 1080 B/779 kB 0%]",
+      "36% [Working]",
+      "36% [Waiting for headers]",
+      "Get:3 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main libssl1.0.0 amd64 1.0.1f-1ubuntu2.2 [826 kB]",
+      "36% [3 libssl1.0.0 1080 B/826 kB 0%]",
+      "39% [3 libssl1.0.0 129 kB/826 kB 15%]",
+      "52% [Working]",
+      "52% [Waiting for headers]",
+      "Get:4 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main openssl amd64 1.0.1f-1ubuntu2.2 [488 kB]",
+      "52% [4 openssl 2468 B/488 kB 0%]",
+      "62% [Working]",
+      "62% [Waiting for headers]",
+      "Get:5 http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main unity amd64 7.2.1+14.04.20140513-0ubuntu2 [1452 kB]",
+      "62% [5 unity 1078 B/1452 kB 0%]",
+    ],
+  },
+};
+
+export const operations: Operation[] = [
+  idleOperation,
+  succeededOperation,
+  failedOperation,
+  timeoutOperation,
+  inProgressOperation,
+  emptyOperation,
+  overCountOperation,
+  failedMirrorOperation,
+  failedPublicationOperation,
+];
diff --git a/src/tests/mocks/publications.ts b/src/tests/mocks/publications.ts
index 660f3d98bd..5b5efe0a84 100644
--- a/src/tests/mocks/publications.ts
+++ b/src/tests/mocks/publications.ts
@@ -21,6 +21,7 @@ export const publications = [
     skipBz2: false,
     skipContents: false,
     publishTime: new Date("March 12, 2026"),
+    lastOperation: "operations/ssss-cccc-dddd",
   },
   {
     name: "publications/c9f6355e-c8f3-4e73-ab4c-ef6a4c8af4c0",
@@ -43,7 +44,8 @@ export const publications = [
       armor: "-----BEGIN PGP PRIVATE KEY BLOCK-----...",
       fingerprint: "38683D0347E42FDA",
     },
-    publishTime: new Date("March 12, 2026"),
+    publishTime: new Date("December 1, 2025"),
+    lastOperation: "operations/pppp-gggg-ssss",
   },
   {
     name: "publications/g8h8888e-c8f8-8e88-ab8c-ef8a8c8af8c8",
@@ -63,5 +65,6 @@ export const publications = [
     skipBz2: true,
     skipContents: true,
     publishTime: new Date("April 20, 2026"),
+    lastOperation: "operations/publication-ffff-llll-dddd",
   },
 ] as const satisfies Publication[];
diff --git a/src/tests/server/handlers/operations.ts b/src/tests/server/handlers/operations.ts
index f1b10bd553..7d00586456 100644
--- a/src/tests/server/handlers/operations.ts
+++ b/src/tests/server/handlers/operations.ts
@@ -1,44 +1,80 @@
 import { API_URL_DEB_ARCHIVE } from "@/constants";
+import type { Operation } from "@/features/operations";
 import {
-  failedOperation,
   inProgressOperation,
-  emptyOperation,
   succeededOperation,
-  overCountOperation,
-  timeoutOperation,
-  idleOperation,
+  operations,
 } from "@/tests/mocks/operations";
-import { http, delay, HttpResponse } from "msw";
+import { http, HttpResponse } from "msw";
 
-export default [
-  http.get(`${API_URL_DEB_ARCHIVE}operations/:operationId`, ({ params }) => {
-    const { operationId } = params;
-    delay(1000);
+let progress = inProgressOperation.metadata.progressPercent;
 
-    if (operationId === "ffff-llll-dddd") {
-      return HttpResponse.json(failedOperation);
-    }
+export const resetLroProgress = () => {
+  progress = inProgressOperation.metadata.progressPercent;
+};
 
-    if (operationId === "iiii-dddd-llll") {
-      return HttpResponse.json(idleOperation);
-    }
+const getOperationResponse = (operation: Operation) => {
+  if (operation.metadata.operationId === "pppp-gggg-ssss") {
+    progress += 10;
 
-    if (operationId === "tttt-mmmm-oooo") {
-      return HttpResponse.json(timeoutOperation);
-    }
+    if (progress >= 100) {
+      progress = inProgressOperation.metadata.progressPercent;
 
-    if (operationId === "pppp-gggg-ssss") {
-      return HttpResponse.json(inProgressOperation);
+      return {
+        ...succeededOperation,
+        name: operation.name,
+        metadata: {
+          ...operation.metadata,
+          progressPercent: 100,
+          status: succeededOperation.metadata.status,
+        },
+      };
     }
 
-    if (operationId === "mmmm-pppp-tttt") {
-      return HttpResponse.json(emptyOperation);
-    }
+    return {
+      ...operation,
+      metadata: {
+        ...operation.metadata,
+        progressPercent: progress,
+      },
+    };
+  }
+  return operation;
+};
 
-    if (operationId === "ssss-cccc-dddd") {
-      return HttpResponse.json(succeededOperation);
-    }
+export default [
+  http.post<never, { names: string[] }>(
+    `${API_URL_DEB_ARCHIVE}operations\\:batchGet`,
+    async ({ request }) => {
+      const { names } = await request.json();
+
+      return HttpResponse.json({
+        operations: operations
+          .filter(({ name }) => names.includes(name ?? ""))
+          .map((operation) => {
+            return getOperationResponse(operation);
+          }),
+      });
+    },
+  ),
+
+  http.get(
+    `${API_URL_DEB_ARCHIVE}operations/:operationId`,
+    async ({ params }) => {
+      const { operationId } = params;
+
+      const operation = operations.find(
+        (op) => op.metadata.operationId === operationId,
+      );
+
+      if (operation) {
+        return HttpResponse.json(getOperationResponse(operation));
+      }
 
-    return HttpResponse.json(overCountOperation);
-  }),
+      return HttpResponse.json(
+        { error: "Operation not found" },
+        { status: 404 },
+      );
+    },
+  ),
 ];
diff --git a/src/tests/server/handlers/publicationTargets.ts b/src/tests/server/handlers/publicationTargets.ts
index 8e54e8c470..052d6ad402 100644
--- a/src/tests/server/handlers/publicationTargets.ts
+++ b/src/tests/server/handlers/publicationTargets.ts
@@ -127,7 +127,7 @@ export default [
   ),
 
   http.post(
-    `${API_URL_DEB_ARCHIVE}publicationTargets:batchGet`,
+    `${API_URL_DEB_ARCHIVE}publicationTargets\\:batchGet`,
     async ({ request }) => {
       return getBatchPublicationTargetsResponse(request);
     },
diff --git a/src/tests/server/handlers/publications.ts b/src/tests/server/handlers/publications.ts
index fb02433aeb..4a53b911fe 100644
--- a/src/tests/server/handlers/publications.ts
+++ b/src/tests/server/handlers/publications.ts
@@ -9,10 +9,8 @@ import {
   shouldApplyEndpointStatus,
 } from "./_helpers";
 import { ENDPOINT_STATUS_API_ERROR } from "./_constants";
-import type {
-  Publication,
-  PublicationServicePublishPublicationResponse,
-} from "@canonical/landscape-openapi";
+import type { Publication } from "@canonical/landscape-openapi";
+import type { Operation } from "@/features/operations";
 import { succeededOperation } from "@/tests/mocks/operations";
 
 const getPublicationParam = (requestPublicationName: string) => {
@@ -104,13 +102,15 @@ const getDeletePublicationResponse = () => {
   return HttpResponse.json({}, { status: 200 });
 };
 
-const getPublishPublicationResponse =
-  (): StrictResponse<PublicationServicePublishPublicationResponse> => {
-    return HttpResponse.json(
-      { ...succeededOperation, response: undefined },
-      { status: 200 },
-    );
-  };
+const getPublishPublicationResponse = (): StrictResponse<Operation> => {
+  return HttpResponse.json(
+    {
+      ...succeededOperation,
+      response: { ...succeededOperation.response, output: undefined },
+    },
+    { status: 200 },
+  );
+};
 
 export default [
   http.get(`${API_URL_DEB_ARCHIVE}publications`, async ({ request }) => {
diff --git a/src/tests/setup.ts b/src/tests/setup.ts
index aa812fadcf..e14b7a9884 100644
--- a/src/tests/setup.ts
+++ b/src/tests/setup.ts
@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom";
 import * as matchers from "@testing-library/jest-dom/matchers";
-import { cleanup } from "@testing-library/react";
+import { cleanup, configure } from "@testing-library/react";
 import { afterAll, afterEach, beforeAll, expect } from "vitest";
 import { setEndpointStatus } from "./controllers/controller";
 import {
@@ -13,6 +13,12 @@ import server from "./server";
 
 expect.extend(matchers);
 
+// Async DOM waits (findBy*, waitFor, waitForElementToBeRemoved) default to
+// 1000ms, which is too tight under the full coverage run on CI — especially on
+// the merge-queue branch where workers contend for CPU. Give them more headroom
+// so load-sensitive tests don't flake (and silently drop the PR from the queue).
+configure({ asyncUtilTimeout: 5000 });
+
 interface ResizeObserverInstance {
   observe: ReturnType<typeof vi.fn>;
   unobserve: ReturnType<typeof vi.fn>;