@tutti-os/agent-gui 0.0.75 → 0.0.77

package/dist/index.js

@@ -32,7 +32,7 @@ import {
 import {
   AgentInteractivePromptSurface,
   approvalOptionDisplayLabel
-} from "./chunk-U6EDUTUO.js";
+} from "./chunk-3B3KPQ4Y.js";
 import {
   PLAN_IMPLEMENTATION_ACTION_FEEDBACK,
   PLAN_IMPLEMENTATION_ACTION_IMPLEMENT,
@@ -88,14 +88,14 @@ import {
   textPromptContent,
   toLocalShortDateTime,
   useProjectedAgentConversation
-} from "./chunk-7GSBP5CN.js";
+} from "./chunk-WIRYWLAI.js";
 import {
   AgentMessageMarkdown,
   AgentTargetPresentationProvider,
   ZoomableImage,
   cn,
   resolveWorkspaceLinkAction
-} from "./chunk-3FYA2K4P.js";
+} from "./chunk-5CLGEUWK.js";
 import {
   openAgentEnvPanel
 } from "./chunk-PSLAWU25.js";
@@ -15159,8 +15159,6 @@ function useAgentGUINodeController({
   const activeConversationCreatePending = Boolean(activeConversationId) && isCreatingConversation && startingConversationIdRef.current === activeConversationId;
   const canQueueWhileBusy = Boolean(activeConversationId) && (activeConversationCreatePending || activeConversationBusy || isSubmitting || Boolean(activeSessionState?.pendingInteractive));
   useEffect4(() => {
-    const firstVersion = minFiniteMessageVersion(activeMessages);
-    const lastVersion = maxFiniteMessageVersion(activeMessages);
     const diagnosticKey = [
       activeConversationId ?? "",
       activeConversation?.status ?? "",
@@ -15182,10 +15180,9 @@ function useAgentGUINodeController({
       activeSubmitBlocked ? "submit-blocked" : "submit-open",
       pendingApproval?.requestId ?? "",
       promptRequestId(pendingInteractivePrompt) ?? "",
-      conversation?.rows.length ?? "",
-      conversation?.sourceDetail.turns.length ?? "",
-      firstVersion ?? "",
-      lastVersion ?? "",
+      conversation?.activity.status ?? "",
+      conversation?.pendingApproval?.requestId ?? "",
+      promptRequestId(conversation?.pendingInteractivePrompt ?? null) ?? "",
       isCreatingConversation ? "creating" : "",
       isLoadingMessages ? "loading-messages" : "",
       isSubmitting ? "submitting" : "",
@@ -15224,7 +15221,6 @@ function useAgentGUINodeController({
     activeConversationId,
     activeHasPendingSubmittedTurn,
     activeLiveState,
-    activeMessages,
     activeRuntimeSession,
     activeSessionState,
     activeSubmitBlocked,
@@ -16310,10 +16306,6 @@ import {
   TooltipContent as TooltipContent4,
   TooltipProvider as TooltipProvider3,
   TooltipTrigger as TooltipTrigger4,
-  Select as Select3,
-  SelectContent as SelectContent3,
-  SelectItem as SelectItem3,
-  SelectTrigger as SelectTrigger3,
   NewWorkspaceLinedIcon as NewWorkspaceLinedIcon2,
   ConfirmationDialog,
   ContextMenu,
@@ -25739,6 +25731,7 @@ var AGENT_GUI_TOP_HISTORY_PREFETCH_THRESHOLD_PX = 240;
 var AGENT_GUI_TOP_MASK_SCROLL_EPSILON_PX = 1;
 var AGENT_GUI_CONVERSATION_RAIL_SECTION_PAGE_SIZE = 5;
 var AGENT_GUI_CONVERSATION_RAIL_LOADING_SKELETON_DELAY_MS = 300;
+var AGENT_GUI_CONVERSATION_RAIL_VISIBILITY_EPSILON_PX = 1;
 var AGENT_GUI_CONVERSATION_RAIL_PROJECTION_PROVIDER = "codex";
 var AGENT_GUI_TIMELINE_SCROLL_AREA_CONTENT_STYLE = {
   width: "100%",
@@ -25750,6 +25743,18 @@ var AGENT_GUI_TIMELINE_SCROLL_AREA_CONTENT_STYLE = {
 var EMPTY_WORKSPACE_APP_ICONS3 = [];
 var AGENT_GUI_CONFIRMATION_DIALOG_CLASS_NAME = "nodrag tsh-desktop-no-drag [-webkit-app-region:no-drag]";
 var AGENT_GUI_CONFIRMATION_DIALOG_OVERLAY_CLASS_NAME = "nodrag tsh-desktop-no-drag [-webkit-app-region:no-drag]";
+function isElementFullyVisibleWithin(element, viewport) {
+  const elementRect = element.getBoundingClientRect();
+  const viewportRect = viewport.getBoundingClientRect();
+  return elementRect.top >= viewportRect.top - AGENT_GUI_CONVERSATION_RAIL_VISIBILITY_EPSILON_PX && elementRect.bottom <= viewportRect.bottom + AGENT_GUI_CONVERSATION_RAIL_VISIBILITY_EPSILON_PX;
+}
+function setBooleanStateIfChanged(stateRef, setState, nextState) {
+  if (stateRef.current === nextState) {
+    return;
+  }
+  stateRef.current = nextState;
+  setState(nextState);
+}
 function resolveAgentGUIHeroIconUrl(provider) {
   const normalizedProvider = normalizeManagedAgentProvider(provider);
   return MANAGED_AGENT_ICON_URLS[normalizedProvider] ?? MANAGED_AGENT_ICON_FALLBACK_URL;
@@ -26977,6 +26982,8 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
   const pendingRestoreScrollRef = useRef12(null);
   const [isTimelineScrolledToTop, setIsTimelineScrolledToTop] = useState14(true);
   const [isTimelineScrolledToBottom, setIsTimelineScrolledToBottom] = useState14(true);
+  const isTimelineScrolledToTopRef = useRef12(true);
+  const isTimelineScrolledToBottomRef = useRef12(true);
   const [
     bottomDockDismissedPromptRequestId,
     setBottomDockDismissedPromptRequestId
@@ -27783,8 +27790,16 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
       timelineScrollAnchorRef.current = null;
       pendingPrependScrollAnchorRef.current = null;
       submittedPromptScrollConversationRef.current = null;
-      setIsTimelineScrolledToTop(true);
-      setIsTimelineScrolledToBottom(true);
+      setBooleanStateIfChanged(
+        isTimelineScrolledToTopRef,
+        setIsTimelineScrolledToTop,
+        true
+      );
+      setBooleanStateIfChanged(
+        isTimelineScrolledToBottomRef,
+        setIsTimelineScrolledToBottom,
+        true
+      );
       return;
     }
     const maxScrollTop = Math.max(
@@ -27859,10 +27874,14 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
       scrollTop: nextScrollTop,
       clientHeight: timeline.clientHeight
     };
-    setIsTimelineScrolledToTop(
+    setBooleanStateIfChanged(
+      isTimelineScrolledToTopRef,
+      setIsTimelineScrolledToTop,
       nextScrollTop <= AGENT_GUI_TOP_MASK_SCROLL_EPSILON_PX
     );
-    setIsTimelineScrolledToBottom(
+    setBooleanStateIfChanged(
+      isTimelineScrolledToBottomRef,
+      setIsTimelineScrolledToBottom,
       maxScrollTop - nextScrollTop <= AGENT_GUI_STICK_TO_BOTTOM_THRESHOLD_PX
     );
   }, [
@@ -27930,10 +27949,16 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
           scrollTop: maxScrollTop,
           clientHeight: timeline.clientHeight
         };
-        setIsTimelineScrolledToTop(
+        setBooleanStateIfChanged(
+          isTimelineScrolledToTopRef,
+          setIsTimelineScrolledToTop,
           maxScrollTop <= AGENT_GUI_TOP_MASK_SCROLL_EPSILON_PX
         );
-        setIsTimelineScrolledToBottom(true);
+        setBooleanStateIfChanged(
+          isTimelineScrolledToBottomRef,
+          setIsTimelineScrolledToBottom,
+          true
+        );
       });
     };
     syncBottomDockSpace();
@@ -27982,10 +28007,16 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
         clientHeight: timeline.clientHeight
       };
       const atBottom = timeline.scrollHeight - scrollTop - timeline.clientHeight <= AGENT_GUI_STICK_TO_BOTTOM_THRESHOLD_PX;
-      setIsTimelineScrolledToTop(
+      setBooleanStateIfChanged(
+        isTimelineScrolledToTopRef,
+        setIsTimelineScrolledToTop,
         scrollTop <= AGENT_GUI_TOP_MASK_SCROLL_EPSILON_PX
       );
-      setIsTimelineScrolledToBottom(atBottom);
+      setBooleanStateIfChanged(
+        isTimelineScrolledToBottomRef,
+        setIsTimelineScrolledToBottom,
+        atBottom
+      );
       if (pendingRestoreScrollRef.current?.conversationId !== activeConversationId) {
         timelineScrollPositionsRef.current.set(activeConversationId, {
           scrollTop,
@@ -28001,9 +28032,17 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
         actions.loadOlderConversationMessages();
       }
     };
-    captureScrollAnchor();
+    let initialCaptureFrameId = window.requestAnimationFrame(
+      () => {
+        initialCaptureFrameId = null;
+        captureScrollAnchor();
+      }
+    );
     timeline.addEventListener("scroll", captureScrollAnchor, { passive: true });
     return () => {
+      if (initialCaptureFrameId !== null) {
+        window.cancelAnimationFrame(initialCaptureFrameId);
+      }
       timeline.removeEventListener("scroll", captureScrollAnchor);
     };
   }, [
@@ -28029,10 +28068,16 @@ var AgentGUIDetailPane = memo2(function AgentGUIDetailPane2({
       scrollTop: maxScrollTop,
       clientHeight: timeline.clientHeight
     };
-    setIsTimelineScrolledToTop(
+    setBooleanStateIfChanged(
+      isTimelineScrolledToTopRef,
+      setIsTimelineScrolledToTop,
       maxScrollTop <= AGENT_GUI_TOP_MASK_SCROLL_EPSILON_PX
     );
-    setIsTimelineScrolledToBottom(true);
+    setBooleanStateIfChanged(
+      isTimelineScrolledToBottomRef,
+      setIsTimelineScrolledToBottom,
+      true
+    );
   }, [viewModel.activeConversationId]);
   return /* @__PURE__ */ jsxs21("main", { className: AgentGUINode_styles_default.detail, children: [
     /* @__PURE__ */ jsx34(
@@ -28316,7 +28361,10 @@ var AgentGUIEmptyHeroPane = memo2(function AgentGUIEmptyHeroPane2({
       {
         activeProvider: provider,
         className: AgentGUINode_styles_default.emptyHeroLaunchpadIcon,
-        icons: heroIconPresentations
+        icons: heroIconPresentations,
+        providerTargets,
+        onProviderSelect,
+        providerSelectLabel
       },
       heroIconAnimationKey
     ) : /* @__PURE__ */ jsx34(
@@ -28403,7 +28451,10 @@ var AgentGUIProviderReadinessGatePane = memo2(
             {
               activeProvider: provider,
               className: AgentGUINode_styles_default.emptyHeroLaunchpadIcon,
-              icons: launchpadIconPresentations
+              icons: launchpadIconPresentations,
+              providerTargets,
+              onProviderSelect,
+              providerSelectLabel
             }
           ) : /* @__PURE__ */ jsx34(
             "img",
@@ -28529,18 +28580,25 @@ function providerGateAction(status) {
 function AgentGUIAllProviderGridIcon({
   activeProvider,
   className,
-  icons
+  icons,
+  providerTargets,
+  onProviderSelect,
+  providerSelectLabel
 }) {
+  const interactive = onProviderSelect != null && (providerTargets?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx34(
     "span",
     {
-      "aria-hidden": "true",
+      "aria-hidden": interactive ? void 0 : "true",
       className: [AgentGUINode_styles_default.providerRailAvatar, className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsx34(
         AgentGUILaunchpadIconGrid,
         {
           activeProvider,
-          icons
+          icons,
+          providerTargets,
+          onProviderSelect,
+          providerSelectLabel
         }
       )
     }
@@ -28560,36 +28618,82 @@ function AgentGUIUnifiedProviderIcon({
     }
   ) });
 }
-function agentGUIHeroStripOpacity(distance) {
-  if (distance <= 0) {
-    return 1;
-  }
-  return Math.max(0.15, 1 - distance * 0.4);
+var AGENT_GUI_HERO_STRIP_INACTIVE_OPACITY = 0.4;
+function agentGUIHeroStripOpacity(isActive) {
+  return isActive ? 1 : AGENT_GUI_HERO_STRIP_INACTIVE_OPACITY;
+}
+function agentGUILaunchpadProviderTarget(providerTargets, provider) {
+  const normalized = normalizeManagedAgentProvider(provider);
+  return providerTargets.find(
+    (target) => target.disabled !== true && normalizeManagedAgentProvider(target.provider) === normalized
+  ) ?? null;
 }
 function AgentGUILaunchpadIconGrid({
   activeProvider,
-  icons
+  icons,
+  providerTargets,
+  onProviderSelect,
+  providerSelectLabel
 }) {
   const normalizedActiveProvider = activeProvider ? normalizeManagedAgentProvider(activeProvider) : null;
   const activeIndex = normalizedActiveProvider === null ? -1 : icons.findIndex(
     (icon) => normalizeManagedAgentProvider(icon.provider) === normalizedActiveProvider
   );
-  const renderItem = (icon, distance, isActive) => /* @__PURE__ */ jsx34(
+  const interactive = onProviderSelect != null && (providerTargets?.length ?? 0) > 0;
+  const renderItem = (icon, isActive) => {
+    const key = `${icon.provider}:${icon.iconUrl}`;
+    const style = { opacity: agentGUIHeroStripOpacity(isActive) };
+    const dataActive = normalizedActiveProvider === null ? void 0 : isActive;
+    const target = interactive ? agentGUILaunchpadProviderTarget(providerTargets ?? [], icon.provider) : null;
+    if (target && onProviderSelect) {
+      const label = providerSelectLabel ? `${providerSelectLabel}: ${target.label}` : target.label;
+      return /* @__PURE__ */ jsx34(
+        "button",
+        {
+          type: "button",
+          className: AgentGUINode_styles_default.providerRailLaunchpadItem,
+          "data-provider-active": dataActive,
+          "aria-label": label,
+          "aria-pressed": isActive,
+          title: target.label,
+          style,
+          onClick: () => onProviderSelect({
+            provider: target.provider,
+            providerTargetId: target.targetId
+          }),
+          children: /* @__PURE__ */ jsx34(
+            AgentGUIProviderIconVisual,
+            {
+              ariaHidden: true,
+              imageClassName: "",
+              icon
+            }
+          )
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsx34(
+      "span",
+      {
+        className: AgentGUINode_styles_default.providerRailLaunchpadItem,
+        "data-provider-active": dataActive,
+        style,
+        children: /* @__PURE__ */ jsx34(AgentGUIProviderIconVisual, { imageClassName: "", icon })
+      },
+      key
+    );
+  };
+  return /* @__PURE__ */ jsx34(
     "span",
     {
-      className: AgentGUINode_styles_default.providerRailLaunchpadItem,
-      "data-provider-active": normalizedActiveProvider === null ? void 0 : isActive,
-      style: { opacity: agentGUIHeroStripOpacity(distance) },
-      children: /* @__PURE__ */ jsx34(AgentGUIProviderIconVisual, { imageClassName: "", icon })
-    },
-    `${icon.provider}:${icon.iconUrl}`
+      "aria-hidden": interactive ? void 0 : "true",
+      className: AgentGUINode_styles_default.providerRailLaunchpadIcon,
+      children: icons.map(
+        (icon, index) => renderItem(icon, activeIndex < 0 ? true : index === activeIndex)
+      )
+    }
   );
-  if (activeIndex < 0) {
-    return /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: AgentGUINode_styles_default.providerRailLaunchpadIcon, children: icons.map((icon) => renderItem(icon, 0, false)) });
-  }
-  return /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: AgentGUINode_styles_default.providerRailLaunchpadIcon, children: icons.map(
-    (icon, index) => renderItem(icon, Math.abs(index - activeIndex), index === activeIndex)
-  ) });
 }
 function AgentGUIProviderIconVisual({
   ariaHidden = false,
@@ -28628,13 +28732,13 @@ function EmptyHeroTitle({
   const providerName = label.slice(providerStart, providerEnd);
   return /* @__PURE__ */ jsxs21(Fragment9, { children: [
     label.slice(0, providerStart),
-    canSwitchProvider ? /* @__PURE__ */ jsxs21(
-      Select3,
+    canSwitchProvider ? /* @__PURE__ */ jsx34(
+      "select",
       {
         value: selectedProviderTargetId,
-        onValueChange: (nextTargetId) => {
+        onChange: (event) => {
           const target = enabledProviderTargets.find(
-            (candidate) => candidate.targetId === nextTargetId
+            (candidate) => candidate.targetId === event.currentTarget.value
           );
           if (!target) {
             return;
@@ -28644,48 +28748,17 @@ function EmptyHeroTitle({
             providerTargetId: target.targetId
           });
         },
-        children: [
-          /* @__PURE__ */ jsx34(
-            SelectTrigger3,
-            {
-              size: "sm",
-              "aria-label": providerSelectLabel,
-              title: providerSelectLabel,
-              className: AgentGUINode_styles_default.emptyHeroProviderSelect,
-              children: /* @__PURE__ */ jsx34("span", { className: AgentGUINode_styles_default.emptyHeroProvider, children: providerName })
-            }
-          ),
-          /* @__PURE__ */ jsx34(
-            SelectContent3,
-            {
-              align: "center",
-              className: cn3(AgentGUINode_styles_default.composerMenuContent, "min-w-[190px]"),
-              children: enabledProviderTargets.map((target) => /* @__PURE__ */ jsx34(
-                SelectItem3,
-                {
-                  value: target.targetId,
-                  className: cn3(AgentGUINode_styles_default.composerMenuItem, "gap-2"),
-                  children: /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx34(
-                      "img",
-                      {
-                        alt: "",
-                        "aria-hidden": "true",
-                        className: "size-4 shrink-0 rounded-[4px]",
-                        src: agentGUIProviderRailIconPresentation(
-                          target.provider,
-                          target.iconUrl
-                        ).iconUrl
-                      }
-                    ),
-                    /* @__PURE__ */ jsx34("span", { className: "min-w-0 truncate", children: target.label })
-                  ] })
-                },
-                `${target.provider}:${target.targetId}`
-              ))
-            }
-          )
-        ]
+        "aria-label": providerSelectLabel,
+        title: providerSelectLabel,
+        className: AgentGUINode_styles_default.emptyHeroProviderSelect,
+        children: enabledProviderTargets.map((target) => /* @__PURE__ */ jsx34(
+          "option",
+          {
+            value: target.targetId,
+            children: target.label
+          },
+          `${target.provider}:${target.targetId}`
+        ))
       }
     ) : /* @__PURE__ */ jsx34("span", { className: AgentGUINode_styles_default.emptyHeroProvider, children: providerName }),
     label.slice(providerEnd)
@@ -30579,6 +30652,7 @@ var AgentGUIConversationRailPane = memo2(
       /* @__PURE__ */ new Map()
     );
     const activeConversationScrollCompletedRef = useRef12(null);
+    const activeConversationScrollFrameRef = useRef12(null);
     const previousActiveConversationIdRef = useRef12(null);
     const groupedConversationsRef = useRef12(null);
     const {
@@ -30700,6 +30774,10 @@ var AgentGUIConversationRailPane = memo2(
       if (!activeId) {
         previousActiveConversationIdRef.current = null;
         activeConversationScrollCompletedRef.current = null;
+        if (activeConversationScrollFrameRef.current !== null) {
+          window.cancelAnimationFrame(activeConversationScrollFrameRef.current);
+          activeConversationScrollFrameRef.current = null;
+        }
         return;
       }
       if (previousActiveConversationIdRef.current !== activeId) {
@@ -30713,8 +30791,35 @@ var AgentGUIConversationRailPane = memo2(
       if (!activeElement) {
         return;
       }
-      activeElement.scrollIntoView({ block: "nearest" });
-      activeConversationScrollCompletedRef.current = activeId;
+      const viewport = conversationListRef.current ?? railElementRef.current;
+      if (!viewport || isElementFullyVisibleWithin(activeElement, viewport)) {
+        activeConversationScrollCompletedRef.current = activeId;
+        return;
+      }
+      const animationFrameId = window.requestAnimationFrame(() => {
+        activeConversationScrollFrameRef.current = null;
+        if (previousActiveConversationIdRef.current !== activeId) {
+          return;
+        }
+        const nextActiveElement = conversationItemElementsRef.current.get(activeId);
+        if (!nextActiveElement) {
+          return;
+        }
+        const nextViewport = conversationListRef.current ?? railElementRef.current;
+        if (nextViewport && isElementFullyVisibleWithin(nextActiveElement, nextViewport)) {
+          activeConversationScrollCompletedRef.current = activeId;
+          return;
+        }
+        nextActiveElement.scrollIntoView({ block: "nearest" });
+        activeConversationScrollCompletedRef.current = activeId;
+      });
+      activeConversationScrollFrameRef.current = animationFrameId;
+      return () => {
+        if (activeConversationScrollFrameRef.current === animationFrameId) {
+          window.cancelAnimationFrame(animationFrameId);
+          activeConversationScrollFrameRef.current = null;
+        }
+      };
     }, [activeConversationId, groupedConversationIdentityKey]);
     return /* @__PURE__ */ jsxs21(
       "aside",