refactor(labextension): replace Kale toolbar polling with reactive state handling

labextension/src/commands/kaleToolbar.ts

@@ -22,12 +22,22 @@ export interface ILeftPanelHandle {
   triggerCompile: () => void;
   triggerRun: () => void;
   isKaleEnabled: () => boolean;
+  onKaleStateChange?: (enabled: boolean) => void;
 }
 
 let leftPanelRef: ILeftPanelHandle | null = null;
+let toolbarStateCallback: ((enabled: boolean) => void) | null = null;
 
 export const setLeftPanelCallbacks = (callbacks: ILeftPanelHandle | null) => {
   leftPanelRef = callbacks;
+
+  // Wire up reactive callback when panel becomes available
+  if (callbacks && toolbarStateCallback) {
+    callbacks.onKaleStateChange = toolbarStateCallback;
+
+    // Sync current state immediately
+    toolbarStateCallback(callbacks.isKaleEnabled());
+  }
 };
 
 function activateKalePanel(app: JupyterFrontEnd) {
@@ -80,16 +90,19 @@ export function registerKaleCommands(app: JupyterFrontEnd, kaleIcon: LabIcon) {
       panel.toolbar.addItem('kaleCompile', compileBtn);
       panel.toolbar.addItem('kaleRun', runBtn);
 
-      //  disable logic
-      const updateState = () => {
-        const enabled = leftPanelRef?.isKaleEnabled() ?? false;
+      // Register reactive updater
+      toolbarStateCallback = (enabled: boolean) => {
         compileBtn.enabled = enabled;
         runBtn.enabled = enabled;
       };
 
-      updateState();
-      const interval = setInterval(updateState, 500);
-      panel.disposed.connect(() => clearInterval(interval));
+      // Wire immediately if panel already exists
+      if (leftPanelRef) {
+        leftPanelRef.onKaleStateChange = toolbarStateCallback;
+
+        // Initial sync
+        toolbarStateCallback(leftPanelRef.isKaleEnabled());
+      }
     }
   }
 

labextension/src/widgets/LeftPanel.tsx

@@ -107,6 +107,16 @@ export const KubeflowKaleLeftPanel: React.FC<IProps> = props => {
     deployment.triggerRun,
     notebookMeta.isEnabled,
   ]);
+  // Notify toolbar when Kale enabled state changes
+  useEffect(() => {
+    if (notebookMeta.isEnabled !== undefined) {
+      setLeftPanelCallbacks({
+        triggerCompile: deployment.triggerCompile,
+        triggerRun: deployment.triggerRun,
+        isKaleEnabled: () => notebookMeta.isEnabled,
+      });
+    }
+  }, [notebookMeta.isEnabled]);
 
   // --- render logic ---