test(providers): cover catalog artwork and snapshot-free icons

Lock down the missing provider marks through the catalog and the shared icon hook. Exercise the rendered catalog artwork in Chromium alongside coverage for the pre-snapshot fallback.

Co-authored-by: kevenhu001-cyber <keven.hu001@gmail.com>
Co-authored-by: Lu <jack1125516912@outlook.com>

packages/app/e2e/browser/provider-catalog-icons.spec.ts

@@ -0,0 +1,51 @@
+import { ACP_PROVIDER_ICON_SVGS } from "../../src/assets/acp-provider-icons";
+import { expect, test, type Page } from "../support/fixtures";
+import type { TestInfo } from "@playwright/test";
+import { gotoAppShell, openSettings } from "../support/helpers/app";
+import { getServerId } from "../support/helpers/server-id";
+import {
+  findAcpCatalogProvider,
+  openAddProviderArea,
+  openSettingsHost,
+  openSettingsHostSection,
+} from "../support/helpers/settings";
+
+async function openProviderCatalog(page: Page) {
+  await gotoAppShell(page);
+  await openSettings(page);
+  await openSettingsHost(page, getServerId());
+  await openSettingsHostSection(page, getServerId(), "providers");
+  await openAddProviderArea(page);
+}
+
+async function expectProviderArtwork(
+  page: Page,
+  testInfo: TestInfo,
+  id: "devin" | "hermes" | "kiro",
+  name: string,
+) {
+  await findAcpCatalogProvider(page, name);
+  // Catalog tiles have no semantic role; scope artwork to the named provider's tile.
+  const icon = page.getByTestId(`provider-catalog-tile-${id}`).locator("svg").first();
+  await expect(icon).toBeVisible();
+  // Provider artwork is 24px; the generic PackagePlus fallback is 20px.
+  await expect.soft(icon).toHaveAttribute("width", "24");
+  const expectedPaths = await page.evaluate((xml) => {
+    const document = new DOMParser().parseFromString(xml, "image/svg+xml");
+    return Array.from(document.querySelectorAll("path"), (path) => path.getAttribute("d")!);
+  }, ACP_PROVIDER_ICON_SVGS[id]);
+  await expect(icon.locator("path")).toHaveCount(expectedPaths.length);
+  for (const [index, path] of expectedPaths.entries()) {
+    await expect(icon.locator("path").nth(index)).toHaveAttribute("d", path);
+  }
+  await page.screenshot({ path: testInfo.outputPath(`${id}-catalog.png`) });
+}
+
+test("#7087: the provider catalog shows Devin, Hermes, and Kiro artwork", async ({
+  page,
+}, testInfo) => {
+  await openProviderCatalog(page);
+  await expectProviderArtwork(page, testInfo, "devin", "Devin CLI");
+  await expectProviderArtwork(page, testInfo, "hermes", "Hermes");
+  await expectProviderArtwork(page, testInfo, "kiro", "Kiro CLI");
+});

packages/app/src/components/provider-icons.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { act, cleanup, renderHook } from "@testing-library/react";
-import { Bot } from "lucide-react-native";
+import { Bot, PackagePlus } from "lucide-react-native";
 import { SvgXml } from "react-native-svg";
 import { afterEach, describe, expect, it } from "vitest";
 import { replaceProviderSnapshotIcons } from "@/data/provider-icons";
@@ -17,6 +17,16 @@ function renderIcon(Component: ProviderIconComponent) {
 }
 
 describe("useProviderIcon", () => {
+  it.each(["devin", "hermes", "kiro", "antigravity"])(
+    "#7087: %s has a provider mark before a host snapshot arrives",
+    (provider) => {
+      const Icon = renderHook(() => useProviderIcon(provider)).result.current;
+      expect(Icon).not.toBe(Bot);
+      expect(Icon).not.toBe(PackagePlus);
+      expect(typeof Icon).toBe("function");
+    },
+  );
+
   it("renders registered snapshot SVG metadata with the requested size and color", () => {
     const svg = '<svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" /></svg>';
     replaceProviderSnapshotIcons("server-1", [{ provider: "rendered-provider", iconSvg: svg }]);

packages/app/src/hooks/use-acp-provider-catalog.test.ts

@@ -11,6 +11,13 @@ function findProvider(id: string) {
 }
 
 describe("ACP provider catalog", () => {
+  it.each(["devin", "hermes", "kiro"])(
+    "#7087: %s supplies its provider mark to the catalog picker",
+    (provider) => {
+      expect(findProvider(provider).iconSvg).toContain("<svg");
+    },
+  );
+
   it("vendors provider entries with unique ids and concrete commands", () => {
     const ids = new Set<string>();