diff --git a/packages/app/e2e/browser/provider-catalog-icons.spec.ts b/packages/app/e2e/browser/provider-catalog-icons.spec.ts
new file mode 100644
index 0000000000..818d88ab84
--- /dev/null
+++ b/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");
+});
diff --git a/packages/app/src/components/provider-icons.test.ts b/packages/app/src/components/provider-icons.test.ts
index 025ff14bef..aceed473be 100644
--- a/packages/app/src/components/provider-icons.test.ts
+++ b/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 = '';
replaceProviderSnapshotIcons("server-1", [{ provider: "rendered-provider", iconSvg: svg }]);
diff --git a/packages/app/src/hooks/use-acp-provider-catalog.test.ts b/packages/app/src/hooks/use-acp-provider-catalog.test.ts
index 201c17c022..c5fd59d53e 100644
--- a/packages/app/src/hooks/use-acp-provider-catalog.test.ts
+++ b/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("