fix(ui): show Pi logo in session catalog (#119998)

Show the official Pi provider mark beside Pi external-session catalog headings in the Control UI sidebar. Keep OpenCode sibling branding covered and preserve transcript navigation and paired-node view-only behavior.

Proof: focused sidebar tests, browser-driven external-catalog E2E, production Control UI build/performance checks, UI typecheck, formatting/style checks, source-blind behavior validation, and clean Codex autoreview. GitHub Actions was in a confirmed service outage; maintainer explicitly directed landing without Actions. The repository full local gate reached unrelated failures across Codex, launchd, CLI, plugin naming, QA, and tooling suites after build and check passed.

ui/public/provider-icons/ATTRIBUTION.md

@@ -17,6 +17,13 @@ content otherwise match the cited upstream files.
 
 Provider names and marks remain the property of their respective owners.
 
+## Pi icon
+
+`ProviderIcon-pi.svg` is a metadata-cleaned copy of the official Pi logo:
+
+- Source: https://pi.dev/logo.svg
+- Press kit: https://pi.dev/press-kit
+
 ## LM Studio icon
 
 `ProviderIcon-lmstudio.svg` is the official monochrome outline icon published

ui/public/provider-icons/ProviderIcon-pi.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+  <path fill="#fff" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/>
+  <path fill="#fff" d="M517.36 400H634.72V634.72H517.36Z"/>
+</svg>

ui/src/components/provider-icon.ts

@@ -49,6 +49,7 @@ const PROVIDER_ICON_NAMES = new Set([
   "opencodego",
   "openrouter",
   "perplexity",
+  "pi",
   "poe",
   "qoder",
   "sakana",

ui/src/e2e/external-session-catalogs.e2e.test.ts

@@ -116,6 +116,23 @@ suite("OpenCode and Pi external session catalogs", () => {
     });
 
     await page.goto(`${server.baseUrl}chat`);
+    await expect
+      .poll(() =>
+        page
+          .locator('[data-session-section="catalog:opencode"] [data-provider-icon="opencode"]')
+          .count(),
+      )
+      .toBe(1);
+    await expect
+      .poll(() =>
+        page.locator('[data-session-section="catalog:pi"] [data-provider-icon="pi"]').count(),
+      )
+      .toBe(1);
+    const piIconResponse = await page.request.get(
+      new URL("provider-icons/ProviderIcon-pi.svg", server.baseUrl).toString(),
+    );
+    expect(piIconResponse.ok()).toBe(true);
+
     await page.getByText("OpenCode release review", { exact: true }).click();
     await expect.poll(() => page.getByText("OpenCode transcript loaded").count()).toBe(1);
     await page.getByText("Pi architecture notes", { exact: true }).click();

ui/src/styles/components.css

@@ -5931,7 +5931,8 @@ td.data-table-key-col {
 }
 
 .provider-brand-icon[data-provider-icon="opencode"],
-.provider-brand-icon[data-provider-icon="opencodego"] {
+.provider-brand-icon[data-provider-icon="opencodego"],
+.provider-brand-icon[data-provider-icon="pi"] {
   color: var(--text-strong);
 }
 /* Shared working-claw motion: chat and settings use the same body flex and

ui/src/test-helpers/app-sidebar-cases/catalog-live.ts

@@ -166,6 +166,8 @@ describe("AppSidebar session catalog pagination", () => {
   it.each([
     { id: "claude", label: "Claude Code" },
     { id: "codex", label: "Codex" },
+    { id: "opencode", label: "OpenCode" },
+    { id: "pi", label: "Pi" },
   ])("groups $label catalog rows by their owning host", async ({ id, label }) => {
     const gateway = createGateway({} as GatewayBrowserClient);
     const { sidebar } = await mountSidebar(gateway, createSessions("main", ["agent:main:main"]));