fix H5 scaling and 3D view, carousel reset

frontend/src/App.jsx

@@ -852,6 +852,7 @@ function Flow() {
   const [status, setStatus] = useState({ text: 'Connecting…', level: 'info' });
   const [contextMenu, setContextMenu] = useState(null);
   const [isCanvasRightZooming, setIsCanvasRightZooming] = useState(false);
+  const [executingNodeId, setExecutingNodeId] = useState(null);
 
   const flowContainerRef = useRef(null);
   const panTimerRef = useRef(null);
@@ -1285,15 +1286,19 @@ function Flow() {
             ...n,
             data: { ...n.data, processingTimeMs: null },
           })));
+          setExecutingNodeId(null);
           setStatus({ text: 'Running workflow…', level: 'info' });
           break;
         case 'executing':
+          setExecutingNodeId(String(msg.data.node));
           setStatus({ text: `Executing node ${msg.data.node}…`, level: 'info' });
           break;
         case 'execution_complete':
+          setExecutingNodeId(null);
           setStatus({ text: 'Done.', level: 'info' });
           break;
         case 'execution_error':
+          setExecutingNodeId(null);
           setStatus({ text: 'Error: ' + msg.data.message, level: 'error' });
           console.error('[tono] execution error', msg.data);
           break;
@@ -1924,7 +1929,8 @@ function Flow() {
     onResizeGroup: resizeGroup,
     onRenameGroup: renameGroup,
     onUngroup: ungroupGroup,
-  }), [onRuntimeValuesChange, onWidgetChange, openFileBrowser, onManualTrigger, renameGroup, resizeGroup, toggleGroupCollapse, ungroupGroup]);
+    executingNodeId,
+  }), [onRuntimeValuesChange, onWidgetChange, openFileBrowser, onManualTrigger, renameGroup, resizeGroup, toggleGroupCollapse, ungroupGroup, executingNodeId]);
 
   const clearGraph = useCallback(() => {
     setNodes([]);

frontend/src/CustomNode.jsx

@@ -413,9 +413,16 @@ function LayerGalleryPreview({ overlay }) {
   const layers = Array.isArray(overlay?.layers) ? overlay.layers : [];
   const [index, setIndex] = useState(0);
 
+  // Reset to 0 only when the layer names change (different file/channels loaded),
+  // not on every graph re-run which produces a new overlay object reference.
+  const layerNamesKey = layers.map((l) => l.name ?? '').join('\0');
+  const prevLayerNamesKeyRef = useRef(layerNamesKey);
   useEffect(() => {
-    setIndex(0);
-  }, [overlay]);
+    if (layerNamesKey !== prevLayerNamesKeyRef.current) {
+      prevLayerNamesKeyRef.current = layerNamesKey;
+      setIndex(0);
+    }
+  }, [layerNamesKey]);
 
   useEffect(() => {
     if (layers.length === 0) {
@@ -1168,6 +1175,8 @@ function CustomNode({ id, data }) {
   })();
 
   return (
+    <>
+      {ctx?.executingNodeId === id && <div className="node-executing-glow" aria-hidden="true" />}
     <div className="custom-node">
       {/* Title */}
       <div className="node-title drag-handle" style={{ background: catColor }}>
@@ -1519,6 +1528,7 @@ function CustomNode({ id, data }) {
         )}
       </div>
     </div>
+    </>
   );
 }
 

frontend/src/styles.css

@@ -230,6 +230,7 @@ html, body, #root {
 
 /* ── Custom node ───────────────────────────────────────────────────── */
 .custom-node {
+  position: relative;
   background: var(--bg-surface);
   border: 1px solid var(--border-default);
   border-radius: 6px;
@@ -1427,6 +1428,43 @@ html, body, #root {
   height: 8px !important;
 }
 
+/* ── Executing node glow ───────────────────────────────────────────── */
+.node-executing-glow {
+  position: absolute;
+  inset: -3px;
+  border-radius: 9px;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+.node-executing-glow::before {
+  content: '';
+  position: absolute;
+  /* large centered square so conic sweep stays circular on any node size */
+  width: 800px;
+  height: 800px;
+  top: 50%;
+  left: 50%;
+  margin-top: -400px;
+  margin-left: -400px;
+  background: conic-gradient(
+    from 0deg,
+    transparent       0deg,
+    transparent     310deg,
+    rgba(59, 130, 246, 0.12) 330deg,
+    rgba(99, 102, 241, 0.55) 348deg,
+    rgba(167, 139, 250, 1)   354deg,
+    rgba(255, 255, 255, 0.9) 357deg,
+    rgba(167, 139, 250, 0.7) 360deg
+  );
+  animation: node-glow-rotate 1.4s linear infinite;
+  transform-origin: center center;
+}
+@keyframes node-glow-rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
 /* ── Text Note node ────────────────────────────────────────────────── */
 .text-note-node {
   width: 100%;