@tutti-os/workbench-surface 0.0.21 → 0.0.22

package/dist/index.js

@@ -2687,9 +2687,11 @@ function cloneMeaningfulGenieElement(source, rootRect) {
 function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
   const { direction, dockPoint, texture, textureRect } = frame;
   const progress = clampGenieProgress(frame.progress);
-  const textureWidth = Math.max(1, Math.round(textureRect.width));
-  const textureHeight = Math.max(1, Math.round(textureRect.height));
-  const scanlineStride = resolveGenieScanlineStride(textureHeight);
+  const sourceWidth = Math.max(1, texture.width);
+  const sourceHeight = Math.max(1, texture.height);
+  const destinationWidth = Math.max(1, textureRect.width);
+  const destinationHeight = Math.max(1, textureRect.height);
+  const scanlineStride = resolveGenieScanlineStride(sourceHeight);
   const dirtyRect = resolveGenieDirtyRect({
     dockPoint,
     textureRect,
@@ -2702,10 +2704,10 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
     dirtyRect.width,
     dirtyRect.height
   );
-  for (let y = 0; y < textureHeight; y += scanlineStride) {
-    const sourceHeight = Math.min(scanlineStride, textureHeight - y);
-    const sourceMidY = y + sourceHeight / 2;
-    const rowProgress = sourceMidY / textureHeight;
+  for (let y = 0; y < sourceHeight; y += scanlineStride) {
+    const sourceSliceHeight = Math.min(scanlineStride, sourceHeight - y);
+    const sourceMidY = y + sourceSliceHeight / 2;
+    const rowProgress = sourceMidY / sourceHeight;
     const horizontalProgress = resolveGenieRowProgress({
       direction,
       progress,
@@ -2715,28 +2717,30 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
     const horizontalEase = easeInOutCubic(horizontalProgress);
     const left = direction === "minimize" ? lerpGenieValue(textureRect.left, dockPoint.x, horizontalEase) : lerpGenieValue(dockPoint.x, textureRect.left, horizontalEase);
     const right = direction === "minimize" ? lerpGenieValue(
-      textureRect.left + textureWidth,
+      textureRect.left + destinationWidth,
       dockPoint.x,
       horizontalEase
     ) : lerpGenieValue(
       dockPoint.x,
-      textureRect.left + textureWidth,
+      textureRect.left + destinationWidth,
       horizontalEase
     );
+    const destinationSourceTop = y / sourceHeight * destinationHeight;
+    const destinationSourceBottom = (y + sourceSliceHeight) / sourceHeight * destinationHeight;
     const targetTop = resolveGenieRowTargetY({
       direction,
       dockPoint,
       progress,
-      sourceY: y,
-      textureHeight,
+      sourceY: destinationSourceTop,
+      textureHeight: destinationHeight,
       textureRect
     });
     const targetBottom = resolveGenieRowTargetY({
       direction,
       dockPoint,
       progress,
-      sourceY: y + sourceHeight,
-      textureHeight,
+      sourceY: destinationSourceBottom,
+      textureHeight: destinationHeight,
       textureRect
     });
     const targetY = Math.min(targetTop, targetBottom) - 0.5;
@@ -2749,8 +2753,8 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
       texture,
       0,
       y,
-      textureWidth,
-      sourceHeight,
+      sourceWidth,
+      sourceSliceHeight,
       left,
       targetY,
       rowWidth,
@@ -2782,12 +2786,14 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
 }
 
 // src/react/useWorkbenchGenieAnimation.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var genieDurationMs = 400;
 var scaleMinimizeDurationMs = 220;
 var genieMaxDevicePixelRatio = 2;
 var genieSnapshotScale = 1;
+var renderedGeniePreviewHeaderOffsetPx = 40;
 var minimizedDockSlotEnterAnimationMs = 720;
+var dockAnchorResolveMaxAnimationFrames = 3;
 var dockPreviewMaxWidth = 260;
 var dockPreviewMaxHeight = 170;
 var dockPreviewImageCacheMaxEntries = 96;
@@ -2809,6 +2815,37 @@ function waitForNextAnimationFrame() {
 function isFocusedWorkbenchNode(controller, nodeID) {
   return controller.getSnapshot().nodeStack.at(-1) === nodeID;
 }
+function isEmptyGeniePreview(preview) {
+  return preview === null || preview === void 0 || preview === false;
+}
+function logWorkbenchGenieDiagnostic(debugDiagnostics, event, details, level = "info") {
+  if (!debugDiagnostics?.isEnabled() || !debugDiagnostics.log) {
+    return;
+  }
+  void Promise.resolve(
+    debugDiagnostics.log({
+      details,
+      event,
+      level,
+      source: "workbench-genie"
+    })
+  ).catch(() => void 0);
+}
+function describeGenieNode(node) {
+  if (!node) {
+    return {};
+  }
+  const data = node.data && typeof node.data === "object" ? node.data : {};
+  return {
+    displayMode: node.displayMode,
+    instanceId: typeof data.instanceId === "string" ? data.instanceId : null,
+    isMinimized: node.isMinimized,
+    minimizedAtUnixMs: node.minimizedAtUnixMs,
+    nodeId: node.id,
+    title: node.title,
+    typeId: typeof data.typeId === "string" ? data.typeId : null
+  };
+}
 function shouldReduceMotion() {
   return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
 }
@@ -2974,6 +3011,25 @@ function prepareElementTextureCapture(element) {
     rect: windowRect
   };
 }
+function prepareRenderedGeniePreviewCloneForTexture(clone, textureRect) {
+  clone.style.width = `${textureRect.width}px`;
+  clone.style.height = `${textureRect.height}px`;
+  const previewElement = clone.querySelector(
+    ".workbench-genie-preview-capture__preview"
+  );
+  if (!previewElement) {
+    return;
+  }
+  previewElement.style.display = "block";
+  previewElement.style.width = `${textureRect.width}px`;
+  previewElement.style.height = `${textureRect.height}px`;
+  previewElement.style.padding = "0";
+  previewElement.style.border = "0";
+  previewElement.style.borderRadius = "0";
+  previewElement.style.background = "var(--background-panel)";
+  previewElement.style.boxShadow = "none";
+  previewElement.style.transform = `translateY(${renderedGeniePreviewHeaderOffsetPx}px)`;
+}
 async function renderPreparedElementTexture({
   clone,
   images,
@@ -2992,6 +3048,8 @@ async function renderPreparedElementTexture({
   if (!context) {
     return null;
   }
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
   return { canvas, rect };
 }
@@ -3018,6 +3076,28 @@ function createDockPreviewDataUrl(canvas) {
   context.drawImage(canvas, 0, 0, output.width, output.height);
   return output.toDataURL("image/png");
 }
+async function renderPreviewImageTexture({
+  previewImageUrl,
+  rect
+}) {
+  if (!isUsableGenieRect(rect)) {
+    return null;
+  }
+  const image = new Image();
+  image.src = previewImageUrl;
+  await image.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(rect.width * genieSnapshotScale));
+  canvas.height = Math.max(1, Math.round(rect.height * genieSnapshotScale));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  return { canvas, rect };
+}
 function readDockAnchorFallbackSize(element) {
   const cssValue = window.getComputedStyle(element).getPropertyValue("--desktop-dock-size");
   const parsed = Number.parseFloat(cssValue);
@@ -3123,8 +3203,10 @@ function createGenieSvgTexture(element, rect) {
 function useWorkbenchGenieAnimation({
   captureNodePreviewImage,
   controller,
+  debugDiagnostics,
   dockPreviewCache,
   minimizeAnimation = "genie",
+  renderNodeGeniePreview,
   resolveDockAnchorKey,
   resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
   shouldCaptureNodePreviewImage
@@ -3138,11 +3220,18 @@ function useWorkbenchGenieAnimation({
   const minimizedDockEnterAnimationTimersRef = useRef4(
     /* @__PURE__ */ new Map()
   );
+  const minimizedGenieTextureByNodeIDRef = useRef4(
+    /* @__PURE__ */ new Map()
+  );
+  const renderedPreviewCaptureIDRef = useRef4(0);
+  const renderedPreviewCaptureElementRef = useRef4(null);
+  const pendingRenderedPreviewCaptureRef = useRef4(null);
   const [isCanvasActive, setIsCanvasActive] = useState4(false);
   const [genieHiddenNodeIDs, setGenieHiddenNodeIDs] = useState4(
     () => /* @__PURE__ */ new Set()
   );
   const [pendingMinimizedNode, setPendingMinimizedNode] = useState4(null);
+  const [pendingRenderedPreviewCapture, setPendingRenderedPreviewCapture] = useState4(null);
   const registerDockAnchor = useCallback6(
     (anchorKey, element) => {
       if (element) {
@@ -3155,8 +3244,25 @@ function useWorkbenchGenieAnimation({
   );
   const resolveDockAnchorRect = useCallback6((anchorKey) => {
     const element = dockAnchorElementsRef.current.get(anchorKey) ?? null;
-    return element ? resolveDockAnchorViewportRect(element) : null;
+    if (!element) {
+      return null;
+    }
+    return resolveDockAnchorViewportRect(element);
   }, []);
+  const resolveDockAnchorRectAfterRender = useCallback6(
+    async (anchorKey, isCurrent) => {
+      let dockRect = resolveDockAnchorRect(anchorKey);
+      for (let frame = 0; (!dockRect || !isUsableGenieRect(dockRect)) && frame < dockAnchorResolveMaxAnimationFrames; frame += 1) {
+        await waitForNextAnimationFrame();
+        if (!isCurrent()) {
+          return null;
+        }
+        dockRect = resolveDockAnchorRect(anchorKey);
+      }
+      return dockRect;
+    },
+    [resolveDockAnchorRect]
+  );
   const resolveNodeElement = useCallback6((nodeID) => {
     return Array.from(
       document.querySelectorAll("[data-workbench-window-id]")
@@ -3200,6 +3306,36 @@ function useWorkbenchGenieAnimation({
   const shouldAnimateMinimizedDockEnter = useCallback6((nodeID) => {
     return minimizedDockEnterAnimationNodeIdsRef.current.has(nodeID);
   }, []);
+  const readMinimizedGenieTexture = useCallback6((nodeID) => {
+    return minimizedGenieTextureByNodeIDRef.current.get(nodeID) ?? null;
+  }, []);
+  const writeMinimizedGenieTexture = useCallback6(
+    (nodeID, texture) => {
+      const cache = minimizedGenieTextureByNodeIDRef.current;
+      cache.delete(nodeID);
+      cache.set(nodeID, texture);
+    },
+    []
+  );
+  const clearMinimizedGenieTexture = useCallback6((nodeID) => {
+    minimizedGenieTextureByNodeIDRef.current.delete(nodeID);
+  }, []);
+  const pruneMinimizedGenieTextures = useCallback6(
+    (retainNodeID) => {
+      const minimizedNodeIDs = new Set(
+        controller.getSnapshot().nodes.filter((node) => node.isMinimized === true).map((node) => node.id)
+      );
+      if (retainNodeID) {
+        minimizedNodeIDs.add(retainNodeID);
+      }
+      for (const nodeID of minimizedGenieTextureByNodeIDRef.current.keys()) {
+        if (!minimizedNodeIDs.has(nodeID)) {
+          minimizedGenieTextureByNodeIDRef.current.delete(nodeID);
+        }
+      }
+    },
+    [controller]
+  );
   const hideNodeForGenie = useCallback6((nodeID) => {
     setGenieHiddenNodeIDs((current) => {
       if (current.has(nodeID)) {
@@ -3223,6 +3359,81 @@ function useWorkbenchGenieAnimation({
       (current) => current?.id === nodeID ? null : current
     );
   }, []);
+  const clearRenderedPreviewCapture = useCallback6((id) => {
+    if (pendingRenderedPreviewCaptureRef.current?.id !== id) {
+      return;
+    }
+    pendingRenderedPreviewCaptureRef.current = null;
+    renderedPreviewCaptureElementRef.current = null;
+    setPendingRenderedPreviewCapture(null);
+  }, []);
+  const requestRenderedGeniePreviewTexture = useCallback6(
+    async ({
+      node,
+      textureRect
+    }) => {
+      if (!isUsableGenieRect(textureRect)) {
+        return null;
+      }
+      const previewViewport = {
+        height: textureRect.height,
+        width: textureRect.width
+      };
+      let preview = null;
+      try {
+        preview = renderNodeGeniePreview?.(node, {
+          previewViewport
+        }) ?? null;
+      } catch {
+        preview = null;
+      }
+      if (isEmptyGeniePreview(preview)) {
+        return null;
+      }
+      const captureID = renderedPreviewCaptureIDRef.current + 1;
+      renderedPreviewCaptureIDRef.current = captureID;
+      const pendingCapture = {
+        id: captureID,
+        nodeID: node.id,
+        preview,
+        rect: textureRect,
+        usedFallbackPreview: false
+      };
+      pendingRenderedPreviewCaptureRef.current = pendingCapture;
+      flushSync(() => {
+        setPendingRenderedPreviewCapture(pendingCapture);
+      });
+      try {
+        await waitForNextAnimationFrame();
+        await waitForNextAnimationFrame();
+        if (pendingRenderedPreviewCaptureRef.current?.id !== captureID) {
+          return null;
+        }
+        const element = renderedPreviewCaptureElementRef.current;
+        if (!element) {
+          return null;
+        }
+        const preparedCapture = prepareElementTextureCapture(element);
+        if (!preparedCapture) {
+          return null;
+        }
+        prepareRenderedGeniePreviewCloneForTexture(
+          preparedCapture.clone,
+          textureRect
+        );
+        const texture = await renderPreparedElementTexture({
+          ...preparedCapture,
+          rect: textureRect
+        });
+        return texture;
+      } catch {
+        return null;
+      } finally {
+        clearRenderedPreviewCapture(captureID);
+      }
+    },
+    [clearRenderedPreviewCapture, renderNodeGeniePreview]
+  );
   const setupCanvas = useCallback6(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
@@ -3428,11 +3639,12 @@ function useWorkbenchGenieAnimation({
   );
   useEffect3(() => () => stopAnimation(false), [stopAnimation]);
   const startOpenOrRestoreAnimation = useCallback6(
-    async (nodeID, anchorKey, generation, dockRectFallback) => {
+    async (nodeID, anchorKey, generation, dockRectFallback, minimizedNode) => {
       const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
       if (effectiveMinimizeAnimation === "off") {
         animationCleanupRef.current = null;
         showNodeForGenie(nodeID);
+        clearMinimizedGenieTexture(nodeID);
         return;
       }
       await waitForNextAnimationFrame();
@@ -3446,6 +3658,7 @@ function useWorkbenchGenieAnimation({
         if (!dockRect || !nodeElement || !isUsableGenieRect(dockRect)) {
           animationCleanupRef.current = null;
           showNodeForGenie(nodeID);
+          clearMinimizedGenieTexture(nodeID);
           return;
         }
         flushSync(() => {
@@ -3459,30 +3672,48 @@ function useWorkbenchGenieAnimation({
             flushSync(() => {
               showNodeForGenie(nodeID);
             });
+            clearMinimizedGenieTexture(nodeID);
           },
           onComplete: () => {
             flushSync(() => {
               showNodeForGenie(nodeID);
             });
+            clearMinimizedGenieTexture(nodeID);
           }
         });
         return;
       }
-      const captureTarget = nodeElement ? resolveWorkbenchCaptureElement(nodeElement) : null;
-      if (!dockRect || !nodeElement || !captureTarget || !isUsableGenieRect(dockRect)) {
+      if (!dockRect || !isUsableGenieRect(dockRect)) {
         animationCleanupRef.current = null;
         showNodeForGenie(nodeID);
+        clearMinimizedGenieTexture(nodeID);
         return;
       }
-      const texture = await captureElementTexture(captureTarget).catch(
-        () => null
-      );
+      const cachedTexture = readMinimizedGenieTexture(nodeID);
+      const restoredWindowRect = nodeElement ? viewportRectFromElement(nodeElement) : null;
+      const shouldRestoreFromRenderedPreview = minimizedNode !== null && (shouldCaptureNodePreviewImage?.(minimizedNode) ?? true) === false;
+      const renderedPreviewTexture = cachedTexture || !shouldRestoreFromRenderedPreview || !restoredWindowRect || !isUsableGenieRect(restoredWindowRect) ? null : await requestRenderedGeniePreviewTexture({
+        node: minimizedNode,
+        textureRect: restoredWindowRect
+      }).catch(() => null);
+      if (generation !== animationGenerationRef.current) {
+        return;
+      }
+      const captureTarget = cachedTexture || renderedPreviewTexture || !nodeElement ? null : resolveWorkbenchCaptureElement(nodeElement);
+      if (!cachedTexture && !renderedPreviewTexture && !captureTarget) {
+        animationCleanupRef.current = null;
+        showNodeForGenie(nodeID);
+        clearMinimizedGenieTexture(nodeID);
+        return;
+      }
+      const texture = cachedTexture ?? renderedPreviewTexture ?? (captureTarget ? await captureElementTexture(captureTarget).catch(() => null) : null);
       if (generation !== animationGenerationRef.current) {
         return;
       }
       if (!texture) {
         animationCleanupRef.current = null;
         showNodeForGenie(nodeID);
+        clearMinimizedGenieTexture(nodeID);
         return;
       }
       runGenieAnimation({
@@ -3492,12 +3723,14 @@ function useWorkbenchGenieAnimation({
           flushSync(() => {
             showNodeForGenie(nodeID);
           });
+          clearMinimizedGenieTexture(nodeID);
           clearCanvas();
         },
         onComplete: () => {
           flushSync(() => {
             showNodeForGenie(nodeID);
           });
+          clearMinimizedGenieTexture(nodeID);
           clearCanvas();
         },
         skipStop: true,
@@ -3506,11 +3739,15 @@ function useWorkbenchGenieAnimation({
     },
     [
       clearCanvas,
+      clearMinimizedGenieTexture,
       minimizeAnimation,
+      readMinimizedGenieTexture,
+      requestRenderedGeniePreviewTexture,
       resolveDockAnchorRect,
       resolveNodeElement,
       runGenieAnimation,
       runScaleWindowAnimation,
+      shouldCaptureNodePreviewImage,
       showNodeForGenie
     ]
   );
@@ -3541,24 +3778,39 @@ function useWorkbenchGenieAnimation({
       const dockRectFallback = resolveDockAnchorRect(anchorKey);
       hideNodeForGenie(nodeID);
       animationCleanupRef.current = () => {
+        if (rafRef.current !== null) {
+          window.cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
         flushSync(() => {
           showNodeForGenie(nodeID);
         });
+        clearMinimizedGenieTexture(nodeID);
         clearCanvas();
       };
       const generation = animationGenerationRef.current;
-      flushSync(() => {
-        void launch();
+      rafRef.current = window.requestAnimationFrame(() => {
+        rafRef.current = null;
+        if (generation !== animationGenerationRef.current) {
+          return;
+        }
+        void Promise.resolve(launch()).catch(() => null).then(() => {
+          if (generation !== animationGenerationRef.current) {
+            return;
+          }
+          void startOpenOrRestoreAnimation(
+            nodeID,
+            anchorKey,
+            generation,
+            dockRectFallback,
+            target
+          );
+        });
       });
-      void startOpenOrRestoreAnimation(
-        nodeID,
-        anchorKey,
-        generation,
-        dockRectFallback
-      );
     },
     [
       clearCanvas,
+      clearMinimizedGenieTexture,
       controller,
       hideNodeForGenie,
       minimizeAnimation,
@@ -3571,10 +3823,21 @@ function useWorkbenchGenieAnimation({
   const minimizeNodeToAnchor = useCallback6(
     (nodeID, minimize) => {
       void (async () => {
+        pruneMinimizedGenieTextures();
         const target = controller.getSnapshot().nodes.find((node) => node.id === nodeID);
         if (!target) {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.minimize.skipped",
+            {
+              nodeId: nodeID,
+              reason: "target_missing"
+            },
+            "warn"
+          );
           return;
         }
+        clearMinimizedGenieTexture(nodeID);
         const runMinimize = minimize ?? (() => controller.commands.minimizeNode(nodeID));
         const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
         const shouldCapturePreview = shouldCaptureNodePreviewImage?.(target) ?? true;
@@ -3635,6 +3898,16 @@ function useWorkbenchGenieAnimation({
           const generation2 = animationGenerationRef.current;
           const nodeElement2 = resolveNodeElement(nodeID);
           if (!nodeElement2) {
+            logWorkbenchGenieDiagnostic(
+              debugDiagnostics,
+              "workbench.genie.minimize.skipped",
+              {
+                ...describeGenieNode(target),
+                mode: "scale",
+                reason: "node_element_missing"
+              },
+              "warn"
+            );
             runMinimize();
             return;
           }
@@ -3685,8 +3958,30 @@ function useWorkbenchGenieAnimation({
             return;
           }
           const anchorKey2 = resolveAnchorKeyForNode(pendingMinimizedNode3);
-          const dockRect2 = resolveDockAnchorRect(anchorKey2);
+          const dockRect2 = await resolveDockAnchorRectAfterRender(
+            anchorKey2,
+            () => generation2 === animationGenerationRef.current
+          );
+          if (generation2 !== animationGenerationRef.current) {
+            return;
+          }
           if (!nodeElement2.isConnected || !dockRect2 || !isUsableGenieRect(dockRect2)) {
+            logWorkbenchGenieDiagnostic(
+              debugDiagnostics,
+              "workbench.genie.minimize.skipped",
+              {
+                ...describeGenieNode(target),
+                anchorKey: anchorKey2,
+                dockRect: dockRect2,
+                mode: "scale",
+                nodeElementConnected: nodeElement2.isConnected,
+                registeredDockAnchorKeys: Array.from(
+                  dockAnchorElementsRef.current.keys()
+                ).filter((key) => key.startsWith("minimized:")),
+                reason: "dock_rect_unusable"
+              },
+              "warn"
+            );
             cleanupPendingMinimize();
             return;
           }
@@ -3712,18 +4007,87 @@ function useWorkbenchGenieAnimation({
         stopAnimation();
         const generation = animationGenerationRef.current;
         const nodeElement = resolveNodeElement(nodeID);
-        const captureTarget = nodeElement ? resolveWorkbenchCaptureElement(nodeElement) : null;
-        if (!nodeElement || !captureTarget) {
+        if (!nodeElement) {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.minimize.skipped",
+            {
+              ...describeGenieNode(target),
+              mode: "genie",
+              reason: "node_element_missing"
+            },
+            "warn"
+          );
           runMinimize();
           return;
         }
-        const preparedTexture = prepareElementTextureCapture(captureTarget);
-        if (!preparedTexture) {
+        const windowRect = viewportRectFromElement(nodeElement);
+        if (!isUsableGenieRect(windowRect)) {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.minimize.skipped",
+            {
+              ...describeGenieNode(target),
+              mode: "genie",
+              reason: "window_rect_unusable",
+              windowRect
+            },
+            "warn"
+          );
           runMinimize();
           return;
         }
+        const pendingMinimizedNode2 = {
+          ...target,
+          isMinimized: true,
+          minimizedAtUnixMs: Date.now()
+        };
+        const componentPreviewTexture = shouldCapturePreview ? null : await requestRenderedGeniePreviewTexture({
+          node: pendingMinimizedNode2,
+          textureRect: windowRect
+        }).catch(() => null);
+        if (generation !== animationGenerationRef.current) {
+          return;
+        }
+        if (!shouldCapturePreview) {
+          if (!componentPreviewTexture) {
+            logWorkbenchGenieDiagnostic(
+              debugDiagnostics,
+              "workbench.genie.texture.missing",
+              {
+                ...describeGenieNode(target),
+                mode: "genie",
+                reason: "component_preview_texture_missing",
+                shouldCapturePreview,
+                windowRect
+              },
+              "warn"
+            );
+            runMinimize();
+            return;
+          }
+        }
+        const captureTarget = resolveWorkbenchCaptureElement(nodeElement);
+        const preparedTexture = shouldCapturePreview ? prepareElementTextureCapture(captureTarget) : null;
+        if (!preparedTexture) {
+          if (!componentPreviewTexture) {
+            logWorkbenchGenieDiagnostic(
+              debugDiagnostics,
+              "workbench.genie.minimize.skipped",
+              {
+                ...describeGenieNode(target),
+                mode: "genie",
+                reason: "prepared_texture_missing",
+                shouldCapturePreview
+              },
+              "warn"
+            );
+            runMinimize();
+            return;
+          }
+        }
         const wasFocusedForCapture = isFocusedWorkbenchNode(controller, nodeID);
-        if (!wasFocusedForCapture) {
+        if (shouldCapturePreview && !wasFocusedForCapture) {
           flushSync(() => {
             controller.commands.focusNode(nodeID);
           });
@@ -3732,17 +4096,35 @@ function useWorkbenchGenieAnimation({
             return;
           }
         }
-        const previewImageUrlPromise = Promise.resolve(
-          captureNodePreviewImage?.(target) ?? null
-        ).catch(() => null);
-        const texture = await renderPreparedElementTexture(
-          preparedTexture
-        ).catch(() => null);
+        const previewImageUrlPromise = shouldCapturePreview ? Promise.resolve(captureNodePreviewImage?.(target) ?? null).catch(
+          () => null
+        ) : Promise.resolve(null);
         const previewImageUrl = await previewImageUrlPromise;
+        const previewImageTexture = shouldCapturePreview && previewImageUrl ? await renderPreviewImageTexture({
+          previewImageUrl,
+          rect: windowRect
+        }).catch(() => null) : null;
+        const texture = componentPreviewTexture ?? previewImageTexture ?? (preparedTexture ? await renderPreparedElementTexture(preparedTexture).catch(
+          () => null
+        ) : null);
         if (generation !== animationGenerationRef.current) {
           return;
         }
         if (!texture) {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.minimize.skipped",
+            {
+              ...describeGenieNode(target),
+              hasComponentPreviewTexture: Boolean(componentPreviewTexture),
+              hasPreparedDomTexture: Boolean(preparedTexture),
+              hasPreviewImageTexture: Boolean(previewImageTexture),
+              mode: "genie",
+              reason: "texture_missing",
+              shouldCapturePreview
+            },
+            "warn"
+          );
           if (previewImageUrl) {
             writeCachedWorkbenchNodePreviewImage(nodeID, previewImageUrl);
             persistWorkbenchNodePreviewImage(target, previewImageUrl, {
@@ -3769,6 +4151,8 @@ function useWorkbenchGenieAnimation({
             resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
           });
         }
+        writeMinimizedGenieTexture(nodeID, texture);
+        pruneMinimizedGenieTextures(nodeID);
         let minimizeCommitted = false;
         const commitMinimize = () => {
           if (minimizeCommitted) {
@@ -3777,11 +4161,6 @@ function useWorkbenchGenieAnimation({
           minimizeCommitted = true;
           runMinimize();
         };
-        const pendingMinimizedNode2 = {
-          ...target,
-          isMinimized: true,
-          minimizedAtUnixMs: Date.now()
-        };
         const cleanupPendingGenieMinimize = () => {
           releaseMinimizedDockEnterAnimation(nodeID);
           flushSync(() => {
@@ -3795,15 +4174,35 @@ function useWorkbenchGenieAnimation({
         registerMinimizedDockEnterAnimation(nodeID);
         flushSync(() => {
           setPendingMinimizedNode(pendingMinimizedNode2);
-          hideNodeForGenie(nodeID);
         });
         await waitForNextAnimationFrame();
         if (generation !== animationGenerationRef.current) {
           return;
         }
         const anchorKey = resolveAnchorKeyForNode(pendingMinimizedNode2);
-        const dockRect = resolveDockAnchorRect(anchorKey);
+        const dockRect = await resolveDockAnchorRectAfterRender(
+          anchorKey,
+          () => generation === animationGenerationRef.current
+        );
+        if (generation !== animationGenerationRef.current) {
+          return;
+        }
         if (!dockRect || !isUsableGenieRect(dockRect)) {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.minimize.skipped",
+            {
+              ...describeGenieNode(target),
+              anchorKey,
+              dockRect,
+              mode: "genie",
+              registeredDockAnchorKeys: Array.from(
+                dockAnchorElementsRef.current.keys()
+              ).filter((key) => key.startsWith("minimized:")),
+              reason: "dock_rect_unusable"
+            },
+            "warn"
+          );
           animationCleanupRef.current = null;
           cleanupPendingGenieMinimize();
           return;
@@ -3826,18 +4225,25 @@ function useWorkbenchGenieAnimation({
           skipStop: true,
           texture
         });
+        flushSync(() => {
+          hideNodeForGenie(nodeID);
+        });
       })();
     },
     [
       clearCanvas,
+      clearMinimizedGenieTexture,
       controller,
       captureNodePreviewImage,
       clearPendingMinimizedNode,
+      debugDiagnostics,
       dockPreviewCache,
       hideNodeForGenie,
       minimizeAnimation,
+      pruneMinimizedGenieTextures,
       registerMinimizedDockEnterAnimation,
       releaseMinimizedDockEnterAnimation,
+      requestRenderedGeniePreviewTexture,
       resolveAnchorKeyForNode,
       resolveDockPreviewCacheKey2,
       resolveDockAnchorRect,
@@ -3848,7 +4254,8 @@ function useWorkbenchGenieAnimation({
       shouldCaptureNodePreviewImage,
       setupCanvas,
       showNodeForGenie,
-      stopAnimation
+      stopAnimation,
+      writeMinimizedGenieTexture
     ]
   );
   useEffect3(
@@ -3858,20 +4265,39 @@ function useWorkbenchGenieAnimation({
       }
       minimizedDockEnterAnimationTimersRef.current.clear();
       minimizedDockEnterAnimationNodeIdsRef.current.clear();
+      minimizedGenieTextureByNodeIDRef.current.clear();
     },
     []
   );
   return {
     genieLayer: typeof document === "undefined" ? null : createPortal(
-      /* @__PURE__ */ jsx7(
-        "canvas",
-        {
-          ref: canvasRef,
-          className: "workbench-genie-layer",
-          "data-workbench-genie-layer-state": isCanvasActive ? "active" : "idle",
-          "aria-hidden": true
-        }
-      ),
+      /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsx7(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "workbench-genie-layer",
+            "data-workbench-genie-layer-state": isCanvasActive ? "active" : "idle",
+            "aria-hidden": true
+          }
+        ),
+        pendingRenderedPreviewCapture ? /* @__PURE__ */ jsx7(
+          "div",
+          {
+            ref: renderedPreviewCaptureElementRef,
+            className: "workbench-genie-preview-capture",
+            "data-workbench-genie-preview-capture-id": pendingRenderedPreviewCapture.id,
+            "data-workbench-genie-preview-node-id": pendingRenderedPreviewCapture.nodeID,
+            "data-workbench-genie-preview-used-fallback": pendingRenderedPreviewCapture.usedFallbackPreview ? "true" : "false",
+            style: {
+              height: pendingRenderedPreviewCapture.rect.height,
+              width: pendingRenderedPreviewCapture.rect.width
+            },
+            "aria-hidden": true,
+            children: pendingRenderedPreviewCapture.preview
+          }
+        ) : null
+      ] }),
       document.body
     ),
     isNodeGenieHidden: useCallback6(
@@ -3891,11 +4317,12 @@ function useWorkbenchGenieAnimation({
 }
 
 // src/react/WorkbenchSurface.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkbenchSurface({
   captureNodePreviewImage,
   className,
   controller,
+  debugDiagnostics,
   dockPreviewCache,
   dockPlacement,
   interactive,
@@ -3907,6 +4334,7 @@ function WorkbenchSurface({
   renderBottomChrome,
   renderDock,
   renderNode,
+  renderNodeGeniePreview,
   renderOverlay,
   renderTopChrome,
   renderWindowActions,
@@ -3926,6 +4354,7 @@ function WorkbenchSurface({
     {
       captureNodePreviewImage,
       className,
+      debugDiagnostics,
       dockPreviewCache,
       dockPlacement,
       interactive,
@@ -3937,6 +4366,7 @@ function WorkbenchSurface({
       renderBottomChrome,
       renderDock,
       renderNode,
+      renderNodeGeniePreview,
       renderOverlay,
       renderTopChrome,
       renderWindowActions,
@@ -3956,6 +4386,7 @@ function WorkbenchSurface({
 function WorkbenchSurfaceInner({
   captureNodePreviewImage,
   className,
+  debugDiagnostics,
   dockPreviewCache,
   dockPlacement,
   interactive = true,
@@ -3967,6 +4398,7 @@ function WorkbenchSurfaceInner({
   renderBottomChrome,
   renderDock,
   renderNode,
+  renderNodeGeniePreview,
   renderOverlay,
   renderTopChrome,
   renderWindowActions,
@@ -3992,8 +4424,10 @@ function WorkbenchSurfaceInner({
   const genie = useWorkbenchGenieAnimation({
     captureNodePreviewImage,
     controller,
+    debugDiagnostics,
     dockPreviewCache,
     minimizeAnimation,
+    renderNodeGeniePreview,
     resolveDockAnchorKey,
     resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
     shouldCaptureNodePreviewImage
@@ -4012,7 +4446,7 @@ function WorkbenchSurfaceInner({
       wallpaper.fit ?? "cover"
     )
   } : void 0;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref,
@@ -6996,7 +7430,7 @@ function resolveMinimizedStackTrackTranslateXPx(input) {
 }
 
 // src/host/WorkbenchHostDockPopup.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var dockPopupCardWidthPx = 165;
 var dockPopupGridGapPx = 8;
 var dockPopupPanelPaddingInlinePx = 12;
@@ -7549,7 +7983,7 @@ function WorkbenchHostDockPopup({
               showAllWindowsLabel,
               showOpen: showOpen === true
             }
-          ) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          ) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
             /* @__PURE__ */ jsx9("div", { className: "mb-2.5 flex items-center justify-between", children: /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate text-sm font-semibold", children: label }) }),
             isMinimizedStack ? /* @__PURE__ */ jsx9(
               "div",
@@ -7608,7 +8042,7 @@ function WorkbenchHostDockPopup({
                   }
                 )
               }
-            ) : /* @__PURE__ */ jsxs5("div", { className: "grid max-h-[min(52vh,420px)] grid-cols-[repeat(var(--desktop-dock-popup-columns,2),165px)] gap-2 overflow-auto overscroll-contain", children: [
+            ) : /* @__PURE__ */ jsxs6("div", { className: "grid max-h-[min(52vh,420px)] grid-cols-[repeat(var(--desktop-dock-popup-columns,2),165px)] gap-2 overflow-auto overscroll-contain", children: [
               items.map((item) => {
                 const previewMemoryKey = resolveDockPopupPreviewMemoryKey(
                   item.node,
@@ -7635,7 +8069,7 @@ function WorkbenchHostDockPopup({
                   item.node.id
                 );
               }),
-              showCreateNew !== false ? /* @__PURE__ */ jsxs5(
+              showCreateNew !== false ? /* @__PURE__ */ jsxs6(
                 "button",
                 {
                   className: "flex h-[103px] w-[165px] min-w-0 flex-col items-center justify-center gap-2 rounded-[8px] border border-dashed border-[var(--border-1)] bg-transparency-block text-center text-[var(--text-secondary)] transition-colors hover:bg-transparency-hover hover:text-[var(--text-primary)]",
@@ -7691,14 +8125,14 @@ function WorkbenchHostDockContextMenu({
   const hasOpenCommand = !hasOpenWindows;
   const hasDockActionGroup = Boolean(dockRetention) || hasNewWindowCommand || hasOpenCommand;
   const hasWindowActionGroup = hasOpenWindows;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "flex min-w-0 flex-col gap-1",
       "data-desktop-dock-context-menu": "true",
       role: "menu",
       children: [
-        hasOpenWindows ? /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsx9("div", { className: "max-h-48 min-w-0 overflow-auto overscroll-contain", children: items.map((item) => /* @__PURE__ */ jsx9(
+        hasOpenWindows ? /* @__PURE__ */ jsx9(Fragment4, { children: /* @__PURE__ */ jsx9("div", { className: "max-h-48 min-w-0 overflow-auto overscroll-contain", children: items.map((item) => /* @__PURE__ */ jsx9(
           WorkbenchHostDockContextMenuItem,
           {
             checked: !item.isMinimized,
@@ -7742,7 +8176,7 @@ function WorkbenchHostDockContextMenu({
             onSelect: onCreateNew
           }
         ) : null,
-        hasOpenWindows ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        hasOpenWindows ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
           hasDockActionGroup ? /* @__PURE__ */ jsx9(WorkbenchHostDockContextMenuSeparator, {}) : null,
           canShowAllWindows && onShowAllWindows ? /* @__PURE__ */ jsx9(
             WorkbenchHostDockContextMenuItem,
@@ -7792,7 +8226,7 @@ function WorkbenchHostDockContextMenuItem({
   label,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       className: cn(
@@ -7971,7 +8405,7 @@ var WorkbenchHostDockPopupCard = forwardRef(function WorkbenchHostDockPopupCard2
     [handleSelect]
   );
   const hasReadyPreview = previewState.status === "ready";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref,
@@ -7986,7 +8420,7 @@ var WorkbenchHostDockPopupCard = forwardRef(function WorkbenchHostDockPopupCard2
       "data-minimized": item.isMinimized ? "true" : void 0,
       style,
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             "aria-label": title,
@@ -8039,7 +8473,7 @@ function WorkbenchHostDockPopupCardPreview({
   previewState
 }) {
   if (previewState.status !== "ready") {
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "span",
       {
         className: "flex min-h-0 min-w-0 flex-1 flex-col justify-center gap-[7px] rounded-md border border-[var(--border-1)] bg-transparency-block px-3 py-[11px]",
@@ -8100,7 +8534,11 @@ function WorkbenchHostDockPopupCardLabel({ title }) {
 }
 
 // src/host/WorkbenchHostDock.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var minimizedDockPreviewViewport = {
+  height: 34.2,
+  width: 46.8
+};
 function stripDockDescriptionTerminalPunctuation(value) {
   const trimmed = value.trim();
   if (!trimmed || trimmed.endsWith("...") || trimmed.endsWith("\u2026")) {
@@ -8108,6 +8546,13 @@ function stripDockDescriptionTerminalPunctuation(value) {
   }
   return trimmed.replace(/[。．.]+$/u, "");
 }
+function activateDockButtonFromKeyboard(event, disabled = false) {
+  if (disabled || event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.click();
+}
 function isDockVisualMutationActive(element) {
   if (!element) {
     return false;
@@ -8997,7 +9442,8 @@ function WorkbenchHostDock({
         host,
         isFocused: context.focusedNodeId === node.id,
         isMinimized: node.isMinimized,
-        node
+        node,
+        previewViewport: minimizedDockPreviewViewport
       });
     },
     [
@@ -9121,7 +9567,7 @@ function WorkbenchHostDock({
     instanceMode: dockContextMenuInstanceMode,
     matchedNodes: popupEntry.matchedNodes
   }).kind === "launch";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "flex justify-center pointer-events-none",
@@ -9134,7 +9580,7 @@ function WorkbenchHostDock({
             style: dockFrameSize === null ? void 0 : {
               "--desktop-dock-frame-size": `${dockFrameSize}px`
             },
-            children: /* @__PURE__ */ jsxs6(
+            children: /* @__PURE__ */ jsxs7(
               "div",
               {
                 ref: dockMeasureRef,
@@ -9369,7 +9815,7 @@ function WorkbenchHostDock({
                               entryId: entry.id
                             });
                           },
-                          children: /* @__PURE__ */ jsxs6(
+                          children: /* @__PURE__ */ jsxs7(
                             "span",
                             {
                               className: "desktop-dock__icon-shell",
@@ -9489,14 +9935,16 @@ function WorkbenchHostDock({
                         stackLabel
                       );
                       const stackButton = /* @__PURE__ */ jsx10(
-                        "button",
+                        "span",
                         {
                           "aria-expanded": stackPopupActive,
                           "aria-haspopup": "dialog",
                           "aria-label": stackLabel,
                           className: "desktop-dock__btn desktop-dock__minimized-btn",
                           "data-interactive": "true",
-                          type: "button",
+                          role: "button",
+                          tabIndex: 0,
+                          onKeyDown: activateDockButtonFromKeyboard,
                           onPointerDown: (event) => {
                             if (event.button !== 0) {
                               return;
@@ -9520,7 +9968,7 @@ function WorkbenchHostDock({
                               }
                             );
                           },
-                          children: /* @__PURE__ */ jsxs6(
+                          children: /* @__PURE__ */ jsxs7(
                             "span",
                             {
                               className: "desktop-dock__minimized-stack-icon",
@@ -9621,13 +10069,18 @@ function WorkbenchHostDock({
                       node.title
                     );
                     const dockButton = /* @__PURE__ */ jsx10(
-                      "button",
+                      "span",
                       {
                         "aria-label": i18n.t("launch", { title: node.title }),
+                        "aria-disabled": isPendingMinimizedNode ? true : void 0,
                         className: "desktop-dock__btn desktop-dock__minimized-btn",
-                        "data-interactive": "true",
-                        disabled: isPendingMinimizedNode,
-                        type: "button",
+                        "data-interactive": isPendingMinimizedNode ? "false" : "true",
+                        role: "button",
+                        tabIndex: isPendingMinimizedNode ? -1 : 0,
+                        onKeyDown: (event) => activateDockButtonFromKeyboard(
+                          event,
+                          isPendingMinimizedNode
+                        ),
                         onPointerDown: (event) => {
                           if (event.button !== 0 || isPendingMinimizedNode) {
                             return;
@@ -10228,7 +10681,7 @@ function WorkbenchHostDockMinimizedNodePreview({
   return renderMinimizedDockPreviewPlaceholder(className);
 }
 function renderMinimizedDockPreviewPlaceholder(className) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: ["desktop-dock__minimized-preview", className].filter(Boolean).join(" "),
@@ -10412,7 +10865,7 @@ function WorkbenchHostDockHoverPanel({
   if (!entry) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: hoverPanelRef,
@@ -10593,6 +11046,77 @@ function resolveNextDockItemPresence(item, initialized, previousPresence, should
   }
   return previousPresence ?? "entering";
 }
+function resolveDockPresenceItems(input) {
+  const currentByKey = new Map(input.current.map((item) => [item.key, item]));
+  const currentIndexByKey = new Map(
+    input.current.map((item, index) => [item.key, index])
+  );
+  const nextByKey = new Map(
+    input.nextSourceItems.map((item) => [item.key, item])
+  );
+  const nextKeys = new Set(input.nextSourceItems.map((item) => item.key));
+  const currentVisibleItemCount = input.current.filter(
+    (item) => item.presence !== "exiting"
+  ).length;
+  const shouldRetainExitingItems = input.nextSourceItems.length < currentVisibleItemCount;
+  const emittedKeys = /* @__PURE__ */ new Set();
+  const nextItems = [];
+  let currentIndex = 0;
+  const emitExitingUntil = (nextCurrentIndex) => {
+    while (currentIndex < nextCurrentIndex) {
+      const currentItem = input.current[currentIndex];
+      currentIndex += 1;
+      if (shouldRetainExitingItems && currentItem && !nextKeys.has(currentItem.key) && !emittedKeys.has(currentItem.key)) {
+        emittedKeys.add(currentItem.key);
+        nextItems.push({
+          ...currentItem,
+          presence: "exiting"
+        });
+      }
+    }
+  };
+  for (const item of input.nextSourceItems) {
+    const previousIndex = currentIndexByKey.get(item.key);
+    if (previousIndex !== void 0) {
+      emitExitingUntil(previousIndex);
+      currentIndex = Math.max(currentIndex, previousIndex + 1);
+    }
+    emittedKeys.add(item.key);
+    nextItems.push({
+      item,
+      key: item.key,
+      presence: resolveNextDockItemPresence(
+        item,
+        input.initialized,
+        currentByKey.get(item.key)?.presence,
+        input.shouldAnimateMinimizedDockEnter
+      )
+    });
+  }
+  for (const currentItem of input.current) {
+    if (shouldRetainExitingItems && !nextKeys.has(currentItem.key)) {
+      if (emittedKeys.has(currentItem.key)) {
+        continue;
+      }
+      emittedKeys.add(currentItem.key);
+      nextItems.push({
+        ...currentItem,
+        presence: "exiting"
+      });
+    }
+  }
+  return nextItems.filter(
+    (item) => nextByKey.has(item.key) || item.presence === "exiting"
+  );
+}
+function resolveDockPresenceSettleMs(items) {
+  if (items.some(
+    (item) => item.item.kind === "minimized" && (item.presence === "entering" || item.presence === "exiting")
+  )) {
+    return minimizedDockSlotLayoutAnimationMs;
+  }
+  return dockPresenceAnimationMs;
+}
 function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
   const latestItemsByKey = useRef8(/* @__PURE__ */ new Map());
   const shouldAnimateMinimizedDockEnterRef = useRef8(
@@ -10612,73 +11136,13 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
   useEffect9(() => {
     let nextSettleMs = dockPresenceAnimationMs;
     setPresentItems((current) => {
-      const nextSourceItems = [...latestItemsByKey.current.values()];
-      const currentByKey = new Map(current.map((item) => [item.key, item]));
-      const currentIndexByKey = new Map(
-        current.map((item, index) => [item.key, index])
-      );
-      const nextByKey = new Map(
-        nextSourceItems.map((item) => [item.key, item])
-      );
-      const nextKeys = new Set(nextSourceItems.map((item) => item.key));
-      const currentVisibleItemCount = current.filter(
-        (item) => item.presence !== "exiting"
-      ).length;
-      const shouldRetainExitingItems = nextSourceItems.length < currentVisibleItemCount;
-      const emittedKeys = /* @__PURE__ */ new Set();
-      const nextItems = [];
-      let currentIndex = 0;
-      const emitExitingUntil = (nextCurrentIndex) => {
-        while (currentIndex < nextCurrentIndex) {
-          const currentItem = current[currentIndex];
-          currentIndex += 1;
-          if (shouldRetainExitingItems && currentItem && !nextKeys.has(currentItem.key) && !emittedKeys.has(currentItem.key)) {
-            emittedKeys.add(currentItem.key);
-            nextItems.push({
-              ...currentItem,
-              presence: "exiting"
-            });
-          }
-        }
-      };
-      for (const item of nextSourceItems) {
-        const previousIndex = currentIndexByKey.get(item.key);
-        if (previousIndex !== void 0) {
-          emitExitingUntil(previousIndex);
-          currentIndex = Math.max(currentIndex, previousIndex + 1);
-        }
-        emittedKeys.add(item.key);
-        nextItems.push({
-          item,
-          key: item.key,
-          presence: resolveNextDockItemPresence(
-            item,
-            initialized.current,
-            currentByKey.get(item.key)?.presence,
-            shouldAnimateMinimizedDockEnterRef.current
-          )
-        });
-      }
-      for (const currentItem of current) {
-        if (shouldRetainExitingItems && !nextKeys.has(currentItem.key)) {
-          if (emittedKeys.has(currentItem.key)) {
-            continue;
-          }
-          emittedKeys.add(currentItem.key);
-          nextItems.push({
-            ...currentItem,
-            presence: "exiting"
-          });
-        }
-      }
-      const filteredItems = nextItems.filter(
-        (item) => nextByKey.has(item.key) || item.presence === "exiting"
-      );
-      if (filteredItems.some(
-        (item) => item.item.kind === "minimized" && (item.presence === "entering" || item.presence === "exiting")
-      )) {
-        nextSettleMs = minimizedDockSlotLayoutAnimationMs;
-      }
+      const filteredItems = resolveDockPresenceItems({
+        current,
+        initialized: initialized.current,
+        nextSourceItems: [...latestItemsByKey.current.values()],
+        shouldAnimateMinimizedDockEnter: shouldAnimateMinimizedDockEnterRef.current
+      });
+      nextSettleMs = resolveDockPresenceSettleMs(filteredItems);
       return filteredItems;
     });
     initialized.current = true;
@@ -10691,7 +11155,13 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
     }, nextSettleMs);
     return () => globalThis.clearTimeout(timeout);
   }, [itemKeys]);
-  return presentItems.map((presentItem) => {
+  const renderedPresentItems = resolveDockPresenceItems({
+    current: presentItems,
+    initialized: initialized.current,
+    nextSourceItems: [...latestItemsByKey.current.values()],
+    shouldAnimateMinimizedDockEnter
+  });
+  return renderedPresentItems.map((presentItem) => {
     const latestItem = latestItemsByKey.current.get(presentItem.key);
     return latestItem ? { ...presentItem, item: latestItem } : presentItem;
   });
@@ -11139,7 +11609,7 @@ function createWorkbenchHostNodeHeaderContext({
 
 // src/host/WorkbenchHostWindowActions.tsx
 import { Button as Button5, CloseIcon as CloseIcon2, MinimizeIcon as MinimizeIcon2 } from "@tutti-os/ui-system";
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function WorkbenchHostWindowActions({
   context,
   host,
@@ -11152,7 +11622,7 @@ function WorkbenchHostWindowActions({
   }
   const minimizable = definition.window?.minimizable !== false;
   const closable = definition.window?.closable !== false;
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
     minimizable ? /* @__PURE__ */ jsx11(
       Button5,
       {
@@ -11190,7 +11660,7 @@ function WorkbenchHostWindowActions({
 }
 
 // src/host/useWorkbenchHostSurfaceRenderers.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function useWorkbenchHostSurfaceRenderers(input) {
   const renderBottomChrome = useMemo6(() => {
     const renderChrome = input.renderBottomChrome;
@@ -11426,6 +11896,40 @@ function useWorkbenchHostSurfaceRenderers(input) {
     },
     [input.nodeDefinitionByType]
   );
+  const renderNodeGeniePreview = useCallback11(
+    (node, {
+      previewViewport
+    }) => {
+      const minimizedDock = input.nodeDefinitionByType.get(node.data.typeId)?.window?.minimizedDock;
+      if (minimizedDock?.kind !== "component") {
+        return null;
+      }
+      const externalState = readWorkbenchHostExternalState({
+        externalStateSource: input.externalStateSource,
+        node,
+        workspaceId: input.workspaceId
+      });
+      const preview = minimizedDock.providePreview({
+        externalNodeState: externalState.externalNodeState,
+        externalWorkspaceState: externalState.externalWorkspaceState,
+        host: input.hostSession,
+        isFocused: input.hostSession.getSnapshot().nodeStack.at(-1) === node.id,
+        isMinimized: node.isMinimized,
+        node,
+        previewViewport
+      });
+      return preview ? renderMinimizedDockPreviewContent(
+        preview,
+        "workbench-genie-preview-capture__preview"
+      ) : null;
+    },
+    [
+      input.externalStateSource,
+      input.hostSession,
+      input.nodeDefinitionByType,
+      input.workspaceId
+    ]
+  );
   const resolveDockAnchorKey = useCallback11(
     (node) => {
       if (node.isMinimized && isWorkbenchMinimizedDockEligibleNode({
@@ -11482,6 +11986,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
     renderBottomChrome,
     renderDock,
     renderNode,
+    renderNodeGeniePreview,
     renderTopChrome,
     renderWindowActions,
     renderWindowHeader,
@@ -11578,7 +12083,7 @@ var WorkbenchHostNodeRenderErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsxs8(
+      return /* @__PURE__ */ jsxs9(
         "div",
         {
           "data-workbench-node-render-error": "true",
@@ -11767,6 +12272,7 @@ function WorkbenchHost({
       className,
       captureNodePreviewImage: surfaceRenderers.captureNodePreviewImage,
       controller: hostSession.controller,
+      debugDiagnostics,
       dockPreviewCache,
       dockPlacement,
       interactive: !isHydrating,
@@ -11784,6 +12290,7 @@ function WorkbenchHost({
       renderBottomChrome: surfaceRenderers.renderBottomChrome,
       renderDock: surfaceRenderers.renderDock,
       renderNode: surfaceRenderers.renderNode,
+      renderNodeGeniePreview: surfaceRenderers.renderNodeGeniePreview,
       renderOverlay: missionControlRenderedState ? () => /* @__PURE__ */ jsx13(
         WorkbenchMissionControlOverlay,
         {