more-compute 0.1.4__py3-none-any.whl → 0.2.0__py3-none-any.whl

frontend/components/popups/MetricsPopup.tsx

@@ -69,17 +69,21 @@ const MetricsPopup: React.FC<{ onClose?: () => void }> = ({ onClose }) => {
           </Panel>
         )}
 
-        {hasGPU && (
-          <Panel title="GPU Utilization" icon={<Gauge size={14} />}>
+        {hasGPU && metrics!.gpu!.map((gpu, index) => (
+          <Panel
+            key={index}
+            title={`GPU ${index} Utilization`}
+            icon={<Gauge size={14} />}
+          >
             <BigValue
-              value={fmtPct(metrics!.gpu![0].util_percent)}
-              subtitle={`Temp ${metrics!.gpu![0].temperature_c ?? "-"}°C`}
+              value={fmtPct(gpu.util_percent)}
+              subtitle={`Temp ${gpu.temperature_c ?? "-"}°C`}
             />
             <MiniChart
-              data={history.map((h) => (h.gpu && h.gpu[0]?.util_percent) || 0)}
+              data={history.map((h) => (h.gpu && h.gpu[index]?.util_percent) || 0)}
             />
           </Panel>
-        )}
+        ))}
 
         {metrics?.network && (
           <Panel title="Network" icon={<Activity size={14} />}>
@@ -145,7 +149,7 @@ const MiniChart: React.FC<{ data: number[] }> = ({ data }) => {
     .join(" ");
   return (
     <svg width={width} height={height} className="mini-chart">
-      <polyline points={points} fill="none" stroke="#3b82f6" strokeWidth="2" />
+      <polyline points={points} fill="none" stroke="var(--mc-primary)" strokeWidth="2" />
     </svg>
   );
 };

frontend/components/popups/SettingsPopup.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { THEMES, DEFAULT_SETTINGS, loadSettings, saveSettings, applyTheme, type NotebookSettings } from '@/lib/settings';
 
-const SettingsPopup: React.FC<{ onClose?: () => void; onSettingsChange?: (settings: NotebookSettings) => void }> = ({ onClose, onSettingsChange }) => {
+const SettingsPopup: React.FC<{ onSettingsChange?: (settings: NotebookSettings) => void }> = ({ onSettingsChange }) => {
   const [settings, setSettings] = useState<NotebookSettings>(() => loadSettings());
   const [settingsJson, setSettingsJson] = useState(() => JSON.stringify(loadSettings(), null, 2));
   const [error, setError] = useState<string | null>(null);
@@ -9,13 +9,17 @@ const SettingsPopup: React.FC<{ onClose?: () => void; onSettingsChange?: (settin
   useEffect(() => {
     setSettingsJson(JSON.stringify(settings, null, 2));
     applyTheme(settings.theme);
-  }, []);
+  }, [settings]);
 
   const persistSettings = useCallback((updated: NotebookSettings) => {
     setSettings(updated);
     setSettingsJson(JSON.stringify(updated, null, 2));
     saveSettings(updated);
     applyTheme(updated.theme);
+
+    // Dispatch custom event to notify Monaco cells of theme change
+    window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: updated.theme } }));
+
     onSettingsChange?.(updated);
   }, [onSettingsChange]);
 
@@ -29,7 +33,7 @@ const SettingsPopup: React.FC<{ onClose?: () => void; onSettingsChange?: (settin
       };
       setError(null);
       persistSettings(merged);
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Failed to parse settings JSON', err);
       setError('Invalid JSON. Please fix the syntax and try again.');
     }
