@tutti-os/agent-gui 0.0.75 → 0.0.76

package/dist/app/renderer/agentactivity.css

@@ -1857,6 +1857,37 @@ aside.workspace-agents-status-panel
   white-space: nowrap;
 }
 
+/* Compact tool-call rows when nested inside a details block (e.g. task STEPS) */
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-row-title,
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-status,
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-diff-stats,
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-row-summary {
+  font-size: 11px;
+}
+
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-row-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-row-icon
+  svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Looser vertical rhythm for the nested step rows so they don't feel cramped */
+.workspace-agents-status-panel__detail-tool-body
+  .workspace-agents-status-panel__detail-tool-stack {
+  gap: 12px;
+}
+
 .workspace-agents-status-panel__detail-tool-row-head
   .workspace-agents-status-panel__detail-tool-row-chevron {
   flex: 0 0 auto;
@@ -1915,7 +1946,7 @@ aside.workspace-agents-status-panel
 .workspace-agents-status-panel__detail-tool-body {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 16px;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
@@ -6487,7 +6518,7 @@ button.agent-gui-node__conversation-section-toggle:hover
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  padding-bottom: 24px;
+  padding-bottom: 16px;
   will-change: transform;
 }
 
@@ -6497,7 +6528,7 @@ button.agent-gui-node__conversation-section-toggle:hover
 .agent-gui-transcript-virtual-item
   > [data-testid="agent-transcript-turn-divider"]
   + .agent-gui-transcript-row {
-  margin-top: 24px;
+  margin-top: 16px;
 }
 
 .agent-gui-transcript-row[data-agent-transcript-row-enter="true"] {
@@ -8953,6 +8984,30 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   box-shadow: 0 0 0 1.5px var(--tutti-purple);
 }
 
+/* Clickable agent switchers: reset native button chrome, keep the same box, and
+   give a hover/focus affordance so the strip reads as interactive. */
+button.agent-gui-node__provider-rail-launchpad-item {
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.agent-gui-node__empty-hero-launchpad-icon
+  button.agent-gui-node__provider-rail-launchpad-item:hover:not(
+    [data-provider-active="true"]
+  ) {
+  opacity: 1 !important;
+  transform: scale(1.08);
+}
+
+.agent-gui-node__empty-hero-launchpad-icon
+  button.agent-gui-node__provider-rail-launchpad-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1.5px var(--tutti-purple);
+}
+
 .agent-gui-node__provider-rail-tile[data-loading="true"]
   .agent-gui-node__provider-rail-avatar {
   background: linear-gradient(

package/dist/index.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,
@@ -25739,6 +25735,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 +25747,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 +26986,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 +27794,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 +27878,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 +27953,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 +28011,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 +28036,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 +28072,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 +28365,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 +28455,10 @@ var AgentGUIProviderReadinessGatePane = memo2(
             {
               activeProvider: provider,
               className: AgentGUINode_styles_default.emptyHeroLaunchpadIcon,
-              icons: launchpadIconPresentations
+              icons: launchpadIconPresentations,
+              providerTargets,
+              onProviderSelect,
+              providerSelectLabel
             }
           ) : /* @__PURE__ */ jsx34(
             "img",
@@ -28529,18 +28584,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 +28622,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,
@@ -30579,6 +30687,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 +30809,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 +30826,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",