From 6934b05c85c2c480ede657d328de710db2d289f4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:50:14 +1000
Subject: [PATCH] fix(ui): use invocation context provider in inspector panel

---
 .../sidePanel/inspector/InspectorDetailsTab.tsx   | 15 +++++++++------
 .../sidePanel/inspector/InspectorOutputsTab.tsx   | 15 +++++++++------
 .../sidePanel/inspector/InspectorTemplateTab.tsx  | 15 +++++++++------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
index 53a581ca01..30b2de00ad 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@@ -2,6 +2,7 @@ import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-l
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { InvocationNodeContextProvider } from 'features/nodes/components/flow/nodes/Invocation/context';
 import { InvocationNodeNotesTextarea } from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeNotesTextarea';
 import { TemplateGate } from 'features/nodes/components/sidePanel/inspector/NodeTemplateGate';
 import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate';
@@ -22,12 +23,14 @@ const InspectorDetailsTab = () => {
   }
 
   return (
-    <TemplateGate
-      nodeId={lastSelectedNodeId}
-      fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
-    >
-      <Content nodeId={lastSelectedNodeId} />
-    </TemplateGate>
+    <InvocationNodeContextProvider nodeId={lastSelectedNodeId}>
+      <TemplateGate
+        nodeId={lastSelectedNodeId}
+        fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
+      >
+        <Content nodeId={lastSelectedNodeId} />
+      </TemplateGate>
+    </InvocationNodeContextProvider>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
index 64d706bfd5..f1880c5e48 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
@@ -3,6 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
+import { InvocationNodeContextProvider } from 'features/nodes/components/flow/nodes/Invocation/context';
 import { TemplateGate } from 'features/nodes/components/sidePanel/inspector/NodeTemplateGate';
 import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { useNodeTemplateOrThrow } from 'features/nodes/hooks/useNodeTemplateOrThrow';
@@ -22,12 +23,14 @@ const InspectorOutputsTab = () => {
   }
 
   return (
-    <TemplateGate
-      nodeId={lastSelectedNodeId}
-      fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
-    >
-      <Content nodeId={lastSelectedNodeId} />
-    </TemplateGate>
+    <InvocationNodeContextProvider nodeId={lastSelectedNodeId}>
+      <TemplateGate
+        nodeId={lastSelectedNodeId}
+        fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
+      >
+        <Content nodeId={lastSelectedNodeId} />
+      </TemplateGate>
+    </InvocationNodeContextProvider>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
index 0c22b6bc63..c2a3305979 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
@@ -1,6 +1,7 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
+import { InvocationNodeContextProvider } from 'features/nodes/components/flow/nodes/Invocation/context';
 import { TemplateGate } from 'features/nodes/components/sidePanel/inspector/NodeTemplateGate';
 import { useNodeTemplateOrThrow } from 'features/nodes/hooks/useNodeTemplateOrThrow';
 import { selectLastSelectedNodeId } from 'features/nodes/store/selectors';
@@ -16,12 +17,14 @@ const NodeTemplateInspector = () => {
   }
 
   return (
-    <TemplateGate
-      nodeId={lastSelectedNodeId}
-      fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
-    >
-      <Content nodeId={lastSelectedNodeId} />
-    </TemplateGate>
+    <InvocationNodeContextProvider nodeId={lastSelectedNodeId}>
+      <TemplateGate
+        nodeId={lastSelectedNodeId}
+        fallback={<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />}
+      >
+        <Content nodeId={lastSelectedNodeId} />
+      </TemplateGate>
+    </InvocationNodeContextProvider>
   );
 };