@tangle-network/sandbox-ui 0.2.1 → 0.3.3

package/dist/{chunk-HYEAX3DC.js → chunk-5LV6DZZF.js}

@@ -1,6 +1,6 @@
 import {
   parseToolEvent
-} from "./chunk-M6VLC32S.js";
+} from "./chunk-CCKNIAS7.js";
 
 // src/hooks/use-tool-call-stream.ts
 import { useState, useCallback, useRef } from "react";
@@ -66,88 +66,8 @@ function useToolCallStream() {
   return { segments, pushEvent, pushText, completeToolCall, reset };
 }
 
-// src/hooks/use-auth.ts
-import * as React from "react";
-function useAuth({
-  apiBaseUrl,
-  revalidateOnFocus = false,
-  shouldRetryOnError = false
-}) {
-  const [user, setUser] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const fetchSession = React.useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const res = await fetch(`${apiBaseUrl}/auth/session`, {
-        credentials: "include"
-      });
-      if (!res.ok) {
-        throw new Error("Not authenticated");
-      }
-      const data = await res.json();
-      if (data.success && data.data) {
-        setUser(data.data);
-      } else {
-        setUser(null);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Unknown error"));
-      setUser(null);
-      if (shouldRetryOnError) {
-        setTimeout(fetchSession, 5e3);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [apiBaseUrl, shouldRetryOnError]);
-  React.useEffect(() => {
-    fetchSession();
-  }, [fetchSession]);
-  React.useEffect(() => {
-    if (!revalidateOnFocus) return;
-    const handleFocus = () => {
-      fetchSession();
-    };
-    window.addEventListener("focus", handleFocus);
-    return () => window.removeEventListener("focus", handleFocus);
-  }, [revalidateOnFocus, fetchSession]);
-  return {
-    user,
-    isLoading,
-    isError: !!error,
-    error,
-    mutate: fetchSession
-  };
-}
-function createAuthFetcher(_apiBaseUrl) {
-  return async function authFetcher(url, options) {
-    const res = await fetch(url, {
-      ...options,
-      credentials: "include",
-      headers: {
-        ...options?.headers
-      }
-    });
-    if (!res.ok) {
-      throw new Error(`Request failed with status ${res.status}`);
-    }
-    return res.json();
-  };
-}
-function useApiKey() {
-  const [apiKey, setApiKey] = React.useState(null);
-  React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      setApiKey(localStorage.getItem("apiKey"));
-    }
-  }, []);
-  return apiKey;
-}
-
 // src/hooks/use-sse-stream.ts
