@mcp-b/react-components 0.46.7 → 0.48.0

package/dist/components/agents-sdk/WorkspaceCorrespondence.js

@@ -0,0 +1,429 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { S as FileIcon, d as CheckIcon } from "../../icons-CeGfXO21.js";
+import { Button } from "../foundations/Button.js";
+import { Field } from "../foundations/Field.js";
+import { Textarea } from "../foundations/Textarea.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
+import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "../foundations/Card.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { Input } from "../foundations/Input.js";
+import { EmailMessageCard, SlackMessageCard } from "../ai-sdk/ConnectedAppCards.js";
+import { i as WorkspaceDeleteControl, r as httpUrl, t as FaviconMark } from "../../workspace-assets-GqsCYxqT.js";
+import * as React from "react";
+import { createElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { hashKey, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/components/agents-sdk/WorkspaceCorrespondence.tsx
+const SAVE_DEBOUNCE_MS = 400;
+const SEND_BLOCKED_MESSAGE = "Your edit has not saved, so nothing was sent. Retry the save first.";
+const FILE_MISSING_MESSAGE = "The file is no longer in the workspace.";
+const SAVE_UNAVAILABLE_MESSAGE = "Saving is no longer available.";
+const SEND_UNAVAILABLE_MESSAGE = "Sending is no longer available.";
+function fieldValue(fields, name) {
+	return fields.find((field) => field.name === name)?.value;
+}
+function replaceFields(fields, values) {
+	const remaining = new Map(Object.entries(values));
+	const next = fields.map((field) => {
+		if (!remaining.has(field.name)) return field;
+		const value = remaining.get(field.name) ?? "";
+		remaining.delete(field.name);
+		return {
+			...field,
+			value
+		};
+	});
+	for (const [name, value] of remaining) {
+		if (value === void 0 || value === "") continue;
+		next.push({
+			name,
+			label: name.replace(/[-_]+/gu, " ").replace(/\b\w/gu, (letter) => letter.toUpperCase()),
+			value
+		});
+	}
+	return next;
+}
+function displayKind(kind) {
+	return kind.trim().split(/[-_\s]+/u).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+}
+/**
+* File-level header controls shared by every channel presentation, so the rich
+* email and Slack cards carry the same Open and Delete affordances the generic
+* card has instead of dropping them.
+*/
+function CorrespondenceHeaderActions({ kind, path, onDelete, onOpen }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [onOpen ? /* @__PURE__ */ jsx(IconButton, {
+		label: `Open ${kind}`,
+		tooltip: path,
+		variant: "ghost",
+		color: "neutral",
+		onClick: onOpen,
+		children: /* @__PURE__ */ jsx(FileIcon, {})
+	}) : null, onDelete ? /* @__PURE__ */ jsx(WorkspaceDeleteControl, {
+		name: `${kind} draft`,
+		onDelete
+	}) : null] });
+}
+/**
+* Generic reviewed outbound message used after the public component has
+* selected richer channel-specific presentation where one exists.
+*/
+function GenericWorkspaceCorrespondenceCard({ className, body, fields, kind, path, icon, saveState, state = "draft", onChange, onDelete, onOpen, onSend, ref, ...props }) {
+	const titleId = React.useId();
+	const fieldId = React.useId();
+	const editing = onChange != null;
+	const [busy, setBusy] = React.useState(false);
+	const [errorMessage, setErrorMessage] = React.useState("");
+	const draft = {
+		fields,
+		body
+	};
+	const ariaLabel = props["aria-label"];
+	const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel ? void 0 : titleId);
+	const saveBlocked = saveState !== void 0;
+	const saveErrorMessage = saveState?.status === "error" ? saveState.message : "";
+	const send = async () => {
+		if (!onSend || busy) return;
+		setBusy(true);
+		setErrorMessage("");
+		try {
+			await onSend();
+		} catch (error) {
+			setErrorMessage(error instanceof Error && error.message.trim() ? error.message : "The action could not be completed. Try again.");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Card, {
+		...props,
+		ref,
+		role: props.role ?? "article",
+		"aria-labelledby": ariaLabelledBy,
+		"data-slot": "workspace-correspondence-card",
+		"data-state": state,
+		size: "sm",
+		className: cx("connected-app-card", className),
+		children: [
+			/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs(CardTitle, {
+				id: titleId,
+				className: "connected-app-card__title",
+				render: /* @__PURE__ */ jsx("h3", {}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "connected-app-card__icon",
+					"aria-hidden": "true",
+					children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
+				}), displayKind(kind)]
+			}), state === "sent" || onOpen || onDelete ? /* @__PURE__ */ jsxs(CardAction, {
+				className: "sigvelo-cluster",
+				children: [state === "sent" ? /* @__PURE__ */ jsxs("span", {
+					className: "connected-app-card__status",
+					"data-state": "sent",
+					children: [/* @__PURE__ */ jsx(CheckIcon, { size: 14 }), "Sent"]
+				}) : null, /* @__PURE__ */ jsx(CorrespondenceHeaderActions, {
+					kind,
+					path,
+					onDelete,
+					onOpen
+				})]
+			}) : null] }),
+			/* @__PURE__ */ jsxs(CardContent, { children: [
+				fields.length > 0 ? /* @__PURE__ */ jsx(DescriptionList.Root, {
+					align: "start",
+					variant: "divided",
+					children: fields.map((field) => {
+						const inputId = `${fieldId}-${field.name}`;
+						const href = httpUrl(field.value);
+						return /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsxs(DescriptionList.Term, { children: [href ? /* @__PURE__ */ jsx(FaviconMark, { href }) : null, editing ? /* @__PURE__ */ jsx("label", {
+							htmlFor: inputId,
+							children: field.label
+						}) : field.label] }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: editing ? /* @__PURE__ */ jsx(Input, {
+							id: inputId,
+							name: field.name,
+							type: href ? "url" : void 0,
+							value: field.value,
+							autoComplete: "off",
+							onChange: (event) => onChange({
+								...draft,
+								fields: fields.map((item) => item.name === field.name ? {
+									...item,
+									value: event.currentTarget.value
+								} : item)
+							})
+						}) : field.value })] }, field.name);
+					})
+				}) : null,
+				editing ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: "Message" }), /* @__PURE__ */ jsx(Field.Control, {
+					render: /* @__PURE__ */ jsx(Textarea, {
+						name: "body",
+						rows: 4,
+						resize: "vertical",
+						autoComplete: "off"
+					}),
+					value: body,
+					onChange: (event) => onChange({
+						...draft,
+						body: event.currentTarget.value
+					})
+				})] }) : body ? /* @__PURE__ */ jsx("p", {
+					className: "connected-app-card__body",
+					children: body
+				}) : null,
+				saveErrorMessage ? /* @__PURE__ */ jsxs("div", {
+					className: "connected-app-card__save-error",
+					children: [/* @__PURE__ */ jsx(Field.Errors, { errors: [saveErrorMessage] }), saveState?.status === "error" && saveState.onRetry ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						color: "neutral",
+						onClick: saveState.onRetry,
+						children: "Retry save"
+					}) : null]
+				}) : null,
+				errorMessage ? /* @__PURE__ */ jsx(Field.Errors, { errors: [errorMessage] }) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "sigvelo-visually-hidden",
+					role: "status",
+					"aria-atomic": "true",
+					children: saveErrorMessage || errorMessage || (saveState?.status === "saving" ? "Saving" : busy ? "Submitting" : "")
+				})
+			] }),
+			onSend ? /* @__PURE__ */ jsx(CardFooter, {
+				className: "connected-app-card__footer",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					disabled: busy || saveBlocked,
+					onClick: () => void send(),
+					children: "Send"
+				})
+			}) : null
+		]
+	});
+}
+/**
+* Reviewed workspace correspondence. The host passes one normalized file
+* shape; this component owns channel-specific presentation, the sent
+* snapshot, and falls back to the generic card for kinds without a richer
+* design-system surface.
+*/
+function WorkspaceCorrespondenceCard({ body, fields, kind, path, icon, saveState, state = "draft", onChange, onDelete, onOpen, onSend, ref, ...props }) {
+	const normalizedKind = kind.trim().toLowerCase();
+	const settled = state === "sent";
+	const change = settled ? void 0 : onChange;
+	const send = settled ? void 0 : onSend;
+	const headerActions = /* @__PURE__ */ jsx(CorrespondenceHeaderActions, {
+		kind,
+		path,
+		onDelete,
+		onOpen
+	});
+	if (normalizedKind === "email") {
+		const draft = {
+			from: fieldValue(fields, "from"),
+			to: fieldValue(fields, "to"),
+			subject: fieldValue(fields, "subject") ?? "",
+			body
+		};
+		return /* @__PURE__ */ jsx(EmailMessageCard, {
+			...props,
+			...draft,
+			ref,
+			icon,
+			headerActions,
+			state: settled ? "sent" : "pending",
+			saveState: settled ? void 0 : saveState,
+			onChange: change ? (next) => {
+				change({
+					fields: replaceFields(fields, {
+						from: next.from,
+						to: next.to,
+						subject: next.subject
+					}),
+					body: next.body ?? ""
+				});
+			} : void 0,
+			onSend: send
+		});
+	}
+	if (normalizedKind === "slack") {
+		const draft = {
+			workspace: fieldValue(fields, "workspace"),
+			to: fieldValue(fields, "to") ?? "",
+			thread: fieldValue(fields, "thread"),
+			message: body
+		};
+		return /* @__PURE__ */ jsx(SlackMessageCard, {
+			...props,
+			...draft,
+			ref,
+			icon,
+			headerActions,
+			state: settled ? "sent" : "pending",
+			saveState: settled ? void 0 : saveState,
+			onChange: change ? (next) => {
+				change({
+					fields: replaceFields(fields, {
+						workspace: next.workspace,
+						to: next.to,
+						thread: next.thread
+					}),
+					body: next.message
+				});
+			} : void 0,
+			onSend: send
+		});
+	}
+	return /* @__PURE__ */ jsx(GenericWorkspaceCorrespondenceCard, {
+		...props,
+		ref,
+		body,
+		fields,
+		kind,
+		path,
+		icon,
+		state,
+		saveState: settled ? void 0 : saveState,
+		onChange: change,
+		onDelete,
+		onOpen,
+		onSend: send
+	});
+}
+/**
+* Query-backed reviewed correspondence. The host supplies normalized reads
+* and writes; this adapter owns the draft, its debounced save lifecycle, the
+* save-gated Send, and the session sent latch.
+*
+* The visible draft is interaction state layered over query data, so an
+* observer-driven refetch can never clobber typing, and a failed save is
+* shown with a retry affordance instead of rendering as success. Send always
+* flushes the outstanding edit first and refuses when that save fails — the
+* agent must never be told to send content the workspace does not hold.
+*
+* Interaction state belongs to one query identity. The keyed session makes a
+* source swap a real unmount, so an old save or send cannot settle onto the
+* next file.
+*/
+function WorkspaceCorrespondenceFile(props) {
+	return /* @__PURE__ */ createElement(WorkspaceCorrespondenceFileSession, {
+		...props,
+		key: hashKey(props.source.queryOptions.queryKey)
+	});
+}
+function WorkspaceCorrespondenceFileSession({ fallback = null, source, ...props }) {
+	const queryClient = useQueryClient();
+	const persisted = useQuery(source.queryOptions).data ?? null;
+	const path = persisted?.path;
+	const [draft, setDraft] = React.useState(null);
+	const [sessionSent, setSessionSent] = React.useState(false);
+	/** The last draft handed to a save attempt; blocks duplicate autosaves. */
+	const attemptedDraftRef = React.useRef(null);
+	/** The last draft the host confirmed written. */
+	const savedDraftRef = React.useRef(null);
+	/** Outcome of the in-flight save, for the Send gate. */
+	const savePromiseRef = React.useRef(null);
+	/** The last projection this card rendered, kept for the sent snapshot. */
+	const lastShownRef = React.useRef(null);
+	const saveMutation = useMutation({
+		mutationFn: async (next) => {
+			if (!source.onChange) throw new Error(SAVE_UNAVAILABLE_MESSAGE);
+			if (path === void 0) throw new Error(FILE_MISSING_MESSAGE);
+			await source.onChange(path, next);
+		},
+		onMutate: async (next) => {
+			attemptedDraftRef.current = next;
+			await queryClient.cancelQueries({
+				queryKey: source.queryOptions.queryKey,
+				exact: true
+			});
+		},
+		onSuccess: (_data, next) => {
+			savedDraftRef.current = next;
+		},
+		onSettled: async (_data, error, next) => {
+			await queryClient.invalidateQueries({
+				queryKey: source.queryOptions.queryKey,
+				exact: true
+			});
+			if (!error) setDraft((current) => current === next ? null : current);
+		}
+	});
+	const { mutateAsync: mutateSaveAsync, isPending: savePending } = saveMutation;
+	const runSave = React.useCallback((next) => {
+		const settled = mutateSaveAsync(next).then(() => true, () => false);
+		savePromiseRef.current = settled;
+		return settled;
+	}, [mutateSaveAsync]);
+	const { mutateAsync: mutateSendAsync } = useMutation({
+		mutationFn: async () => {
+			if (!source.onSend) throw new Error(SEND_UNAVAILABLE_MESSAGE);
+			if (path === void 0) throw new Error(FILE_MISSING_MESSAGE);
+			await source.onSend(path);
+		},
+		onSuccess: () => queryClient.invalidateQueries({
+			queryKey: source.queryOptions.queryKey,
+			exact: true
+		})
+	});
+	const canSave = source.onChange != null;
+	const settled = persisted?.state === "sent" || persisted?.state === void 0 && sessionSent;
+	const runDebouncedSave = React.useEffectEvent((next) => {
+		runSave(next);
+	});
+	React.useEffect(() => {
+		if (!canSave || path === void 0 || settled || draft === null) return;
+		if (draft === savedDraftRef.current || draft === attemptedDraftRef.current) return;
+		if (savePending) return;
+		const timer = setTimeout(() => runDebouncedSave(draft), SAVE_DEBOUNCE_MS);
+		return () => clearTimeout(timer);
+	}, [
+		canSave,
+		draft,
+		path,
+		savePending,
+		settled
+	]);
+	const send = React.useCallback(async () => {
+		if (savePromiseRef.current !== null && !await savePromiseRef.current) throw new Error(SEND_BLOCKED_MESSAGE);
+		const outstanding = draft;
+		if (outstanding !== null && outstanding !== savedDraftRef.current) {
+			if (!await runSave(outstanding)) throw new Error(SEND_BLOCKED_MESSAGE);
+		}
+		await mutateSendAsync();
+		if (persisted) lastShownRef.current = draft === null ? persisted : {
+			...persisted,
+			...draft
+		};
+		setSessionSent(true);
+	}, [
+		draft,
+		mutateSendAsync,
+		persisted,
+		runSave
+	]);
+	const shown = persisted ?? (sessionSent ? lastShownRef.current : null);
+	if (!shown) return fallback;
+	const visible = draft ?? shown;
+	const state = shown.state ?? (sessionSent ? "sent" : "draft");
+	const saveState = saveMutation.isPending ? { status: "saving" } : saveMutation.isError ? {
+		status: "error",
+		message: formatErrorMessage(saveMutation.error),
+		onRetry: draft === null ? void 0 : () => void runSave(draft)
+	} : void 0;
+	return /* @__PURE__ */ jsx(WorkspaceCorrespondenceCard, {
+		...props,
+		body: visible.body,
+		fields: visible.fields,
+		kind: shown.kind,
+		path: shown.path,
+		state,
+		saveState,
+		onChange: source.onChange ? setDraft : void 0,
+		onSend: source.onSend ? send : void 0,
+		onOpen: source.onOpen ? () => source.onOpen?.(shown.path) : void 0,
+		onDelete: source.onDelete ? () => source.onDelete?.(shown.path) : void 0
+	});
+}
+//#endregion
+export { WorkspaceCorrespondenceCard, WorkspaceCorrespondenceFile };

