@tutti-os/agent-gui 0.0.91 → 0.0.92

package/dist/index.js

@@ -16874,6 +16874,9 @@ var styles = {
   emptyHeroCarousel: "agent-gui-node__empty-hero-carousel",
   emptyHeroCarouselCanvas: "agent-gui-node__empty-hero-carousel-canvas",
   emptyHeroCarouselItem: "agent-gui-node__empty-hero-carousel-item",
+  emptyHeroCarouselLayer: "agent-gui-node__empty-hero-carousel-layer",
+  emptyHeroCarouselPlaceholder: "agent-gui-node__empty-hero-carousel-placeholder",
+  emptyHeroCarouselStage: "agent-gui-node__empty-hero-carousel-stage",
   emptyHeroIconEffect: "agent-gui-node__empty-hero-icon-effect",
   emptyHeroIconRail: "agent-gui-node__empty-hero-icon-rail",
   emptyHeroIconRailItem: "agent-gui-node__empty-hero-icon-rail-item",
@@ -17155,19 +17158,35 @@ import {
 import * as THREE from "three";
 var CAMERA_FOV_DEG = 14;
 var CAMERA_Z = 7.5;
-var WHEEL_TARGET_SLOTS = 21;
-var TILE_SPACING = 1.35;
-var UNFOCUSED_OPACITY = 0.55;
-var SPRING_STIFFNESS = 90;
-var SPRING_DAMPING_RATIO = 0.62;
+var WHEEL_TARGET_SLOTS = 40;
+var TILE_SPACING = 1.55;
+var VISIBLE_ARC_CURVATURE = 0.9;
+var MIN_RECORD_OPACITY = 0.22;
+var RECORD_FADE_RANGE_SLOTS = 4.5;
+var RECORD_FADE_CURVE = 1.45;
+var SPRING_STIFFNESS = 120;
+var SPRING_DAMPING_RATIO = 0.78;
+var SPRING_MIN_LAUNCH_VELOCITY = 2.6;
 var SPRING_SETTLE_EPSILON = 1e-3;
 var SPRING_SETTLE_VELOCITY = 0.02;
+var MAX_FRAME_DELTA_SECONDS = 0.032;
 var TEXTURE_SIZE = 256;
-var TEXTURE_CORNER_RADIUS = 0.05;
 var BADGE_CORNER_RADIUS = 0.5;
 var BADGE_DIAMETER = 0.36;
 var BADGE_OFFSET = 0.4;
 var MAX_PIXEL_RATIO = 2;
+var RECORD_RADIUS_RATIO = 0.47;
+var RECORD_LABEL_RADIUS_RATIO = 0.41;
+var RECORD_SPINDLE_RADIUS_RATIO = 0.035;
+var RECORD_SPIN_SECONDS = 7;
+var RECORD_MODEL_SCALE = 1.3;
+var RECORD_MODEL_RADIUS = 0.475;
+var RECORD_MODEL_THICKNESS = 0.065;
+var RECORD_MODEL_TILT_X = -0.11;
+var RECORD_MODEL_SIDE_TILT_FACTOR = 0.18;
+var RECORD_MODEL_MAX_SIDE_TILT = 0.16;
+var RECORD_RENDER_RANGE_SLOTS = 3.4;
+var RECORD_EDGE_SEGMENTS = 48;
 function ringOffset(index, scroll, count) {
   if (count <= 1) {
     return index - scroll;
@@ -17181,7 +17200,114 @@ function ringOffset(index, scroll, count) {
   }
   return offset;
 }
-function roundedIconTexture(image, onReadyRender, cornerRadius = TEXTURE_CORNER_RADIUS) {
+function vinylRecordTexture(image, onReadyRender) {
+  const canvas = document.createElement("canvas");
+  canvas.width = TEXTURE_SIZE;
+  canvas.height = TEXTURE_SIZE;
+  const context = canvas.getContext("2d");
+  if (context) {
+    const center = TEXTURE_SIZE / 2;
+    const recordRadius = TEXTURE_SIZE * RECORD_RADIUS_RATIO;
+    const labelRadius = recordRadius * RECORD_LABEL_RADIUS_RATIO;
+    context.clearRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
+    context.save();
+    context.beginPath();
+    context.arc(center, center, recordRadius, 0, Math.PI * 2);
+    context.clip();
+    const recordFill = context.createRadialGradient(
+      center * 0.92,
+      center * 0.88,
+      labelRadius,
+      center,
+      center,
+      recordRadius
+    );
+    recordFill.addColorStop(0, "rgb(26 26 27)");
+    recordFill.addColorStop(0.54, "rgb(5 5 6)");
+    recordFill.addColorStop(0.82, "rgb(18 18 19)");
+    recordFill.addColorStop(1, "rgb(3 3 4)");
+    context.fillStyle = recordFill;
+    context.fillRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
+    for (let radius = labelRadius + 4; radius < recordRadius - 3; radius += 3.5) {
+      const grooveIndex = Math.round((radius - labelRadius) / 3.5);
+      context.beginPath();
+      context.arc(center, center, radius, 0, Math.PI * 2);
+      context.strokeStyle = grooveIndex % 3 === 0 ? "rgb(255 255 255 / 0.12)" : "rgb(255 255 255 / 0.055)";
+      context.lineWidth = grooveIndex % 3 === 0 ? 0.7 : 0.45;
+      context.stroke();
+    }
+    context.save();
+    context.translate(center, center);
+    context.rotate(-Math.PI / 4);
+    const sheen = context.createLinearGradient(
+      -recordRadius,
+      0,
+      recordRadius,
+      0
+    );
+    sheen.addColorStop(0, "rgb(255 255 255 / 0)");
+    sheen.addColorStop(0.42, "rgb(255 255 255 / 0.02)");
+    sheen.addColorStop(0.5, "rgb(255 255 255 / 0.18)");
+    sheen.addColorStop(0.58, "rgb(255 255 255 / 0.02)");
+    sheen.addColorStop(1, "rgb(255 255 255 / 0)");
+    context.fillStyle = sheen;
+    context.fillRect(
+      -recordRadius,
+      -recordRadius,
+      recordRadius * 2,
+      recordRadius * 2
+    );
+    context.restore();
+    context.restore();
+    context.save();
+    context.beginPath();
+    context.arc(center, center, labelRadius, 0, Math.PI * 2);
+    context.clip();
+    const scale = Math.max(
+      labelRadius * 2 / image.width,
+      labelRadius * 2 / image.height
+    );
+    const width = image.width * scale;
+    const height = image.height * scale;
+    context.drawImage(
+      image,
+      center - width / 2,
+      center - height / 2,
+      width,
+      height
+    );
+    context.restore();
+    context.beginPath();
+    context.arc(center, center, labelRadius, 0, Math.PI * 2);
+    context.strokeStyle = "rgb(255 255 255 / 0.2)";
+    context.lineWidth = 1;
+    context.stroke();
+    context.beginPath();
+    context.arc(
+      center,
+      center,
+      recordRadius * RECORD_SPINDLE_RADIUS_RATIO,
+      0,
+      Math.PI * 2
+    );
+    context.fillStyle = "rgb(5 5 6)";
+    context.fill();
+    context.strokeStyle = "rgb(255 255 255 / 0.18)";
+    context.lineWidth = 0.75;
+    context.stroke();
+    context.beginPath();
+    context.arc(center, center, recordRadius - 0.75, 0, Math.PI * 2);
+    context.strokeStyle = "rgb(255 255 255 / 0.32)";
+    context.lineWidth = 1.25;
+    context.stroke();
+  }
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 4;
+  onReadyRender();
+  return texture;
+}
+function roundedIconTexture(image, onReadyRender, cornerRadius) {
   const canvas = document.createElement("canvas");
   canvas.width = TEXTURE_SIZE;
   canvas.height = TEXTURE_SIZE;
@@ -17224,8 +17350,11 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   renderer;
   scene;
   camera;
+  edgeGeometry;
+  faceGeometry;
   raycaster = new THREE.Raycaster();
   tiles = [];
+  textures = /* @__PURE__ */ new Set();
   // Number of distinct agents; the wheel holds agentCount * repeats tiles
   // (the icon sequence repeated), and scroll/target count TILE slots.
   agentCount;
@@ -17237,8 +17366,12 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   scroll = 0;
   target = 0;
   velocity = 0;
-  frameHandle = null;
+  renderFrameHandle = null;
+  springFrameHandle = null;
+  recordSpinFrameHandle = null;
   lastFrameAt = null;
+  lastRecordSpinFrameAt = null;
+  hoveredTile = null;
   disposed = false;
   constructor(options) {
     this.agentCount = options.items.length;
@@ -17258,29 +17391,78 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     this.scene = new THREE.Scene();
     this.camera = new THREE.PerspectiveCamera(CAMERA_FOV_DEG, 1, 0.1, 50);
     this.camera.position.set(0, 0, CAMERA_Z);
+    this.scene.add(new THREE.AmbientLight(16777215, 1.25));
+    const keyLight = new THREE.DirectionalLight(16777215, 2.4);
+    keyLight.position.set(-2.5, 3.5, 5);
+    this.scene.add(keyLight);
+    const rimLight = new THREE.DirectionalLight(10467327, 0.9);
+    rimLight.position.set(4, -1.5, 2.5);
+    this.scene.add(rimLight);
+    this.faceGeometry = new THREE.PlaneGeometry(1, 1);
+    this.edgeGeometry = new THREE.CylinderGeometry(
+      RECORD_MODEL_RADIUS,
+      RECORD_MODEL_RADIUS,
+      RECORD_MODEL_THICKNESS,
+      RECORD_EDGE_SEGMENTS,
+      1,
+      true
+    );
     for (let slot = 0; slot < this.tileCount; slot++) {
-      const geometry = new THREE.PlaneGeometry(1, 1);
-      const material = new THREE.MeshBasicMaterial({
+      const agentIndex = slot % this.agentCount;
+      const poseGroup = new THREE.Group();
+      const recordGroup = new THREE.Group();
+      recordGroup.scale.setScalar(RECORD_MODEL_SCALE);
+      const faceMaterial = new THREE.MeshBasicMaterial({
         transparent: true,
         depthWrite: false,
         visible: false
       });
-      const mesh = new THREE.Mesh(geometry, material);
-      mesh.userData.agentIndex = slot % this.agentCount;
+      const faceMesh = new THREE.Mesh(this.faceGeometry, faceMaterial);
+      faceMesh.position.z = RECORD_MODEL_THICKNESS / 2 + 2e-3;
+      faceMesh.userData.agentIndex = agentIndex;
+      const edgeMaterial = new THREE.MeshStandardMaterial({
+        color: 460552,
+        metalness: 0.42,
+        roughness: 0.28,
+        transparent: true,
+        depthWrite: false
+      });
+      const edgeMesh = new THREE.Mesh(this.edgeGeometry, edgeMaterial);
+      edgeMesh.rotation.x = Math.PI / 2;
       const badgeMaterial = new THREE.MeshBasicMaterial({
         transparent: true,
         depthWrite: false,
-        visible: false
+        // The solid circle is the owner marker's asset-independent fallback.
+        // Keep it visible while the optional remote avatar is loading or when
+        // that avatar cannot safely become a WebGL texture.
+        visible: options.items[slot % this.agentCount]?.badge != null
       });
       const badgeMesh = new THREE.Mesh(
         new THREE.CircleGeometry(BADGE_DIAMETER / 2, 32),
         badgeMaterial
       );
-      badgeMesh.position.set(BADGE_OFFSET, -BADGE_OFFSET, 0.01);
-      badgeMesh.userData.agentIndex = slot % this.agentCount;
-      mesh.add(badgeMesh);
-      this.scene.add(mesh);
-      this.tiles.push({ badgeMesh, mesh });
+      badgeMesh.position.set(
+        BADGE_OFFSET,
+        -BADGE_OFFSET,
+        RECORD_MODEL_THICKNESS / 2 + 0.01
+      );
+      badgeMesh.userData.agentIndex = agentIndex;
+      recordGroup.add(edgeMesh, faceMesh);
+      poseGroup.add(recordGroup, badgeMesh);
+      poseGroup.visible = false;
+      poseGroup.userData.agentIndex = agentIndex;
+      this.scene.add(poseGroup);
+      this.tiles.push({
+        badgeMesh,
+        edgeMaterial,
+        edgeMesh,
+        faceMaterial,
+        faceMesh,
+        poseGroup,
+        ready: false,
+        recordGroup,
+        rotation: 0
+      });
     }
     options.items.forEach((item, agentIndex) => {
       const loadedImage = options.loadedImages?.[agentIndex] ?? null;
@@ -17308,6 +17490,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       }
     });
     this.applyPoses();
+    this.startRecordSpin();
   }
   setSize(width, height) {
     if (this.disposed || width <= 0 || height <= 0) {
@@ -17330,6 +17513,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   // icon sequence repeats); returns the normalized agent index.
   stepBy(direction) {
     this.target += direction;
+    this.primeSpringMotion();
     this.animate();
     return this.targetIndex();
   }
@@ -17358,6 +17542,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     }
     this.target += best ?? 0;
     if (animateMove) {
+      this.primeSpringMotion();
       this.animate();
       return;
     }
@@ -17368,6 +17553,26 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   }
   // Canvas-relative pointer coordinates -> agent index, or null.
   pick(x, y, width, height) {
+    const tile = this.pickTile(x, y, width, height);
+    const index = tile?.poseGroup.userData.agentIndex;
+    return typeof index === "number" ? index : null;
+  }
+  // Gives playback to the record beneath the pointer. When no record is
+  // hovered, playback returns to the record nearest the center.
+  hover(x, y, width, height) {
+    const tile = this.pickTile(x, y, width, height);
+    if (tile !== this.hoveredTile) {
+      this.hoveredTile = tile;
+      this.startRecordSpin();
+    }
+    const index = tile?.poseGroup.userData.agentIndex;
+    return typeof index === "number" ? index : null;
+  }
+  clearHover() {
+    this.hoveredTile = null;
+    this.startRecordSpin();
+  }
+  pickTile(x, y, width, height) {
     if (this.disposed || width <= 0 || height <= 0) {
       return null;
     }
@@ -17377,35 +17582,52 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     );
     this.raycaster.setFromCamera(pointer, this.camera);
     const meshes = this.tiles.filter(
-      (tile) => tile.mesh.material.visible && tile.mesh.material.opacity > 0.05
+      (tile) => tile.poseGroup.visible && tile.faceMaterial.visible && tile.faceMaterial.opacity > 0.05
     ).flatMap(
-      (tile) => tile.badgeMesh.material.visible ? [tile.mesh, tile.badgeMesh] : [tile.mesh]
+      (tile) => tile.badgeMesh.material.visible ? [tile.faceMesh, tile.badgeMesh] : [tile.faceMesh]
     );
     const hit = this.raycaster.intersectObjects(meshes, false)[0];
-    const index = hit?.object.userData.agentIndex;
-    return typeof index === "number" ? index : null;
+    if (!hit) {
+      return null;
+    }
+    return this.tiles.find(
+      (tile) => tile.faceMesh === hit.object || tile.badgeMesh === hit.object
+    ) ?? null;
   }
   dispose() {
     this.disposed = true;
-    if (this.frameHandle !== null) {
-      cancelAnimationFrame(this.frameHandle);
-      this.frameHandle = null;
+    if (this.renderFrameHandle !== null) {
+      cancelAnimationFrame(this.renderFrameHandle);
+      this.renderFrameHandle = null;
+    }
+    if (this.springFrameHandle !== null) {
+      cancelAnimationFrame(this.springFrameHandle);
+      this.springFrameHandle = null;
+    }
+    if (this.recordSpinFrameHandle !== null) {
+      cancelAnimationFrame(this.recordSpinFrameHandle);
+      this.recordSpinFrameHandle = null;
     }
     for (const image of this.images) {
       image.onload = null;
+      image.onerror = null;
       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();
-      tile.mesh.material.dispose();
       tile.badgeMesh.geometry.dispose();
-      tile.badgeMesh.material.map?.dispose();
       tile.badgeMesh.material.dispose();
+      tile.faceMaterial.dispose();
+      tile.edgeMaterial.dispose();
     }
+    for (const texture of this.textures) {
+      texture.dispose();
+    }
+    this.textures.clear();
+    this.faceGeometry.dispose();
+    this.edgeGeometry.dispose();
     this.renderer.dispose();
   }
   prefersReducedMotion() {
@@ -17423,17 +17645,31 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       this.onSettle(this.targetIndex());
       return;
     }
-    if (this.frameHandle === null) {
+    if (this.springFrameHandle === null) {
+      if (this.renderFrameHandle !== null) {
+        cancelAnimationFrame(this.renderFrameHandle);
+        this.renderFrameHandle = null;
+      }
       this.lastFrameAt = null;
-      this.frameHandle = requestAnimationFrame(this.frame);
+      this.springFrameHandle = requestAnimationFrame(this.frame);
+    }
+  }
+  primeSpringMotion() {
+    const delta = this.target - this.scroll;
+    const direction = Math.sign(delta);
+    if (direction === 0) {
+      return;
+    }
+    if (this.velocity * direction < SPRING_MIN_LAUNCH_VELOCITY) {
+      this.velocity = direction * SPRING_MIN_LAUNCH_VELOCITY;
     }
   }
   frame = (now) => {
-    this.frameHandle = null;
+    this.springFrameHandle = null;
     if (this.disposed) {
       return;
     }
-    const dt = this.lastFrameAt === null ? 1 / 60 : Math.min((now - this.lastFrameAt) / 1e3, 0.05);
+    const dt = this.lastFrameAt === null ? 1 / 60 : Math.min((now - this.lastFrameAt) / 1e3, MAX_FRAME_DELTA_SECONDS);
     this.lastFrameAt = now;
     const delta = this.target - this.scroll;
     if (Math.abs(delta) <= SPRING_SETTLE_EPSILON && Math.abs(this.velocity) <= SPRING_SETTLE_VELOCITY) {
@@ -17449,14 +17685,54 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     this.scroll += this.velocity * dt;
     this.applyPoses();
     this.renderer.render(this.scene, this.camera);
-    this.frameHandle = requestAnimationFrame(this.frame);
+    this.springFrameHandle = requestAnimationFrame(this.frame);
+  };
+  startRecordSpin() {
+    if (this.disposed || this.prefersReducedMotion() || this.recordSpinFrameHandle !== null) {
+      return;
+    }
+    this.lastRecordSpinFrameAt = null;
+    this.recordSpinFrameHandle = requestAnimationFrame(this.recordSpinFrame);
+  }
+  recordSpinFrame = (now) => {
+    this.recordSpinFrameHandle = null;
+    const spinningTile = this.hoveredTile ?? this.centerTile();
+    if (this.disposed || !spinningTile || this.prefersReducedMotion()) {
+      return;
+    }
+    const dt = this.lastRecordSpinFrameAt === null ? 1 / 60 : Math.min(
+      (now - this.lastRecordSpinFrameAt) / 1e3,
+      MAX_FRAME_DELTA_SECONDS
+    );
+    this.lastRecordSpinFrameAt = now;
+    spinningTile.rotation = (spinningTile.rotation + Math.PI * 2 * dt / RECORD_SPIN_SECONDS) % (Math.PI * 2);
+    if (this.springFrameHandle === null) {
+      this.applyPoses();
+      this.renderer.render(this.scene, this.camera);
+    }
+    this.recordSpinFrameHandle = requestAnimationFrame(this.recordSpinFrame);
   };
+  centerTile() {
+    let centeredTile = null;
+    let centeredOffset = Number.POSITIVE_INFINITY;
+    this.tiles.forEach((tile, index) => {
+      if (!tile.ready) {
+        return;
+      }
+      const offset = Math.abs(ringOffset(index, this.scroll, this.tileCount));
+      if (offset < centeredOffset) {
+        centeredTile = tile;
+        centeredOffset = offset;
+      }
+    });
+    return centeredTile;
+  }
   requestRender() {
-    if (this.disposed || this.frameHandle !== null) {
+    if (this.disposed || this.renderFrameHandle !== null || this.springFrameHandle !== null) {
       return;
     }
-    this.frameHandle = requestAnimationFrame(() => {
-      this.frameHandle = null;
+    this.renderFrameHandle = requestAnimationFrame(() => {
+      this.renderFrameHandle = null;
       if (!this.disposed) {
         this.renderer.render(this.scene, this.camera);
       }
@@ -17466,53 +17742,124 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     if (this.disposed) {
       return;
     }
-    const texture = roundedIconTexture(image, () => this.requestRender());
+    const texture = vinylRecordTexture(image, () => this.requestRender());
+    this.textures.add(texture);
     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;
+      if (tile.poseGroup.userData.agentIndex === agentIndex) {
+        tile.faceMaterial.map = texture;
+        tile.faceMaterial.visible = true;
+        tile.faceMaterial.needsUpdate = true;
+        tile.ready = true;
       }
     }
+    this.applyPoses();
+    this.startRecordSpin();
   }
   loadBadgeImage(badgeUrl, agentIndex) {
     const image = new Image();
+    image.crossOrigin = "anonymous";
     image.decoding = "async";
     image.loading = "eager";
     this.ownedImages.add(image);
     this.images.push(image);
+    let settled = false;
+    const keepFallback = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      this.requestRender();
+    };
+    const applyDecodedImage = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      this.applyBadgeImageTexture(image, agentIndex);
+    };
     image.onload = () => {
       if (this.disposed) {
         return;
       }
-      const texture = roundedIconTexture(
+      let decode;
+      try {
+        decode = image.decode?.();
+      } catch {
+        keepFallback();
+        return;
+      }
+      if (decode) {
+        void decode.then(applyDecodedImage).catch(keepFallback);
+        return;
+      }
+      applyDecodedImage();
+    };
+    image.onerror = keepFallback;
+    image.src = badgeUrl;
+  }
+  applyBadgeImageTexture(image, agentIndex) {
+    if (this.disposed) {
+      return;
+    }
+    let texture = null;
+    try {
+      texture = roundedIconTexture(
         image,
         () => this.requestRender(),
         BADGE_CORNER_RADIUS
       );
-      for (const tile of this.tiles) {
-        if (tile.mesh.userData.agentIndex === agentIndex) {
-          tile.badgeMesh.material.map = texture;
-          tile.badgeMesh.material.visible = true;
-          tile.badgeMesh.material.needsUpdate = true;
-        }
-      }
+      this.renderer.initTexture(texture);
+    } catch {
+      texture?.dispose();
       this.requestRender();
-    };
-    image.src = badgeUrl;
+      return;
+    }
+    this.textures.add(texture);
+    for (const tile of this.tiles) {
+      if (tile.poseGroup.userData.agentIndex === agentIndex) {
+        tile.badgeMesh.material.map = texture;
+        tile.badgeMesh.material.visible = true;
+        tile.badgeMesh.material.needsUpdate = true;
+      }
+    }
+    this.requestRender();
   }
   applyPoses() {
     const step = Math.PI * 2 / Math.max(this.tileCount, 1);
     this.tiles.forEach((tile, index) => {
       const offset = ringOffset(index, this.scroll, this.tileCount);
+      const visible = tile.ready && Math.abs(offset) <= RECORD_RENDER_RANGE_SLOTS;
+      tile.poseGroup.visible = visible;
+      if (!visible) {
+        return;
+      }
       const angle = offset * step;
       const x = this.wheelRadius * Math.sin(angle);
-      const y = this.wheelRadius * (Math.cos(angle) - 1);
-      tile.mesh.position.set(x, y, 0);
-      tile.mesh.rotation.z = -angle;
-      const focus = THREE.MathUtils.clamp(1 - Math.abs(offset), 0, 1);
-      tile.mesh.material.opacity = UNFOCUSED_OPACITY + (1 - UNFOCUSED_OPACITY) * focus;
-      tile.badgeMesh.material.opacity = tile.mesh.material.opacity;
+      const y = this.wheelRadius * (Math.cos(angle) - 1) * VISIBLE_ARC_CURVATURE;
+      tile.poseGroup.position.set(x, y, 0);
+      const fadeProgress = THREE.MathUtils.clamp(
+        1 - Math.abs(offset) / RECORD_FADE_RANGE_SLOTS,
+        0,
+        1
+      );
+      const rangeOpacity = Math.pow(
+        THREE.MathUtils.smoothstep(fadeProgress, 0, 1),
+        RECORD_FADE_CURVE
+      );
+      tile.poseGroup.rotation.set(
+        RECORD_MODEL_TILT_X,
+        THREE.MathUtils.clamp(
+          -angle * RECORD_MODEL_SIDE_TILT_FACTOR,
+          -RECORD_MODEL_MAX_SIDE_TILT,
+          RECORD_MODEL_MAX_SIDE_TILT
+        ),
+        -angle * VISIBLE_ARC_CURVATURE
+      );
+      tile.recordGroup.rotation.z = -tile.rotation;
+      const opacity = MIN_RECORD_OPACITY + (1 - MIN_RECORD_OPACITY) * rangeOpacity;
+      tile.faceMaterial.opacity = opacity;
+      tile.edgeMaterial.opacity = opacity;
+      tile.badgeMesh.material.opacity = opacity;
     });
   }
 };
@@ -17719,6 +18066,7 @@ var AgentGUIHeroAgentCarousel = memo2(
       null
     );
     const suppressClickRef = useRef5(false);
+    const pointerActivatedIndexRef = useRef5(null);
     const handlePointerDown = (event) => {
       if (!interactive || event.button !== 0) {
         return;
@@ -17740,6 +18088,7 @@ var AgentGUIHeroAgentCarousel = memo2(
       }
       drag.anchorX = event.clientX;
       suppressClickRef.current = true;
+      pointerActivatedIndexRef.current = null;
       stepBy(deltaX < 0 ? 1 : -1);
     };
     const handlePointerEnd = (event) => {
@@ -17752,6 +18101,7 @@ var AgentGUIHeroAgentCarousel = memo2(
         return;
       }
       suppressClickRef.current = false;
+      pointerActivatedIndexRef.current = null;
       event.preventDefault();
       event.stopPropagation();
     };
@@ -17782,18 +18132,53 @@ var AgentGUIHeroAgentCarousel = memo2(
         rect.height
       );
     };
+    const activateOnPointerDown = (index, event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      pointerActivatedIndexRef.current = index;
+      handleItemClick(index);
+    };
+    const activateOnClick = (index) => {
+      if (pointerActivatedIndexRef.current === index) {
+        pointerActivatedIndexRef.current = null;
+        return;
+      }
+      pointerActivatedIndexRef.current = null;
+      handleItemClick(index);
+    };
+    const handleCanvasPointerDown = (event) => {
+      const index = pickAt(event);
+      if (index !== null) {
+        activateOnPointerDown(index, event);
+      }
+    };
     const handleCanvasClick = (event) => {
       const index = pickAt(event);
       if (index !== null) {
-        handleItemClick(index);
+        activateOnClick(index);
       }
     };
     const handleCanvasHover = (event) => {
+      const scene = sceneRef.current;
       const canvas = canvasRef.current;
-      if (!canvas) {
+      if (!scene || !canvas) {
         return;
       }
-      canvas.style.cursor = pickAt(event) !== null ? "pointer" : "";
+      const rect = canvas.getBoundingClientRect();
+      const hoveredIndex = scene.hover(
+        event.clientX - rect.left,
+        event.clientY - rect.top,
+        rect.width,
+        rect.height
+      );
+      canvas.style.cursor = hoveredIndex !== null ? "pointer" : "";
+    };
+    const handleCanvasLeave = () => {
+      sceneRef.current?.clearHover();
+      if (canvasRef.current) {
+        canvasRef.current.style.cursor = "";
+      }
     };
     return /* @__PURE__ */ jsxs9(
       "div",
@@ -17818,7 +18203,9 @@ var AgentGUIHeroAgentCarousel = memo2(
               "aria-hidden": "true",
               className: AgentGUINode_styles_default.emptyHeroCarouselCanvas,
               onClick: interactive ? handleCanvasClick : void 0,
-              onPointerMove: interactive ? handleCanvasHover : void 0
+              onPointerDown: interactive ? handleCanvasPointerDown : void 0,
+              onPointerMove: interactive ? handleCanvasHover : void 0,
+              onPointerLeave: interactive ? handleCanvasLeave : void 0
             }
           ),
           items.map((item, index) => {
@@ -17838,7 +18225,8 @@ var AgentGUIHeroAgentCarousel = memo2(
                   "aria-label": label,
                   "aria-pressed": isCenter,
                   title: item.label,
-                  onClick: () => handleItemClick(index),
+                  onPointerDown: (event) => activateOnPointerDown(index, event),
+                  onClick: () => activateOnClick(index),
                   children: item.label
                 },
                 key
@@ -28924,7 +29312,7 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
     emptyHeroProviderLabel
   ) : emptyHeroBaseLabel;
   const emptyHeroAvatarPresentations = useMemo11(
-    () => viewModel.conversationFilter.kind === "all" ? viewModel.agentTargets.map(projectAgentGUIAgentTargetAvatar) : viewModel.selectedAgentTarget ? [projectAgentGUIAgentTargetAvatar(viewModel.selectedAgentTarget)] : [
+    () => viewModel.agentTargets.length > 0 ? viewModel.agentTargets.map(projectAgentGUIAgentTargetAvatar) : viewModel.selectedAgentTarget ? [projectAgentGUIAgentTargetAvatar(viewModel.selectedAgentTarget)] : [
       createFallbackAgentGUIAgentAvatar({
         provider: emptyHeroProvider,
         label: emptyHeroProviderLabel,
@@ -28934,7 +29322,6 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
     [
       emptyHeroProvider,
       emptyHeroProviderLabel,
-      viewModel.conversationFilter.kind,
       viewModel.agentTargets,
       viewModel.selectedAgentTarget
     ]
@@ -29355,7 +29742,7 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
             disabledAgentTarget.provider
           ),
           unavailableReason: disabledAgentTarget.unavailableReason ?? null
-        }) }) : emptyProviderReadinessGate ? shouldRenderProviderReadinessGateState ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderReadinessGateState?.({
+        }) }) : emptyProviderReadinessGate && shouldRenderProviderReadinessGateState ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderReadinessGateState?.({
           provider: emptyHeroProvider,
           providerLabel: emptyHeroProviderLabel || resolveAgentGuiWorkbenchProviderLabel(emptyHeroProvider),
           target: viewModel.selectedAgentTarget ?? null,
@@ -29363,42 +29750,53 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
           gate: emptyProviderReadinessGate,
           showAllProviders: viewModel.conversationFilter.kind === "all"
         }) }) : /* @__PURE__ */ jsx35(
-          AgentGUIProviderReadinessGatePane,
+          AgentGUIEmptyHeroCarouselStage,
           {
-            provider: emptyHeroProvider,
-            gate: emptyProviderReadinessGate,
-            showAllProviders: viewModel.conversationFilter.kind === "all",
-            emptyLabel: emptyHeroLabel,
-            emptyProvider: emptyHeroProviderLabel,
-            agentTargets: composerAgentTargets,
-            selectedAgentTarget: viewModel.selectedAgentTarget,
+            activeAgentTargetId: viewModel.selectedAgentTarget?.agentTargetId ?? viewModel.selectedAgentTarget?.targetId,
+            items: emptyHeroAvatarPresentations,
             onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
             providerSelectLabel: labels.providerSwitchLabel,
-            labels
-          }
-        ) : /* @__PURE__ */ jsx35(
-          AgentGUIEmptyHeroPane,
-          {
-            provider: emptyHeroProvider,
-            emptyLabel: emptyHeroLabel,
-            emptyProvider: emptyHeroProviderLabel,
-            avatarPresentations: emptyHeroAvatarPresentations,
-            inlineNoticeChrome,
-            isRespondingApproval: viewModel.isRespondingApproval,
-            onSubmitApprovalOption: submitApprovalOption,
-            onRetryActivation: retryActivation,
-            onAuthLogin: authLogin,
-            onContinueInNewConversation: continueInNewConversation,
-            onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
-            agentTargets: composerAgentTargets,
-            selectedAgentTarget: viewModel.selectedAgentTarget,
-            chromeLabels,
-            composerProps: emptyHeroComposerProps,
-            providerSelectLabel: labels.providerSwitchLabel,
-            suggestions: labels.homeSuggestions ?? EMPTY_HOME_SUGGESTIONS,
-            suggestionsCloseLabel: labels.homeSuggestionsClose,
-            onSelectSuggestion: handleSelectHomeSuggestion,
-            onSelectSuggestionAction: handleHomeSuggestionAction
+            children: emptyProviderReadinessGate ? /* @__PURE__ */ jsx35(
+              AgentGUIProviderReadinessGatePane,
+              {
+                provider: emptyHeroProvider,
+                gate: emptyProviderReadinessGate,
+                showAllProviders: viewModel.conversationFilter.kind === "all",
+                carouselMountedExternally: emptyHeroAvatarPresentations.length > 1,
+                emptyLabel: emptyHeroLabel,
+                emptyProvider: emptyHeroProviderLabel,
+                agentTargets: composerAgentTargets,
+                selectedAgentTarget: viewModel.selectedAgentTarget,
+                onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
+                providerSelectLabel: labels.providerSwitchLabel,
+                labels
+              }
+            ) : /* @__PURE__ */ jsx35(
+              AgentGUIEmptyHeroPane,
+              {
+                provider: emptyHeroProvider,
+                emptyLabel: emptyHeroLabel,
+                emptyProvider: emptyHeroProviderLabel,
+                avatarPresentations: emptyHeroAvatarPresentations,
+                carouselMountedExternally: emptyHeroAvatarPresentations.length > 1,
+                inlineNoticeChrome,
+                isRespondingApproval: viewModel.isRespondingApproval,
+                onSubmitApprovalOption: submitApprovalOption,
+                onRetryActivation: retryActivation,
+                onAuthLogin: authLogin,
+                onContinueInNewConversation: continueInNewConversation,
+                onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
+                agentTargets: composerAgentTargets,
+                selectedAgentTarget: viewModel.selectedAgentTarget,
+                chromeLabels,
+                composerProps: emptyHeroComposerProps,
+                providerSelectLabel: labels.providerSwitchLabel,
+                suggestions: labels.homeSuggestions ?? EMPTY_HOME_SUGGESTIONS,
+                suggestionsCloseLabel: labels.homeSuggestionsClose,
+                onSelectSuggestion: handleSelectHomeSuggestion,
+                onSelectSuggestionAction: handleHomeSuggestionAction
+              }
+            )
           }
         ) : /* @__PURE__ */ jsx35(
           AgentGUIConversationTimelinePane,
@@ -29538,11 +29936,35 @@ function useOptionalStableEventCallback(callback) {
   }, [callback != null]);
 }
 var EMPTY_HOME_SUGGESTIONS = Object.freeze([]);
+var AgentGUIEmptyHeroCarouselStage = memo3(
+  function AgentGUIEmptyHeroCarouselStage2({
+    activeAgentTargetId,
+    children,
+    items,
+    onProviderSelect,
+    providerSelectLabel
+  }) {
+    "use memo";
+    return /* @__PURE__ */ jsxs22("div", { className: AgentGUINode_styles_default.emptyHeroCarouselStage, children: [
+      items.length > 1 ? /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHeroCarouselLayer, children: /* @__PURE__ */ jsx35(
+        AgentGUIHeroAgentCarousel,
+        {
+          activeAgentTargetId,
+          items,
+          onProviderSelect,
+          providerSelectLabel
+        }
+      ) }) : null,
+      children
+    ] });
+  }
+);
 var AgentGUIEmptyHeroPane = memo3(function AgentGUIEmptyHeroPane2({
   provider,
   emptyLabel,
   emptyProvider,
   avatarPresentations,
+  carouselMountedExternally = false,
   inlineNoticeChrome,
   isRespondingApproval,
   onSubmitApprovalOption,
@@ -29571,23 +29993,29 @@ var AgentGUIEmptyHeroPane = memo3(function AgentGUIEmptyHeroPane2({
     (avatar) => `${avatar.agentTargetId}:${avatar.iconUrl}:${avatar.badge?.iconUrl ?? ""}`
   ).join("|");
   return /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHero, children: /* @__PURE__ */ jsxs22("div", { className: AgentGUINode_styles_default.emptyHeroBody, children: [
-    /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHeroIconSlot, children: heroAvatarPresentations.length > 1 ? /* @__PURE__ */ jsx35(
-      AgentGUIHeroAgentCarousel,
-      {
-        activeAgentTargetId: selectedAgentTarget?.agentTargetId ?? selectedAgentTarget?.targetId,
-        items: heroAvatarPresentations,
-        onProviderSelect,
-        providerSelectLabel
-      },
-      heroIconAnimationKey
-    ) : /* @__PURE__ */ jsx35(
-      AgentGUIAgentAvatarVisual,
+    /* @__PURE__ */ jsx35(
+      "div",
       {
-        className: AgentGUINode_styles_default.emptyHeroIconEffect,
-        presentation: heroAvatarPresentations[0]
-      },
-      heroIconAnimationKey
-    ) }),
+        className: AgentGUINode_styles_default.emptyHeroIconSlot,
+        "data-carousel-placeholder": carouselMountedExternally || void 0,
+        children: carouselMountedExternally ? null : heroAvatarPresentations.length > 1 ? /* @__PURE__ */ jsx35(
+          AgentGUIHeroAgentCarousel,
+          {
+            activeAgentTargetId: selectedAgentTarget?.agentTargetId ?? selectedAgentTarget?.targetId,
+            items: heroAvatarPresentations,
+            onProviderSelect,
+            providerSelectLabel
+          }
+        ) : /* @__PURE__ */ jsx35(
+          AgentGUIAgentAvatarVisual,
+          {
+            className: AgentGUINode_styles_default.emptyHeroIconEffect,
+            presentation: heroAvatarPresentations[0]
+          },
+          heroIconAnimationKey
+        )
+      }
+    ),
     /* @__PURE__ */ jsx35("h2", { className: AgentGUINode_styles_default.emptyHeroTitle, children: /* @__PURE__ */ jsx35(
       EmptyHeroTitle,
       {
@@ -29634,6 +30062,7 @@ var AgentGUIProviderReadinessGatePane = memo3(
     selectedAgentTarget,
     onProviderSelect,
     providerSelectLabel,
+    carouselMountedExternally = false,
     labels
   }) {
     "use memo";
@@ -29657,7 +30086,13 @@ var AgentGUIProviderReadinessGatePane = memo3(
         "data-testid": "agent-gui-provider-readiness-gate",
         role: "status",
         children: [
-          showAllProviders ? /* @__PURE__ */ jsx35(
+          carouselMountedExternally ? /* @__PURE__ */ jsx35(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: AgentGUINode_styles_default.emptyHeroCarouselPlaceholder
+            }
+          ) : showAllProviders ? /* @__PURE__ */ jsx35(
             AgentGUIHeroAgentCarousel,
             {
               activeAgentTargetId: selectedAgentTarget?.agentTargetId ?? selectedAgentTarget?.targetId,