@mcp-b/react-components 0.5.6 → 0.5.7

package/dist/components/Activity.d.ts

@@ -40,6 +40,8 @@ interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className"
   className?: string;
   /** Header text. Defaults to "Working…". */
   label?: React.ReactNode;
+  /** Optional leading icon for the header. */
+  icon?: React.ReactNode;
 }
 /**
  * Clickable header line that toggles the activity log. The label shimmers
@@ -48,6 +50,7 @@ interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className"
 declare function ActivityTrigger({
   className,
   label,
+  icon,
   children,
   ref,
   ...props

package/dist/components/Activity.js

@@ -38,7 +38,7 @@ function Activity({ className, isStreaming = false, defaultOpen = false, ref, ..
 * Clickable header line that toggles the activity log. The label shimmers
 * while the parent Activity is streaming.
 */
-function ActivityTrigger({ className, label = "Working…", children, ref, ...props }) {
+function ActivityTrigger({ className, label = "Working…", icon, children, ref, ...props }) {
 	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
 		ref,
 		className: cx("activity__trigger", className),
@@ -51,14 +51,22 @@ function ActivityTrigger({ className, label = "Working…", children, ref, ...pr
 		className: cx("activity__trigger", className),
 		...props,
 		unstyled: true,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "activity__trigger-label",
-			children: label
-		}), /* @__PURE__ */ jsx("span", {
-			className: "activity__trigger-icon",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-		})]
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "activity__item-icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__trigger-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__trigger-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
 	});
 }
 /** The collapsible log of ActivityItem children. */

package/dist/components/ThinkChat.js

@@ -1,3 +1,4 @@
+import { M as TerminalIcon, N as WarningIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, k as SearchIcon, m as FileIcon, v as InfoIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger } from "./Activity.js";
 import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
 import { AgentChat } from "./AgentChat.js";
@@ -171,6 +172,142 @@ function summarizeToolInput(input) {
 	}
 	return null;
 }