package/dist/components/agents-sdk/WorkspaceExecution.d.ts

@@ -0,0 +1,115 @@
+import { ThinkFullAppPanel } from "./ThinkFullApp.js";
+import { WorkspaceConceptQueryOptions } from "./WorkspaceConcept.js";
+import { CardProps } from "../foundations/Card.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/WorkspaceExecution.d.ts
+type WorkspaceExecutionParamType = "string" | "number" | "boolean";
+interface WorkspaceExecutionParam {
+  name: string;
+  label: string;
+  type: WorkspaceExecutionParamType;
+  /**
+   * Whether the module's schema lists this property as required. This is a
+   * presentation hint only; the execution runtime owns argument validation.
+   */
+  required: boolean;
+  value?: string | number | boolean;
+}
+interface WorkspaceExecutionRun {
+  path: string;
+  label: string;
+}
+interface WorkspaceExecutionRunView extends WorkspaceExecutionRun {
+  onOpen?: () => void;
+}
+interface WorkspaceExecutionOutcome {
+  /** Serialized return value from the existing execution runtime. */
+  result: unknown;
+  logs: readonly string[];
+  /** Result and log files emitted when the runtime overflowed its inline bounds. */
+  runs: readonly WorkspaceExecutionRun[];
+}
+interface WorkspaceExecutionViewOutcome extends Omit<WorkspaceExecutionOutcome, "runs"> {
+  runs: readonly WorkspaceExecutionRunView[];
+}
+interface WorkspaceExecution {
+  /** Workspace path of the module file. */
+  path: string;
+  name: string;
+  description?: string;
+  /** Brand mark. Defaults to `TerminalIcon`. */
+  icon?: React.ReactNode;
+  parameters: readonly WorkspaceExecutionParam[];
+  /** Recent result peeks, newest first. Not a results directory. */
+  runs?: readonly WorkspaceExecutionRun[];
+}
+/** Data-only execution projection hydrated with card actions outside Query. */
+interface WorkspaceExecutionView extends WorkspaceExecution {
+  runs?: readonly WorkspaceExecutionRunView[];
+  /**
+   * Runs the module with the submitted values. The card owns the run lifecycle;
+   * inline output and any overflow files enrich the completed row.
+   */
+  onRun?: (parameters: readonly WorkspaceExecutionParam[]) => Promise<WorkspaceExecutionViewOutcome>;
+  onOpen?: () => void;
+  onDelete?: () => void | Promise<void>;
+}
+interface WorkspaceExecutionSource {
+  queryOptions: WorkspaceConceptQueryOptions<readonly WorkspaceExecution[]>;
+  /** Runs the module with the submitted values and returns its visible outcome. */
+  onRun?: (path: string, parameters: readonly WorkspaceExecutionParam[]) => Promise<WorkspaceExecutionOutcome>;
+  onOpen?: (path: string) => void;
+  onDelete?: (path: string) => void | Promise<void>;
+}
+interface WorkspaceExecutionCardProps extends Omit<CardProps, "children" | "hover" | "size" | "title"> {
+  module: WorkspaceExecutionView;
+}
+interface WorkspaceExecutionFileProps extends Omit<WorkspaceExecutionCardProps, "module"> {
+  path: string;
+  source: WorkspaceExecutionSource;
+  fallback?: React.ReactNode;
+}
+interface WorkspaceExecutionsPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+  modules: readonly WorkspaceExecutionView[];
+  loading?: boolean;
+  /** Query failure to show instead of the empty state. Loaded modules win. */
+  error?: string;
+  onRetry?: () => void;
+}
+declare function WorkspaceExecutionCard({
+  module,
+  ...props
+}: WorkspaceExecutionCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Compact inline card for one queried execution module.
+ */
+declare function WorkspaceExecutionFile({
+  fallback,
+  path,
+  source,
+  ...props
+}: WorkspaceExecutionFileProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+/**
+ * Workbench library. Same card as the inline placement. A query failure with
+ * nothing loaded renders as a quiet inline error, never as an empty library.
+ */
+declare function WorkspaceExecutionsPanel({
+  className,
+  error,
+  loading,
+  modules,
+  onRetry,
+  ref,
+  ...props
+}: WorkspaceExecutionsPanelProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+/** Canonical workbench descriptor; hosts supply only the source adapter. */
+declare function workspaceExecutionsPanel(source: WorkspaceExecutionSource): ThinkFullAppPanel;
+//#endregion
+export { WorkspaceExecution, WorkspaceExecutionCard, WorkspaceExecutionCardProps, WorkspaceExecutionFile, WorkspaceExecutionFileProps, WorkspaceExecutionOutcome, WorkspaceExecutionParam, WorkspaceExecutionParamType, WorkspaceExecutionRun, WorkspaceExecutionRunView, WorkspaceExecutionSource, WorkspaceExecutionView, WorkspaceExecutionViewOutcome, WorkspaceExecutionsPanel, WorkspaceExecutionsPanelProps, workspaceExecutionsPanel };