Add Claude Code host template from live probe (#2653)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: ignaciojimenezr

mcpjam-inspector/client/public/claude_code_logo.png

@@ -88,6 +88,21 @@ describe("LoadingIndicatorContent", () => {
     expect(screen.getByTestId("loading-indicator-claude")).toBeInTheDocument();
   });
 
+  it("renders the CLI spinner (not the Claude mascot) for Claude Code hosts", () => {
+    render(
+      <ChatboxHostStyleProvider value="claude-code">
+        <LoadingIndicatorContent />
+      </ChatboxHostStyleProvider>,
+    );
+
+    expect(
+      screen.getByTestId("loading-indicator-claude-code-cli"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("loading-indicator-claude"),
+    ).not.toBeInTheDocument();
+  });
+
   it("renders the GPT pulse for ChatGPT-style chatbox hosts", () => {
     render(
       <ChatboxHostStyleProvider value="chatgpt">
@@ -144,4 +159,9 @@ describe("inline streaming footer host helpers", () => {
     expect(usesMcpjamInlineStreamingFooter("mcpjam")).toBe(true);
     expect(usesMcpjamInlineStreamingFooter("claude")).toBe(false);
   });
+
+  it("excludes Claude Code from the Claude mark footer (CLI agent, own spinner)", () => {
+    expect(usesClaudeInlineStreamingFooter("claude-code")).toBe(false);
+    expect(usesMcpjamInlineStreamingFooter("claude-code")).toBe(false);
+  });
 });

mcpjam-inspector/client/src/components/chat-v2/__tests__/LoadingIndicatorContent.test.tsx

@@ -42,6 +42,11 @@ export function usesClaudeInlineStreamingFooter(
   return (
     hostStyle != null &&
     hostStyle !== "mcpjam" &&
+    // Claude Code borrows the "claude" visual family for bubble styling but
+    // is a terminal agent — it shows its own CLI spinner indicator (via the
+    // generic LoadingIndicatorContent path), not the claude.ai mark painted
+    // beneath the assistant bubble. Same opt-out shape as "mcpjam".
+    hostStyle !== "claude-code" &&
     getChatboxHostFamily(hostStyle) === "claude"
   );
 }

mcpjam-inspector/client/src/components/chat-v2/shared/loading-indicator-content.tsx

@@ -1,6 +1,7 @@
 import { memo, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import claudeLogo from "/claude_logo.png";
+import claudeCodeLogo from "/claude_code_logo.png";
 import openaiLogo from "/openai_logo.png";
 import cursorLogo from "/cursor_logo.png";
 import codexLogo from "/codex-logo.svg";
@@ -28,6 +29,8 @@ function getClientLogo(
 ): string | null {
   const haystack = `${clientInfoName ?? ""} ${hostName ?? ""}`.toLowerCase();
   if (haystack.includes("mcpjam") || haystack.includes("mcp-jam")) return mcpjamLogo;
+  if (haystack.includes("claude-code") || haystack.includes("claude code"))
+    return claudeCodeLogo;
   if (haystack.includes("claude")) return claudeLogo;
   if (haystack.includes("cursor")) return cursorLogo;
   if (haystack.includes("codex")) return codexLogo;

mcpjam-inspector/client/src/components/hosts/redesigned/canvas/HostCapabilityMatrix.tsx

@@ -393,9 +393,11 @@ function appsToJson(draft: HostConfigInputV2): AppsDoc {
     hostCapabilitiesOverride: draft.hostCapabilitiesOverride,
   }) as Record<string, unknown>;
 
-  if (Object.keys(effectiveCaps).length > 0) {
-    doc.hostCapabilities = effectiveCaps;
-  }
+  // Always emit, even when empty — mirrors `hostContext` above. An empty
+  // `{}` is a meaningful advertise ("this host offers no app capabilities",
+  // e.g. the Claude Code CLI template's explicit override), so hiding it
+  // would make an intentional empty look like an omission.
+  doc.hostCapabilities = effectiveCaps;
 
   // sandbox — proxy iframe configuration. Maps to `mcpProfile.apps.sandbox`
   // in storage and the "Sandbox proxy iframe" card in the matrix. Spec

mcpjam-inspector/client/src/components/hosts/redesigned/focus/AppsExtensionTab.tsx

@@ -683,6 +683,71 @@
   }
 }
 
+/* Claude Code CLI spinner — the braille "working" cycle (⠋⠙⠹…) ora and
+   most terminal tools use. Claude Code borrows Claude's chat surface but
+   is a terminal agent, so its busy state is a monospace spinner, not the
+   claude.ai mascot. Colored MCPJam orange via `text-primary` on the
+   element (see the component); the glyph uses `currentColor` so it inherits
+   that. `::before` content is a discrete (non-interpolated) property, so
+   each keyframe snaps to its frame; an engine without content animation
+   simply shows the static base glyph. */
+.claude-code-cli-indicator {
+  display: inline-flex;
+  align-items: center;
+}
+
+.claude-code-cli-indicator__spinner::before {
+  content: "⠋";
+  display: inline-block;
+  width: 1ch;
+  text-align: center;
+  animation: claude-code-cli-spinner 1s linear infinite;
+}
+
+.claude-code-cli-indicator__label {
+  margin-left: 0.45em;
+}
+
+@keyframes claude-code-cli-spinner {
+  0% {
+    content: "⠋";
+  }
+  10% {
+    content: "⠙";
+  }
+  20% {
+    content: "⠹";
+  }
+  30% {
+    content: "⠸";
+  }
+  40% {
+    content: "⠼";
+  }
+  50% {
+    content: "⠴";
+  }
+  60% {
+    content: "⠦";
+  }
+  70% {
+    content: "⠧";
+  }
+  80% {
+    content: "⠇";
+  }
+  90% {
+    content: "⠏";
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .claude-code-cli-indicator__spinner::before {
+    content: "⠿";
+    animation: none;
+  }
+}
+
 @keyframes progress-indeterminate {
   0% {
     transform: translateX(-100%);

mcpjam-inspector/client/src/index.css

@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from "vitest";
 import {
   CHATGPT_HOST_STYLE,
   CLAUDE_HOST_STYLE,
+  CLAUDE_CODE_HOST_STYLE,
   CODEX_HOST_STYLE,
   COPILOT_HOST_STYLE,
   DEFAULT_HOST_STYLE,
@@ -23,6 +24,7 @@ describe("host-styles registry", () => {
     expect(findHostStyle("chatgpt")).toBe(CHATGPT_HOST_STYLE);
     expect(findHostStyle("copilot")).toBe(COPILOT_HOST_STYLE);
     expect(findHostStyle("codex")).toBe(CODEX_HOST_STYLE);
+    expect(findHostStyle("claude-code")).toBe(CLAUDE_CODE_HOST_STYLE);
   });
 
   it("returns undefined for unknown ids", () => {
@@ -44,6 +46,7 @@ describe("host-styles registry", () => {
     expect(isKnownHostStyleId("chatgpt")).toBe(true);
     expect(isKnownHostStyleId("copilot")).toBe(true);
     expect(isKnownHostStyleId("codex")).toBe(true);
+    expect(isKnownHostStyleId("claude-code")).toBe(true);
     expect(isKnownHostStyleId("unknown")).toBe(false);
     expect(isKnownHostStyleId(42)).toBe(false);
     expect(isKnownHostStyleId(null)).toBe(false);
@@ -56,14 +59,16 @@ describe("host-styles registry", () => {
     expect(ids).toContain("chatgpt");
     expect(ids).toContain("copilot");
     expect(ids).toContain("codex");
+    expect(ids).toContain("claude-code");
     // MCPJam ships first so the default-fallback host appears at the top
     // of pickers.
     expect(ids.indexOf("mcpjam")).toBeLessThan(ids.indexOf("claude"));
     expect(ids.indexOf("claude")).toBeLessThan(ids.indexOf("chatgpt"));
     // Copilot ships after Cursor (registration order in BUILT_IN_HOST_STYLES).
     expect(ids.indexOf("chatgpt")).toBeLessThan(ids.indexOf("copilot"));
-    // Codex ships last (registered after Copilot in BUILT_IN_HOST_STYLES).
     expect(ids.indexOf("copilot")).toBeLessThan(ids.indexOf("codex"));
+    // Claude Code ships last (registered after Codex in BUILT_IN_HOST_STYLES).
+    expect(ids.indexOf("codex")).toBeLessThan(ids.indexOf("claude-code"));
   });
 
   it("registers custom host styles for project-defined hosts", () => {

mcpjam-inspector/client/src/lib/client-styles/__tests__/registry.test.ts

@@ -1,4 +1,5 @@
 import claudeLogo from "/claude_logo.png";
+import claudeCodeLogo from "/claude_code_logo.png";
 import openaiLogo from "/openai_logo.png";
 import cursorLogo from "/cursor_logo.png";
 import copilotLogo from "/copilot_logo.png";
@@ -30,6 +31,7 @@ import {
   getMcpJamStyleVariables,
 } from "@/config/mcpjam-client-context";
 import { ClaudeMarkIndicator } from "./indicators/claude-mark";
+import { ClaudeCodeCliIndicator } from "./indicators/claude-code-cli";
 import { ChatGptDotIndicator } from "./indicators/chatgpt-dot";
 import { CursorShineIndicator } from "./indicators/cursor-shine";
 import { CopilotPulseIndicator } from "./indicators/copilot-pulse";
@@ -250,6 +252,36 @@ export const CLAUDE_HOST_STYLE: HostStyleDefinition = {
   },
 };
 
+// Claude Code is a terminal agent with no chat chrome of its own, so it
+// borrows Claude's desktop chat surface wholesale (style variables, fonts,
+// background, MCP profile) and only differs in brand identity: its own
+// label, logo, and a CLI spinner busy-state instead of the claude.ai
+// mascot. Mirrors how CODEX_HOST_STYLE borrows ChatGPT's surface.
+//
+// Capabilities reuse Claude's preset here, but the "claude-code" template
+// (`client-templates.ts`) overrides hostCapabilities to `{}` since the CLI
+// renders no MCP Apps — the style preset is just the fallback if a host
+// ever clears that override.
+export const CLAUDE_CODE_HOST_STYLE: HostStyleDefinition = {
+  id: "claude-code",
+  mcp: {
+    protocolOverride: UIType.MCP_APPS,
+    platform: CLAUDE_DESKTOP_PLATFORM,
+    fontCss: CLAUDE_DESKTOP_FONT_CSS,
+    mcpAppsCapabilities: MCP_APPS_FULL_SURFACE,
+    resolveStyleVariables: getClaudeDesktopStyleVariables,
+  },
+  chatUi: {
+    label: "Claude Code",
+    shortLabel: "Claude Code-style host",
+    pickerDescription: "Anthropic Claude Code CLI chrome",
+    logoSrc: claudeCodeLogo,
+    family: "claude",
+    resolveChatBackground: (theme) => CLAUDE_DESKTOP_CHAT_BACKGROUND[theme],
+    loadingIndicator: ClaudeCodeCliIndicator,
+  },
+};
+
 export const CHATGPT_HOST_STYLE: HostStyleDefinition = {
   id: "chatgpt",
   mcp: {
@@ -469,4 +501,5 @@ export const BUILT_IN_HOST_STYLES: readonly HostStyleDefinition[] = [
   CURSOR_HOST_STYLE,
   COPILOT_HOST_STYLE,
   CODEX_HOST_STYLE,
+  CLAUDE_CODE_HOST_STYLE,
 ];

mcpjam-inspector/client/src/lib/client-styles/built-ins.ts

@@ -16,6 +16,7 @@ export type {
 export {
   CHATGPT_HOST_STYLE,
   CLAUDE_HOST_STYLE,
+  CLAUDE_CODE_HOST_STYLE,
   CODEX_HOST_STYLE,
   COPILOT_HOST_STYLE,
   CURSOR_HOST_STYLE,

mcpjam-inspector/client/src/lib/client-styles/index.ts

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ClaudeCodeCliIndicator } from "../claude-code-cli";
+
+describe("ClaudeCodeCliIndicator", () => {
+  it("renders the CLI spinner node with the 'Thinking' label", () => {
+    const { getByTestId } = render(<ClaudeCodeCliIndicator />);
+    const node = getByTestId("loading-indicator-claude-code-cli");
+    expect(node).toBeTruthy();
+    expect(node.textContent).toContain("Thinking");
+  });
+
+  it("binds the braille-spinner keyframe via class", () => {
+    // Spinner frames resolve from `@keyframes claude-code-cli-spinner` in
+    // `index.css`, driven off `.claude-code-cli-indicator__spinner::before`.
+    // Assert the class wiring so a refactor can't silently drop it.
+    const { container } = render(<ClaudeCodeCliIndicator />);
+    expect(
+      container.querySelector(".claude-code-cli-indicator__spinner"),
+    ).not.toBeNull();
+  });
+
+  it("forwards className to the outer wrapper", () => {
+    const { container } = render(
+      <ClaudeCodeCliIndicator className="custom-test-class" />,
+    );
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.classList.contains("custom-test-class")).toBe(true);
+  });
+
+  it("declares an aria-live region so the thinking state is announced", () => {
+    const { container } = render(<ClaudeCodeCliIndicator />);
+    const live = container.querySelector("[aria-live='polite']");
+    expect(live).not.toBeNull();
+    // The spinner glyph is aria-hidden, so the sr-only "Thinking" carries
+    // the state for assistive tech.
+    expect(container.querySelector(".sr-only")?.textContent).toBe("Thinking");
+  });
+});