@surf-kit/agent 0.1.1 → 0.2.0

package/README.md

@@ -34,7 +34,7 @@ function App() {
 
 **Chat** — AgentChat, MessageThread, MessageBubble, MessageComposer, WelcomeScreen, ConversationList
 
-**Streaming** — StreamingMessage, ThinkingIndicator, ToolExecution, RetrievalProgress, VerificationProgress, TypewriterText
+**Streaming** — StreamingMessage, ThinkingIndicator, ToolExecution, RetrievalProgress, VerificationProgress, TypewriterText, TypingIndicator, TextGlimmer, StreamingList, StreamingStructure
 
 **Trust & Confidence** — ConfidenceBadge, ConfidenceMeter, ConfidenceBreakdown, VerificationBadge, VerificationDetail
 
@@ -48,8 +48,26 @@ function App() {
 
 **Layouts** — AgentFullPage, AgentPanel, AgentWidget, AgentEmbed
 
+**MCP** — MCPToolCall, MCPResourceView, MCPServerStatus, MCPApprovalDialog
+
 **Hooks** (via `@surf-kit/agent/hooks`) — useAgentChat, useStreaming, useConversation, useFeedback, useAgentTheme, useCharacterDrain
 
+## Subpath Exports
+
+Import only what you need for smaller bundles:
+
+```tsx
+import { MessageThread } from '@surf-kit/agent/chat'
+import { StreamingMessage } from '@surf-kit/agent/streaming'
+import { MCPToolCall } from '@surf-kit/agent/mcp'
+import { ConfidenceBadge } from '@surf-kit/agent/confidence'
+import { SourceCard } from '@surf-kit/agent/sources'
+import { AgentAvatar } from '@surf-kit/agent/agent-identity'
+import { FollowUpChips } from '@surf-kit/agent/response'
+import { AgentFullPage } from '@surf-kit/agent/layouts'
+import { ThumbsFeedback } from '@surf-kit/agent/feedback'
+```
+
 ## Docs
 
 - [Storybook](https://barney-w.github.io/surf-kit/storybook)

package/dist/agent-BNSmiexZ.d.cts

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface Source {
+    title: string;
+    section?: string;
+    document_id: string;
+    url: string;
+    confidence: number;
+    snippet: string;
+}
+interface ConfidenceBreakdown {
+    overall: 'high' | 'medium' | 'low';
+    retrieval_quality: number;
+    source_authority: number;
+    answer_groundedness: number;
+    recency: number;
+    reasoning: string;
+}
+interface VerificationResult {
+    status: 'passed' | 'flagged' | 'failed';
+    flags: string[];
+    claims_checked: number;
+    claims_verified: number;
+}
+interface AgentResponse {
+    message: string;
+    sources: Source[];
+    confidence: ConfidenceBreakdown;
+    verification: VerificationResult;
+    ui_hint: 'text' | 'table' | 'card' | 'list' | 'steps' | 'warning';
+    structured_data: Record<string, unknown> | null;
+    follow_up_suggestions: string[];
+}
+interface AgentInfo {
+    id: string;
+    label: string;
+    accent?: string;
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+}
+
+export type { AgentInfo as A, ConfidenceBreakdown as C, Source as S, VerificationResult as V, AgentResponse as a };

package/dist/agent-BNSmiexZ.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface Source {
+    title: string;
+    section?: string;
+    document_id: string;
+    url: string;
+    confidence: number;
+    snippet: string;
+}
+interface ConfidenceBreakdown {
+    overall: 'high' | 'medium' | 'low';
+    retrieval_quality: number;
+    source_authority: number;
+    answer_groundedness: number;
+    recency: number;
+    reasoning: string;
+}
+interface VerificationResult {
+    status: 'passed' | 'flagged' | 'failed';
+    flags: string[];
+    claims_checked: number;
+    claims_verified: number;
+}
+interface AgentResponse {
+    message: string;
+    sources: Source[];
+    confidence: ConfidenceBreakdown;
+    verification: VerificationResult;
+    ui_hint: 'text' | 'table' | 'card' | 'list' | 'steps' | 'warning';
+    structured_data: Record<string, unknown> | null;
+    follow_up_suggestions: string[];
+}
+interface AgentInfo {
+    id: string;
+    label: string;
+    accent?: string;
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+}
+
+export type { AgentInfo as A, ConfidenceBreakdown as C, Source as S, VerificationResult as V, AgentResponse as a };

package/dist/agent-identity/index.cjs

@@ -0,0 +1,157 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/agent-identity/index.ts
+var agent_identity_exports = {};
+__export(agent_identity_exports, {
+  AgentAvatar: () => AgentAvatar,
+  AgentHandoff: () => AgentHandoff,
+  AgentLabel: () => AgentLabel,
+  RoutingIndicator: () => RoutingIndicator
+});
+module.exports = __toCommonJS(agent_identity_exports);
+
+// src/hooks/useAgentTheme.ts
+var import_react = require("react");
+var DEFAULT_ACCENT = "#6366f1";
+var DEFAULT_LABEL = "Agent";
+function useAgentTheme(agentId, agentThemes) {
+  return (0, import_react.useMemo)(() => {
+    if (!agentId) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL };
+    }
+    const theme = agentThemes?.[agentId];
+    if (!theme) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: agentId };
+    }
+    return {
+      accent: theme.accent ?? DEFAULT_ACCENT,
+      icon: theme.icon ?? null,
+      label: theme.label
+    };
+  }, [agentId, agentThemes]);
+}
+
+// src/agent-identity/AgentAvatar/AgentAvatar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizeMap = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base"
+};
+var iconSizeMap = {
+  sm: 14,
+  md: 18,
+  lg: 22
+};
+function AgentAvatar({ agentId, agent, size = "md", agentThemes, className }) {
+  const resolvedId = agent?.id ?? agentId ?? null;
+  const themes = agent ? { ...agentThemes, [agent.id]: agent } : agentThemes;
+  const { accent, icon: Icon, label } = useAgentTheme(resolvedId, themes);
+  const initial = label.charAt(0).toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `inline-flex items-center justify-center rounded-full shrink-0 font-medium text-white ${sizeMap[size]} ${className ?? ""}`,
+      style: { backgroundColor: accent },
+      role: "img",
+      "aria-label": `${label} avatar`,
+      "data-testid": "agent-avatar",
+      children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: iconSizeMap[size], className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: initial })
+    }
+  );
+}
+
+// src/agent-identity/AgentLabel/AgentLabel.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AgentLabel({ agent, className }) {
+  const accent = agent.accent ?? "#6366f1";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      className: `text-xs font-medium ${className ?? ""}`,
+      "data-testid": "agent-label",
+      children: [
+        "Answered by",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: accent }, children: agent.label })
+      ]
+    }
+  );
+}
+
+// src/agent-identity/AgentHandoff/AgentHandoff.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AgentHandoff({ from, to, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-surface ${className ?? ""}`,
+      "data-testid": "agent-handoff",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AgentAvatar, { agent: from, size: "sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-text-secondary", children: from.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary text-xs", "aria-hidden": "true", children: "\u2192" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-right-2 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AgentAvatar, { agent: to, size: "sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-text-secondary", children: to.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "sr-only", role: "status", "aria-live": "polite", children: [
+          "Handing off from ",
+          from.label,
+          " to ",
+          to.label
+        ] })
+      ]
+    }
+  );
+}
+
+// src/agent-identity/RoutingIndicator/RoutingIndicator.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RoutingIndicator({ from, to, reason, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-md border border-border/50 bg-surface-secondary/50 px-2.5 py-1 font-mono text-[11px] text-text-secondary ${className ?? ""}`,
+      "data-testid": "routing-indicator",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "opacity-60", children: "Routed:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: from }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "opacity-40", "aria-hidden": "true", children: "\u2192" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: to }),
+        reason && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "opacity-50 ml-1", title: reason, children: [
+          "(",
+          reason,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentAvatar,
+  AgentHandoff,
+  AgentLabel,
+  RoutingIndicator
+});
+//# sourceMappingURL=index.cjs.map

