@tutti-os/agent-gui 0.0.84 → 0.0.85

package/dist/app/renderer/agentactivity.css

@@ -9073,6 +9073,8 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   display: block;
   width: 100%;
   height: 100%;
+  opacity: 0;
+  transition: opacity 120ms ease-out;
 
   /* Fade-out mask: a horizontal band dissolves tiles toward the stage sides
      (the fully-transparent stops sit where the outermost tiles ride, not at
@@ -9090,6 +9092,11 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   mask-composite: intersect;
 }
 
+.agent-gui-node__empty-hero-carousel[data-icons-ready="true"]
+  > .agent-gui-node__empty-hero-carousel-canvas {
+  opacity: 1;
+}
+
 .agent-gui-node__empty-hero-carousel-item {
   position: absolute;
   overflow: hidden;

package/dist/index.js

@@ -17107,6 +17107,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   wheelRadius;
   onSettle;
   images = [];
+  ownedImages = /* @__PURE__ */ new Set();
   scroll = 0;
   target = 0;
   velocity = 0;
@@ -17144,22 +17145,26 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       this.tiles.push({ mesh });
     }
     options.iconUrls.forEach((iconUrl, agentIndex) => {
-      const image = new Image();
+      const loadedImage = options.loadedImages?.[agentIndex] ?? null;
+      const image = loadedImage ?? new Image();
+      if (!loadedImage) {
+        image.decoding = "async";
+        image.loading = "eager";
+        image.setAttribute("fetchpriority", "high");
+        this.ownedImages.add(image);
+      }
       this.images.push(image);
       image.onload = () => {
         if (this.disposed) {
           return;
         }
-        const texture = roundedIconTexture(image, () => this.requestRender());
-        for (const tile of this.tiles) {
-          if (tile.mesh.userData.agentIndex === agentIndex) {
-            tile.mesh.material.map = texture;
-            tile.mesh.material.visible = true;
-            tile.mesh.material.needsUpdate = true;
-          }
-        }
+        this.applyImageTexture(image, agentIndex);
       };
-      image.src = iconUrl;
+      if (image.complete && image.naturalWidth > 0) {
+        this.applyImageTexture(image, agentIndex);
+      } else if (!loadedImage) {
+        image.src = iconUrl;
+      }
     });
     this.applyPoses();
   }
@@ -17245,8 +17250,11 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     }
     for (const image of this.images) {
       image.onload = null;
-      image.src = "";
+      if (this.ownedImages.has(image)) {
+        image.src = "";
+      }
     }
+    this.ownedImages.clear();
     for (const tile of this.tiles) {
       tile.mesh.geometry.dispose();
       tile.mesh.material.map?.dispose();
@@ -17308,6 +17316,19 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       }
     });
   }
+  applyImageTexture(image, agentIndex) {
+    if (this.disposed) {
+      return;
+    }
+    const texture = roundedIconTexture(image, () => this.requestRender());
+    for (const tile of this.tiles) {
+      if (tile.mesh.userData.agentIndex === agentIndex) {
+        tile.mesh.material.map = texture;
+        tile.mesh.material.visible = true;
+        tile.mesh.material.needsUpdate = true;
+      }
+    }
+  }
   applyPoses() {
     const step = Math.PI * 2 / Math.max(this.tileCount, 1);
     this.tiles.forEach((tile, index) => {
@@ -17335,6 +17356,71 @@ function agentGUILaunchpadProviderTarget(providerTargets, provider) {
 var CAROUSEL_WHEEL_STEP_THRESHOLD = 42;
 var CAROUSEL_WHEEL_STEP_COOLDOWN_MS = 110;
 var CAROUSEL_DRAG_STEP_PX = 52;
+function emptyPreloadedCarouselImages(length) {
+  return Array.from({ length }).map(() => null);
+}
+function useAgentGUIHeroCarouselImages(icons, iconKey) {
+  const [preloadState, setPreloadState] = useState7({
+    images: [],
+    ready: icons.length === 0
+  });
+  useEffect6(() => {
+    if (icons.length === 0) {
+      setPreloadState({ images: [], ready: true });
+      return;
+    }
+    if (typeof Image !== "function") {
+      setPreloadState({
+        images: emptyPreloadedCarouselImages(icons.length),
+        ready: true
+      });
+      return;
+    }
+    let cancelled = false;
+    setPreloadState({
+      images: emptyPreloadedCarouselImages(icons.length),
+      ready: false
+    });
+    void Promise.all(
+      icons.map(
+        (icon) => new Promise((resolve) => {
+          const image = new Image();
+          const resolveDecoded = () => {
+            const decode = image.decode?.();
+            if (decode) {
+              void decode.then(() => resolve(image)).catch(() => resolve(image));
+              return;
+            }
+            resolve(image);
+          };
+          image.decoding = "async";
+          image.loading = "eager";
+          image.setAttribute("fetchpriority", "high");
+          image.onload = () => {
+            resolveDecoded();
+          };
+          image.onerror = () => resolve(null);
+          image.src = icon.iconUrl;
+          if (image.complete) {
+            if (image.naturalWidth > 0) {
+              resolveDecoded();
+            } else {
+              resolve(null);
+            }
+          }
+        })
+      )
+    ).then((images) => {
+      if (!cancelled) {
+        setPreloadState({ images, ready: true });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [iconKey]);
+  return preloadState;
+}
 var AgentGUIHeroAgentCarousel = memo2(
   function AgentGUIHeroAgentCarousel2({
     activeProvider,
@@ -17390,15 +17476,17 @@ var AgentGUIHeroAgentCarousel = memo2(
     const canvasRef = useRef5(null);
     const sceneRef = useRef5(null);
     const iconKey = icons.map((icon) => `${icon.provider}:${icon.iconUrl}`).join("|");
+    const carouselImages = useAgentGUIHeroCarouselImages(icons, iconKey);
     useEffect6(() => {
       const canvas = canvasRef.current;
       const stage = stageRef.current;
-      if (!canvas || !stage) {
+      if (!canvas || !stage || !carouselImages.ready) {
         return;
       }
       const scene = AgentGuiHeroCarouselScene.create({
         canvas,
         iconUrls: icons.map((icon) => icon.iconUrl),
+        loadedImages: carouselImages.images,
         onSettle: (index) => {
           centerIndexRef.current = index;
           setCenterIndex(index);
@@ -17424,7 +17512,7 @@ var AgentGUIHeroAgentCarousel = memo2(
         scene.dispose();
         sceneRef.current = null;
       };
-    }, [iconKey]);
+    }, [carouselImages.images, carouselImages.ready, iconKey]);
     useEffect6(() => {
       if (activeIconIndex >= 0 && activeIconIndex !== centerIndexRef.current) {
         centerIndexRef.current = activeIconIndex;
@@ -17562,6 +17650,7 @@ var AgentGUIHeroAgentCarousel = memo2(
         "aria-label": interactive ? providerSelectLabel : void 0,
         role: interactive ? "group" : void 0,
         className: AgentGUINode_styles_default.emptyHeroCarousel,
+        "data-icons-ready": carouselImages.ready,
         onKeyDown: interactive ? handleKeyDown : void 0,
         onPointerDown: interactive ? handlePointerDown : void 0,
         onPointerMove: interactive ? handlePointerMove : void 0,