+const HTTP_URL_PATTERN = /https?:\/\/[^\s"'<>)}\]]+/i;
+function firstHttpUrl(value) {
+	const text = typeof value === "string" ? value : JSON.stringify(value) ?? "";
+	const raw = HTTP_URL_PATTERN.exec(text)?.[0]?.replace(/[.,;:!?]+$/, "");
+	if (!raw) return null;
+	try {
+		return new URL(raw).href;
+	} catch {
+		return null;
+	}
+}
+function ActivityFavicon({ url }) {
+	const src = faviconHref(url);
+	const [failed, setFailed] = React.useState(false);
+	React.useEffect(() => setFailed(false), [src]);
+	if (!src || failed) return /* @__PURE__ */ jsx(LinkIcon, {});
+	return /* @__PURE__ */ jsx("img", {
+		className: "activity__favicon",
+		src,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		onError: () => setFailed(true)
+	});
+}
+function faviconHref(url) {
+	try {
+		return new URL("/favicon.ico", url).href;
+	} catch {
+		return null;
+	}
+}
+function ActivityKindIcon({ kind }) {
+	switch (kind) {
+		case "thought": return /* @__PURE__ */ jsx(InfoIcon, {});
+		case "read": return /* @__PURE__ */ jsx(FileIcon, {});
+		case "edit": return /* @__PURE__ */ jsx(PencilIcon, {});
+		case "search": return /* @__PURE__ */ jsx(SearchIcon, {});
+		case "web": return /* @__PURE__ */ jsx(LinkIcon, {});
+		case "command": return /* @__PURE__ */ jsx(TerminalIcon, {});
+		case "browser": return /* @__PURE__ */ jsx(MonitorIcon, {});
+		case "tool": return /* @__PURE__ */ jsx(WrenchIcon, {});
+	}
+}
+function genericToolLabels(name, hasUrl) {
+	const normalized = name.toLowerCase();
+	if (normalized.includes("grep") || normalized.includes("find") || normalized.includes("code")) return {
+		working: "Searching code",
+		done: "Searched code",
+		failed: "Code search failed",
+		summary: "searched code",
+		icon: "search"
+	};
+	if (normalized.includes("search") || normalized.includes("web") || normalized.includes("browser") || normalized.includes("google")) return {
+		working: "Searching the web",
+		done: "Searched the web",
+		failed: "Web search failed",
+		summary: "searched the web",
+		icon: "web"
+	};
+	if (hasUrl || normalized.includes("fetch") || normalized.includes("http") || normalized.includes("url")) return {
+		working: "Reading a URL",
+		done: "Read a URL",
+		failed: "URL read failed",
+		summary: "read a URL",
+		icon: "web"
+	};
+	if (normalized.includes("edit") || normalized.includes("write") || normalized.includes("delete") || normalized.includes("patch") || normalized.includes("apply") || normalized.includes("create") || normalized.includes("update")) return {
+		working: "Editing files",
+		done: "Edited files",
+		failed: "Edit failed",
+		summary: "edited files",
+		icon: "edit"
+	};
+	if (normalized.includes("exec") || normalized.includes("bash") || normalized.includes("shell") || normalized.includes("terminal") || normalized.includes("command")) return {
+		working: "Running a command",
+		done: "Ran a command",
+		failed: "Command failed",
+		summary: "ran a command",
+		icon: "command"
+	};
+	if (normalized.includes("read") || normalized.includes("open") || normalized.includes("list") || normalized.includes("file")) return {
+		working: "Reading files",
+		done: "Read files",
+		failed: "Read failed",
+		summary: "read files",
+		icon: "read"
+	};
+	return {
+		working: "Using a tool",
+		done: "Used a tool",
+		failed: "Tool failed",
+		summary: "used a tool",
+		icon: "tool"
+	};
+}
+function describeGenericToolPart(part) {
+	const labels = genericToolLabels(getToolName(part), activityPartUrl(part) !== null);
+	const label = isPartFailed(part) ? labels.failed : isPartWorking(part) ? labels.working : labels.done;
+	const detail = summarizeToolInput(part.input);
+	return detail ? `${label} · ${detail}` : label;
+}
+function activityPartUrl(part) {
+	if (isFetchToolPart(part)) return firstHttpUrl(part.input?.url ?? part.input?.path);
+	if (isBrowserToolPart(part) && part.type !== "tool-browser_execute") return firstHttpUrl(part.input?.url);
+	if (isToolUIPart(part) && !isExecuteToolPart(part)) return firstHttpUrl(part.input) ?? (part.state === "output-available" ? firstHttpUrl(part.output) : null);
+	return null;
+}
+function activityPartIconKind(part) {
+	if (isReasoningUIPart(part)) return "thought";
+	if (isWorkspaceToolPart(part)) switch (part.type) {
+		case "tool-read":
+		case "tool-list": return "read";
+		case "tool-write":
+		case "tool-edit":
+		case "tool-delete": return "edit";
+		case "tool-find":
+		case "tool-grep": return "search";
+		case "tool-bash": return "command";
+	}
+	if (isSkillToolPart(part)) return "tool";
+	if (isFetchToolPart(part)) return "web";
+	if (isBrowserToolPart(part)) return part.type === "tool-browser_execute" ? "browser" : "web";
+	if (isExecuteToolPart(part)) return "command";
+	if (isToolUIPart(part)) return genericToolLabels(getToolName(part), activityPartUrl(part) !== null).icon;
+	return "tool";
+}
+function activityPartIcon(part) {
+	const url = activityPartUrl(part);
+	return url ? /* @__PURE__ */ jsx(ActivityFavicon, { url }) : /* @__PURE__ */ jsx(ActivityKindIcon, { kind: activityPartIconKind(part) });
+}
+function activitySummaryIcon(parts) {
+	if (parts.find((part) => isToolUIPart(part) && isPartFailed(part))) return /* @__PURE__ */ jsx(WarningIcon, {});
+	const representative = parts.find((part) => activityPartIconKind(part) === "edit") ?? parts.find((part) => activityPartUrl(part)) ?? parts.find((part) => describeThinkChatActivityPart(part));
+	return representative ? activityPartIcon(representative) : /* @__PURE__ */ jsx(ActivityKindIcon, { kind: "tool" });
+}
 /**
 * One-line natural-language label for an activity part ("Ran vp test",
 * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
@@ -192,12 +329,7 @@ function describeThinkChatActivityPart(part, toolRenderers) {
 	if (isFetchToolPart(part)) return describeFetchToolPart(part);
 	if (isBrowserToolPart(part)) return describeBrowserToolPart(part);
 	if (isExecuteToolPart(part)) return describeExecuteToolPart(part);
-	if (isToolUIPart(part)) {
-		const name = getToolName(part);
-		const verb = isPartFailed(part) ? `${name} failed` : isPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
-		const detail = summarizeToolInput(part.input);
-		return detail ? `${verb} · ${detail}` : verb;
-	}
+	if (isToolUIPart(part)) return describeGenericToolPart(part);
 	return null;
 }
 function basename(path) {
@@ -283,7 +415,7 @@ function describeFetchToolPart(part) {
 }
 function summarizeActivitySteps(parts) {
 	const byTool = /* @__PURE__ */ new Map();
-	const otherTools = /* @__PURE__ */ new Set();
+	const genericSegments = /* @__PURE__ */ new Set();
 	const skillNames = /* @__PURE__ */ new Set();
 	let thoughts = 0;
 	let skillParts = 0;
@@ -300,7 +432,7 @@ function summarizeActivitySteps(parts) {
 	} else if (isFetchToolPart(part)) fetches++;
 	else if (isBrowserToolPart(part)) browses++;
 	else if (isExecuteToolPart(part)) codeRuns++;
-	else if (isToolUIPart(part)) otherTools.add(getToolName(part));
+	else if (isToolUIPart(part)) genericSegments.add(genericToolLabels(getToolName(part), activityPartUrl(part) !== null).summary);
 	const count = (name) => byTool.get(name) ?? 0;
 	const files = (n) => n === 1 ? "a file" : `${n} files`;
 	const reads = count("read");
@@ -319,7 +451,15 @@ function summarizeActivitySteps(parts) {
 	if (browses > 0) segments.push("used the browser");
 	if (codeRuns > 0) segments.push("ran code");
 	if (commands > 0) segments.push(commands === 1 ? "ran a command" : `ran ${commands} commands`);
-	for (const tool of otherTools) segments.push(`used ${tool}`);
+	for (const segment of [
+		"edited files",
+		"searched code",
+		"searched the web",
+		"read a URL",
+		"ran a command",
+		"read files",
+		"used a tool"
+	]) if (genericSegments.has(segment)) segments.push(segment);
 	if (segments.length === 0) return "Worked";
 	const top = segments.slice(0, 3);
 	const joined = top.length === 1 ? top[0] : `${top.slice(0, -1).join(", ")} and ${top.at(-1)}`;
@@ -349,7 +489,10 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	return /* @__PURE__ */ jsxs(Activity, {
 		isStreaming: streaming,
 		defaultOpen,
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: streaming && latest ? latest.text : settledLabel }), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			icon: streaming && latest ? activityPartIcon(latest.part) : activitySummaryIcon(parts),
+			label: streaming && latest ? latest.text : settledLabel
+		}), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
 			text: step.text,
 			part: step.part,
 			toolRenderers
