feat: improve catalogue import review and model controls (#101)

Author: HarryRandall

apps/web/app/admin/page.tsx

@@ -61,13 +61,15 @@ export default async function AdminOverviewPage() {
           />
         </div>
 
-        <ImportModelCard
-          canManage={canManageImports}
-          configured={importModel.configured}
-          model={importModel.model}
-          options={importModel.options}
-          updatedAt={importModel.updatedAt}
-        />
+        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          <ImportModelCard
+            canManage={canManageImports}
+            model={importModel.model}
+            models={importModel.models}
+            error={importModel.error}
+            updatedAt={importModel.updatedAt}
+          />
+        </div>
       </div>
     </AppShell>
   );

apps/web/tests/condition-search-picker.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { SearchPicker } from "@/ui/admin/requisites/condition-search-picker";
+import { simulateOverlayAnimation } from "./helpers/overlay-animation";
+
+vi.mock("@/lib/coursemap/requisite-search-actions", () => ({
+  searchRequisiteCourses: vi.fn(),
+  searchRequisiteProgrammes: vi.fn(),
+}));
+
+for (const label of ["Course", "Programme"]) {
+  test(`${label} search retains results throughout dismissal and resets when reopened`, async () => {
+    const animation = simulateOverlayAnimation();
+    const scroll = vi.fn();
+    const originalScroll = HTMLElement.prototype.scrollIntoView;
+    HTMLElement.prototype.scrollIntoView = scroll;
+    try {
+      render(
+        <SearchPicker
+          label={label}
+          empty="No matches."
+          onSearch={async () => [{ code: "COMP3600", title: "Algorithms" }]}
+          onSelect={vi.fn()}
+          value=""
+        />,
+      );
+      const trigger = screen.getByRole("button", { name: label });
+      fireEvent.click(trigger);
+      fireEvent.change(screen.getByRole("combobox"), {
+        target: { value: "COMP" },
+      });
+      const result = await screen.findByRole("option", { name: /Algorithms/ });
+      fireEvent.keyDown(screen.getByRole("combobox"), { key: "Escape" });
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+      expect(result).toBeInTheDocument();
+      expect(screen.queryByText("No matches.")).not.toBeInTheDocument();
+      const exit = new Event("animationend", { bubbles: true });
+      Object.defineProperty(exit, "animationName", { value: "overlay-exit" });
+      fireEvent(screen.getByRole("dialog", { hidden: true }), exit);
+      await waitFor(() => expect(trigger).toHaveFocus());
+      fireEvent.click(trigger);
+      expect(screen.getByRole("combobox")).toHaveValue("");
+      expect(screen.queryByRole("option")).not.toBeInTheDocument();
+      expect(screen.getByText("Type a code or title.")).toBeInTheDocument();
+    } finally {
+      animation.mockRestore();
+      HTMLElement.prototype.scrollIntoView = originalScroll;
+    }
+  });
+}

apps/web/tests/database-scroll-preview.test.tsx

@@ -0,0 +1,28 @@
+import { afterEach, expect, test, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { DatabaseScrollPreview } from "@/ui/admin/imports/database-scroll-preview";
+
+afterEach(() => vi.restoreAllMocks());
+
+test("the capped thumb reaches both ends of its track with the content", () => {
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(300);
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockReturnValue(600);
+  render(
+    <DatabaseScrollPreview label="Rows">
+      <p>Content</p>
+    </DatabaseScrollPreview>,
+  );
+  const bar = screen.getByRole("scrollbar", { name: "Rows scrollbar" });
+  const viewport = document.getElementById(bar.getAttribute("aria-controls")!)!;
+  const thumb = bar.firstElementChild as HTMLElement;
+  expect(thumb.style.height).toBe("72px");
+  fireEvent.keyDown(bar, { key: "End" });
+  fireEvent.scroll(viewport);
+  expect(viewport.scrollTop).toBe(300);
+  expect(thumb.style.transform).toBe("translateY(224px)");
+  expect(bar).toHaveAttribute("aria-valuenow", "300");
+  fireEvent.keyDown(bar, { key: "Home" });
+  fireEvent.scroll(viewport);
+  expect(viewport.scrollTop).toBe(0);
+  expect(thumb.style.transform).toBe("translateY(0px)");
+});

apps/web/tests/import-model-card.test.tsx

@@ -0,0 +1,161 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, expect, test, vi } from "vitest";
+import { TooltipProvider } from "@coursemap/ui/primitives/tooltip";
+import { ImportModelCard } from "../ui/admin/imports/import-model-card";
+const actions = vi.hoisted(() => ({
+  setImportModel: vi.fn(),
+  saveImportModel: vi.fn(),
+  removeImportModel: vi.fn(),
+  setImportModelVisibility: vi.fn(),
+  refresh: vi.fn(),
+}));
+vi.mock("@/lib/admin/settings-actions", () => actions);
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ refresh: actions.refresh }),
+}));
+const models = [
+  {
+    id: "google/test",
+    name: "Gemini Test",
+    provider: "Google",
+    enabled: true,
+    visible: true,
+    input_usd_per_million: 0.25,
+    output_usd_per_million: 1.5,
+    pricing_updated_at: "2026-09-07T00:00:00Z",
+  },
+  {
+    id: "anthropic/test",
+    name: "Claude Test",
+    provider: "Anthropic",
+    enabled: true,
+    visible: true,
+    input_usd_per_million: 1,
+    output_usd_per_million: 5,
+    pricing_updated_at: "2026-09-07T00:00:00Z",
+  },
+];
+beforeEach(() => vi.resetAllMocks());
+function setup(canManage = true) {
+  render(
+    <TooltipProvider>
+      <ImportModelCard
+        canManage={canManage}
+        model="google/test"
+        models={models}
+        updatedAt={null}
+      />
+    </TooltipProvider>,
+  );
+  return userEvent.setup();
+}
+test("shows compact pricing and selects a model through the workspace menu", async () => {
+  actions.setImportModel.mockResolvedValue({ ok: true, message: "Saved." });
+  const user = setup();
+  expect(screen.getByText("0.55¢")).toBeInTheDocument();
+  await user.click(screen.getByRole("button", { name: "Import model" }));
+  await user.click(
+    screen.getByRole("menuitem", { name: "Claude Test, Anthropic" }),
+  );
+  expect(actions.setImportModel).toHaveBeenCalledWith("anthropic/test");
+  expect(actions.refresh).toHaveBeenCalled();
+});
+test("model management prevents removing the default and preserves failed additions", async () => {
+  actions.saveImportModel.mockResolvedValue({
+    ok: false,
+    message: "The model was not found.",
+  });
+  const user = setup();
+  await user.click(screen.getByRole("button", { name: "Import model" }));
+  await user.click(screen.getByRole("menuitem", { name: "Manage models" }));
+  await user.click(
+    screen.getByRole("button", { name: "Actions for Gemini Test" }),
+  );
+  expect(
+    screen.getByRole("button", { name: "Refresh pricing" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: "Remove model" }),
+  ).not.toBeInTheDocument();
+  await user.keyboard("{Escape}");
+  await user.type(screen.getByLabelText("OpenRouter model ID"), "test/missing");
+  await user.click(screen.getByRole("button", { name: "Add model" }));
+  expect(await screen.findByRole("alert")).toHaveTextContent(
+    "The model was not found.",
+  );
+  expect(screen.getByLabelText("OpenRouter model ID")).toHaveValue(
+    "test/missing",
+  );
+});
+test("read-only viewers cannot change the catalogue", () => {
+  setup(false);
+  expect(screen.getByRole("button", { name: "Import model" })).toBeDisabled();
+});
+
+test("Escape returns focus from model management to its selector", async () => {
+  const user = setup();
+  const trigger = screen.getByRole("button", { name: "Import model" });
+  await user.click(trigger);
+  await user.click(screen.getByRole("menuitem", { name: "Manage models" }));
+  await user.keyboard("{Escape}");
+  await waitFor(() => expect(trigger).toHaveFocus());
+});
+
+test("hides a model from selection while keeping it manageable", async () => {
+  actions.setImportModelVisibility.mockResolvedValue({
+    ok: true,
+    message: "Hidden.",
+  });
+  const user = setup();
+  await user.click(screen.getByRole("button", { name: "Import model" }));
+  await user.click(screen.getByRole("menuitem", { name: "Manage models" }));
+  await user.click(
+    screen.getByRole("button", { name: "Actions for Claude Test" }),
+  );
+  await user.click(screen.getByRole("button", { name: "Hide model" }));
+  expect(actions.setImportModelVisibility).toHaveBeenCalledWith(
+    "anthropic/test",
+    false,
+  );
+  expect(actions.refresh).toHaveBeenCalled();
+});
+
+test("hidden models can be shown again and are absent from the selector", async () => {
+  actions.setImportModelVisibility.mockResolvedValue({
+    ok: true,
+    message: "Visible.",
+  });
+  render(
+    <TooltipProvider>
+      <ImportModelCard
+        canManage
+        model="google/test"
+        models={models.map((model) => ({
+          ...model,
+          visible: model.id === "google/test",
+        }))}
+        updatedAt={null}
+      />
+    </TooltipProvider>,
+  );
+  const user = userEvent.setup();
+  await user.click(screen.getByRole("button", { name: "Import model" }));
+  expect(
+    screen.queryByRole("menuitem", { name: "Claude Test, Anthropic" }),
+  ).not.toBeInTheDocument();
+  await user.click(screen.getByRole("menuitem", { name: "Manage models" }));
+  expect(screen.getByText("Hidden").closest("details")).not.toHaveAttribute(
+    "open",
+  );
+  await user.click(screen.getByText("Hidden"));
+  expect(screen.getByText("Hidden").closest("details")).toHaveAttribute("open");
+  await user.click(
+    screen.getByRole("button", { name: "Actions for Claude Test" }),
+  );
+  await user.click(screen.getByRole("button", { name: "Show model" }));
+  expect(actions.setImportModelVisibility).toHaveBeenCalledWith(
+    "anthropic/test",
+    true,
+  );
+});

