@tangle-network/sandbox-ui 0.3.7 → 0.3.11

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

@@ -1,6 +1,17 @@
 import {
   parseToolEvent
 } from "./chunk-CCKNIAS7.js";
+import {
+  bumpActiveSessionActivity,
+  registerActiveSession,
+  setActiveSessionAttention,
+  setActiveSessionConnection,
+  setActiveSessionError,
+  setActiveSessionRunning,
+  setForegroundActiveSession,
+  unregisterActiveSession,
+  updateActiveSessionMeta
+} from "./chunk-OEX7NZE3.js";
 
 // src/hooks/use-tool-call-stream.ts
 import { useState, useCallback, useRef } from "react";
@@ -744,8 +755,252 @@ function useSdkSession({
   };
 }
 
+// src/hooks/use-realtime-session.ts
+import { createElement, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+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] = useState4("disconnected");
+  const [lastError, setLastError] = useState4(null);
+  const [reconnectAttempts, setReconnectAttempts] = useState4(0);
+  const socketRef = useRef4(null);
+  const timerRef = useRef4(null);
+  const reconnectAttemptsRef = useRef4(0);
+  const shouldReconnectRef = useRef4(true);
+  const registration = useMemo2(
+    () => ({
+      sessionId,
+      projectId,
+      projectLabel,
+      title,
+      href,
+      metadata
+    }),
+    [href, metadata, projectId, projectLabel, sessionId, title]
+  );
+  useEffect2(() => {
+    if (!sessionId || !keepRegistered) return void 0;
+    registerActiveSession(registration);
+    return () => {
+      unregisterActiveSession(sessionId);
+    };
+  }, [keepRegistered, registration, sessionId]);
+  useEffect2(() => {
+    if (!sessionId || !keepRegistered) return;
+    updateActiveSessionMeta(sessionId, {
+      projectId,
+      projectLabel,
+      title,
+      href,
+      metadata
+    });
+  }, [href, keepRegistered, metadata, projectId, projectLabel, sessionId, title]);
+  useEffect2(() => {
+    if (!sessionId || !foreground) return void 0;
+    setForegroundActiveSession(sessionId);
+    return () => {
+      setForegroundActiveSession(null);
+    };
+  }, [foreground, sessionId]);
+  useEffect2(() => {
+    if (!enabled || !sessionId || !connectUrl || typeof window === "undefined") {
+      setConnectionState("disconnected");
+      if (sessionId) {
+        setActiveSessionConnection(sessionId, {
+          connectionState: "disconnected",
+          reconnectState: "idle",
+          transportMode
+        });
+      }
+      return void 0;
+    }
+    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?.(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
+    })
+  );
+}
+
 // src/hooks/use-session-stream.ts
