more-compute 0.2.6__py3-none-any.whl → 0.3.0__py3-none-any.whl

frontend/app/globals.css

@@ -210,8 +210,8 @@ body {
 .kernel-status-indicator {
     display: flex;
     align-items: center;
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid #e5e7eb;
+    background: var(--mc-cell-background);
+    border: 1px solid var(--mc-border);
     border-radius: 20px;
     padding: 8px 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -252,7 +252,7 @@ body {
 }
 
 .status-text {
-    color: #6b7280;
+    color: var(--mc-text-color);
 }
 
 /* Notebook Wrapper */
@@ -575,131 +575,7 @@ body {
     padding: 0;
 }
 
-.cell-editor-container {
-    position: relative;
-}
-
-.cell-editor {
-    width: 100%;
-    border: none;
-    outline: none;
-    resize: none;
-    font-family: 'Fira', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    padding: 16px 20px;
-    background: transparent;
-    color: var(--mc-text-color);
-    min-height: 100px;
-}
-
-.cell-editor:focus {
-    outline: none;
-}
-
-/* Markdown editor styling - uses Fira font for better readability */
-.markdown-editor-container {
-    /* Inherits from cell-editor-container */
-}
-
-.markdown-editor {
-    font-family: 'Fira', 'CustomFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-    /* Keep other properties from .cell-editor */
-}
-
-/* Code editor styling - keeps monospace font */
-.code-editor-container {
-    /* Inherits from cell-editor-container */
-}
-
-.code-editor {
-    /* Inherits monospace font from .cell-editor */
-}
-
-/* CodeMirror Styling */
-.CodeMirror {
-    height: auto;
-    font-family: 'Fira', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    border: none;
-    background: transparent;
-    color: var(--mc-text-color);
-}
-
-.CodeMirror-focused {
-    outline: none;
-}
-
-.CodeMirror-scroll {
-    /* Content-based sizing - start small and grow with content */
-    min-height: 32px; /* Single line minimum */
-    padding: 8px 16px;
-    transition: min-height 0.2s ease;
-    background: var(--mc-cell-background);
-}
-
-/* Auto-sizing based on content */
-.CodeMirror {
-    /* Let CodeMirror size itself based on content */
-    height: auto !important;
-    min-height: 32px;
-}
-
-.CodeMirror-sizer {
-    min-height: auto !important;
-}
-
-/* Smart sizing classes applied dynamically */
-.cell.cell-empty .CodeMirror-scroll {
-    min-height: 32px; /* Very compact for empty cells */
-}
-
-.cell.cell-single-line .CodeMirror-scroll {
-    min-height: 40px; /* Slightly more space for single line */
-}
-
-.cell.cell-focused .CodeMirror-scroll {
-    min-height: 48px; /* More space when focused for editing */
-}
-
-.CodeMirror-cursor {
-    border-left: 2px solid #3b82f6;
-}
-
-.CodeMirror-selected {
-    background: #dbeafe;
-}
-
-.CodeMirror-line {
-    padding: 0;
-}
-
-.CodeMirror-placeholder {
-    color: #9ca3af !important;
-    font-style: italic;
-}
-
-/* Line numbers styling */
-.CodeMirror-linenumbers {
-    background: var(--mc-cell-background);
-    border-right: 1px solid #e5e7eb;
-    padding-right: 8px;
-    min-width: 30px;
-}
-
-.CodeMirror-linenumber {
-    color: var(--mc-line-number-color);
-    font-size: 11px;
-    text-align: right;
-    padding: 0 5px 0 0;
-    min-width: 20px;
-}
-
-.CodeMirror-gutters {
-    background: var(--mc-cell-background);
-    border-right: 1px solid #e5e7eb;
-}
+/* Legacy textarea editor styles removed - now using Monaco Editor exclusively */
 
 /* Markdown Rendered Content - Auto-sizing */
 .markdown-rendered {
@@ -1434,6 +1310,7 @@ body {
     border: 1px solid var(--mc-border);
     border-radius: 8px;
     background: var(--mc-cell-background);
+    overflow: hidden;
 }
 
 .metric-panel-header {
@@ -1450,6 +1327,7 @@ body {
 
 .metric-panel-body {
     padding: 10px 12px;
+    overflow: hidden;
 }
 
 .metric-big-value .value {
@@ -1466,6 +1344,8 @@ body {
 
 .mini-chart {
     margin-top: 6px;
+    max-width: 100%;
+    height: auto;
 }
 
 .metrics-footer {
@@ -1577,7 +1457,7 @@ body {
 .packages-table {
     display: flex;
     flex-direction: column;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--mc-border);
     border-radius: 8px;
     overflow: hidden;
     background: var(--mc-cell-background);
@@ -1590,14 +1470,38 @@ body {
     padding: 10px 12px;
     font-size: 12px;
     font-weight: 600;
-    color: #6b7280;
-    border-bottom: 1px solid #e5e7eb;
-    background: #f9fafb;
+    color: var(--mc-text-color);
+    border-bottom: 1px solid var(--mc-border);
+    background: var(--mc-secondary);
+    opacity: 0.8;
 }
 
 .packages-list {
     overflow-y: auto;
     max-height: calc(100vh - 260px);
+    /* Firefox scrollbar styling */
+    scrollbar-width: thin;
+    scrollbar-color: var(--mc-border) var(--mc-cell-background);
+}
+
+/* Packages list scrollbar styling (Webkit browsers) */
+.packages-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.packages-list::-webkit-scrollbar-track {
+    background: var(--mc-cell-background);
+    border-radius: 4px;
+}
+
+.packages-list::-webkit-scrollbar-thumb {
+    background: var(--mc-border);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.packages-list::-webkit-scrollbar-thumb:hover {
+    background: var(--mc-secondary);
 }
 
 .package-row {
@@ -1605,7 +1509,7 @@ body {
     grid-template-columns: 1fr 140px;
     gap: 8px;
     padding: 10px 12px;
-    border-bottom: 1px solid #f3f4f6;
+    border-bottom: 1px solid var(--mc-border);
 }
 
 .package-row:last-child {
@@ -1694,6 +1598,7 @@ body {
   color: var(--mc-line-number-color) !important;
   font-size: 11px !important;
   font-family: 'Fira', 'SF Mono', Monaco, monospace;
+  padding-right: 12px !important;
 }
 
 .monaco-editor .margin-view-overlays {

frontend/app/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Script from "next/script";
 import Sidebar from "@/components/layout/Sidebar";
 import FolderPopup from "@/components/popups/FolderPopup";
@@ -13,21 +13,65 @@ import {
   PodWebSocketProvider,
   usePodWebSocket,
 } from "@/contexts/PodWebSocketContext";
-import { loadSettings, applyTheme } from "@/lib/settings";
+import { loadSettings, applyTheme, type NotebookSettings } from "@/lib/settings";
+import { fetchMetrics, type MetricsSnapshot } from "@/lib/api";
 import "./globals.css";
 
+const POLL_MS = 3000;
+
 function AppContent({ children }: { children: React.ReactNode }) {
-  const [appSettings, setAppSettings] = useState({});
+  const [appSettings, setAppSettings] = useState<NotebookSettings>(() => loadSettings());
   const [activePopup, setActivePopup] = useState<string | null>(null);
   const { connectionState, gpuPods, connectingPodId } = usePodWebSocket();
 
+  // Persistent metrics collection
+  const [metricsHistory, setMetricsHistory] = useState<MetricsSnapshot[]>([]);
+  const intervalRef = useRef<number | null>(null);
+
   // Apply theme on initial mount
   useEffect(() => {
     const settings = loadSettings();
     applyTheme(settings.theme);
   }, []);
 
-  const handleSettingsChange = (settings: any) => {
+  // Persistent metrics collection (runs when mode is 'persistent')
+  useEffect(() => {
+    if (appSettings.metricsCollectionMode !== 'persistent') {
+      // Stop collection if mode changes to on-demand
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      // Clear history when switching to on-demand mode
+      setMetricsHistory([]);
+      return;
+    }
+
+    // Start persistent collection
+    const load = async () => {
+      try {
+        const snap = await fetchMetrics();
+        setMetricsHistory((prev) => {
+          const arr = [...prev, snap];
+          return arr.slice(-100); // Keep last 100 snapshots
+        });
+      } catch {
+        // Silently fail if metrics API is unavailable
+      }
+    };
+
+    load(); // Initial load
+    intervalRef.current = window.setInterval(load, POLL_MS);
+
+    return () => {
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [appSettings.metricsCollectionMode]);
+
+  const handleSettingsChange = (settings: NotebookSettings) => {
     console.log("Settings updated:", settings);
     setAppSettings(settings);
   };
@@ -52,7 +96,12 @@ function AppContent({ children }: { children: React.ReactNode }) {
       case "compute":
         return <ComputePopup {...props} />;
       case "metrics":
-        return <MetricsPopup {...props} />;
+        return (
+          <MetricsPopup
+            {...props}
+            sharedHistory={appSettings.metricsCollectionMode === 'persistent' ? metricsHistory : undefined}
+          />
+        );
       case "settings":
         return (
           <SettingsPopup {...props} onSettingsChange={handleSettingsChange} />

frontend/components/Notebook.tsx

@@ -435,6 +435,12 @@ export const Notebook: React.FC<NotebookProps> = ({
     dispatch({ type: "NOTEBOOK_UPDATED", payload: data });
   }, []);
 
+  const handleHeartbeat = useCallback((data: any) => {
+    // Heartbeat received - execution still in progress
+    // Cell spinner already showing via executingCells set
+    console.log("[Heartbeat]", data?.message || "Execution in progress");
+  }, []);
+
   const handleKernelStatusUpdate = useCallback(
     (status: "connecting" | "connected" | "disconnected") => {
       setKernelStatus(status);
@@ -485,6 +491,7 @@ export const Notebook: React.FC<NotebookProps> = ({
     ws.on("execution_complete", handleExecutionComplete);
     ws.on("execution_result", handleExecuteResult);
     ws.on("execution_error", handleExecutionError);
+    ws.on("heartbeat", handleHeartbeat);
 
     return () => ws.disconnect();
   }, [
@@ -497,6 +504,7 @@ export const Notebook: React.FC<NotebookProps> = ({
     handleExecuteResult,
     handleExecutionComplete,
     handleExecutionError,
+    handleHeartbeat,
   ]);
 
   // Simplified save management - only save on Ctrl+S or Run
@@ -528,7 +536,7 @@ export const Notebook: React.FC<NotebookProps> = ({
       if (cell.cell_type === "markdown") {
         // Save before rendering markdown
         saveNotebook();
-        // Markdown rendering is handled locally in Cell.tsx now
+        // Markdown rendering is handled locally in MonacoCell.tsx now
         return;
       }
 

frontend/components/cell/CellButton.tsx

@@ -39,9 +39,9 @@ export const CellButton: React.FC<CellButtonProps> = ({
       style={{
         width: '28px',
         height: '28px',
-        border: '1px solid #D9DEE5',
+        border: '1px solid var(--mc-border)',
         borderRadius: '4px',
-        backgroundColor: isHovered ? '#E6E8EC' : 'rgba(243, 244, 246, 0.5)',
+        backgroundColor: isHovered ? 'var(--mc-secondary)' : 'var(--mc-cell-background)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

frontend/components/cell/MonacoCell.tsx

@@ -16,7 +16,6 @@ import {
   ChevronDownIcon,
 } from "@radix-ui/react-icons";
 import { Check, X } from "lucide-react";
-import { fixIndentation } from "@/lib/api";
 import { loadMonacoThemes } from "@/lib/monaco-themes";
 import { loadSettings } from "@/lib/settings";
 
@@ -285,18 +284,6 @@ export const MonacoCell: React.FC<CellProps> = ({
     }
   };
 
-  const handleFixIndentation = async () => {
-    try {
-      const fixedCode = await fixIndentation(cell.source);
-      onUpdate(indexRef.current, fixedCode);
-      if (editorRef.current) {
-        editorRef.current.setValue(fixedCode);
-      }
-    } catch (err) {
-      console.error("Failed to fix indentation:", err);
-    }
-  };
-
   // ============================================================================
   // MONACO SETUP
   // ============================================================================
@@ -690,7 +677,7 @@ export const MonacoCell: React.FC<CellProps> = ({
                     overviewRulerBorder: false,
                     overviewRulerLanes: 0,
                     // NOTE: fixedOverflowWidgets has known positioning bugs in 2024 - disabled
-                    padding: { top: 8, bottom: 8 }, // All padding managed by Monaco
+                    padding: { top: 8, bottom: 8, left: 8 }, // All padding managed by Monaco
                     scrollbar: {
                       vertical: "auto",
                       horizontal: "auto",
@@ -710,7 +697,6 @@ export const MonacoCell: React.FC<CellProps> = ({
           <CellOutput
             outputs={cell.outputs}
             error={cell.error}
-            onFixIndentation={handleFixIndentation}
           />
         </div>
       </div>

frontend/components/output/CellOutput.tsx

@@ -1,18 +1,70 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { Output } from '@/types/notebook';
 import ErrorDisplay from './ErrorDisplay';
+import { Copy, Check } from 'lucide-react';
 
 interface CellOutputProps {
   outputs: Output[];
   error: any;
-  onFixIndentation?: () => void;
 }
 
-const CellOutput: FC<CellOutputProps> = ({ outputs, error, onFixIndentation }) => {
+interface OutputWithCopyProps {
+  content: string;
+  className: string;
+}
+
+const OutputWithCopy: FC<OutputWithCopyProps> = ({ content, className }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(content).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Copy Button */}
+      <button
+        onClick={copyToClipboard}
+        style={{
+          position: 'absolute',
+          top: '8px',
+          right: '8px',
+          zIndex: 10,
+          background: 'var(--mc-cell-background)',
+          border: '1px solid var(--mc-border)',
+          borderRadius: '4px',
+          padding: '6px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.2s ease'
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = 'var(--mc-secondary)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = 'var(--mc-cell-background)';
+        }}
+        title="Copy output to clipboard"
+      >
+        {isCopied ? <Check size={14} style={{ color: 'var(--mc-primary)' }} /> : <Copy size={14} />}
+      </button>
+
+      {/* Output Content */}
+      <pre className={className}>{content}</pre>
+    </div>
+  );
+};
+
+const CellOutput: FC<CellOutputProps> = ({ outputs, error }) => {
   if (error) {
-    return <ErrorDisplay error={error} onFixIndentation={onFixIndentation} />;
+    return <ErrorDisplay error={error} />;
   }
 
   if (!outputs || outputs.length === 0) {
@@ -26,15 +78,19 @@ const CellOutput: FC<CellOutputProps> = ({ outputs, error, onFixIndentation }) =
           switch (output.output_type) {
             case 'stream':
               return (
-                <pre key={index} className={`output-stream ${output.name}`}>
-                  {output.text}
-                </pre>
+                <OutputWithCopy
+                  key={index}
+                  content={output.text}
+                  className={`output-stream ${output.name}`}
+                />
               );
             case 'execute_result':
               return (
-                <pre key={index} className="output-result">
-                  {output.data?.['text/plain']}
-                </pre>
+                <OutputWithCopy
+                  key={index}
+                  content={output.data?.['text/plain'] || ''}
+                  className="output-result"
+                />
               );
             case 'display_data': {
               const img = (output as any).data?.['image/png'];
@@ -47,18 +103,22 @@ const CellOutput: FC<CellOutputProps> = ({ outputs, error, onFixIndentation }) =
                 );
               }
               return (
-                <pre key={index} className="output-result">
-                  {(output as any).data?.['text/plain']}
-                </pre>
+                <OutputWithCopy
+                  key={index}
+                  content={(output as any).data?.['text/plain'] || ''}
+                  className="output-result"
+                />
               );
             }
             case 'error':
-              return <ErrorDisplay key={index} error={output} onFixIndentation={onFixIndentation} />;
+              return <ErrorDisplay key={index} error={output} />;
             default:
               return (
-                <pre key={index} className="output-unknown">
-                  {JSON.stringify(output, null, 2)}
-                </pre>
+                <OutputWithCopy
+                  key={index}
+                  content={JSON.stringify(output, null, 2)}
+                  className="output-unknown"
+                />
               );
           }
         })}

frontend/components/output/ErrorDisplay.tsx

@@ -16,12 +16,10 @@ import { Output, ErrorOutput } from '@/types/notebook';
 interface ErrorDisplayProps {
   error: Output;
   maxLines?: number;
-  onFixIndentation?: () => void;
 }
 
-const TypedErrorDisplay: FC<{ error: ErrorOutput; onFixIndentation?: () => void }> = ({ error, onFixIndentation }) => {
+const TypedErrorDisplay: FC<{ error: ErrorOutput }> = ({ error }) => {
   const [isCopied, setIsCopied] = useState(false);
-  const isIndentationError = error.ename === 'IndentationError';
 
   const copyToClipboard = () => {
     const errorDetails = `Error: ${error.ename}: ${error.evalue}\n\nTraceback:\n${error.traceback.join('\n')}`;
@@ -112,29 +110,6 @@ const TypedErrorDisplay: FC<{ error: ErrorOutput; onFixIndentation?: () => void
           display: 'flex',
           gap: '4px'
         }}>
-          {/* Fix Indentation Button */}
-          {isIndentationError && onFixIndentation && (
-            <button
-              onClick={onFixIndentation}
-              style={{
-                background: 'rgba(59, 130, 246, 0.1)',
-                border: '1px solid #3b82f6',
-                borderRadius: '4px',
-                padding: '6px 10px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                transition: 'all 0.2s ease',
-                fontSize: '11px',
-                fontWeight: 500,
-                color: '#3b82f6'
-              }}
-              title="Auto-fix indentation"
-            >
-              Fix Indent
-            </button>
-          )}
           {/* Copy Button */}
           <button
             onClick={copyToClipboard}
@@ -197,12 +172,12 @@ const TypedErrorDisplay: FC<{ error: ErrorOutput; onFixIndentation?: () => void
   );
 };
 
-const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, onFixIndentation }) => {
+const ErrorDisplay: FC<ErrorDisplayProps> = ({ error }) => {
   // Type guard to ensure we have an ErrorOutput
   if (error.output_type !== 'error') {
     return null;
   }
-  return <TypedErrorDisplay error={error} onFixIndentation={onFixIndentation} />;
+  return <TypedErrorDisplay error={error} />;
 };
 
 export default ErrorDisplay;