@lumerahq/ui 0.9.1 → 0.10.0-dev.0

package/dist/ui.css

@@ -423,6 +423,14 @@
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+
   .sr-only {
     clip-path: inset(50%);
     white-space: nowrap;
@@ -611,6 +619,10 @@
     margin-right: calc(var(--spacing) * 2);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -668,6 +680,10 @@
     display: none;
   }
 
+  .inline {
+    display: inline;
+  }
+
   .inline-flex {
     display: inline-flex;
   }
@@ -720,6 +736,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -799,6 +820,14 @@
     height: calc(var(--spacing) * 24);
   }
 
+  .h-56 {
+    height: calc(var(--spacing) * 56);
+  }
+
+  .h-\[500px\] {
+    height: 500px;
+  }
+
   .h-\[720px\] {
     height: 720px;
   }
@@ -835,14 +864,18 @@
     max-height: calc(var(--spacing) * 48);
   }
 
-  .max-h-56 {
-    max-height: calc(var(--spacing) * 56);
-  }
-
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
 
+  .max-h-\[200px\] {
+    max-height: 200px;
+  }
+
+  .max-h-\[600px\] {
+    max-height: 600px;
+  }
+
   .max-h-\[calc\(100vh-2rem\)\] {
     max-height: calc(100vh - 2rem);
   }
@@ -963,6 +996,10 @@
     max-width: 88%;
   }
 
+  .max-w-full {
+    max-width: 100%;
+  }
+
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -1072,6 +1109,10 @@
     cursor: default;
   }
 
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1208,12 +1249,22 @@
     gap: calc(var(--spacing) * 8);
   }
 
+  .gap-px {
+    gap: 1px;
+  }
+
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-1\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-2 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
@@ -1502,13 +1553,13 @@
     }
   }
 
-  .bg-muted, .bg-muted\/30 {
+  .bg-muted, .bg-muted\/20 {
     background-color: var(--muted);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-muted\/30 {
-      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    .bg-muted\/20 {
+      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
     }
   }
 
@@ -1532,14 +1583,30 @@
     }
   }
 
+  .bg-muted\/60 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/60 {
+      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
+    }
+  }
+
   .bg-popover {
     background-color: var(--popover);
   }
 
-  .bg-primary {
+  .bg-primary, .bg-primary\/10 {
     background-color: var(--primary);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/10 {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -1580,6 +1647,10 @@
     background-color: #0000;
   }
 
+  .bg-white {
+    background-color: var(--color-white);
+  }
+
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -1588,6 +1659,10 @@
     fill: var(--foreground);
   }
 
+  .object-contain {
+    object-fit: contain;
+  }
+
   .object-cover {
     object-fit: cover;
   }
@@ -1604,6 +1679,10 @@
     padding: calc(var(--spacing) * 2);
   }
 
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1786,6 +1865,10 @@
     font-size: 11px;
   }
 
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1835,6 +1918,10 @@
     text-wrap: balance;
   }
 
+  .break-words {
+    overflow-wrap: break-word;
+  }
+
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1871,18 +1958,40 @@
     color: var(--color-emerald-800);
   }
 