-import * as React2 from "react";
+import * as React from "react";
 function useSSEStream(options) {
   const {
     url,
@@ -162,27 +82,27 @@ function useSSEStream(options) {
     headers,
     enabled = true
   } = options;
-  const [state, setState] = React2.useState("disconnected");
-  const [events, setEvents] = React2.useState([]);
-  const [lastEvent, setLastEvent] = React2.useState(null);
-  const [error, setError] = React2.useState(null);
-  const [retryCount, setRetryCount] = React2.useState(0);
-  const [lastEventTime, setLastEventTime] = React2.useState(Date.now());
-  const [timeSinceLastEvent, setTimeSinceLastEvent] = React2.useState(0);
-  const eventSourceRef = React2.useRef(null);
-  const abortControllerRef = React2.useRef(null);
-  const reconnectTimeoutRef = React2.useRef(null);
-  const lastEventIdRef = React2.useRef(void 0);
-  React2.useEffect(() => {
+  const [state, setState] = React.useState("disconnected");
+  const [events, setEvents] = React.useState([]);
+  const [lastEvent, setLastEvent] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [retryCount, setRetryCount] = React.useState(0);
+  const [lastEventTime, setLastEventTime] = React.useState(Date.now());
+  const [timeSinceLastEvent, setTimeSinceLastEvent] = React.useState(0);
+  const eventSourceRef = React.useRef(null);
+  const abortControllerRef = React.useRef(null);
+  const reconnectTimeoutRef = React.useRef(null);
+  const lastEventIdRef = React.useRef(void 0);
+  React.useEffect(() => {
     const interval = setInterval(() => {
       setTimeSinceLastEvent(Date.now() - lastEventTime);
     }, 1e3);
     return () => clearInterval(interval);
   }, [lastEventTime]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     onStateChange?.(state);
   }, [state, onStateChange]);
-  const handleEvent = React2.useCallback(
+  const handleEvent = React.useCallback(
     (eventType, data, id) => {
       const event = {
         id,
@@ -200,7 +120,7 @@ function useSSEStream(options) {
     },
     [onEvent]
   );
-  const disconnect = React2.useCallback(() => {
+  const disconnect = React.useCallback(() => {
     if (reconnectTimeoutRef.current) {
       clearTimeout(reconnectTimeoutRef.current);
       reconnectTimeoutRef.current = null;
@@ -215,7 +135,7 @@ function useSSEStream(options) {
     }
     setState("disconnected");
   }, []);
-  const connect = React2.useCallback(() => {
+  const connect = React.useCallback(() => {
     disconnect();
     if (!url || !enabled) {
       return;
@@ -388,13 +308,13 @@ function useSSEStream(options) {
     onError,
     disconnect
   ]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (enabled) {
       connect();
     }
     return () => disconnect();
   }, [enabled, connect, disconnect]);
-  const clearEvents = React2.useCallback(() => {
+  const clearEvents = React.useCallback(() => {
     setEvents([]);
     setLastEvent(null);
   }, []);
@@ -411,8 +331,421 @@ function useSSEStream(options) {
   };
 }
 
+// src/hooks/use-sdk-session.ts
+import { useCallback as useCallback3, useMemo, useRef as useRef3, useState as useState3 } from "react";
+function uid() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `sdk-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function toMillis(value) {
+  if (value == null) return void 0;
+  if (typeof value === "number") return value;
+  if (value instanceof Date) return value.getTime();
+  const millis = new Date(value).getTime();
+  return Number.isFinite(millis) ? millis : void 0;
+}
+function asRecord(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+}
+function asString(value) {
+  return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+function textPartsFromContent(content, attachments) {
+  const attachmentText = attachments?.length ? `
+
+Attachments:
+${attachments.map((attachment) => `- ${attachment.name}`).join("\n")}` : "";
+  const text = `${content}${attachmentText}`.trim();
+  return text ? [{ type: "text", text }] : [];
+}
+function normalizeTime(value) {
+  const record = asRecord(value);
+  if (!record) return void 0;
+  const start = Number(record.start ?? record.startedAt ?? record.started_at);
+  const end = Number(record.end ?? record.completedAt ?? record.completed_at);
+  if (!Number.isFinite(start) && !Number.isFinite(end)) {
+    return void 0;
+  }
+  return {
+    start: Number.isFinite(start) ? start : void 0,
+    end: Number.isFinite(end) ? end : void 0
+  };
+}
+function normalizeStatus(value, output, error) {
+  if (value === "pending" || value === "running" || value === "completed" || value === "error") {
+    return value;
+  }
+  if (typeof error === "string" && error.length > 0) {
+    return "error";
+  }
+  if (output !== void 0) {
+    return "completed";
+  }
+  return "running";
+}
+function resolveToolIdentity(rawPart) {
+  return String(
+    rawPart.id ?? rawPart.callID ?? rawPart.callId ?? rawPart.toolUseId ?? rawPart.toolCallId ?? rawPart.tool ?? rawPart.name ?? "tool"
+  );
+}
+function normalizePart(rawPart) {
+  const type = String(rawPart.type ?? "");
+  if (type === "text") {
+    return {
+      type: "text",
+      text: asString(rawPart.text) ?? asString(rawPart.content) ?? ""
+    };
+  }
+  if (type === "reasoning") {
+    return {
+      type: "reasoning",
+      text: asString(rawPart.text) ?? asString(rawPart.content) ?? "",
+      time: normalizeTime(rawPart.time)
+    };
+  }
+  if (type === "tool") {
+    const stateRecord = asRecord(rawPart.state);
+    const input = stateRecord?.input ?? rawPart.input;
+    const output = stateRecord?.output ?? rawPart.output;
+    const error = stateRecord?.error ?? rawPart.error;
+    return {
+      type: "tool",
+      id: resolveToolIdentity(rawPart),
+      tool: String(rawPart.tool ?? rawPart.name ?? "tool"),
+      callID: rawPart.callID != null || rawPart.callId != null ? String(rawPart.callID ?? rawPart.callId) : void 0,
+      state: {
+        status: normalizeStatus(stateRecord?.status ?? rawPart.status, output, error),
+        input,
+        output,
+        error: typeof error === "string" ? error : void 0,
+        metadata: asRecord(stateRecord?.metadata) ?? asRecord(rawPart.metadata),
+        time: normalizeTime(stateRecord?.time ?? rawPart.time)
+      }
+    };
+  }
+  return null;
+}
+function getPartKey(rawPart) {
+  const type = String(rawPart.type ?? "unknown");
+  if (type === "tool") {
+    return `tool:${resolveToolIdentity(rawPart)}`;
+  }
+  if (type === "reasoning") {
+    return `reasoning:${String(rawPart.id ?? rawPart.partId ?? rawPart.index ?? "current")}`;
+  }
+  return `text:${String(rawPart.id ?? rawPart.partId ?? rawPart.index ?? "current")}`;
+}
+function mergePart(existing, incoming, delta) {
+  if (!existing) {
+    if (incoming.type === "text" && delta) {
+      return { type: "text", text: delta };
+    }
+    return incoming;
+  }
+  if (existing.type === "text" && incoming.type === "text") {
+    return {
+      type: "text",
+      text: delta ? `${existing.text}${delta}` : incoming.text,
+      synthetic: incoming.synthetic ?? existing.synthetic
+    };
+  }
+  if (existing.type === "reasoning" && incoming.type === "reasoning") {
+    return {
+      ...existing,
+      ...incoming,
+      text: delta && incoming.text === existing.text ? `${existing.text}${delta}` : incoming.text || existing.text,
+      time: incoming.time ?? existing.time
+    };
+  }
+  if (existing.type === "tool" && incoming.type === "tool") {
+    return {
+      ...existing,
+      ...incoming,
+      state: {
+        ...existing.state,
+        ...incoming.state,
+        time: incoming.state.time ?? existing.state.time
+      }
+    };
+  }
+  return incoming;
+}
+function mapSeeds(messages) {
+  return {
+    messages: messages.map((message, index) => ({
+      id: message.id,
+      role: message.role,
+      _insertionIndex: index,
+      time: {
+        created: toMillis(message.createdAt) ?? Date.now()
+      }
+    })),
+    partMap: Object.fromEntries(
+      messages.map((message) => [
+        message.id,
+        message.parts ?? textPartsFromContent(message.content ?? "", message.attachments)
+      ])
+    )
+  };
+}
+function useSdkSession({
+  initialMessages = []
+} = {}) {
+  const initialConversation = useMemo(
+    () => mapSeeds(initialMessages),
+    [initialMessages]
+  );
+  const [conversation, setConversation] = useState3(initialConversation);
+  const [isStreaming, setIsStreaming] = useState3(false);
+  const activeAssistantIdRef = useRef3(null);
+  const insertionIndexRef = useRef3(initialConversation.messages.length);
+  const partIndexRef = useRef3({});
+  const replaceHistory = useCallback3((messages) => {
+    const next = mapSeeds(messages);
+    setConversation(next);
+    setIsStreaming(false);
+    activeAssistantIdRef.current = null;
+    insertionIndexRef.current = next.messages.length;
+    partIndexRef.current = {};
+  }, []);
+  const appendUserMessage = useCallback3(
+    ({
+      id = uid(),
+      role = "user",
+      content,
+      createdAt,
+      attachments
+    }) => {
+      setConversation((prev) => ({
+        messages: [
+          ...prev.messages,
+          {
+            id,
+            role,
+            _insertionIndex: insertionIndexRef.current++,
+            time: {
+              created: toMillis(createdAt) ?? Date.now()
+            }
+          }
+        ],
+        partMap: {
+          ...prev.partMap,
+          [id]: textPartsFromContent(content, attachments)
+        }
+      }));
+      return id;
+    },
+    []
+  );
+  const beginAssistantMessage = useCallback3(
+    ({
+      id = uid(),
+      role = "assistant",
+      createdAt
+    } = {}) => {
+      setConversation((prev) => ({
+        messages: [
+          ...prev.messages,
+          {
+            id,
+            role,
+            _insertionIndex: insertionIndexRef.current++,
+            time: {
+              created: toMillis(createdAt) ?? Date.now()
+            }
+          }
+        ],
+        partMap: {
+          ...prev.partMap,
+          [id]: prev.partMap[id] ?? []
+        }
+      }));
+      activeAssistantIdRef.current = id;
+      partIndexRef.current[id] = partIndexRef.current[id] ?? {};
+      setIsStreaming(true);
+      return id;
+    },
+    []
+  );
+  const completeAssistantMessage = useCallback3(
+    ({ messageId, finalText } = {}) => {
+      const targetId = messageId ?? activeAssistantIdRef.current;
+      if (!targetId) {
+        setIsStreaming(false);
+        return;
+      }
+      if (finalText) {
+        setConversation((prev) => {
+          const existingParts = prev.partMap[targetId] ?? [];
+          const nextParts = [...existingParts];
+          const textIndex = nextParts.findIndex((part) => part.type === "text");
+          if (textIndex === -1) {
+            nextParts.push({ type: "text", text: finalText });
+          } else {
+            nextParts[textIndex] = { type: "text", text: finalText };
+          }
+          return {
+            ...prev,
+            partMap: {
+              ...prev.partMap,
+              [targetId]: nextParts
+            }
+          };
+        });
+      }
+      delete partIndexRef.current[targetId];
+      if (activeAssistantIdRef.current === targetId) {
+        activeAssistantIdRef.current = null;
+      }
+      setIsStreaming(false);
+    },
+    []
+  );
+  const failAssistantMessage = useCallback3(
+    (error, options) => {
+      const targetId = options?.messageId ?? activeAssistantIdRef.current;
+      if (!targetId) {
+        setIsStreaming(false);
+        return;
+      }
+      setConversation((prev) => ({
+        ...prev,
+        partMap: {
+          ...prev.partMap,
+          [targetId]: [{ type: "text", text: `Error: ${error}` }]
+        }
+      }));
+      delete partIndexRef.current[targetId];
+      if (activeAssistantIdRef.current === targetId) {
+        activeAssistantIdRef.current = null;
+      }
+      setIsStreaming(false);
+    },
+    []
+  );
+  const applySdkEvent = useCallback3(
+    (event, options) => {
+      const eventData = asRecord(event.data) ?? {};
+      if (event.type === "message.updated") {
+        const id = asString(eventData.id) ?? asString(eventData.messageId) ?? options?.messageId;
+        const role = asString(eventData.role) ?? "assistant";
+        if (!id) {
+          return;
+        }
+        setConversation((prev) => {
+          if (prev.messages.some((message) => message.id === id)) {
+            return prev;
+          }
+          return {
+            ...prev,
+            messages: [
+              ...prev.messages,
+              {
+                id,
+                role,
+                _insertionIndex: insertionIndexRef.current++,
+                time: { created: Date.now() }
+              }
+            ],
+            partMap: {
+              ...prev.partMap,
+              [id]: prev.partMap[id] ?? []
+            }
+          };
+        });
+        if (role === "assistant" || role === "system") {
+          activeAssistantIdRef.current = id;
+          partIndexRef.current[id] = partIndexRef.current[id] ?? {};
+          setIsStreaming(true);
+        }
+        return;
+      }
+      if (event.type === "message.part.updated") {
+        const rawPart = asRecord(eventData.part) ?? eventData;
+        const targetId = options?.messageId ?? activeAssistantIdRef.current;
+        const delta = asString(eventData.delta);
+        if (!targetId || !rawPart) {
+          return;
+        }
+        const normalizedPart = normalizePart(rawPart);
+        if (!normalizedPart) {
+          return;
+        }
+        const key = getPartKey(rawPart);
+        setConversation((prev) => {
+          const existingParts = prev.partMap[targetId] ?? [];
+          const nextParts = [...existingParts];
+          const indexMap = partIndexRef.current[targetId] ?? (partIndexRef.current[targetId] = {});
+          const existingIndex = indexMap[key];
+          if (existingIndex == null) {
+            indexMap[key] = nextParts.length;
+            nextParts.push(mergePart(void 0, normalizedPart, delta));
+          } else {
+            nextParts[existingIndex] = mergePart(
+              nextParts[existingIndex],
+              normalizedPart,
+              delta
+            );
+          }
+          return {
+            ...prev,
+            partMap: {
+              ...prev.partMap,
+              [targetId]: nextParts
+            }
+          };
+        });
+        activeAssistantIdRef.current = targetId;
+        setIsStreaming(true);
+        return;
+      }
+      if (event.type === "result") {
+        completeAssistantMessage({
+          messageId: options?.messageId,
+          finalText: asString(eventData.finalText)
+        });
+        return;
+      }
+      if (event.type === "done") {
+        completeAssistantMessage({ messageId: options?.messageId });
+        return;
+      }
+      if (event.type === "error") {
+        failAssistantMessage(
+          asString(eventData.message) ?? "Agent error",
+          { messageId: options?.messageId }
+        );
+      }
+    },
+    [completeAssistantMessage, failAssistantMessage]
+  );
+  const reset = useCallback3(() => {
+    setConversation({ messages: [], partMap: {} });
+    setIsStreaming(false);
+    activeAssistantIdRef.current = null;
+    insertionIndexRef.current = 0;
+    partIndexRef.current = {};
+  }, []);
+  return {
+    messages: conversation.messages,
+    partMap: conversation.partMap,
+    isStreaming,
+    activeAssistantMessageId: activeAssistantIdRef.current,
+    replaceHistory,
+    appendUserMessage,
+    beginAssistantMessage,
+    applySdkEvent,
+    completeAssistantMessage,
+    failAssistantMessage,
+    setStreaming: setIsStreaming,
+    reset
+  };
+}
+
 // src/hooks/use-session-stream.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
 var _insertionCounter = 0;
 function mapApiMessage(msg) {
   const created = msg.info.timestamp ? new Date(msg.info.timestamp).getTime() : Date.now();
@@ -467,8 +800,8 @@ function useSessionStream({
   const [isStreaming, setIsStreaming] = useState4(false);
   const [error, setError] = useState4(null);
   const [connected, setConnected] = useState4(false);
-  const abortRef = useRef3(null);
-  const streamingMsgIdRef = useRef3(null);
+  const abortRef = useRef4(null);
+  const streamingMsgIdRef = useRef4(null);
   const refetch = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -655,7 +988,7 @@ function useSessionStream({
       setError(msg);
     }
   }, [apiUrl, token, sessionId]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!enabled || !token || !sessionId) return;
     refetch();
     connectSSE();
@@ -668,12 +1001,12 @@ function useSessionStream({
 }
 
 // src/hooks/use-dropdown-menu.ts
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
 function useDropdownMenu(options) {
   const closeOnEsc = options?.closeOnEsc ?? true;
   const [open, setOpen] = useState5(false);
-  const ref = useRef4(null);
-  useEffect4(() => {
+  const ref = useRef5(null);
+  useEffect3(() => {
     function handleClick(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -684,7 +1017,7 @@ function useDropdownMenu(options) {
     }
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!open || !closeOnEsc) return;
     function handleKey(e) {
       if (e.key === "Escape") setOpen(false);
@@ -702,7 +1035,7 @@ function useDropdownMenu(options) {
 }
 
 // src/hooks/use-sidecar-auth.ts
-import { useState as useState6, useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useState as useState6, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef6 } from "react";
 function storageKey(resourceId, apiUrl) {
   return `sidecar_session_${resourceId}__${apiUrl}`;
 }
@@ -738,7 +1071,7 @@ function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
   const [expiresAt, setExpiresAt] = useState6(cached?.expiresAt ?? 0);
   const [isAuthenticating, setIsAuthenticating] = useState6(false);
   const [error, setError] = useState6(null);
-  const refreshTimerRef = useRef5(void 0);
+  const refreshTimerRef = useRef6(void 0);
   const clearCachedToken = useCallback5(() => {
     setToken(null);
     setExpiresAt(0);
@@ -779,7 +1112,7 @@ function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
       setIsAuthenticating(false);
     }
   }, [resourceId, apiUrl, signMessage, clearCachedToken]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (refreshTimerRef.current) {
       clearTimeout(refreshTimerRef.current);
     }
@@ -812,10 +1145,8 @@ function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
 
 export {
   useToolCallStream,
-  useAuth,
-  createAuthFetcher,
-  useApiKey,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useDropdownMenu,
   useSidecarAuth