apps/web/tests/import-target-review-loading.test.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import { render, screen, within } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { Tabs } from "@coursemap/ui/primitives/tabs";
+import { ImportTargetReviewLoading } from "@/ui/admin/imports/import-target-review-loading";
+import { ImportSectionTabs } from "@/ui/admin/imports/import-section-tabs";
+import { Breadcrumbs } from "@/ui/shell/breadcrumbs";
+
+vi.mock("next/navigation", () => ({
+  usePathname: () =>
+    "/admin/courses/imports/a23de36a-bd72-4d9d-89ec-3b548799815d",
+}));
+
+vi.mock("@/ui/shell", () => ({
+  AppShell: ({
+    children,
+    tabs,
+    breadcrumbSegmentLabels,
+  }: {
+    children: ReactNode;
+    tabs?: ReactNode;
+    breadcrumbSegmentLabels?: Record<string, string | null>;
+  }) => (
+    <>
+      <Breadcrumbs segmentLabels={breadcrumbSegmentLabels} />
+      {tabs}
+      {children}
+    </>
+  ),
+}));
+
+test("keeps the collapsed ancestors in place while the import name loads", () => {
+  const { rerender } = render(<ImportTargetReviewLoading noun="course" />);
+  const trail = screen.getByRole("navigation", { name: "Breadcrumb" });
+  expect(within(trail).getAllByRole("listitem")).toHaveLength(3);
+  expect(within(trail).getByRole("link", { name: "Admin" })).toBeVisible();
+  expect(
+    within(trail).getByRole("button", { name: "Show hidden breadcrumbs" }),
+  ).toBeVisible();
+  expect(
+    within(trail).queryByRole("link", { name: "Imports" }),
+  ).not.toBeInTheDocument();
+  expect(trail).not.toHaveTextContent("a23de36a");
+  rerender(<Breadcrumbs currentLabel="INFS1001" />);
+  const loaded = screen.getByRole("navigation", { name: "Breadcrumb" });
+  expect(within(loaded).getAllByRole("listitem")).toHaveLength(3);
+  expect(
+    within(loaded).getByRole("button", { name: "Show hidden breadcrumbs" }),
+  ).toBeVisible();
+  expect(
+    within(loaded).getByRole("link", { name: "INFS1001" }),
+  ).toHaveAttribute("aria-current", "page");
+});
+
+test.each(["course", "programme"])(
+  "matches the %s import tabs and pipeline table while loading",
+  (noun) => {
+    const { rerender } = render(<ImportTargetReviewLoading noun={noun} />);
+    const labels = [
+      "Pipeline",
+      "Source and artefacts",
+      "Database rows",
+      noun === "course" ? "Course preview" : "Preview",
+    ];
+    expect(screen.getAllByRole("tab").map((tab) => tab.textContent)).toEqual(
+      labels,
+    );
+    screen.getAllByRole("tab").forEach((tab) => expect(tab).toBeDisabled());
+    const table = screen.getByRole("table", {
+      name: "Loading import pipeline stages",
+    });
+    expect(
+      within(table)
+        .getAllByRole("columnheader")
+        .map((cell) => cell.textContent),
+    ).toEqual(["Step", "Stage", "Status", "Attempts", "Duration", "Error"]);
+    expect(within(table).getAllByRole("row")).toHaveLength(11);
+    rerender(
+      <Tabs defaultValue="pipeline">
+        <ImportSectionTabs course={noun === "course"} />
+      </Tabs>,
+    );
+    expect(screen.getAllByRole("tab").map((tab) => tab.textContent)).toEqual(
+      labels,
+    );
+    screen.getAllByRole("tab").forEach((tab) => expect(tab).toBeEnabled());
+  },
+);