-  .text-foreground {
+  .text-foreground, .text-foreground\/80 {
     color: var(--foreground);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-foreground\/80 {
+      color: color-mix(in oklab, var(--foreground) 80%, transparent);
+    }
+  }
+
   .text-green-600 {
     color: var(--color-green-600);
   }
 
-  .text-muted-foreground {
+  .text-muted-foreground, .text-muted-foreground\/50 {
+    color: var(--muted-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-muted-foreground\/50 {
+      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+    }
+  }
+
+  .text-muted-foreground\/60 {
     color: var(--muted-foreground);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-muted-foreground\/60 {
+      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+    }
+  }
+
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
@@ -1942,14 +2051,26 @@
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
 
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
 
+  .opacity-0 {
+    opacity: 0;
+  }
+
   .opacity-30 {
     opacity: .3;
   }
 
+  .opacity-40 {
+    opacity: .4;
+  }
+
   .opacity-50 {
     opacity: .5;
   }
@@ -1958,6 +2079,10 @@
     opacity: .8;
   }
 
+  .opacity-100 {
+    opacity: 1;
+  }
+
   .mix-blend-color {
     mix-blend-mode: color;
   }

package/dist/{use-automation-run-D_1647k0.js → use-automation-run-BnhDQAJ6.js}

@@ -1,6 +1,90 @@
-import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
-import { n as ensureAutomationRun, l as createAutomationRun, h as cancelAutomationRun, f as automationStatuses, t as getAutomationRun } from "./automations-DNWw-HT7.js";
+import { H as ensureAutomationRun, F as createAutomationRun, A as cancelAutomationRun, z as automationStatuses, K as getAutomationRun } from "./automations-Bb9nlU05.js";
+const QUEUED_DISCOVERY_POLL_MS = 2e3;
+const IDLE_DISCOVERY_POLL_MS = 1e4;
+const HIDDEN_DISCOVERY_POLL_MS = 3e4;
+function isDocumentHidden() {
+  return typeof document !== "undefined" && document.visibilityState === "hidden";
+}
+function discoveryPollDelayMs({
+  hasQueuedPending,
+  hidden
+}) {
+  if (hidden) return HIDDEN_DISCOVERY_POLL_MS;
+  if (hasQueuedPending) return QUEUED_DISCOVERY_POLL_MS;
+  return IDLE_DISCOVERY_POLL_MS;
+}
+function useDiscoveryPoll({
+  enabled,
+  isTransportActive,
+  isRefreshInFlight,
+  hasQueuedPending,
+  refresh
+}) {
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") {
+      return;
+    }
+    let timer = null;
+    let disposed = false;
+    const clearTimer = () => {
+      if (timer != null) {
+        window.clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const schedule = () => {
+      if (disposed) return;
+      clearTimer();
+      timer = window.setTimeout(
+        () => {
+          timer = null;
+          if (isTransportActive() || isRefreshInFlight()) {
+            schedule();
+            return;
+          }
+          void refresh().finally(() => {
+            schedule();
+          });
+        },
+        discoveryPollDelayMs({
+          hidden: isDocumentHidden(),
+          hasQueuedPending: hasQueuedPending()
+        })
+      );
+    };
+    const refreshNow = () => {
+      if (disposed || isTransportActive() || isRefreshInFlight() || isDocumentHidden()) {
+        schedule();
+        return;
+      }
+      clearTimer();
+      void refresh().finally(() => {
+        schedule();
+      });
+    };
+    const onVisibilityChange = () => {
+      if (isDocumentHidden()) {
+        schedule();
+        return;
+      }
+      refreshNow();
+    };
+    const onFocus = () => {
+      refreshNow();
+    };
+    schedule();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("focus", onFocus);
+    return () => {
+      disposed = true;
+      clearTimer();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [enabled, hasQueuedPending, isRefreshInFlight, isTransportActive, refresh]);
+}
 const DEFAULT_SESSION_ID = "default";
 const DEFAULT_HISTORY_LIMIT = 10;
 const DEFAULT_MAX_BUFFERED_MESSAGES = 100;
@@ -17,6 +101,10 @@ function useAgentChat({
   disabled = false,
   autoLoadHistory = true,
   autoSubscribe = true,
+  watchdog = false,
+  watchdogTimeoutMs = 3e4,
+  watchdogPollMs = 1e3,
+  discoveryPoll = false,
   idFactory = defaultIDFactory,
   onMessagesChange,
   onTurnComplete,
@@ -35,10 +123,18 @@ function useAgentChat({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isStreaming, setIsStreaming] = useState(false);
   const [isAborting, setIsAborting] = useState(false);
+  const [historyLoaded, setHistoryLoaded] = useState(false);
   const messagesRef = useRef(messages);
   const subscriptionRef = useRef(null);
   const activeRequestIdRef = useRef(void 0);
   const mountedRef = useRef(true);
+  const refreshInFlightRef = useRef(false);
+  const isStreamingRef = useRef(false);
+  const isSubmittingRef = useRef(false);
+  const isAbortingRef = useRef(false);
+  const isLoadingHistoryRef = useRef(false);
+  const watchdogTimerRef = useRef(null);
+  const identityKeyRef = useRef(`${agentId ?? ""}::${sessionId}`);
   const setMessages = useCallback(
     (updater) => {
       setMessagesState((current) => {
@@ -57,8 +153,19 @@ function useAgentChat({
       mountedRef.current = false;
       subscriptionRef.current?.close();
       subscriptionRef.current = null;
+      if (watchdogTimerRef.current != null) {
+        clearTimeout(watchdogTimerRef.current);
+        watchdogTimerRef.current = null;
+      }
     };
   }, []);
+  useEffect(() => {
+    isStreamingRef.current = isStreaming;
+    isSubmittingRef.current = isSubmitting;
+    isAbortingRef.current = isAborting;
+    isLoadingHistoryRef.current = isLoadingHistory;
+    identityKeyRef.current = `${agentId ?? ""}::${sessionId}`;
+  });
   const handleError = useCallback(
     (err) => {
       if (!mountedRef.current) return;
@@ -77,18 +184,92 @@ function useAgentChat({
   );
   const loadHistory = useCallback(async () => {
     if (disabled) return;
+    const requestedIdentity = `${agentId ?? ""}::${sessionId}`;
     setIsLoadingHistory(true);
     setError(null);
     try {
       const result = await transport.loadHistory({ agentId, sessionId, limit: historyLimit });
-      if (!mountedRef.current) return;
+      if (!mountedRef.current || identityKeyRef.current !== requestedIdentity) return;
       applyHistoryResult(result);
+      setHistoryLoaded(true);
     } catch (err) {
+      if (identityKeyRef.current !== requestedIdentity) return;
       handleError(err);
     } finally {
-      if (mountedRef.current) setIsLoadingHistory(false);
+      if (mountedRef.current && identityKeyRef.current === requestedIdentity) setIsLoadingHistory(false);
     }
   }, [agentId, applyHistoryResult, disabled, handleError, historyLimit, sessionId, transport]);
+  const clearWatchdog = useCallback(() => {
+    if (watchdogTimerRef.current != null) {
+      clearTimeout(watchdogTimerRef.current);
+      watchdogTimerRef.current = null;
+    }
+  }, []);
+  const requestStillActive = useCallback((requestId) => {
+    return messagesRef.current.some(
+      (message) => message.role === "user" && message.requestId === requestId && isActiveStatus(message.status)
+    );
+  }, []);
+  const reconcileFromHistory = useCallback(async () => {
+    if (disabled || refreshInFlightRef.current) return;
+    const requestedIdentity = `${agentId ?? ""}::${sessionId}`;
+    refreshInFlightRef.current = true;
+    try {
+      const result = await transport.loadHistory({ agentId, sessionId, limit: historyLimit });
+      if (!mountedRef.current || identityKeyRef.current !== requestedIdentity) return;
+      applyHistoryResult(result);
+      setHistoryLoaded(true);
+    } catch {
+    } finally {
+      refreshInFlightRef.current = false;
+    }
+  }, [agentId, applyHistoryResult, disabled, historyLimit, sessionId, transport]);
+  const settleStaleRequest = useCallback(
+    (requestId) => {
+      setMessages(
+        (current) => current.map(
+          (message) => message.role === "user" && message.requestId === requestId && isActiveStatus(message.status) ? { ...message, status: "interrupted" } : message
+        )
+      );
+      handleError(new Error("Lost connection to the agent. The response may still be processing."));
+    },
+    [handleError, setMessages]
+  );
+  const startWatchdog = useCallback(
+    (requestId) => {
+      if (!watchdog) return;
+      clearWatchdog();
+      const startedAt = Date.now();
+      const tick = () => {
+        watchdogTimerRef.current = window.setTimeout(async () => {
+          watchdogTimerRef.current = null;
+          if (!mountedRef.current) return;
+          if (!requestStillActive(requestId)) return;
+          if (Date.now() - startedAt >= watchdogTimeoutMs) {
+            settleStaleRequest(requestId);
+            return;
+          }
+          await reconcileFromHistory();
+          if (!mountedRef.current || !requestStillActive(requestId)) return;
+          if (Date.now() - startedAt >= watchdogTimeoutMs) {
+            settleStaleRequest(requestId);
+            return;
+          }
+          tick();
+        }, watchdogPollMs);
+      };
+      tick();
+    },
+    [
+      clearWatchdog,
+      reconcileFromHistory,
+      requestStillActive,
+      settleStaleRequest,
+      watchdog,
+      watchdogPollMs,
+      watchdogTimeoutMs
+    ]
+  );
   const loadEarlier = useCallback(async () => {
     if (disabled || isLoadingEarlier || !page?.hasMoreBefore || !page.beforeCursor) return;
     const loadEarlierImpl = transport.loadEarlier ?? transport.loadHistory;
@@ -114,6 +295,7 @@ function useAgentChat({
   const settleRequest = useCallback(
     (requestId, status, errorMessage) => {
       if (!requestId) return;
+      clearWatchdog();
       setMessages(
         (current) => current.map(
           (messageItem) => messageItem.role === "user" && messageItem.requestId === requestId ? { ...messageItem, status, error: errorMessage ?? messageItem.error } : messageItem
@@ -125,7 +307,7 @@ function useAgentChat({
       if (!transport.subscribe) return;
       void loadHistory();
     },
-    [loadHistory, onTurnComplete, setMessages, transport.subscribe]
+    [clearWatchdog, loadHistory, onTurnComplete, setMessages, transport.subscribe]
   );
   const applyStreamEvent = useCallback(
     (event) => {
@@ -189,6 +371,7 @@ function useAgentChat({
     (requestId) => {
       if (!autoSubscribe || !transport.subscribe || !requestId) return;
       subscriptionRef.current?.close();
+      clearWatchdog();
       activeRequestIdRef.current = requestId;
       setIsStreaming(true);
       subscriptionRef.current = transport.subscribe(
@@ -196,18 +379,36 @@ function useAgentChat({
         {
           onEvent: applyStreamEvent,
           onError: (err) => {
-            handleError(err);
-            if (mountedRef.current) setIsStreaming(false);
+            if (!mountedRef.current) return;
+            setIsStreaming(false);
+            if (watchdog && activeRequestIdRef.current === requestId && requestStillActive(requestId)) {
+              startWatchdog(requestId);
+            } else {
+              handleError(err);
+            }
           },
           onClose: () => {
-            if (mountedRef.current && activeRequestIdRef.current === requestId) {
-              setIsStreaming(false);
+            if (!mountedRef.current || activeRequestIdRef.current !== requestId) return;
+            setIsStreaming(false);
+            if (watchdog && requestStillActive(requestId)) {
+              startWatchdog(requestId);
             }
           }
         }
       );
     },
-    [agentId, applyStreamEvent, autoSubscribe, handleError, sessionId, transport]
+    [
+      agentId,
+      applyStreamEvent,
+      autoSubscribe,
+      clearWatchdog,
+      handleError,
+      requestStillActive,
+      sessionId,
+      startWatchdog,
+      transport,
+      watchdog
+    ]
   );
   const sendMessage = useCallback(
     async (message) => {
@@ -272,6 +473,7 @@ function useAgentChat({
       await transport.abort?.({ agentId, sessionId, requestId });
       subscriptionRef.current?.close();
       subscriptionRef.current = null;
+      clearWatchdog();
       setIsStreaming(false);
       setMessages(
         (current) => current.map(
@@ -283,7 +485,7 @@ function useAgentChat({
     } finally {
       if (mountedRef.current) setIsAborting(false);
     }
-  }, [agentId, disabled, handleError, isAborting, sessionId, setMessages, transport]);
+  }, [agentId, clearWatchdog, disabled, handleError, isAborting, sessionId, setMessages, transport]);
   const attachFiles = useCallback(
     async (files) => {
       if (files.length === 0) return;
@@ -327,6 +529,24 @@ function useAgentChat({
   const clearPendingFiles = useCallback(() => {
     setPendingFiles([]);
   }, []);
+  const identityKey = `${agentId ?? ""}::${sessionId}`;
+  const previousIdentityRef = useRef(identityKey);
+  useEffect(() => {
+    if (previousIdentityRef.current === identityKey) return;
+    previousIdentityRef.current = identityKey;
+    subscriptionRef.current?.close();
+    subscriptionRef.current = null;
+    clearWatchdog();
+    activeRequestIdRef.current = void 0;
+    setMessages([]);
+    setPage(initialPage ?? null);
+    setTokenUsage(null);
+    setError(null);
+    setIsStreaming(false);
+    setIsSubmitting(false);
+    setIsAborting(false);
+    setHistoryLoaded(false);
+  }, [identityKey, clearWatchdog, initialPage, setMessages]);
   useEffect(() => {
     if (!autoLoadHistory) return;
     void loadHistory();
@@ -342,6 +562,22 @@ function useAgentChat({
   const canSubmit = !disabled && !isSubmitting && !hasUploadingFiles && !hasFailedUploads && (input.trim().length > 0 || pendingFiles.length > 0) && (!hasActive || queueLength < maxQueuedMessages);
   const canAbort = !disabled && !isAborting && hasActive;
   const phase = derivePhase({ isLoadingHistory, isLoadingEarlier, isSubmitting, isStreaming, isAborting, error });
+  const isTransportActiveCb = useCallback(
+    () => isStreamingRef.current || isSubmittingRef.current || isAbortingRef.current,
+    []
+  );
+  const isRefreshInFlightCb = useCallback(() => isLoadingHistoryRef.current || refreshInFlightRef.current, []);
+  const hasQueuedPendingCb = useCallback(
+    () => messagesRef.current.some((message) => message.role === "user" && message.status === "queued"),
+    []
+  );
+  useDiscoveryPoll({
+    enabled: discoveryPoll && autoLoadHistory && historyLoaded && !disabled,
+    isTransportActive: isTransportActiveCb,
+    isRefreshInFlight: isRefreshInFlightCb,
+    hasQueuedPending: hasQueuedPendingCb,
+    refresh: reconcileFromHistory
+  });
   return {
     messages,
     turns,
@@ -593,8 +829,16 @@ function buildAgentChatTurns(messages) {
       turns.push({ id: message.requestId ?? message.id, requestId: message.requestId, assistants: [message] });
     }
   }
+  turns.sort((a, b) => turnRank(a) - turnRank(b));
+  const first = turns[0];
+  if (turns.length > 1 && first && !first.user && (first.systems?.length ?? 0) === 0 && first.assistants.length > 0) {
+    return turns.slice(1);
+  }
   return turns;
 }
+function turnRank(turn) {
+  return turn.user?.status === "queued" ? 1 : 0;
+}
 function accumulateTokenUsage(current, incoming) {
   if (!current) return incoming;
   return {

package/dist/{use-sql-table-8APCNryn.js → use-sql-table-D5tupvS2.js}

@@ -1,7 +1,6 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
-import { D as listRunsByAgent, f as automationStatuses, l as createAutomationRun, o as onInitMessage } from "./automations-DNWw-HT7.js";
-import { u as uploadFile, i as pbSql, k as pbUpdateRecord } from "./api-Bm4dzr1n.js";
+import { T as listRunsByAgent, z as automationStatuses, F as createAutomationRun, y as uploadFile, o as onInitMessage, t as pbSql, v as pbUpdateRecord } from "./automations-Bb9nlU05.js";
 function useAgentChatSessions({
   agentId,
   transport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumerahq/ui",
-  "version": "0.9.1",
+  "version": "0.10.0-dev.0",
   "type": "module",
   "sideEffects": [
     "*.css"