feat(FN-2567): add pi-claude-cli provider icon alias

- Map the pi-claude-cli provider key to the Claude CLI icon config in ProviderIcon.
- Reuse Anthropic tokenized provider color and accessible label for the new alias.
- Add dashboard tests asserting icon rendering, color/label metadata, and mixed-case alias normalization.
This commit is contained in:
Fusion
2026-04-25 18:29:32 -07:00
committed by gsxdsm
parent 3daf971d74
commit d855552f63
2 changed files with 18 additions and 0 deletions

View File

@@ -236,6 +236,7 @@ const providerConfig: Record<
// Branded provider colors are tokenized in app/styles.css for theme-system consistency. // Branded provider colors are tokenized in app/styles.css for theme-system consistency.
anthropic: { component: AnthropicIcon, color: "var(--provider-anthropic)" }, anthropic: { component: AnthropicIcon, color: "var(--provider-anthropic)" },
"claude-cli": { component: ClaudeCliIcon, color: "var(--provider-anthropic)", label: "Anthropic — via Claude CLI" }, "claude-cli": { component: ClaudeCliIcon, color: "var(--provider-anthropic)", label: "Anthropic — via Claude CLI" },
"pi-claude-cli": { component: ClaudeCliIcon, color: "var(--provider-anthropic)", label: "Anthropic — via Claude CLI" },
openai: { component: OpenAIIcon, color: "var(--provider-openai)" }, openai: { component: OpenAIIcon, color: "var(--provider-openai)" },
"openai-codex": { component: OpenAIIcon, color: "var(--provider-openai)", label: "OpenAI Codex" }, // OpenAI alias "openai-codex": { component: OpenAIIcon, color: "var(--provider-openai)", label: "OpenAI Codex" }, // OpenAI alias

View File

@@ -38,6 +38,23 @@ describe("ProviderIcon", () => {
expect(badgeGlyph).toHaveAttribute("stroke", "var(--provider-icon-contrast)"); expect(badgeGlyph).toHaveAttribute("stroke", "var(--provider-icon-contrast)");
}); });
it("renders pi-claude-cli with Claude CLI icon, label, and provider color", () => {
render(<ProviderIcon provider="pi-claude-cli" />);
const svg = screen.getByTestId("claude-cli-icon");
expect(svg).toBeInTheDocument();
expect(screen.getByLabelText("Anthropic — via Claude CLI")).toBeInTheDocument();
const wrapper = svg.parentElement;
expect(wrapper).toHaveAttribute("data-provider", "pi-claude-cli");
expect(wrapper).toHaveStyle({ color: "var(--provider-anthropic)" });
});
it("normalizes PI-Claude-CLI provider name to lowercase alias", () => {
render(<ProviderIcon provider="PI-Claude-CLI" />);
const svg = screen.getByTestId("claude-cli-icon");
expect(svg).toBeInTheDocument();
expect(svg.parentElement).toHaveAttribute("data-provider", "pi-claude-cli");
});
it("renders OpenAI brand icon for openai provider", () => { it("renders OpenAI brand icon for openai provider", () => {
render(<ProviderIcon provider="openai" />); render(<ProviderIcon provider="openai" />);
expect(screen.getByTestId("openai-icon")).toBeInTheDocument(); expect(screen.getByTestId("openai-icon")).toBeInTheDocument();