@tangle-network/ui 11.12.0 → 11.13.0

package/dist/hooks/use-realtime-session.js

@@ -0,0 +1,235 @@
+import { bumpActiveSessionActivity, registerActiveSession, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta } from "../stores/active-sessions-store.js";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
+//#region src/hooks/use-realtime-session.ts
+function parseEvent(message) {
+	try {
+		const parsed = JSON.parse(message);
+		return typeof parsed?.type === "string" ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+function eventTimestamp(event) {
+	const rootTimestamp = event.timestamp;
+	if (typeof rootTimestamp === "number" && Number.isFinite(rootTimestamp)) return rootTimestamp;
+	const raw = event.data?.timestamp ?? event.data?.ts ?? event.data?.time ?? event.data?.eventAt;
+	if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+	return null;
+}
+function resolveErrorMessage(event) {
+	const message = event.data?.message;
+	return typeof message === "string" && message.length > 0 ? message : null;
+}
+function updateStoreFromEvent(sessionId, event) {
+	const lastEventAt = eventTimestamp(event) ?? Date.now();
+	bumpActiveSessionActivity(sessionId, { lastEventAt });
+	if (event.type === "session.run.started") {
+		setActiveSessionRunning(sessionId, true, { lastEventAt });
+		return;
+	}
+	if (event.type === "session.run.completed" || event.type === "done" || event.type === "result") {
+		setActiveSessionRunning(sessionId, false, { lastEventAt });
+		return;
+	}
+	if (event.type === "session.attention") {
+		setActiveSessionAttention(sessionId, true, { lastEventAt });
+		return;
+	}
+	if (event.type === "error" || event.type === "session.run.failed") {
+		setActiveSessionError(sessionId, resolveErrorMessage(event) ?? "Session error");
+		return;
+	}
+}
+function useRealtimeSession({ sessionId, projectId = null, projectLabel, title, href, metadata, connectUrl, enabled = true, foreground = true, keepRegistered = true, reconnect = true, reconnectIntervalMs = 1500, maxReconnectAttempts = Infinity, transportMode = "websocket", onEvent, onOpen, onClose, onError }) {
+	const [connectionState, setConnectionState] = useState("disconnected");
+	const [lastError, setLastError] = useState(null);
+	const [reconnectAttempts, setReconnectAttempts] = useState(0);
+	const socketRef = useRef(null);
+	const timerRef = useRef(null);
+	const reconnectAttemptsRef = useRef(0);
+	const shouldReconnectRef = useRef(true);
+	const registration = useMemo(() => ({
+		sessionId,
+		projectId,
+		projectLabel,
+		title,
+		href,
+		metadata
+	}), [
+		href,
+		metadata,
+		projectId,
+		projectLabel,
+		sessionId,
+		title
+	]);
+	useEffect(() => {
+		if (!sessionId || !keepRegistered) return void 0;
+		registerActiveSession(registration);
+		return () => {
+			unregisterActiveSession(sessionId);
+		};
+	}, [
+		keepRegistered,
+		registration,
+		sessionId
+	]);
+	useEffect(() => {
+		if (!sessionId || !keepRegistered) return;
+		updateActiveSessionMeta(sessionId, {
+			projectId,
+			projectLabel,
+			title,
+			href,
+			metadata
+		});
+	}, [
+		href,
+		keepRegistered,
+		metadata,
+		projectId,
+		projectLabel,
+		sessionId,
+		title
+	]);
+	useEffect(() => {
+		if (!sessionId || !foreground) return void 0;
+		setForegroundActiveSession(sessionId);
+		return () => {
+			setForegroundActiveSession(null);
+		};
+	}, [foreground, sessionId]);
+	useEffect(() => {
+		if (!enabled || !sessionId || !connectUrl || typeof window === "undefined") {
+			setConnectionState("disconnected");
+			if (sessionId) setActiveSessionConnection(sessionId, {
+				connectionState: "disconnected",
+				reconnectState: "idle",
+				transportMode
+			});
+			return;
+		}
+		shouldReconnectRef.current = true;
+		const clearReconnectTimer = () => {
+			if (timerRef.current != null) {
+				window.clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+		};
+		const connect = () => {
+			clearReconnectTimer();
+			setConnectionState(reconnectAttemptsRef.current > 0 ? "reconnecting" : "connecting");
+			setActiveSessionConnection(sessionId, {
+				connectionState: reconnectAttemptsRef.current > 0 ? "reconnecting" : "connecting",
+				reconnectState: reconnectAttemptsRef.current > 0 ? "reconnecting" : "idle",
+				transportMode,
+				lastError: null
+			});
+			const socket = new window.WebSocket(connectUrl);
+			socketRef.current = socket;
+			socket.onopen = () => {
+				reconnectAttemptsRef.current = 0;
+				setReconnectAttempts(0);
+				setLastError(null);
+				setConnectionState("connected");
+				registerActiveSession(registration);
+				setActiveSessionConnection(sessionId, {
+					connectionState: "connected",
+					reconnectState: "idle",
+					transportMode,
+					lastError: null,
+					lastEventAt: Date.now()
+				});
+				onOpen?.();
+			};
+			socket.onmessage = (message) => {
+				const event = parseEvent(message.data);
+				if (!event) return;
+				registerActiveSession(registration);
+				updateStoreFromEvent(sessionId, event);
+				onEvent?.(event);
+			};
+			socket.onerror = () => {
+				const nextError = "Realtime session connection error";
+				setLastError(nextError);
+				setConnectionState("error");
+				setActiveSessionConnection(sessionId, {
+					connectionState: "error",
+					reconnectState: reconnect ? "reconnecting" : "failed",
+					transportMode,
+					lastError: nextError
+				});
+				onError?.(/* @__PURE__ */ new Error(nextError));
+			};
+			socket.onclose = () => {
+				socketRef.current = null;
+				onClose?.();
+				if (!shouldReconnectRef.current || !reconnect) {
+					setConnectionState("disconnected");
+					setActiveSessionConnection(sessionId, {
+						connectionState: "disconnected",
+						reconnectState: "idle",
+						transportMode
+					});
+					return;
+				}
+				reconnectAttemptsRef.current += 1;
+				setReconnectAttempts(reconnectAttemptsRef.current);
+				if (reconnectAttemptsRef.current > maxReconnectAttempts) {
+					setConnectionState("error");
+					setActiveSessionConnection(sessionId, {
+						connectionState: "error",
+						reconnectState: "failed",
+						transportMode,
+						lastError: "Unable to reconnect to realtime session"
+					});
+					return;
+				}
+				setConnectionState("reconnecting");
+				timerRef.current = window.setTimeout(connect, reconnectIntervalMs);
+			};
+		};
+		connect();
+		return () => {
+			shouldReconnectRef.current = false;
+			clearReconnectTimer();
+			const socket = socketRef.current;
+			socketRef.current = null;
+			if (socket && socket.readyState < WebSocket.CLOSING) socket.close();
+		};
+	}, [
+		connectUrl,
+		enabled,
+		maxReconnectAttempts,
+		onClose,
+		onError,
+		onEvent,
+		onOpen,
+		reconnect,
+		reconnectIntervalMs,
+		registration,
+		sessionId,
+		transportMode
+	]);
+	return {
+		connectionState,
+		lastError,
+		reconnectAttempts,
+		isConnected: connectionState === "connected"
+	};
+}
+function RealtimeSessionRegistryItem(props) {
+	useRealtimeSession({
+		...props,
+		foreground: props.foreground ?? false
+	});
+	return null;
+}
+function RealtimeSessionRegistry({ sessions }) {
+	return sessions.map((session) => createElement(RealtimeSessionRegistryItem, {
+		key: session.key ?? session.sessionId,
+		...session
+	}));
+}
+//#endregion
+export { RealtimeSessionRegistry, useRealtimeSession };

package/dist/hooks/use-run-collapse-state.d.ts

@@ -0,0 +1,13 @@
+import { Run } from "../types/run.js";
+//#region src/hooks/use-run-collapse-state.d.ts
+/**
+ * Manages per-run collapse state with auto-collapse after run completion.
+ *
+ * - Runs stay expanded by default
+ * - Collapse is manual only
+ */
+export declare function useRunCollapseState(runs: Run[]): {
+  isCollapsed: (runId: string) => boolean;
+  toggleCollapse: (runId: string) => void;
+};
+//#endregion

package/dist/hooks/use-run-collapse-state.js

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+//#region src/hooks/use-run-collapse-state.ts
+/**
+* Manages per-run collapse state with auto-collapse after run completion.
+*
+* - Runs stay expanded by default
+* - Collapse is manual only
+*/
+function useRunCollapseState(runs) {
+	const [collapsedMap, setCollapsedMap] = useState({});
+	return {
+		isCollapsed: useCallback((runId) => {
+			return collapsedMap[runId] ?? false;
+		}, [collapsedMap]),
+		toggleCollapse: useCallback((runId) => {
+			setCollapsedMap((prev) => ({
+				...prev,
+				[runId]: !prev[runId]
+			}));
+		}, [])
+	};
+}
+//#endregion
+export { useRunCollapseState };

package/dist/hooks/use-run-groups.d.ts

@@ -0,0 +1,11 @@
+import { SessionMessage } from "../types/message.js";
+import { SessionPart } from "../types/parts.js";
+import { GroupedMessage } from "../types/run.js";
+//#region src/hooks/use-run-groups.d.ts
+export interface UseRunGroupsOptions {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+}
+export declare function useRunGroups({ messages, partMap, isStreaming }: UseRunGroupsOptions): GroupedMessage[];
+//#endregion

package/dist/hooks/use-run-groups.js

@@ -0,0 +1,85 @@
+import { getToolCategory } from "../utils/tool-display.js";
+import { useMemo } from "react";
+//#region src/hooks/use-run-groups.ts
+function computeRunStats(messages, partMap) {
+	const stats = {
+		toolCount: 0,
+		messageCount: messages.length,
+		thinkingDurationMs: 0,
+		textPartCount: 0,
+		toolCategories: /* @__PURE__ */ new Set()
+	};
+	for (const msg of messages) {
+		const parts = partMap[msg.id] ?? [];
+		for (const part of parts) switch (part.type) {
+			case "tool":
+				stats.toolCount++;
+				stats.toolCategories.add(getToolCategory(part.tool));
+				break;
+			case "text":
+				if (!part.synthetic) stats.textPartCount++;
+				break;
+			case "reasoning": {
+				const start = part.time?.start;
+				const end = part.time?.end;
+				if (start && end) stats.thinkingDurationMs += end - start;
+				break;
+			}
+		}
+	}
+	return stats;
+}
+function getLastTextContent(messages, partMap) {
+	for (let i = messages.length - 1; i >= 0; i--) {
+		const parts = partMap[messages[i].id] ?? [];
+		for (let j = parts.length - 1; j >= 0; j--) {
+			const part = parts[j];
+			if (part.type === "text" && !part.synthetic && part.text.trim()) return part.text.trim();
+		}
+	}
+	return null;
+}
+function useRunGroups({ messages, partMap, isStreaming }) {
+	return useMemo(() => {
+		const groups = [];
+		let currentRunMessages = [];
+		function flushRun(streaming) {
+			if (currentRunMessages.length === 0) return;
+			const msgs = [...currentRunMessages];
+			const stats = computeRunStats(msgs, partMap);
+			const summaryText = getLastTextContent(msgs, partMap);
+			const isComplete = !streaming;
+			groups.push({
+				type: "run",
+				run: {
+					id: msgs[0].id,
+					messages: msgs,
+					isComplete,
+					isStreaming: streaming,
+					stats,
+					summaryText,
+					finalTextPart: null
+				}
+			});
+			currentRunMessages = [];
+		}
+		for (let i = 0; i < messages.length; i++) {
+			const msg = messages[i];
+			if (msg.role === "user") {
+				flushRun(false);
+				groups.push({
+					type: "user",
+					message: msg
+				});
+			} else currentRunMessages.push(msg);
+		}
+		if (currentRunMessages.length > 0) flushRun(isStreaming);
+		return groups;
+	}, [
+		messages,
+		partMap,
+		isStreaming
+	]);
+}
+//#endregion
+export { useRunGroups };

package/dist/hooks/use-sdk-session.d.ts

@@ -0,0 +1,59 @@
+import { SessionMessage } from "../types/message.js";
+import { SessionPart } from "../types/parts.js";
+//#region src/hooks/use-sdk-session.d.ts
+export interface SdkSessionAttachment {
+  name: string;
+  size?: number;
+}
+export interface SdkSessionSeed {
+  id: string;
+  role: SessionMessage["role"];
+  createdAt?: number | string | Date;
+  content?: string;
+  attachments?: SdkSessionAttachment[];
+  parts?: SessionPart[];
+}
+export interface SdkSessionEvent {
+  type: string;
+  data?: Record<string, unknown>;
+}
+export interface BeginAssistantMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "assistant" | "system">;
+  createdAt?: number | string | Date;
+}
+export interface AppendUserMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "user" | "system">;
+  content: string;
+  createdAt?: number | string | Date;
+  attachments?: SdkSessionAttachment[];
+}
+export interface CompleteAssistantMessageOptions {
+  messageId?: string;
+  finalText?: string;
+}
+export interface ApplySdkEventOptions {
+  messageId?: string;
+}
+export interface UseSdkSessionOptions {
+  initialMessages?: SdkSessionSeed[];
+}
+export interface UseSdkSessionReturn {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+  activeAssistantMessageId: string | null;
+  replaceHistory: (messages: SdkSessionSeed[]) => void;
+  appendUserMessage: (message: AppendUserMessageOptions) => string;
+  beginAssistantMessage: (options?: BeginAssistantMessageOptions) => string;
+  applySdkEvent: (event: SdkSessionEvent, options?: ApplySdkEventOptions) => void;
+  completeAssistantMessage: (options?: CompleteAssistantMessageOptions) => void;
+  failAssistantMessage: (error: string, options?: {
+    messageId?: string;
+  }) => void;
+  setStreaming: (value: boolean) => void;
+  reset: () => void;
+}
+export declare function useSdkSession({ initialMessages }?: UseSdkSessionOptions): UseSdkSessionReturn;
+//#endregion