From 897d950bdce150c3db608119d36edbe82437f97e Mon Sep 17 00:00:00 2001
From: KaifAhmad1 <kaifahmad087@gmail.com>
Date: Thu, 23 Apr 2026 18:24:31 +0530
Subject: [PATCH] fix(explorer): address PR #487 review blockers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Prevent active-but-disabled Focused button by only disabling when
   viewMode is not already "focused" (viewMode !== "focused" && !canActivateFocusedMode).
2. Generalize inspector fallback copy — stale/invalid node IDs are not
   necessarily grouped items, so remove the misleading "Activate Focused
   mode" hint.
3. Move pluginRuntimeRef.current read out of render by converting
   canActivateFocusedMode from useMemo to useState + useEffect, resolving
   two ESLint "cannot access refs during render" errors and the missing
   toolbar-memo dependency warning.

Co-authored-by: Sameer6305 <sskadam6305@gmail.com>
Co-authored-by: KaifAhmad1 <kaifahmad087@gmail.com>
---
 .../GraphWorkspace/GraphInspectorPanel.tsx           |  2 +-
 .../src/workspaces/GraphWorkspace/GraphWorkspace.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/explorer/src/workspaces/GraphWorkspace/GraphInspectorPanel.tsx b/explorer/src/workspaces/GraphWorkspace/GraphInspectorPanel.tsx
index ec1554df..e512e4bd 100644
--- a/explorer/src/workspaces/GraphWorkspace/GraphInspectorPanel.tsx
+++ b/explorer/src/workspaces/GraphWorkspace/GraphInspectorPanel.tsx
@@ -176,7 +176,7 @@ export function GraphInspectorPanel({
   if (!graph.hasNode(nodeId)) {
     return (
       <div style={{ padding: 24, color: "#8b949e", fontSize: 13, lineHeight: 1.6 }}>
-        Selected grouped item is not directly inspectable. Activate Focused mode to resolve to a canonical node.
+        Selected item is not available for inspection in the current graph.
       </div>
     );
   }
diff --git a/explorer/src/workspaces/GraphWorkspace/GraphWorkspace.tsx b/explorer/src/workspaces/GraphWorkspace/GraphWorkspace.tsx
index 404ebcad..32daf9e2 100644
--- a/explorer/src/workspaces/GraphWorkspace/GraphWorkspace.tsx
+++ b/explorer/src/workspaces/GraphWorkspace/GraphWorkspace.tsx
@@ -862,10 +862,10 @@ export function GraphWorkspace() {
     }
     setViewMode("focused");
   }, [resolveNodeIdForFocusedMode, selectedNodeId]);
-  const canActivateFocusedMode = useMemo(
-    () => Boolean(resolveNodeIdForFocusedMode(selectedNodeId)),
-    [pluginRuntimeVersion, resolveNodeIdForFocusedMode, selectedNodeId],
-  );
+  const [canActivateFocusedMode, setCanActivateFocusedMode] = useState(false);
+  useEffect(() => {
+    setCanActivateFocusedMode(Boolean(resolveNodeIdForFocusedMode(selectedNodeId)));
+  }, [pluginRuntimeVersion, resolveNodeIdForFocusedMode, selectedNodeId]);
 
   const focusNode = useCallback((nodeId: string) => {
     if (!nodeId) {
@@ -1429,7 +1429,7 @@ export function GraphWorkspace() {
             label: "Focused",
             title: "Inspect the selected node in a focused local graph",
             active: viewMode === "focused",
-            disabled: !canActivateFocusedMode,
+            disabled: viewMode !== "focused" && !canActivateFocusedMode,
             onClick: activateFocusedMode,
           },
         ],
@@ -1532,6 +1532,8 @@ export function GraphWorkspace() {
 
     return groups;
   }, [
+    activateFocusedMode,
+    canActivateFocusedMode,
     displayState.groupedViewAvailable,
     handlePluginAction,
     hasGraphContent,