@@ -42,20 +46,14 @@ const SettingsPopup: React.FC<{ onClose?: () => void; onSettingsChange?: (settin
 
   return (
     <div className="settings-container">
-      <div style={{ marginBottom: '16px', padding: '12px', background: '#f8f9fa', borderRadius: '6px', color: '#6b7280', fontSize: '13px', lineHeight: 1.5 }}>
-        <strong>MoreCompute Settings</strong><br />
-        Configure your notebook environment. Changes are saved to local storage.
-        <br /><br />
-        <em>Experiment with themes (e.g. "catppuccin") or customise fonts and autosave.</em>
-      </div>
-      <textarea 
-        className="settings-editor" 
+      <textarea
+        className="settings-editor"
         value={settingsJson}
         onChange={(e) => setSettingsJson(e.target.value)}
         spellCheck={false}
       />
       {error && (
-        <div style={{ color: '#dc2626', fontSize: '12px', marginTop: '8px' }}>{error}</div>
+        <div style={{ color: 'var(--mc-error-color, #dc2626)', fontSize: '12px', marginTop: '8px' }}>{error}</div>
       )}
       <div className="settings-actions">
         <button className="btn btn-secondary" type="button" onClick={handleReset}>Reset to Defaults</button>
@@ -65,4 +63,4 @@ const SettingsPopup: React.FC<{ onClose?: () => void; onSettingsChange?: (settin
   );
 };
 
-export default SettingsPopup;
+export default SettingsPopup;

frontend/contexts/PodWebSocketContext.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState, useCallback, useRef } from 'react';
+import { PodResponse } from '@/lib/api';
+
+export interface GPUPod {
+  id: string;
+  name: string;
+  status: "running" | "stopped" | "starting";
+  gpuType: string;
+  region: string;
+  costPerHour: number;
+  sshConnection: string | null;
+}
+
+export type ConnectionState = 'provisioning' | 'deploying' | 'connected' | null;
+
+interface PodWebSocketContextType {
+  gpuPods: GPUPod[];
+  isConnected: boolean;
+  updatePod: (pod: GPUPod) => void;
+  setPods: (pods: GPUPod[]) => void;
+  addPod: (pod: GPUPod) => void;
+  removePod: (podId: string) => void;
+  registerAutoConnect: (podId: string, callback: (podId: string) => void) => void;
+  connectionState: ConnectionState;
+  connectingPodId: string | null;
+  connectedPodId: string | null;
+  setConnectionState: (state: ConnectionState) => void;
+  setConnectingPodId: (podId: string | null) => void;
+  setConnectedPodId: (podId: string | null) => void;
+}
+
+const PodWebSocketContext = createContext<PodWebSocketContextType | undefined>(undefined);
+
+export const usePodWebSocket = () => {
+  const context = useContext(PodWebSocketContext);
+  if (!context) {
+    throw new Error('usePodWebSocket must be used within a PodWebSocketProvider');
+  }
+  return context;
+};
+
+interface PodWebSocketProviderProps {
+  children: React.ReactNode;
+}
+
+export const PodWebSocketProvider: React.FC<PodWebSocketProviderProps> = ({ children }) => {
+  const [gpuPods, setGpuPods] = useState<GPUPod[]>([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const [connectionState, setConnectionState] = useState<ConnectionState>(null);
+  const [connectingPodId, setConnectingPodId] = useState<string | null>(null);
+  const [connectedPodId, setConnectedPodId] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const reconnectAttemptsRef = useRef(0);
+  const maxReconnectAttempts = 5;
+  const autoConnectCallbacksRef = useRef<Map<string, (podId: string) => void>>(new Map());
+
+  const updatePod = useCallback((updatedPod: GPUPod) => {
+    setGpuPods((prevPods) => {
+      const existingIndex = prevPods.findIndex((p) => p.id === updatedPod.id);
+      if (existingIndex >= 0) {
+        const newPods = [...prevPods];
+        newPods[existingIndex] = updatedPod;
+        return newPods;
+      } else {
+        return [...prevPods, updatedPod];
+      }
+    });
+  }, []);
+
+  const setPods = useCallback((pods: GPUPod[]) => {
+    setGpuPods(pods);
+  }, []);
+
+  const addPod = useCallback((pod: GPUPod) => {
+    setGpuPods((prevPods) => {
+      const exists = prevPods.some((p) => p.id === pod.id);
+      if (exists) {
+        return prevPods.map((p) => (p.id === pod.id ? pod : p));
+      }
+      return [...prevPods, pod];
+    });
+  }, []);
+
+  const removePod = useCallback((podId: string) => {
+    setGpuPods((prevPods) => prevPods.filter((p) => p.id !== podId));
+  }, []);
+
+  const connectWebSocket = useCallback(() => {
+    // Clean up existing connection
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+
+    const wsUrl = 'ws://127.0.0.1:8000/ws';
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log('[PodWebSocket] Connected');
+      setIsConnected(true);
+      reconnectAttemptsRef.current = 0;
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        if (message.type === "pod_status_update" && message.data) {
+          const podData = message.data;
+
+          // Map API status to UI status
+          let uiStatus: "running" | "stopped" | "starting" = "stopped";
+          const isFullyReady = podData.status === "ACTIVE" && podData.ssh_connection;
+
+          if (isFullyReady) {
+            uiStatus = "running";
+          } else if (podData.status === "ACTIVE" || podData.status === "PROVISIONING" || podData.status === "PENDING") {
+            uiStatus = "starting";
+          }
+
+          // Update pod in the list
+          setGpuPods((prevPods) => {
+            const existingPodIndex = prevPods.findIndex((p) => p.id === podData.pod_id);
+
+            if (existingPodIndex >= 0) {
+              // Update existing pod
+              const updatedPods = [...prevPods];
+              const wasStarting = prevPods[existingPodIndex].status === "starting";
+
+              updatedPods[existingPodIndex] = {
+                id: podData.pod_id,
+                name: podData.name,
+                status: uiStatus,
+                gpuType: podData.gpu_name,
+                region: prevPods[existingPodIndex].region,
+                costPerHour: podData.price_hr,
+                sshConnection: podData.ssh_connection || null,
+              };
+
+              // Trigger auto-connect callback if pod just became ready
+              // Small delay to ensure SSH is accepting connections
+              if (wasStarting && isFullyReady) {
+                console.log(`[PodWebSocket] Pod ${podData.pod_id} is ready, scheduling auto-connect in 5s`);
+                const callback = autoConnectCallbacksRef.current.get(podData.pod_id);
+                if (callback) {
+                  setTimeout(() => {
+                    console.log(`[PodWebSocket] Triggering auto-connect for pod ${podData.pod_id}`);
+                    callback(podData.pod_id);
+                  }, 5000); // Short delay, backend now handles retries
+                  autoConnectCallbacksRef.current.delete(podData.pod_id);
+                }
+              }
+
+              return updatedPods;
+            } else {
+              // Add new pod if not in list
+              return [
+                ...prevPods,
+                {
+                  id: podData.pod_id,
+                  name: podData.name,
+                  status: uiStatus,
+                  gpuType: podData.gpu_name,
+                  region: "Unknown",
+                  costPerHour: podData.price_hr,
+                  sshConnection: podData.ssh_connection || null,
+                },
+              ];
+            }
+          });
+        }
+      } catch (err) {
+        console.error('[PodWebSocket] Failed to parse message:', err);
+      }
+    };
+
+    ws.onerror = (error) => {
+      console.error('[PodWebSocket] Error:', error);
+      setIsConnected(false);
+    };
+
+    ws.onclose = () => {
+      console.log('[PodWebSocket] Disconnected');
+      setIsConnected(false);
+      wsRef.current = null;
+
+      // Attempt to reconnect with exponential backoff
+      if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+        const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
+        console.log(`[PodWebSocket] Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current + 1}/${maxReconnectAttempts})`);
+
+        reconnectTimeoutRef.current = setTimeout(() => {
+          reconnectAttemptsRef.current++;
+          connectWebSocket();
+        }, delay);
+      } else {
+        console.log('[PodWebSocket] Max reconnect attempts reached');
+      }
+    };
+
+    wsRef.current = ws;
+  }, []);
+
+  // Register auto-connect callback
+  const registerAutoConnect = useCallback((podId: string, callback: (podId: string) => void) => {
+    autoConnectCallbacksRef.current.set(podId, callback);
+  }, []);
+
+  // Expose registerAutoConnect through context
+  const contextValue: PodWebSocketContextType = React.useMemo(() => ({
+    gpuPods,
+    isConnected,
+    updatePod,
+    setPods,
+    addPod,
+    removePod,
+    registerAutoConnect,
+    connectionState,
+    connectingPodId,
+    connectedPodId,
+    setConnectionState,
+    setConnectingPodId,
+    setConnectedPodId,
+  }), [gpuPods, isConnected, updatePod, setPods, addPod, removePod, registerAutoConnect, connectionState, connectingPodId, connectedPodId]);
+
+  useEffect(() => {
+    connectWebSocket();
+
+    // Cleanup on unmount
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, [connectWebSocket]);
+
+  return (
+    <PodWebSocketContext.Provider value={contextValue}>
+      {children}
+    </PodWebSocketContext.Provider>
+  );
+};

frontend/eslint.config.mjs

@@ -20,6 +20,17 @@ const eslintConfig = [
       "next-env.d.ts",
     ],
   },
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-unsafe-function-type": "warn",
+      "prefer-const": "warn",
+      "react/no-unescaped-entities": "warn",
+      "react-hooks/exhaustive-deps": "warn",
+      "@next/next/no-img-element": "warn",
+    },
+  },
 ];
 
 export default eslintConfig;

