@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/ThinkChatToolParts.js

@@ -1,6 +1,36 @@
-import { getToolPartState } from "@cloudflare/think/react";
 import { getStaticToolName, getToolName, isReasoningUIPart, isStaticToolUIPart, isToolUIPart } from "ai";
 //#region src/components/ThinkChatToolParts.ts
+/** React-free equivalent of Think's UI-state mapping. Kept local so activity
+* summaries can run in workers and extension background contexts. */
+function getToolPartState(part) {
+	if (!("state" in part)) return "loading";
+	switch (part.state) {
+		case "input-streaming": return "streaming";
+		case "approval-requested": return "waiting-approval";
+		case "approval-responded": return "approved";
+		case "output-available": return "complete";
+		case "output-error": return "error";
+		case "output-denied": return "denied";
+		default: return "loading";
+	}
+}
+/** Prefer AI SDK's provider/tool-authored title over its transport-facing key. */
+function getToolDisplayName(part) {
+	return part.title ?? getToolName(part);
+}
+/**
+* Whole-part supplement to Think's simplified state mapping. Think maps every
+* `output-available` part to complete, while AI SDK preliminary outputs remain
+* in flight until a non-preliminary result arrives.
+*/
+function isToolPartWorking(part) {
+	const state = getToolPartState(part);
+	return state === "loading" || state === "streaming" || state === "waiting-approval" || state === "approved" || part.state === "output-available" && part.preliminary === true;
+}
+function isToolPartFailed(part) {
+	const state = getToolPartState(part);
+	return state === "error" || state === "denied";
+}
 const WORKSPACE_TOOL_NAMES = /* @__PURE__ */ new Set([
 	"read",
 	"write",
@@ -22,6 +52,22 @@ const SKILL_TOOL_NAMES = /* @__PURE__ */ new Set([
 function isSkillToolPart(part) {
 	return isStaticToolUIPart(part) && SKILL_TOOL_NAMES.has(getStaticToolName(part));
 }
+const SESSION_CONTEXT_TOOL_NAMES = /* @__PURE__ */ new Set([
+	"set_context",
+	"load_context",
+	"unload_context",
+	"search_context",
+	"session_search"
+]);
+function isSessionContextToolPart(part) {
+	return isStaticToolUIPart(part) && SESSION_CONTEXT_TOOL_NAMES.has(getStaticToolName(part));
+}
+/** Session tools report provider failures as successful string outputs so the
+model can recover. Treat that upstream `Error:` envelope as failed UI while
+preserving the recorded tool state and output verbatim. */
+function isSessionContextToolFailure(part) {
+	return isPartFailed(part) || part.state === "output-available" && typeof part.output === "string" && part.output.startsWith("Error:");
+}
 function isFetchToolPart(part) {
 	return isStaticToolUIPart(part) && getStaticToolName(part).startsWith("fetch_");
 }
@@ -45,22 +91,18 @@ function isThinkChatActivityPart(part, excludeTools) {
 	if (isToolUIPart(part) && excludeTools?.has(getToolName(part))) return false;
 	return part.type === "step-start" || isReasoningUIPart(part) || isToolUIPart(part);
 }
-/** In-flight: the stream opened this part but hasn't delivered its result yet. */
+/** In-flight: awaiting input, approval continuation, or a final tool result. */
 function isPartWorking(part) {
 	if (isReasoningUIPart(part)) return part.state === "streaming";
-	if (isToolUIPart(part)) {
-		const state = getToolPartState(part);
-		return state === "loading" || state === "streaming" || state === "waiting-approval";
-	}
+	if (isToolUIPart(part)) return isToolPartWorking(part);
 	return false;
 }
 /** Errored or denied — upstream's simplified tool-part state vocabulary. */
 function isPartFailed(part) {
-	const state = getToolPartState(part);
-	return state === "error" || state === "denied";
+	return isToolUIPart(part) && isToolPartFailed(part);
 }
 function displayUrl(url) {
 	return url ? url.replace(/^https?:\/\//, "") : "";
 }
 //#endregion
-export { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };
+export { displayUrl, getToolDisplayName, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isToolPartFailed, isToolPartWorking, isWorkspaceToolPart };

package/dist/components/ThinkExecutionDetail.d.ts

@@ -0,0 +1,20 @@
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import * as React from "react";
+
+//#region src/components/ThinkExecutionDetail.d.ts
+interface ThinkExecutionDetailProps extends React.HTMLAttributes<HTMLElement> {
+  run: ThinkExecutionRun | null;
+  emptyState?: React.ReactNode;
+}
+/** Native Think submission or Agents Workflow detail, reusable outside the execution workbench. */
+declare function ThinkExecutionDetail({
+  className,
+  emptyState,
+  ref,
+  run,
+  ...props
+}: ThinkExecutionDetailProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkExecutionDetail, ThinkExecutionDetailProps };

package/dist/components/ThinkExecutionDetail.js

@@ -0,0 +1,80 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { G as TerminalIcon, L as RefreshIcon, S as InfoIcon, Y as XIcon, o as CheckIcon, t as ArrowDownIcon, v as FileIcon } from "../icons-CpfUer49.js";
+import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkExecutionDetail.tsx
+function formatJson(value) {
+	return JSON.stringify(value, null, 2);
+}
+/** Native Think submission or Agents Workflow detail, reusable outside the execution workbench. */
+function ThinkExecutionDetail({ className, emptyState = "Select a run to view its activity.", ref, run, ...props }) {
+	if (!run) return /* @__PURE__ */ jsx("section", {
+		ref,
+		className: cx("think-execution-detail", "think-execution-workbench__empty-detail", className),
+		role: "status",
+		...props,
+		children: /* @__PURE__ */ jsx("p", { children: emptyState })
+	});
+	const id = getThinkExecutionRunId(run);
+	const progressedAt = getThinkExecutionRunProgressedAt(run);
+	const error = getThinkExecutionRunError(run);
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: cx("think-execution-detail", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "think-execution-workbench__detail-header",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: getThinkExecutionRunTitle(run) }), !isThinkSubmissionRun(run) ? /* @__PURE__ */ jsx("code", { children: id }) : null] }), /* @__PURE__ */ jsxs("div", {
+				className: "think-execution-workbench__detail-status",
+				children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, {
+					run,
+					className: "think-execution-workbench__icon"
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: formatThinkExecutionStatus(getThinkExecutionRunStatus(run)) }), /* @__PURE__ */ jsx("span", { children: formatThinkExecutionRunProgress(run) })] })]
+			})]
+		}), /* @__PURE__ */ jsxs(Activity, {
+			defaultOpen: true,
+			children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+				icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+				label: "Activity"
+			}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
+				/* @__PURE__ */ jsx(ActivityItem, {
+					icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+					children: `Created ${formatThinkExecutionTimestamp(run.createdAt)}`
+				}),
+				progressedAt ? /* @__PURE__ */ jsx(ActivityItem, {
+					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+					children: `${getThinkExecutionRunProgressedLabel(run)} ${formatThinkExecutionTimestamp(progressedAt)}`
+				}) : null,
+				run.completedAt ? /* @__PURE__ */ jsx(ActivityItem, {
+					icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+					children: `Finished ${formatThinkExecutionTimestamp(run.completedAt)}`
+				}) : null,
+				error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+					icon: /* @__PURE__ */ jsx(XIcon, {}),
+					label: "Failure",
+					children: /* @__PURE__ */ jsx(ActivityPanel, {
+						label: "Error",
+						text: error,
+						status: "error",
+						error: true
+					})
+				}) : null,
+				run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+					icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+					label: "Metadata",
+					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.metadata) })
+				}) : null,
+				/* @__PURE__ */ jsx(ActivityItemGroup, {
+					icon: /* @__PURE__ */ jsx(FileIcon, {}),
+					label: "Raw record",
+					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run) })
+				})
+			] })]
+		})]
+	});
+}
+//#endregion
+export { ThinkExecutionDetail };

