Optima: parent the AIX Debugger Modal

src/apps/chat/components/layout-pane/ChatPane.tsx

@@ -19,6 +19,7 @@ import { CodiconSplitVertical } from '~/common/components/icons/CodiconSplitVert
 import { CodiconSplitVerticalRemove } from '~/common/components/icons/CodiconSplitVerticalRemove';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { OptimaPanelGroupedList, OptimaPanelGroupGutter } from '~/common/layout/optima/panel/OptimaPanelGroupedList';
+import { optimaActions } from '~/common/layout/optima/useOptima';
 import { useLabsDevMode } from '~/common/stores/store-ux-labs';
 
 import { useChatShowSystemMessages } from '../../store-app-chat';
@@ -100,15 +101,6 @@ export function ChatPane(props: {
   const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
 
 
-  // [DEV MODE]
-
-  const [aixLastDispatchDialog, setAixLastDispatchDialog] = React.useState<React.ReactNode | null>(null);
-
-  const handleAixShowLastRequest = React.useCallback(() => {
-    setAixLastDispatchDialog(<AixDebuggerDialog onClose={() => setAixLastDispatchDialog(null)} />);
-  }, []);
-
-
   return <>
 
     {/* Window group */}
@@ -190,15 +182,12 @@ export function ChatPane(props: {
     {/* [DEV] Development */}
     {labsDevMode && (
       <OptimaPanelGroupedList title='[Developers]'>
-        <MenuItem onClick={handleAixShowLastRequest}>
+        <MenuItem onClick={optimaActions().openAIXDebugger}>
           <ListItemDecorator><EngineeringIcon /></ListItemDecorator>
           AIX: Show Last Request...
         </MenuItem>
       </OptimaPanelGroupedList>
     )}
 
-    {/* [DEV MODE] Show any dialog, if present */}
-    {aixLastDispatchDialog}
-
   </>;
 }

src/common/layout/optima/Modals.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { AixDebuggerDialog } from '~/modules/aix/client/debugger/AixDebuggerDialog';
 import { ModelsModal } from '~/modules/llms/models-modal/ModelsModal';
 import { SettingsModal } from '../../../apps/settings-modal/SettingsModal';
 import { ShortcutsModal } from '../../../apps/settings-modal/ShortcutsModal';
@@ -12,10 +13,10 @@ import { optimaActions, optimaOpenPreferences, useOptimaModals } from './useOpti
 export function Modals(props: { suspendAutoModelsSetup?: boolean }) {
 
   // external state
-  const { preferencesTab, showKeyboardShortcuts, showLogger, showPreferences } = useOptimaModals();
+  const { preferencesTab, showAIXDebugger, showKeyboardShortcuts, showLogger, showPreferences } = useOptimaModals();
 
   // derived state
-  const { closeKeyboardShortcuts, closeLogger, closePreferences, openKeyboardShortcuts } = optimaActions();
+  const { closeAIXDebugger, closeKeyboardShortcuts, closeLogger, closePreferences, openKeyboardShortcuts } = optimaActions();
 
   return <>
 
@@ -34,6 +35,9 @@ export function Modals(props: { suspendAutoModelsSetup?: boolean }) {
     {/* Logger */}
     {showLogger && <LogViewerDialog onClose={closeLogger} />}
 
+    {/* AIX Debugger Dialog */}
+    {showAIXDebugger && <AixDebuggerDialog onClose={closeAIXDebugger} />}
+
     {/* Overlay Shortcuts */}
     {showKeyboardShortcuts && (
       <ShortcutsModal onClose={closeKeyboardShortcuts} />

src/common/layout/optima/OptimaLayout.tsx

@@ -59,6 +59,7 @@ export function OptimaLayout(props: { suspendAutoModelsSetup?: boolean, children
     { key: ',', ctrl: true, action: optimaOpenPreferences },
     { key: 'm', ctrl: true, shift: true, action: optimaOpenModels },
     { key: 'g', ctrl: true, shift: true, action: optimaActions().openLogger },
+    { key: 'a', ctrl: true, shift: true, action: optimaActions().openAIXDebugger },
     // Font Scale
     { key: '+', ctrl: true, shift: true, action: useUIPreferencesStore.getState().increaseContentScaling },
     { key: '-', ctrl: true, shift: true, action: useUIPreferencesStore.getState().decreaseContentScaling },

src/common/layout/optima/store-layout-optima.ts

@@ -19,6 +19,7 @@ interface OptimaState {
   panelIsOpen: boolean;
 
   // modals
+  showAIXDebugger: boolean;
   showKeyboardShortcuts: boolean;
   showLogger: boolean;
   showModelOptions: DLLMId | false;
@@ -51,6 +52,7 @@ const initialState: OptimaState = {
   panelIsOpen: false,
 
   // modals that can overlay anything
+  showAIXDebugger: false,
   showKeyboardShortcuts: false,
   showLogger: false,
   showModelOptions: false,
@@ -75,6 +77,9 @@ export interface OptimaActions {
   openPanel: () => void;
   togglePanel: () => void;
 
+  closeAIXDebugger: () => void;
+  openAIXDebugger: () => void;
+
   closeKeyboardShortcuts: () => void;
   openKeyboardShortcuts: () => void;
 
@@ -116,6 +121,9 @@ export const useLayoutOptimaStore = create<OptimaState & OptimaActions>((_set, _
   openPanel: () => _set({ panelIsOpen: true, lastPanelOpenTime: Date.now() }),
   togglePanel: () => _get().panelIsOpen ? _get().closePanel() : _get().openPanel(),
 
+  closeAIXDebugger: () => _set({ showAIXDebugger: false }),
+  openAIXDebugger: () => _set({ showAIXDebugger: true }),
+
   closeKeyboardShortcuts: () => _set({ showKeyboardShortcuts: false }),
   openKeyboardShortcuts: () => _set({ showKeyboardShortcuts: true }),
 

src/common/layout/optima/useOptima.tsx

@@ -79,6 +79,7 @@ export function optimaOpenPreferences(changeTab?: PreferencesTabId) {
 
 export function useOptimaModals() {
   return useLayoutOptimaStore(useShallow(state => ({
+    showAIXDebugger: state.showAIXDebugger,
     showKeyboardShortcuts: state.showKeyboardShortcuts,
     showLogger: state.showLogger,
     showModelOptions: state.showModelOptions,