@@ -357,39 +500,53 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	});
 }
 function ThinkChatActivityStep({ text, part, toolRenderers }) {
+	const icon = activityPartIcon(part);
 	if (isToolUIPart(part)) {
 		const customPanel = toolRenderers?.[getToolName(part)]?.panel?.(part);
-		if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, { children: text });
+		if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, {
+			icon,
+			children: text
+		});
 		if (customPanel !== void 0) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 			label: text,
+			icon,
 			children: customPanel
 		});
 	}
 	if (isReasoningUIPart(part) && part.text.trim()) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ActivityText, { children: part.text })
 	});
 	if (isWorkspaceToolPart(part) && part.type !== "tool-delete") return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatWorkspacePanel, { part })
 	});
 	if (isSkillToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
 	});
 	if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatFetchPanel, { part })
 	});
 	if (isBrowserToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
 	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
 	});
-	return /* @__PURE__ */ jsx(ActivityItem, { children: text });
+	return /* @__PURE__ */ jsx(ActivityItem, {
+		icon,
+		children: text
+	});
 }
 function renderDeniedPanel(label, reason) {
 	return /* @__PURE__ */ jsx(ActivityPanel, {

package/dist/styles/activity.css

@@ -342,6 +342,15 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.activity__favicon {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--sigvelo-radius-xs);
+  background-color: var(--sigvelo-color-surface);
+  object-fit: contain;
+}
+
 .activity__item-text {
   min-width: 0;
   overflow-wrap: anywhere;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.5.6"
+    "@mcp-b/design-tokens": "0.5.7"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",