package/dist/agent-identity/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/agent-identity/index.ts","../../src/hooks/useAgentTheme.ts","../../src/agent-identity/AgentAvatar/AgentAvatar.tsx","../../src/agent-identity/AgentLabel/AgentLabel.tsx","../../src/agent-identity/AgentHandoff/AgentHandoff.tsx","../../src/agent-identity/RoutingIndicator/RoutingIndicator.tsx"],"sourcesContent":["export { AgentAvatar } from './AgentAvatar'\nexport type { AgentAvatarProps } from './AgentAvatar'\n\nexport { AgentLabel } from './AgentLabel'\nexport type { AgentLabelProps } from './AgentLabel'\n\nexport { AgentHandoff } from './AgentHandoff'\nexport type { AgentHandoffProps } from './AgentHandoff'\n\nexport { RoutingIndicator } from './RoutingIndicator'\nexport type { RoutingIndicatorProps } from './RoutingIndicator'\n","import { useMemo } from 'react'\nimport type { AgentInfo } from '../types/agent'\n\nexport interface AgentThemeResult {\n  accent: string\n  icon: AgentInfo['icon'] | null\n  label: string\n}\n\nconst DEFAULT_ACCENT = '#6366f1'\nconst DEFAULT_LABEL = 'Agent'\n\nexport function useAgentTheme(\n  agentId: string | null | undefined,\n  agentThemes?: Record<string, AgentInfo>,\n): AgentThemeResult {\n  return useMemo(() => {\n    if (!agentId) {\n      return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL }\n    }\n\n    const theme = agentThemes?.[agentId]\n    if (!theme) {\n      return { accent: DEFAULT_ACCENT, icon: null, label: agentId }\n    }\n\n    return {\n      accent: theme.accent ?? DEFAULT_ACCENT,\n      icon: theme.icon ?? null,\n      label: theme.label,\n    }\n  }, [agentId, agentThemes])\n}\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\nimport { useAgentTheme } from '../../hooks/useAgentTheme'\n\nexport type AgentAvatarProps = {\n  agentId?: string\n  agent?: AgentInfo\n  size?: 'sm' | 'md' | 'lg'\n  agentThemes?: Record<string, AgentInfo>\n  className?: string\n}\n\nconst sizeMap = {\n  sm: 'h-6 w-6 text-xs',\n  md: 'h-8 w-8 text-sm',\n  lg: 'h-10 w-10 text-base',\n} as const\n\nconst iconSizeMap = {\n  sm: 14,\n  md: 18,\n  lg: 22,\n} as const\n\nfunction AgentAvatar({ agentId, agent, size = 'md', agentThemes, className }: AgentAvatarProps) {\n  const resolvedId = agent?.id ?? agentId ?? null\n  const themes = agent ? { ...agentThemes, [agent.id]: agent } : agentThemes\n  const { accent, icon: Icon, label } = useAgentTheme(resolvedId, themes)\n\n  const initial = label.charAt(0).toUpperCase()\n\n  return (\n    <div\n      className={`inline-flex items-center justify-center rounded-full shrink-0 font-medium text-white ${sizeMap[size]} ${className ?? ''}`}\n      style={{ backgroundColor: accent }}\n      role=\"img\"\n      aria-label={`${label} avatar`}\n      data-testid=\"agent-avatar\"\n    >\n      {Icon ? (\n        <Icon size={iconSizeMap[size]} className=\"text-white\" />\n      ) : (\n        <span aria-hidden=\"true\">{initial}</span>\n      )}\n    </div>\n  )\n}\n\nexport { AgentAvatar }\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\n\nexport type AgentLabelProps = {\n  agent: AgentInfo\n  className?: string\n}\n\nfunction AgentLabel({ agent, className }: AgentLabelProps) {\n  const accent = agent.accent ?? '#6366f1'\n\n  return (\n    <span\n      className={`text-xs font-medium ${className ?? ''}`}\n      data-testid=\"agent-label\"\n    >\n      Answered by{' '}\n      <span style={{ color: accent }}>{agent.label}</span>\n    </span>\n  )\n}\n\nexport { AgentLabel }\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\nimport { AgentAvatar } from '../AgentAvatar'\n\nexport type AgentHandoffProps = {\n  from: AgentInfo\n  to: AgentInfo\n  className?: string\n}\n\nfunction AgentHandoff({ from, to, className }: AgentHandoffProps) {\n  return (\n    <div\n      className={`flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-surface ${className ?? ''}`}\n      data-testid=\"agent-handoff\"\n    >\n      <div className=\"flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300\">\n        <AgentAvatar agent={from} size=\"sm\" />\n        <span className=\"text-xs text-text-secondary\">{from.label}</span>\n      </div>\n\n      <span className=\"text-text-secondary text-xs\" aria-hidden=\"true\">{'\\u2192'}</span>\n\n      <div className=\"flex items-center gap-2 animate-in fade-in slide-in-from-right-2 duration-300\">\n        <AgentAvatar agent={to} size=\"sm\" />\n        <span className=\"text-xs text-text-secondary\">{to.label}</span>\n      </div>\n\n      <div className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        Handing off from {from.label} to {to.label}\n      </div>\n    </div>\n  )\n}\n\nexport { AgentHandoff }\n","import React from 'react'\n\nexport type RoutingIndicatorProps = {\n  from: string\n  to: string\n  reason?: string\n  className?: string\n}\n\nfunction RoutingIndicator({ from, to, reason, className }: RoutingIndicatorProps) {\n  return (\n    <div\n      className={`inline-flex items-center gap-1.5 rounded-md border border-border/50 bg-surface-secondary/50 px-2.5 py-1 font-mono text-[11px] text-text-secondary ${className ?? ''}`}\n      data-testid=\"routing-indicator\"\n    >\n      <span className=\"opacity-60\">Routed:</span>\n      <span>{from}</span>\n      <span className=\"opacity-40\" aria-hidden=\"true\">{'\\u2192'}</span>\n      <span>{to}</span>\n      {reason && (\n        <span className=\"opacity-50 ml-1\" title={reason}>\n          ({reason})\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { RoutingIndicator }\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/agent-identity/index.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { A as AgentInfo } from '../agent-BNSmiexZ.cjs';
+import 'react';
+
+type AgentAvatarProps = {
+    agentId?: string;
+    agent?: AgentInfo;
+    size?: 'sm' | 'md' | 'lg';
+    agentThemes?: Record<string, AgentInfo>;
+    className?: string;
+};
+declare function AgentAvatar({ agentId, agent, size, agentThemes, className }: AgentAvatarProps): react_jsx_runtime.JSX.Element;
+
+type AgentLabelProps = {
+    agent: AgentInfo;
+    className?: string;
+};
+declare function AgentLabel({ agent, className }: AgentLabelProps): react_jsx_runtime.JSX.Element;
+
+type AgentHandoffProps = {
+    from: AgentInfo;
+    to: AgentInfo;
+    className?: string;
+};
+declare function AgentHandoff({ from, to, className }: AgentHandoffProps): react_jsx_runtime.JSX.Element;
+
+type RoutingIndicatorProps = {
+    from: string;
+    to: string;
+    reason?: string;
+    className?: string;
+};
+declare function RoutingIndicator({ from, to, reason, className }: RoutingIndicatorProps): react_jsx_runtime.JSX.Element;
+
+export { AgentAvatar, type AgentAvatarProps, AgentHandoff, type AgentHandoffProps, AgentLabel, type AgentLabelProps, RoutingIndicator, type RoutingIndicatorProps };

package/dist/agent-identity/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { A as AgentInfo } from '../agent-BNSmiexZ.js';
+import 'react';
+
+type AgentAvatarProps = {
+    agentId?: string;
+    agent?: AgentInfo;
+    size?: 'sm' | 'md' | 'lg';
+    agentThemes?: Record<string, AgentInfo>;
+    className?: string;
+};
+declare function AgentAvatar({ agentId, agent, size, agentThemes, className }: AgentAvatarProps): react_jsx_runtime.JSX.Element;
+
+type AgentLabelProps = {
+    agent: AgentInfo;
+    className?: string;
+};
+declare function AgentLabel({ agent, className }: AgentLabelProps): react_jsx_runtime.JSX.Element;
+
+type AgentHandoffProps = {
+    from: AgentInfo;
+    to: AgentInfo;
+    className?: string;
+};
+declare function AgentHandoff({ from, to, className }: AgentHandoffProps): react_jsx_runtime.JSX.Element;
+
+type RoutingIndicatorProps = {
+    from: string;
+    to: string;
+    reason?: string;
+    className?: string;
+};
+declare function RoutingIndicator({ from, to, reason, className }: RoutingIndicatorProps): react_jsx_runtime.JSX.Element;
+
+export { AgentAvatar, type AgentAvatarProps, AgentHandoff, type AgentHandoffProps, AgentLabel, type AgentLabelProps, RoutingIndicator, type RoutingIndicatorProps };

package/dist/agent-identity/index.js

@@ -0,0 +1,127 @@
+// src/hooks/useAgentTheme.ts
+import { useMemo } from "react";
+var DEFAULT_ACCENT = "#6366f1";
+var DEFAULT_LABEL = "Agent";
+function useAgentTheme(agentId, agentThemes) {
+  return useMemo(() => {
+    if (!agentId) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL };
+    }
+    const theme = agentThemes?.[agentId];
+    if (!theme) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: agentId };
+    }
+    return {
+      accent: theme.accent ?? DEFAULT_ACCENT,
+      icon: theme.icon ?? null,
+      label: theme.label
+    };
+  }, [agentId, agentThemes]);
+}
+
+// src/agent-identity/AgentAvatar/AgentAvatar.tsx
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base"
+};
+var iconSizeMap = {
+  sm: 14,
+  md: 18,
+  lg: 22
+};
+function AgentAvatar({ agentId, agent, size = "md", agentThemes, className }) {
+  const resolvedId = agent?.id ?? agentId ?? null;
+  const themes = agent ? { ...agentThemes, [agent.id]: agent } : agentThemes;
+  const { accent, icon: Icon, label } = useAgentTheme(resolvedId, themes);
+  const initial = label.charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `inline-flex items-center justify-center rounded-full shrink-0 font-medium text-white ${sizeMap[size]} ${className ?? ""}`,
+      style: { backgroundColor: accent },
+      role: "img",
+      "aria-label": `${label} avatar`,
+      "data-testid": "agent-avatar",
+      children: Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSizeMap[size], className: "text-white" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initial })
+    }
+  );
+}
+
+// src/agent-identity/AgentLabel/AgentLabel.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AgentLabel({ agent, className }) {
+  const accent = agent.accent ?? "#6366f1";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `text-xs font-medium ${className ?? ""}`,
+      "data-testid": "agent-label",
+      children: [
+        "Answered by",
+        " ",
+        /* @__PURE__ */ jsx2("span", { style: { color: accent }, children: agent.label })
+      ]
+    }
+  );
+}
+
+// src/agent-identity/AgentHandoff/AgentHandoff.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AgentHandoff({ from, to, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-surface ${className ?? ""}`,
+      "data-testid": "agent-handoff",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300", children: [
+          /* @__PURE__ */ jsx3(AgentAvatar, { agent: from, size: "sm" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-xs text-text-secondary", children: from.label })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "text-text-secondary text-xs", "aria-hidden": "true", children: "\u2192" }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-right-2 duration-300", children: [
+          /* @__PURE__ */ jsx3(AgentAvatar, { agent: to, size: "sm" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-xs text-text-secondary", children: to.label })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "sr-only", role: "status", "aria-live": "polite", children: [
+          "Handing off from ",
+          from.label,
+          " to ",
+          to.label
+        ] })
+      ]
+    }
+  );
+}
+
+// src/agent-identity/RoutingIndicator/RoutingIndicator.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function RoutingIndicator({ from, to, reason, className }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-md border border-border/50 bg-surface-secondary/50 px-2.5 py-1 font-mono text-[11px] text-text-secondary ${className ?? ""}`,
+      "data-testid": "routing-indicator",
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "opacity-60", children: "Routed:" }),
+        /* @__PURE__ */ jsx4("span", { children: from }),
+        /* @__PURE__ */ jsx4("span", { className: "opacity-40", "aria-hidden": "true", children: "\u2192" }),
+        /* @__PURE__ */ jsx4("span", { children: to }),
+        reason && /* @__PURE__ */ jsxs3("span", { className: "opacity-50 ml-1", title: reason, children: [
+          "(",
+          reason,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AgentAvatar,
+  AgentHandoff,
+  AgentLabel,
+  RoutingIndicator
+};
+//# sourceMappingURL=index.js.map

package/dist/agent-identity/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useAgentTheme.ts","../../src/agent-identity/AgentAvatar/AgentAvatar.tsx","../../src/agent-identity/AgentLabel/AgentLabel.tsx","../../src/agent-identity/AgentHandoff/AgentHandoff.tsx","../../src/agent-identity/RoutingIndicator/RoutingIndicator.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport type { AgentInfo } from '../types/agent'\n\nexport interface AgentThemeResult {\n  accent: string\n  icon: AgentInfo['icon'] | null\n  label: string\n}\n\nconst DEFAULT_ACCENT = '#6366f1'\nconst DEFAULT_LABEL = 'Agent'\n\nexport function useAgentTheme(\n  agentId: string | null | undefined,\n  agentThemes?: Record<string, AgentInfo>,\n): AgentThemeResult {\n  return useMemo(() => {\n    if (!agentId) {\n      return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL }\n    }\n\n    const theme = agentThemes?.[agentId]\n    if (!theme) {\n      return { accent: DEFAULT_ACCENT, icon: null, label: agentId }\n    }\n\n    return {\n      accent: theme.accent ?? DEFAULT_ACCENT,\n      icon: theme.icon ?? null,\n      label: theme.label,\n    }\n  }, [agentId, agentThemes])\n}\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\nimport { useAgentTheme } from '../../hooks/useAgentTheme'\n\nexport type AgentAvatarProps = {\n  agentId?: string\n  agent?: AgentInfo\n  size?: 'sm' | 'md' | 'lg'\n  agentThemes?: Record<string, AgentInfo>\n  className?: string\n}\n\nconst sizeMap = {\n  sm: 'h-6 w-6 text-xs',\n  md: 'h-8 w-8 text-sm',\n  lg: 'h-10 w-10 text-base',\n} as const\n\nconst iconSizeMap = {\n  sm: 14,\n  md: 18,\n  lg: 22,\n} as const\n\nfunction AgentAvatar({ agentId, agent, size = 'md', agentThemes, className }: AgentAvatarProps) {\n  const resolvedId = agent?.id ?? agentId ?? null\n  const themes = agent ? { ...agentThemes, [agent.id]: agent } : agentThemes\n  const { accent, icon: Icon, label } = useAgentTheme(resolvedId, themes)\n\n  const initial = label.charAt(0).toUpperCase()\n\n  return (\n    <div\n      className={`inline-flex items-center justify-center rounded-full shrink-0 font-medium text-white ${sizeMap[size]} ${className ?? ''}`}\n      style={{ backgroundColor: accent }}\n      role=\"img\"\n      aria-label={`${label} avatar`}\n      data-testid=\"agent-avatar\"\n    >\n      {Icon ? (\n        <Icon size={iconSizeMap[size]} className=\"text-white\" />\n      ) : (\n        <span aria-hidden=\"true\">{initial}</span>\n      )}\n    </div>\n  )\n}\n\nexport { AgentAvatar }\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\n\nexport type AgentLabelProps = {\n  agent: AgentInfo\n  className?: string\n}\n\nfunction AgentLabel({ agent, className }: AgentLabelProps) {\n  const accent = agent.accent ?? '#6366f1'\n\n  return (\n    <span\n      className={`text-xs font-medium ${className ?? ''}`}\n      data-testid=\"agent-label\"\n    >\n      Answered by{' '}\n      <span style={{ color: accent }}>{agent.label}</span>\n    </span>\n  )\n}\n\nexport { AgentLabel }\n","import React from 'react'\nimport type { AgentInfo } from '../../types/agent'\nimport { AgentAvatar } from '../AgentAvatar'\n\nexport type AgentHandoffProps = {\n  from: AgentInfo\n  to: AgentInfo\n  className?: string\n}\n\nfunction AgentHandoff({ from, to, className }: AgentHandoffProps) {\n  return (\n    <div\n      className={`flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-surface ${className ?? ''}`}\n      data-testid=\"agent-handoff\"\n    >\n      <div className=\"flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300\">\n        <AgentAvatar agent={from} size=\"sm\" />\n        <span className=\"text-xs text-text-secondary\">{from.label}</span>\n      </div>\n\n      <span className=\"text-text-secondary text-xs\" aria-hidden=\"true\">{'\\u2192'}</span>\n\n      <div className=\"flex items-center gap-2 animate-in fade-in slide-in-from-right-2 duration-300\">\n        <AgentAvatar agent={to} size=\"sm\" />\n        <span className=\"text-xs text-text-secondary\">{to.label}</span>\n      </div>\n\n      <div className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        Handing off from {from.label} to {to.label}\n      </div>\n    </div>\n  )\n}\n\nexport { AgentHandoff }\n","import React from 'react'\n\nexport type RoutingIndicatorProps = {\n  from: string\n  to: string\n  reason?: string\n  className?: string\n}\n\nfunction RoutingIndicator({ from, to, reason, className }: RoutingIndicatorProps) {\n  return (\n    <div\n      className={`inline-flex items-center gap-1.5 rounded-md border border-border/50 bg-surface-secondary/50 px-2.5 py-1 font-mono text-[11px] text-text-secondary ${className ?? ''}`}\n      data-testid=\"routing-indicator\"\n    >\n      <span className=\"opacity-60\">Routed:</span>\n      <span>{from}</span>\n      <span className=\"opacity-40\" aria-hidden=\"true\">{'\\u2192'}</span>\n      <span>{to}</span>\n      {reason && (\n        <span className=\"opacity-50 ml-1\" title={reason}>\n          ({reason})\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { RoutingIndicator }\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs"]}