-import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
 var _insertionCounter = 0;
 function mapApiMessage(msg) {
   const created = msg.info.timestamp ? new Date(msg.info.timestamp).getTime() : Date.now();
@@ -795,13 +1050,13 @@ function useSessionStream({
   sessionId,
   enabled = true
 }) {
-  const [messages, setMessages] = useState4([]);
-  const [partMap, setPartMap] = useState4({});
-  const [isStreaming, setIsStreaming] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [connected, setConnected] = useState4(false);
-  const abortRef = useRef4(null);
-  const streamingMsgIdRef = useRef4(null);
+  const [messages, setMessages] = useState5([]);
+  const [partMap, setPartMap] = useState5({});
+  const [isStreaming, setIsStreaming] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [connected, setConnected] = useState5(false);
+  const abortRef = useRef5(null);
+  const streamingMsgIdRef = useRef5(null);
   const refetch = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -988,7 +1243,7 @@ function useSessionStream({
       setError(msg);
     }
   }, [apiUrl, token, sessionId]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled || !token || !sessionId) return;
     refetch();
     connectSSE();
@@ -1001,12 +1256,12 @@ function useSessionStream({
 }
 
 // src/hooks/use-dropdown-menu.ts
-import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
 function useDropdownMenu(options) {
   const closeOnEsc = options?.closeOnEsc ?? true;
-  const [open, setOpen] = useState5(false);
-  const ref = useRef5(null);
-  useEffect3(() => {
+  const [open, setOpen] = useState6(false);
+  const ref = useRef6(null);
+  useEffect4(() => {
     function handleClick(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -1017,7 +1272,7 @@ function useDropdownMenu(options) {
     }
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open || !closeOnEsc) return;
     function handleKey(e) {
       if (e.key === "Escape") setOpen(false);
@@ -1035,7 +1290,7 @@ function useDropdownMenu(options) {
 }
 
 // src/hooks/use-sidecar-auth.ts
-import { useState as useState6, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef6 } from "react";
+import { useState as useState7, useCallback as useCallback5, useEffect as useEffect5, useRef as useRef7 } from "react";
 function storageKey(resourceId, apiUrl) {
   return `sidecar_session_${resourceId}__${apiUrl}`;
 }
@@ -1067,11 +1322,11 @@ function clearSession(resourceId, apiUrl) {
 }
 function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
   const cached = loadSession(resourceId, apiUrl);
-  const [token, setToken] = useState6(cached?.token ?? null);
-  const [expiresAt, setExpiresAt] = useState6(cached?.expiresAt ?? 0);
-  const [isAuthenticating, setIsAuthenticating] = useState6(false);
-  const [error, setError] = useState6(null);
-  const refreshTimerRef = useRef6(void 0);
+  const [token, setToken] = useState7(cached?.token ?? null);
+  const [expiresAt, setExpiresAt] = useState7(cached?.expiresAt ?? 0);
+  const [isAuthenticating, setIsAuthenticating] = useState7(false);
+  const [error, setError] = useState7(null);
+  const refreshTimerRef = useRef7(void 0);
   const clearCachedToken = useCallback5(() => {
     setToken(null);
     setExpiresAt(0);
@@ -1112,7 +1367,7 @@ function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
       setIsAuthenticating(false);
     }
   }, [resourceId, apiUrl, signMessage, clearCachedToken]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (refreshTimerRef.current) {
       clearTimeout(refreshTimerRef.current);
     }
@@ -1147,6 +1402,8 @@ export {
   useToolCallStream,
   useSSEStream,
   useSdkSession,
+  useRealtimeSession,
+  RealtimeSessionRegistry,
   useSessionStream,
   useDropdownMenu,
   useSidecarAuth

package/dist/chunk-OEX7NZE3.js

@@ -0,0 +1,321 @@
+// src/stores/active-sessions-store.ts
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+import { useMemo } from "react";
+var INITIAL_STATE = {
+  sessions: {},
+  lastUpdatedAt: 0
+};
+var STATUS_PRIORITY = {
+  running: 0,
+  error: 1,
+  "attention-needed": 2,
+  idle: 3
+};
+var DEFAULT_RECORD = {
+  status: "idle",
+  isRunning: false,
+  isForeground: false,
+  needsAttention: false,
+  connectionState: "disconnected",
+  reconnectState: "idle",
+  transportMode: null,
+  lastError: null,
+  lastEventAt: null
+};
+var activeSessionsAtom = atom(INITIAL_STATE);
+var foregroundSessionId = null;
+function createRecord(options, now) {
+  return {
+    sessionId: options.sessionId,
+    projectId: options.projectId ?? null,
+    projectLabel: options.projectLabel,
+    title: options.title,
+    href: options.href,
+    registeredAt: now,
+    lastActivityAt: now,
+    metadata: options.metadata,
+    ...DEFAULT_RECORD,
+    isForeground: options.sessionId === foregroundSessionId
+  };
+}
+function resolveStatus(session) {
+  if (session.isRunning) return "running";
+  if (session.lastError || session.reconnectState === "failed") return "error";
+  if (session.needsAttention) return "attention-needed";
+  return "idle";
+}
+function normalizeSession(session) {
+  return {
+    ...session,
+    status: resolveStatus(session)
+  };
+}
+function updateSession(sessionId, updater) {
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[sessionId];
+  if (!existing) return;
+  const now = Date.now();
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [sessionId]: normalizeSession(updater(existing, now))
+    },
+    lastUpdatedAt: now
+  });
+}
+function registerActiveSession(options) {
+  const now = Date.now();
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[options.sessionId];
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [options.sessionId]: normalizeSession(
+        existing ? {
+          ...existing,
+          projectId: existing.projectId ?? options.projectId ?? null,
+          projectLabel: options.projectLabel ?? existing.projectLabel,
+          title: options.title ?? existing.title,
+          href: options.href ?? existing.href,
+          metadata: options.metadata ?? existing.metadata,
+          lastActivityAt: now,
+          isForeground: options.sessionId === foregroundSessionId || existing.isForeground
+        } : createRecord(options, now)
+      )
+    },
+    lastUpdatedAt: now
+  });
+}
+function unregisterActiveSession(sessionId) {
+  const current = activeSessionsAtom.get();
+  if (!current.sessions[sessionId]) return;
+  const { [sessionId]: _removed, ...remaining } = current.sessions;
+  if (foregroundSessionId === sessionId) {
+    foregroundSessionId = null;
+  }
+  activeSessionsAtom.set({
+    sessions: remaining,
+    lastUpdatedAt: Date.now()
+  });
+}
+function setForegroundActiveSession(sessionId) {
+  foregroundSessionId = sessionId;
+  const current = activeSessionsAtom.get();
+  const now = Date.now();
+  let changed = false;
+  const sessions = Object.fromEntries(
+    Object.entries(current.sessions).map(([id, session]) => {
+      const isForeground = id === sessionId;
+      if (session.isForeground !== isForeground) {
+        changed = true;
+      }
+      return [
+        id,
+        {
+          ...session,
+          isForeground,
+          lastActivityAt: isForeground ? now : session.lastActivityAt
+        }
+      ];
+    })
+  );
+  if (!changed) return;
+  activeSessionsAtom.set({
+    sessions,
+    lastUpdatedAt: now
+  });
+}
+function updateActiveSessionMeta(sessionId, meta) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    ...meta,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionConnection(sessionId, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    connectionState: options.connectionState,
+    reconnectState: options.reconnectState ?? session.reconnectState,
+    transportMode: options.transportMode ?? session.transportMode,
+    lastError: options.lastError === void 0 ? session.lastError : options.lastError,
+    lastEventAt: options.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionRunning(sessionId, isRunning, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning,
+    needsAttention: isRunning ? false : session.needsAttention,
+    lastError: isRunning ? null : session.lastError,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionAttention(sessionId, needsAttention, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    needsAttention,
+    isRunning: needsAttention ? false : session.isRunning,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now
+  }));
+}
+function setActiveSessionError(sessionId, error) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning: false,
+    needsAttention: false,
+    lastError: error,
+    reconnectState: error ? "failed" : "idle",
+    connectionState: error ? "error" : session.connectionState,
+    lastEventAt: now,
+    lastActivityAt: now
+  }));
+}
+function bumpActiveSessionActivity(sessionId, options) {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt ?? now,
+    lastActivityAt: now
+  }));
+}
+function resetActiveSessions() {
+  foregroundSessionId = null;
+  activeSessionsAtom.set(INITIAL_STATE);
+}
+function getAllActiveSessions(state) {
+  return Object.values(state.sessions);
+}
+function getActiveSession(state, sessionId) {
+  return state.sessions[sessionId] ?? null;
+}
+function getSessionsForProject(state, projectId) {
+  return Object.values(state.sessions).filter((session) => session.projectId === projectId);
+}
+function getSessionsForNavbar(state, projectId) {
+  const sessions = projectId == null ? Object.values(state.sessions) : getSessionsForProject(state, projectId);
+  return [...sessions].sort((left, right) => {
+    if (left.isForeground !== right.isForeground) {
+      return Number(right.isForeground) - Number(left.isForeground);
+    }
+    const statusDiff = STATUS_PRIORITY[left.status] - STATUS_PRIORITY[right.status];
+    if (statusDiff !== 0) {
+      return statusDiff;
+    }
+    return right.lastActivityAt - left.lastActivityAt;
+  });
+}
+function getSessionsByActivity(state) {
+  return [...Object.values(state.sessions)].sort(
+    (left, right) => right.lastActivityAt - left.lastActivityAt
+  );
+}
+function getTotalRunningSessionCount(state) {
+  return Object.values(state.sessions).filter((session) => session.isRunning).length;
+}
+function hasBackgroundRunningSessions(state) {
+  return Object.values(state.sessions).some(
+    (session) => session.isRunning && !session.isForeground
+  );
+}
+function getAllProjectActivity(state) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const session of Object.values(state.sessions)) {
+    if (session.projectId == null) continue;
+    const existing = grouped.get(session.projectId);
+    if (existing) {
+      existing.activeSessionCount += 1;
+      existing.lastActivityAt = Math.max(existing.lastActivityAt, session.lastActivityAt);
+      if (session.isRunning) {
+        existing.runningSessionIds.push(session.sessionId);
+      }
+      if (!existing.projectLabel && session.projectLabel) {
+        existing.projectLabel = session.projectLabel;
+      }
+      continue;
+    }
+    grouped.set(session.projectId, {
+      projectId: session.projectId,
+      projectLabel: session.projectLabel,
+      activeSessionCount: 1,
+      runningSessionIds: session.isRunning ? [session.sessionId] : [],
+      lastActivityAt: session.lastActivityAt
+    });
+  }
+  return [...grouped.values()].sort((left, right) => right.lastActivityAt - left.lastActivityAt);
+}
+function useActiveSessionsState() {
+  return useStore(activeSessionsAtom);
+}
+function useActiveSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllActiveSessions(state), [state]);
+}
+function useActiveSession(sessionId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => sessionId ? getActiveSession(state, sessionId) : null,
+    [sessionId, state]
+  );
+}
+function useProjectSessions(projectId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => projectId == null ? [] : getSessionsForProject(state, projectId),
+    [projectId, state]
+  );
+}
+function useNavbarSessions(projectId) {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsForNavbar(state, projectId), [projectId, state]);
+}
+function useSessionsByActivity() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsByActivity(state), [state]);
+}
+function useProjectActivity() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllProjectActivity(state), [state]);
+}
+function useTotalRunningSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getTotalRunningSessionCount(state), [state]);
+}
+function useHasBackgroundRunningSessions() {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => hasBackgroundRunningSessions(state), [state]);
+}
+
+export {
+  activeSessionsAtom,
+  registerActiveSession,
+  unregisterActiveSession,
+  setForegroundActiveSession,
+  updateActiveSessionMeta,
+  setActiveSessionConnection,
+  setActiveSessionRunning,
+  setActiveSessionAttention,
+  setActiveSessionError,
+  bumpActiveSessionActivity,
+  resetActiveSessions,
+  getAllActiveSessions,
+  getActiveSession,
+  getSessionsForProject,
+  getSessionsForNavbar,
+  getSessionsByActivity,
+  getTotalRunningSessionCount,
+  hasBackgroundRunningSessions,
+  getAllProjectActivity,
+  useActiveSessionsState,
+  useActiveSessions,
+  useActiveSession,
+  useProjectSessions,
+  useNavbarSessions,
+  useSessionsByActivity,
+  useProjectActivity,
+  useTotalRunningSessions,
+  useHasBackgroundRunningSessions
+};