package/dist/components/ThinkExecutionRun.d.ts

@@ -0,0 +1,2 @@
+import { _ as isThinkSubmissionRun, a as formatThinkExecutionStatus, c as getThinkExecutionRunError, d as getThinkExecutionRunProgressedLabel, f as getThinkExecutionRunStatus, g as isSameThinkExecutionRun, h as getThinkExecutionRunTitle, i as formatThinkExecutionShortTimestamp, l as getThinkExecutionRunId, m as getThinkExecutionRunSubtitle, n as ThinkExecutionStatusTone, o as formatThinkExecutionTimestamp, p as getThinkExecutionRunStatusTone, r as formatThinkExecutionRunProgress, s as getThinkExecutionRunAccessibleName, t as ThinkExecutionRun, u as getThinkExecutionRunProgressedAt } from "../ThinkExecutionRun-ChhWhOoU.js";
+export { ThinkExecutionRun, ThinkExecutionStatusTone, formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun };

package/dist/components/ThinkExecutionRun.js

@@ -0,0 +1,72 @@
+//#region src/components/ThinkExecutionRun.ts
+/** Narrows the direct upstream execution union without wrapping either record. */
+function isThinkSubmissionRun(run) {
+	return "submissionId" in run;
+}
+function getThinkExecutionRunId(run) {
+	return isThinkSubmissionRun(run) ? run.submissionId : run.workflowId;
+}
+function getThinkExecutionRunTitle(run) {
+	return isThinkSubmissionRun(run) ? run.submissionId : run.workflowName;
+}
+function getThinkExecutionRunSubtitle(run) {
+	return isThinkSubmissionRun(run) ? void 0 : run.workflowId;
+}
+function getThinkExecutionRunProgressedAt(run) {
+	return isThinkSubmissionRun(run) ? run.startedAt : run.updatedAt;
+}
+function getThinkExecutionRunProgressedLabel(run) {
+	return isThinkSubmissionRun(run) ? "Started" : "Updated";
+}
+/**
+* WorkflowInfo.status resolves through the Workers-only InstanceStatus ambient
+* type, so browser consumers format the whole upstream record's runtime value
+* instead of exporting a local mirror of that union.
+*/
+function getThinkExecutionRunStatus(run) {
+	return String(run.status);
+}
+function getThinkExecutionRunStatusTone(run) {
+	const status = getThinkExecutionRunStatus(run);
+	if (status === "completed" || status === "complete") return "success";
+	if (status === "error" || status === "errored" || status === "terminated") return "danger";
+	if (status === "aborted" || status === "skipped" || status === "paused" || status === "waiting") return "warning";
+	if (status === "running" || status === "pending" || status === "queued" || status === "waitingForPause" || status === "rollingBack") return "primary";
+	return "neutral";
+}
+function formatThinkExecutionStatus(status) {
+	const words = status.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
+	return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function formatThinkExecutionTimestamp(value, fallback = "Not recorded") {
+	if (value == null) return fallback;
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date.toLocaleString();
+}
+function formatThinkExecutionShortTimestamp(value, fallback = "Not recorded") {
+	if (value == null) return fallback;
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date.toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+function formatThinkExecutionRunProgress(run) {
+	const progressedAt = getThinkExecutionRunProgressedAt(run);
+	return `${progressedAt ? getThinkExecutionRunProgressedLabel(run) : "Created"} ${formatThinkExecutionShortTimestamp(progressedAt ?? run.createdAt)}`;
+}
+function getThinkExecutionRunAccessibleName(run) {
+	const subtitle = getThinkExecutionRunSubtitle(run);
+	return `${getThinkExecutionRunTitle(run)}${subtitle ? ` ${subtitle}` : ""}. ${formatThinkExecutionStatus(getThinkExecutionRunStatus(run))}. ${formatThinkExecutionRunProgress(run)}`;
+}
+function getThinkExecutionRunError(run) {
+	return isThinkSubmissionRun(run) ? run.error : run.error ? `${run.error.name}: ${run.error.message}` : void 0;
+}
+function isSameThinkExecutionRun(first, second) {
+	if (!first || isThinkSubmissionRun(first) !== isThinkSubmissionRun(second)) return false;
+	return getThinkExecutionRunId(first) === getThinkExecutionRunId(second);
+}
+//#endregion
+export { formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun };

package/dist/components/ThinkExecutionStatus.d.ts

@@ -0,0 +1,22 @@
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import * as React from "react";
+
+//#region src/components/ThinkExecutionStatus.d.ts
+interface ThinkExecutionStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Whole upstream Think submission or Agents workflow record. */
+  run: ThinkExecutionRun;
+  /** Accessible status label; derived from the run when omitted. */
+  label?: string;
+}
+/** Shared status icon for whole upstream Think submission and Agents workflow records. */
+declare function ThinkExecutionStatus({
+  className,
+  label,
+  run,
+  ref,
+  ...props
+}: ThinkExecutionStatusProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkExecutionStatus, ThinkExecutionStatusProps };

package/dist/components/ThinkExecutionStatus.js

@@ -0,0 +1,36 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon, M as PauseIcon, S as InfoIcon, Y as XIcon, o as CheckIcon } from "../icons-CpfUer49.js";
+import { Tooltip } from "./Tooltip.js";
+import { formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone } from "./ThinkExecutionRun.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkExecutionStatus.tsx
+function statusIcon(tone) {
+	if (tone === "success") return /* @__PURE__ */ jsx(CheckIcon, {});
+	if (tone === "danger") return /* @__PURE__ */ jsx(XIcon, {});
+	if (tone === "warning") return /* @__PURE__ */ jsx(PauseIcon, {});
+	if (tone === "primary") return /* @__PURE__ */ jsx(SpinnerIcon, {});
+	return /* @__PURE__ */ jsx(InfoIcon, {});
+}
+/** Shared status icon for whole upstream Think submission and Agents workflow records. */
+function ThinkExecutionStatus({ className, label, run, ref, ...props }) {
+	const status = getThinkExecutionRunStatus(run);
+	const tone = getThinkExecutionRunStatusTone(run);
+	const accessibleLabel = label ?? `Status: ${formatThinkExecutionStatus(status)}`;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-label": accessibleLabel,
+		className: cx("think-execution-status", className),
+		"data-status": status,
+		"data-tone": tone,
+		role: "img",
+		...props,
+		children: statusIcon(tone)
+	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: accessibleLabel })
+	}) })] });
+}
+//#endregion
+export { ThinkExecutionStatus };

package/dist/components/ThinkExecutionWorkbench.d.ts

@@ -1,3 +1,4 @@
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import * as React from "react";
 import { Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
@@ -9,6 +10,10 @@ interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDiv
   title?: React.ReactNode;
   backButton?: React.ReactNode;
   pageSize?: number;
+  /** Whole native execution selected by a parent-owned route or product record. */
+  selectedRun?: ThinkExecutionRun | null;
+  /** Receives the fully inspected native execution after a user selects a row. */
+  onSelectedRunChange?: (run: ThinkExecutionRun) => void;
 }
 /**
  * Unified execution history for native Think submissions and Agents workflows.
@@ -18,8 +23,10 @@ interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDiv
 declare function ThinkExecutionWorkbench({
   backButton,
   className,
+  onSelectedRunChange,
   pageSize,
   ref,
+  selectedRun: controlledSelectedRun,
   source,
   title,
   ...props