frontend/lib/monaco-themes.ts

@@ -0,0 +1,160 @@
+import { editor } from 'monaco-editor';
+import generatedThemes from './themes.json';
+
+export type MonacoThemeName = keyof typeof generatedThemes.themes;
+
+interface VSCodeTokenColor {
+  name?: string;
+  scope: string | string[];
+  settings?: {
+    foreground?: string;
+    background?: string;
+    fontStyle?: string;
+  };
+}
+
+interface VSCodeTheme {
+  displayName: string;
+  name: string;
+  type: 'light' | 'dark';
+  colors?: Record<string, string>;
+  tokenColors?: VSCodeTokenColor[];
+}
+
+/**
+ * Convert VS Code theme to Monaco theme definition
+ */
+function convertToMonacoTheme(vsCodeTheme: VSCodeTheme): editor.IStandaloneThemeData {
+  const colors = vsCodeTheme.colors || {};
+  const tokenColors = vsCodeTheme.tokenColors || [];
+
+  // Convert token colors to Monaco rules format
+  const rules: editor.ITokenThemeRule[] = [];
+  tokenColors.forEach((tokenColor: VSCodeTokenColor) => {
+    const scopes = Array.isArray(tokenColor.scope) ? tokenColor.scope : [tokenColor.scope];
+    const settings = tokenColor.settings || {};
+
+    scopes.forEach((scope: string) => {
+      if (scope && settings) {
+        rules.push({
+          token: scope,
+          foreground: settings.foreground?.replace('#', ''),
+          background: settings.background?.replace('#', ''),
+          fontStyle: settings.fontStyle,
+        });
+      }
+    });
+  });
+
+  const monacoColors: Record<string, string> = {
+    'editor.background': colors['editor.background'],
+    'editor.foreground': colors['editor.foreground'],
+    'editor.lineHighlightBackground': colors['editor.lineHighlightBackground'] || colors['editor.background'],
+    'editor.selectionBackground': colors['editor.selectionBackground'],
+    'editorCursor.foreground': colors['editorCursor.foreground'],
+    'editorLineNumber.foreground': colors['editorLineNumber.foreground'],
+    'editorLineNumber.activeForeground': colors['editorLineNumber.activeForeground'],
+  };
+
+  // Remove undefined values
+  Object.keys(monacoColors).forEach(key => {
+    if (monacoColors[key] === undefined) {
+      delete monacoColors[key];
+    }
+  });
+
+  return {
+    base: vsCodeTheme.type === 'light' ? 'vs' : 'vs-dark',
+    inherit: true,
+    rules,
+    colors: monacoColors,
+  };
+}
+
+/**
+ * Load and define all themes in Monaco Editor
+ */
+export function loadMonacoThemes(monaco: typeof import('monaco-editor')) {
+  Object.entries(generatedThemes.themes).forEach(([themeName, themeData]) => {
+    const monacoTheme = convertToMonacoTheme(themeData as VSCodeTheme);
+    monaco.editor.defineTheme(themeName, monacoTheme);
+  });
+}
+
+/**
+ * Get list of available theme names
+ */
+export function getAvailableThemes(): Array<{ name: string; displayName: string; type: 'light' | 'dark' }> {
+  return Object.entries(generatedThemes.themes).map(([name, data]) => ({
+    name,
+    displayName: data.displayName,
+    type: data.type as 'light' | 'dark',
+  }));
+}
+
+/**
+ * Lighten or darken a hex color
+ */
+function adjustColor(hex: string, percent: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + percent));
+  const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + percent));
+  const b = Math.min(255, Math.max(0, (num & 0x0000FF) + percent));
+  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+}
+
+/**
+ * Get simplified color scheme for UI elements (non-Monaco parts)
+ */
+export function getThemeColors(themeName: string) {
+  const theme = generatedThemes.themes[themeName as keyof typeof generatedThemes.themes];
+  if (!theme) return null;
+
+  const colors: Record<string, string | undefined> = theme.colors || {};
+  const isLight = theme.type === 'light';
+
+  // Extract colors from VS Code theme
+  const editorBg = colors['editor.background'] || (isLight ? '#ffffff' : '#1e1e1e');
+  const editorFg = colors['editor.foreground'] || (isLight ? '#1f2937' : '#d4d4d4');
+  const activityBarBg = colors['activityBar.background'] || editorBg;
+  const sidebarBg = colors['sideBar.background'] || activityBarBg;
+  const buttonBg = colors['button.background'] || (isLight ? '#3b82f6' : '#60a5fa');
+  const buttonFg = colors['button.foreground'] || (isLight ? '#ffffff' : '#000000');
+
+  // Derive border colors
+  const borderColor = isLight ? adjustColor(editorBg, -20) : adjustColor(editorBg, 20);
+
+  return {
+    // Core colors
+    background: adjustColor(editorBg, isLight ? -5 : -10),
+    cellBackground: editorBg,
+    textColor: editorFg,
+    markdownColor: editorFg,
+    lineNumberColor: colors['editorLineNumber.foreground'] || (isLight ? '#9ca3af' : '#6b7280'),
+
+    // Primary/Secondary colors
+    primary: buttonBg,
+    primaryHover: adjustColor(buttonBg, isLight ? -20 : 20),
+    secondary: borderColor,
+    secondaryHover: adjustColor(borderColor, isLight ? -15 : 15),
+
+    // UI element colors
+    border: borderColor,
+    borderHover: adjustColor(borderColor, isLight ? -10 : 10),
+    sidebarBackground: sidebarBg,
+    sidebarForeground: colors['sideBar.foreground'] || editorFg,
+    buttonBackground: buttonBg,
+    buttonForeground: buttonFg,
+    inputBackground: editorBg,
+    inputBorder: borderColor,
+
+    // Headings and emphasis
+    headingColor: adjustColor(editorFg, isLight ? -30 : 30),
+    paragraphColor: editorFg,
+
+    // Output colors
+    outputBackground: adjustColor(editorBg, isLight ? -10 : -5),
+    outputTextColor: editorFg,
+    outputBorder: borderColor,
+  };
+}