@signalflare-ai/ui 0.5.0

package/dist/use-agent-harness-DZzcn96L.js

@@ -0,0 +1,929 @@
+"use client";
+import { useCallback, useEffect, useReducer, useRef } from "react";
+//#region src/components/use-agent-harness/use-agent-harness.ts
+var SF_USE_AGENT_HARNESS_VARIANTS = {};
+var SF_USE_AGENT_HARNESS_DEFAULT_VARIANTS = {};
+/**
+* Translate a Mastra HarnessEvent into one or more SF HarnessEvents.
+*
+* Mastra sends full HarnessMessage objects on message_update/end, while SF
+* expects incremental deltas + separate thinking events. This function
+* bridges the gap.
+*/
+function translateMastraEvent(mastraEvent, prevMessages) {
+	const out = [];
+	if (mastraEvent.type === "message_start" || mastraEvent.type === "message_update" || mastraEvent.type === "message_end") {
+		const msg = mastraEvent.message;
+		const prev = prevMessages.get(msg.id);
+		if (mastraEvent.type === "message_start") out.push({
+			type: "message_start",
+			messageId: msg.id,
+			role: msg.role
+		});
+		const textParts = msg.content.filter((p) => p.type === "text");
+		const thinkingParts = msg.content.filter((p) => p.type === "thinking");
+		const fullText = textParts.map((p) => p.text).join("");
+		const prevText = prev ? prev.content.filter((p) => p.type === "text").map((p) => p.text).join("") : "";
+		const prevThinking = prev ? prev.content.filter((p) => p.type === "thinking") : [];
+		thinkingParts.forEach((part, i) => {
+			const thinkingId = `${msg.id}-thinking-${i}`;
+			const prevPart = prevThinking[i];
+			if (!prevPart) {
+				out.push({
+					type: "thinking_start",
+					thinkingId,
+					messageId: msg.id
+				});
+				if (part.thinking) out.push({
+					type: "thinking_delta",
+					thinkingId,
+					messageId: msg.id,
+					delta: part.thinking,
+					content: part.thinking
+				});
+			} else if (part.thinking !== prevPart.thinking) {
+				const delta = part.thinking.slice(prevPart.thinking.length);
+				if (delta) out.push({
+					type: "thinking_delta",
+					thinkingId,
+					messageId: msg.id,
+					delta,
+					content: part.thinking
+				});
+			}
+		});
+		if (fullText !== prevText && mastraEvent.type !== "message_start") {
+			const delta = fullText.slice(prevText.length);
+			out.push({
+				type: "message_update",
+				messageId: msg.id,
+				delta,
+				content: fullText
+			});
+		}
+		if (mastraEvent.type === "message_end") {
+			thinkingParts.forEach((part, i) => {
+				out.push({
+					type: "thinking_end",
+					thinkingId: `${msg.id}-thinking-${i}`,
+					messageId: msg.id,
+					content: part.thinking
+				});
+			});
+			out.push({
+				type: "message_end",
+				messageId: msg.id,
+				content: fullText
+			});
+		}
+		prevMessages.set(msg.id, msg);
+		return out;
+	}
+	return [mastraEvent];
+}
+/**
+* Wrap a Mastra `Harness` instance as an SF `HarnessAdapter`.
+*
+* Translates Mastra's event format (full `HarnessMessage` objects on
+* `message_update`) into SF's incremental event protocol, and extracts
+* `thinking` content parts into `thinking_start/delta/end` events so the
+* `AgentHarness` block can render them as collapsible reasoning blocks.
+*/
+function fromMastraHarness(harness) {
+	return {
+		subscribe(listener) {
+			const prevMessages = /* @__PURE__ */ new Map();
+			return harness.subscribe((mastraEvent) => {
+				const translated = translateMastraEvent(mastraEvent, prevMessages);
+				for (const ev of translated) listener(ev);
+			});
+		},
+		sendMessage: harness.sendMessage.bind(harness),
+		respondToToolApproval: harness.respondToToolApproval?.bind(harness),
+		respondToQuestion: harness.respondToQuestion?.bind(harness),
+		respondToPlanApproval: harness.respondToPlanApproval?.bind(harness),
+		abort: harness.abort?.bind(harness),
+		steer: harness.steer ? (params) => harness.steer(params) : void 0,
+		selectMode: harness.selectMode ? (params) => harness.selectMode(params) : void 0
+	};
+}
+var initialState = {
+	messageIds: [],
+	messages: {},
+	toolCalls: {},
+	subagents: {},
+	omActivities: {},
+	thinkings: {},
+	questions: {},
+	planApprovals: {},
+	notices: [],
+	taskList: null,
+	usage: null,
+	isRunning: false,
+	timeline: []
+};
+/**
+* Create an empty `AgentHarnessState` with optional partial overrides.
+*
+* Use this when operating in controlled mode — build or derive your own state
+* that conforms to `AgentHarnessState` and pass it directly to `<AgentHarness state={...} />`.
+*
+* @example
+* ```ts
+* const [state, setState] = useState(() => createAgentHarnessState());
+* ```
+*/
+function createAgentHarnessState(partial) {
+	return {
+		...initialState,
+		...partial
+	};
+}
+var _noticeCounter = 0;
+function nextNoticeId() {
+	return `notice-${++_noticeCounter}`;
+}
+function getErrorString(error) {
+	return typeof error === "string" ? error : error.message;
+}
+function agentHarnessReducer(state, action) {
+	if (action.type === "RESET") return { ...initialState };
+	const { event, timestamp } = action;
+	const timeline = [...state.timeline, {
+		event,
+		timestamp
+	}];
+	switch (event.type) {
+		case "agent_start": return {
+			...state,
+			timeline,
+			isRunning: true,
+			missionStartedAt: state.missionStartedAt ?? timestamp
+		};
+		case "agent_end": return {
+			...state,
+			timeline,
+			isRunning: false,
+			missionEndedAt: timestamp
+		};
+		case "message_start": {
+			const msg = {
+				id: event.messageId,
+				role: event.role,
+				content: "",
+				isStreaming: event.role === "assistant",
+				toolCallIds: [],
+				subagentIds: [],
+				thinkingIds: [],
+				hasOMActivity: false
+			};
+			return {
+				...state,
+				timeline,
+				messageIds: [...state.messageIds, event.messageId],
+				messages: {
+					...state.messages,
+					[event.messageId]: msg
+				}
+			};
+		}
+		case "message_update": {
+			const existing = state.messages[event.messageId];
+			if (!existing) return {
+				...state,
+				timeline
+			};
+			const newContent = event.content !== void 0 ? event.content : existing.content + event.delta;
+			return {
+				...state,
+				timeline,
+				messages: {
+					...state.messages,
+					[event.messageId]: {
+						...existing,
+						content: newContent
+					}
+				}
+			};
+		}
+		case "message_end": {
+			const existing = state.messages[event.messageId];
+			if (!existing) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				messages: {
+					...state.messages,
+					[event.messageId]: {
+						...existing,
+						content: event.content,
+						isStreaming: false
+					}
+				}
+			};
+		}
+		case "tool_start": {
+			const toolCall = {
+				id: event.toolCallId,
+				toolName: event.toolName,
+				messageId: event.messageId,
+				subagentId: event.subagentId,
+				state: "input-streaming",
+				inputBuffer: "",
+				startedAt: timestamp
+			};
+			const updatedMessages = event.messageId ? {
+				...state.messages,
+				[event.messageId]: {
+					...state.messages[event.messageId],
+					toolCallIds: [...state.messages[event.messageId]?.toolCallIds ?? [], event.toolCallId]
+				}
+			} : state.messages;
+			const updatedSubagents = event.subagentId && state.subagents[event.subagentId] ? {
+				...state.subagents,
+				[event.subagentId]: {
+					...state.subagents[event.subagentId],
+					toolCallIds: [...state.subagents[event.subagentId].toolCallIds, event.toolCallId]
+				}
+			} : state.subagents;
+			return {
+				...state,
+				timeline,
+				messages: updatedMessages,
+				subagents: updatedSubagents,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: toolCall
+				}
+			};
+		}
+		case "tool_input_start": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						state: "input-streaming",
+						inputBuffer: ""
+					}
+				}
+			};
+		}
+		case "tool_input_delta": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						inputBuffer: (tc.inputBuffer ?? "") + event.delta
+					}
+				}
+			};
+		}
+		case "tool_input_end": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						state: "input-available",
+						input: event.input,
+						inputBuffer: void 0
+					}
+				}
+			};
+		}
+		case "tool_approval_required": {
+			const tc = state.toolCalls[event.toolCallId] ?? {
+				id: event.toolCallId,
+				toolName: event.toolName,
+				messageId: event.messageId,
+				state: "approval-requested",
+				toolCallIds: [],
+				startedAt: timestamp
+			};
+			return {
+				...state,
+				timeline,
+				pendingToolApprovalId: event.toolCallId,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						state: "approval-requested",
+						input: event.input ?? tc.input,
+						approvalState: "awaiting"
+					}
+				}
+			};
+		}
+		case "tool_update": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						summary: event.summary ?? tc.summary
+					}
+				}
+			};
+		}
+		case "tool_end": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			const pendingApprovalId = state.pendingToolApprovalId === event.toolCallId ? void 0 : state.pendingToolApprovalId;
+			return {
+				...state,
+				timeline,
+				pendingToolApprovalId: pendingApprovalId,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						state: event.error ? "output-error" : "output-available",
+						output: event.output,
+						errorText: event.error,
+						durationMs: event.durationMs,
+						endedAt: timestamp
+					}
+				}
+			};
+		}
+		case "subagent_start": {
+			const subagent = {
+				id: event.subagentId,
+				agentType: event.agentType,
+				name: event.name,
+				modelId: event.modelId,
+				status: "running",
+				content: "",
+				toolCallIds: [],
+				messageId: event.parentMessageId,
+				startedAt: timestamp
+			};
+			const updatedMessages = event.parentMessageId ? {
+				...state.messages,
+				[event.parentMessageId]: {
+					...state.messages[event.parentMessageId],
+					subagentIds: [...state.messages[event.parentMessageId]?.subagentIds ?? [], event.subagentId]
+				}
+			} : state.messages;
+			return {
+				...state,
+				timeline,
+				messages: updatedMessages,
+				subagents: {
+					...state.subagents,
+					[event.subagentId]: subagent
+				}
+			};
+		}
+		case "subagent_text_delta": {
+			const sa = state.subagents[event.subagentId];
+			if (!sa) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				subagents: {
+					...state.subagents,
+					[event.subagentId]: {
+						...sa,
+						content: sa.content + event.delta
+					}
+				}
+			};
+		}
+		case "subagent_tool_start": {
+			const tc = {
+				id: event.toolCallId,
+				toolName: event.toolName,
+				subagentId: event.subagentId,
+				state: "input-streaming",
+				inputBuffer: "",
+				startedAt: timestamp
+			};
+			const sa = state.subagents[event.subagentId];
+			const updatedSubagents = sa ? {
+				...state.subagents,
+				[event.subagentId]: {
+					...sa,
+					toolCallIds: [...sa.toolCallIds, event.toolCallId]
+				}
+			} : state.subagents;
+			return {
+				...state,
+				timeline,
+				subagents: updatedSubagents,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: tc
+				}
+			};
+		}
+		case "subagent_tool_end": {
+			const tc = state.toolCalls[event.toolCallId];
+			if (!tc) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				toolCalls: {
+					...state.toolCalls,
+					[event.toolCallId]: {
+						...tc,
+						state: event.error ? "output-error" : "output-available",
+						output: event.output,
+						errorText: event.error,
+						durationMs: event.durationMs,
+						endedAt: timestamp
+					}
+				}
+			};
+		}
+		case "subagent_end": {
+			const sa = state.subagents[event.subagentId];
+			if (!sa) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				subagents: {
+					...state.subagents,
+					[event.subagentId]: {
+						...sa,
+						status: event.error ? "error" : "completed",
+						error: event.error,
+						durationMs: event.durationMs,
+						endedAt: timestamp
+					}
+				}
+			};
+		}
+		case "subagent_model_changed":
+			if (event.subagentId) {
+				const sa = state.subagents[event.subagentId];
+				if (!sa) return {
+					...state,
+					timeline
+				};
+				return {
+					...state,
+					timeline,
+					subagents: {
+						...state.subagents,
+						[event.subagentId]: {
+							...sa,
+							modelId: event.modelId
+						}
+					}
+				};
+			}
+			return {
+				...state,
+				timeline
+			};
+		case "om_observation_start": {
+			const id = event.observationId ?? `om-obs-${Date.now()}`;
+			const activity = {
+				id,
+				type: "observation",
+				status: "streaming",
+				messageId: state.messageIds[state.messageIds.length - 1]
+			};
+			return {
+				...state,
+				timeline,
+				omActivities: {
+					...state.omActivities,
+					[id]: activity
+				}
+			};
+		}
+		case "om_observation_end": {
+			const id = event.observationId ?? Object.keys(state.omActivities).find((k) => state.omActivities[k].type === "observation" && state.omActivities[k].status === "streaming");
+			if (!id) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				omActivities: {
+					...state.omActivities,
+					[id]: {
+						...state.omActivities[id],
+						status: "completed",
+						text: event.text,
+						durationMs: event.durationMs
+					}
+				}
+			};
+		}
+		case "om_reflection_start": {
+			const id = `om-ref-${Date.now()}`;
+			const activity = {
+				id,
+				type: "reflection",
+				status: "streaming",
+				messageId: state.messageIds[state.messageIds.length - 1]
+			};
+			return {
+				...state,
+				timeline,
+				omActivities: {
+					...state.omActivities,
+					[id]: activity
+				}
+			};
+		}
+		case "om_reflection_end": {
+			const id = Object.keys(state.omActivities).find((k) => state.omActivities[k].type === "reflection" && state.omActivities[k].status === "streaming");
+			if (!id) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				omActivities: {
+					...state.omActivities,
+					[id]: {
+						...state.omActivities[id],
+						status: "completed",
+						text: event.text,
+						durationMs: event.durationMs
+					}
+				}
+			};
+		}
+		case "thinking_start": {
+			const thinking = {
+				id: event.thinkingId,
+				messageId: event.messageId,
+				text: "",
+				isStreaming: true
+			};
+			const existingMsg = state.messages[event.messageId];
+			return {
+				...state,
+				timeline,
+				thinkings: {
+					...state.thinkings,
+					[event.thinkingId]: thinking
+				},
+				messages: existingMsg ? {
+					...state.messages,
+					[event.messageId]: {
+						...existingMsg,
+						thinkingIds: [...existingMsg.thinkingIds, event.thinkingId]
+					}
+				} : state.messages
+			};
+		}
+		case "thinking_delta": {
+			const existing = state.thinkings[event.thinkingId];
+			if (!existing) return {
+				...state,
+				timeline
+			};
+			const newText = event.content !== void 0 ? event.content : existing.text + event.delta;
+			return {
+				...state,
+				timeline,
+				thinkings: {
+					...state.thinkings,
+					[event.thinkingId]: {
+						...existing,
+						text: newText
+					}
+				}
+			};
+		}
+		case "thinking_end": {
+			const existing = state.thinkings[event.thinkingId];
+			if (!existing) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				thinkings: {
+					...state.thinkings,
+					[event.thinkingId]: {
+						...existing,
+						text: event.content,
+						isStreaming: false
+					}
+				}
+			};
+		}
+		case "ask_question": {
+			const q = {
+				questionId: event.questionId,
+				question: event.question,
+				header: event.header,
+				options: event.options,
+				multiple: event.multiple,
+				allowCustom: event.allowCustom,
+				status: "pending"
+			};
+			const lastMsgId = state.messageIds[state.messageIds.length - 1];
+			const updatedMessages = lastMsgId ? {
+				...state.messages,
+				[lastMsgId]: {
+					...state.messages[lastMsgId],
+					questionId: event.questionId
+				}
+			} : state.messages;
+			return {
+				...state,
+				timeline,
+				pendingQuestionId: event.questionId,
+				questions: {
+					...state.questions,
+					[event.questionId]: q
+				},
+				messages: updatedMessages
+			};
+		}
+		case "question_answered": {
+			const q = state.questions[event.questionId];
+			if (!q) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				pendingQuestionId: state.pendingQuestionId === event.questionId ? void 0 : state.pendingQuestionId,
+				questions: {
+					...state.questions,
+					[event.questionId]: {
+						...q,
+						status: "answered",
+						answeredWith: event.answer
+					}
+				}
+			};
+		}
+		case "plan_approval_required": {
+			const p = {
+				planId: event.planId,
+				title: event.title,
+				description: event.description,
+				steps: event.steps,
+				status: "pending"
+			};
+			const lastMsgId = state.messageIds[state.messageIds.length - 1];
+			const updatedMessages = lastMsgId ? {
+				...state.messages,
+				[lastMsgId]: {
+					...state.messages[lastMsgId],
+					planId: event.planId
+				}
+			} : state.messages;
+			return {
+				...state,
+				timeline,
+				pendingPlanId: event.planId,
+				planApprovals: {
+					...state.planApprovals,
+					[event.planId]: p
+				},
+				messages: updatedMessages
+			};
+		}
+		case "plan_approved": {
+			const p = state.planApprovals[event.planId];
+			if (!p) return {
+				...state,
+				timeline
+			};
+			return {
+				...state,
+				timeline,
+				pendingPlanId: state.pendingPlanId === event.planId ? void 0 : state.pendingPlanId,
+				planApprovals: {
+					...state.planApprovals,
+					[event.planId]: {
+						...p,
+						status: "approved"
+					}
+				}
+			};
+		}
+		case "task_updated": return {
+			...state,
+			timeline,
+			taskList: {
+				tasks: event.tasks,
+				title: event.title
+			}
+		};
+		case "usage_update": return {
+			...state,
+			timeline,
+			usage: {
+				inputTokens: event.inputTokens,
+				outputTokens: event.outputTokens,
+				totalTokens: event.totalTokens,
+				cost: event.cost,
+				modelId: event.modelId
+			}
+		};
+		case "error": {
+			const notice = {
+				id: nextNoticeId(),
+				level: "error",
+				message: getErrorString(event.error),
+				messageId: event.messageId
+			};
+			return {
+				...state,
+				timeline,
+				notices: [...state.notices, notice]
+			};
+		}
+		case "info": {
+			const notice = {
+				id: nextNoticeId(),
+				level: "info",
+				message: event.message
+			};
+			return {
+				...state,
+				timeline,
+				notices: [...state.notices, notice]
+			};
+		}
+		case "follow_up_queued": {
+			const notice = {
+				id: nextNoticeId(),
+				level: "info",
+				message: `Follow-up queued: ${event.content}`
+			};
+			return {
+				...state,
+				timeline,
+				notices: [...state.notices, notice]
+			};
+		}
+		case "workspace_error": return {
+			...state,
+			timeline,
+			workspaceError: getErrorString(event.error)
+		};
+		case "workspace_ready": return {
+			...state,
+			timeline,
+			workspaceError: void 0
+		};
+		case "workspace_status_changed": {
+			const notice = {
+				id: nextNoticeId(),
+				level: "info",
+				message: `Workspace: ${event.status}`
+			};
+			return {
+				...state,
+				timeline,
+				notices: [...state.notices, notice]
+			};
+		}
+		case "mode_changed": return {
+			...state,
+			timeline,
+			modeId: event.modeId,
+			modeName: event.modeName
+		};
+		case "model_changed": return {
+			...state,
+			timeline,
+			modelId: event.modelId,
+			modelName: event.modelName
+		};
+		case "thread_changed": return {
+			...initialState,
+			threadId: event.threadId,
+			timeline
+		};
+		case "thread_created":
+		case "thread_deleted":
+		case "state_changed":
+		case "om_status": return {
+			...state,
+			timeline
+		};
+		default: return {
+			...state,
+			timeline
+		};
+	}
+}
+/**
+* `useAgentHarness` — headless state hook for the AgentHarness UI.
+*
+* Subscribes to a `HarnessAdapter` and reduces all events into a single
+* normalized `AgentHarnessState` object that the `AgentHarness` block
+* (or any custom UI) can render from.
+*
+* @example
+* ```tsx
+* const adapter = fromMastraHarness(harness);
+* const { state, sendMessage, abort } = useAgentHarness({ adapter });
+* ```
+*/
+function useAgentHarness({ adapter }) {
+	const [state, dispatch] = useReducer(agentHarnessReducer, initialState);
+	const adapterRef = useRef(adapter);
+	adapterRef.current = adapter;
+	useEffect(() => {
+		if (!adapter) return;
+		return adapter.subscribe((event) => {
+			dispatch({
+				type: "EVENT",
+				event,
+				timestamp: Date.now()
+			});
+		});
+	}, [adapter]);
+	return {
+		state,
+		sendMessage: useCallback(async (params) => {
+			await adapterRef.current?.sendMessage(params);
+		}, []),
+		respondToToolApproval: useCallback(async (decision) => {
+			await adapterRef.current?.respondToToolApproval?.({ decision });
+		}, []),
+		respondToQuestion: useCallback(async (questionId, answer) => {
+			await adapterRef.current?.respondToQuestion?.({
+				questionId,
+				answer
+			});
+		}, []),
+		respondToPlanApproval: useCallback(async (planId, response) => {
+			await adapterRef.current?.respondToPlanApproval?.({
+				planId,
+				response
+			});
+		}, []),
+		abort: useCallback(() => {
+			adapterRef.current?.abort?.();
+		}, []),
+		steer: useCallback((content) => {
+			adapterRef.current?.steer?.({ content });
+		}, []),
+		selectMode: useCallback(async (modeId) => {
+			await adapterRef.current?.selectMode?.({ modeId });
+		}, []),
+		reset: useCallback(() => {
+			dispatch({ type: "RESET" });
+		}, [])
+	};
+}
+//#endregion
+export { useAgentHarness as a, fromMastraHarness as i, SF_USE_AGENT_HARNESS_VARIANTS as n, createAgentHarnessState as r, SF_USE_AGENT_HARNESS_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=use-agent-harness-DZzcn96L.js.map