more-compute 0.1.2__py3-none-any.whl → 0.1.3__py3-none-any.whl

frontend/components/popups/MetricsPopup.tsx

@@ -0,0 +1,168 @@
+import React, { useEffect, useRef, useState } from "react";
+import { fetchMetrics, type MetricsSnapshot } from "@/lib/api";
+import {
+  Activity,
+  Cpu,
+  HardDrive,
+  MemoryStick,
+  Gauge,
+  ServerCrash,
+} from "lucide-react";
+
+const POLL_MS = 3000;
+
+const MetricsPopup: React.FC<{ onClose?: () => void }> = ({ onClose }) => {
+  const [metrics, setMetrics] = useState<MetricsSnapshot | null>(null);
+  const [history, setHistory] = useState<MetricsSnapshot[]>([]);
+  const intervalRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const snap = await fetchMetrics();
+        setMetrics(snap);
+        setHistory((prev) => {
+          const arr = [...prev, snap];
+          return arr.slice(-100);
+        });
+      } catch {}
+    };
+    load();
+    intervalRef.current = window.setInterval(load, POLL_MS);
+    return () => {
+      if (intervalRef.current) window.clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  const hasGPU = metrics?.gpu && metrics.gpu.length > 0;
+
+  return (
+    <div className="metrics-container">
+      <div className="metrics-grid">
+        {metrics?.cpu && (
+          <Panel title="CPU Utilization" icon={<Cpu size={14} />}>
+            <BigValue
+              value={fmtPct(metrics.cpu.percent)}
+              subtitle={`${metrics.cpu.cores ?? "-"} cores`}
+            />
+            <MiniChart data={history.map((h) => h.cpu?.percent ?? 0)} />
+          </Panel>
+        )}
+
+        {metrics?.memory && (
+          <Panel title="Memory In Use" icon={<MemoryStick size={14} />}>
+            <BigValue
+              value={fmtPct(metrics.memory.percent)}
+              subtitle={`${fmtBytes(metrics.memory.used)} / ${fmtBytes(metrics.memory.total)}`}
+            />
+            <MiniChart data={history.map((h) => h.memory?.percent ?? 0)} />
+          </Panel>
+        )}
+
+        {metrics?.storage && (
+          <Panel title="Disk Utilization" icon={<HardDrive size={14} />}>
+            <BigValue
+              value={fmtPct(metrics.storage.percent)}
+              subtitle={`${fmtBytes(metrics.storage.used)} / ${fmtBytes(metrics.storage.total)}`}
+            />
+            <MiniChart data={history.map((h) => h.storage?.percent ?? 0)} />
+          </Panel>
+        )}
+
+        {hasGPU && (
+          <Panel title="GPU Utilization" icon={<Gauge size={14} />}>
+            <BigValue
+              value={fmtPct(metrics!.gpu![0].util_percent)}
+              subtitle={`Temp ${metrics!.gpu![0].temperature_c ?? "-"}°C`}
+            />
+            <MiniChart
+              data={history.map((h) => (h.gpu && h.gpu[0]?.util_percent) || 0)}
+            />
+          </Panel>
+        )}
+
+        {metrics?.network && (
+          <Panel title="Network" icon={<Activity size={14} />}>
+            <BigValue
+              value={`${fmtBytes(metrics.network.bytes_recv)} ↓ / ${fmtBytes(metrics.network.bytes_sent)} ↑`}
+              subtitle="total"
+            />
+          </Panel>
+        )}
+
+        {metrics?.process && (
+          <Panel title="Process" icon={<ServerCrash size={14} />}>
+            <BigValue
+              value={`${fmtBytes(metrics.process.rss)} RSS`}
+              subtitle={`${metrics.process.threads ?? "-"} threads`}
+            />
+          </Panel>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Panel: React.FC<{
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+}> = ({ title, icon, children }) => {
+  return (
+    <div className="metric-panel">
+      <div className="metric-panel-header">
+        <span className="metric-panel-title">
+          {icon}
+          {icon && " "}
+          {title}
+        </span>
+      </div>
+      <div className="metric-panel-body">{children}</div>
+    </div>
+  );
+};
+
+const BigValue: React.FC<{ value: string; subtitle?: string }> = ({
+  value,
+  subtitle,
+}) => (
+  <div className="metric-big-value">
+    <div className="value">{value}</div>
+    {subtitle && <div className="subtitle">{subtitle}</div>}
+  </div>
+);
+
+const MiniChart: React.FC<{ data: number[] }> = ({ data }) => {
+  const width = 220;
+  const height = 48;
+  const max = Math.max(100, ...data);
+  const points = data
+    .map((v, i) => {
+      const x = (i / Math.max(1, data.length - 1)) * width;
+      const y = height - (Math.min(100, Math.max(0, v)) / max) * height;
+      return `${x},${y}`;
+    })
+    .join(" ");
+  return (
+    <svg width={width} height={height} className="mini-chart">
+      <polyline points={points} fill="none" stroke="#3b82f6" strokeWidth="2" />
+    </svg>
+  );
+};
+
+function fmtPct(v?: number | null): string {
+  return v == null ? "-" : `${v.toFixed(0)}%`;
+}
+function fmtBytes(v?: number | null): string {
+  if (v == null) return "-";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let val = v;
+  let u = 0;
+  while (val >= 1024 && u < units.length - 1) {
+    val /= 1024;
+    u++;
+  }
+  return `${val.toFixed(1)} ${units[u]}`;
+}
+
+export default MetricsPopup;

frontend/components/popups/PackagesPopup.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Search, CircleHelp } from 'lucide-react';
+import { fetchInstalledPackages } from '@/lib/api';
+
+interface Package {
+  name: string;
+  version: string;
+  description: string;
+}
+
+interface PackagesPopupProps {
+  onClose?: () => void;
+}
+
+const PackagesPopup: React.FC<PackagesPopupProps> = ({ onClose }) => {
+  const [packages, setPackages] = useState<Package[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    loadPackages();
+    const handler = () => loadPackages(true);  // Force refresh when packages updated
+    if (typeof window !== 'undefined') {
+      window.addEventListener('mc:packages-updated', handler as EventListener);
+    }
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('mc:packages-updated', handler as EventListener);
+      }
+    };
+  }, []);
+
+  const getPackages = async (forceRefresh: boolean = false): Promise<Package[]> => {
+    const pkgs = await fetchInstalledPackages(forceRefresh);
+    const seen = new Set<string>();
+    const out: Package[] = [];
+    for (const p of pkgs) {
+      const name = p.name || '';
+      const version = p.version || '';
+       // ignore base package
+       // we might need to remove this? idk double check later 
+      if (name.toLowerCase() === 'morecompute') continue; 
+      const key = `${name}@${version}`.toLowerCase();
+      if (seen.has(key)) continue; // dedupe exact duplicates
+      seen.add(key);
+      out.push({ name, version, description: '' });
+    }
+    out.sort((a, b) => a.name.localeCompare(b.name));
+    return out;
+  };
+
+  const loadPackages = async (forceRefresh: boolean = false) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getPackages(forceRefresh);
+      setPackages(data);
+    } catch (err) {
+      setError('Failed to load packages');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return packages;
+    const q = query.toLowerCase();
+    return packages.filter(p => p.name.toLowerCase().includes(q));
+  }, [packages, query]);
+
+  if (loading) return <div className="packages-list">Loading...</div>;
+  if (error) return <div className="packages-list">{error}</div>;
+
+  return (
+    <div className="packages-container">
+      <div className="packages-toolbar">
+        <div className="packages-search">
+          <Search className="packages-search-icon" size={16} />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search packages"
+            className="packages-search-input"
+          />
+        </div>
+        <div className="packages-subtext">
+          <CircleHelp size={14} />
+          <span>Install packages with !pip</span>
+        </div>
+      </div>
+
+      <div className="packages-table">
+        <div className="packages-table-header">
+          <div className="col-name">Name</div>
+          <div className="col-version">Version</div>
+        </div>
+        <div className="packages-list">
+          {filtered.map((pkg) => (
+            <div key={`${pkg.name}@${pkg.version}`} className="package-row">
+              <div className="col-name package-name">{pkg.name}</div>
+              <div className="col-version package-version">{pkg.version}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PackagesPopup;

frontend/components/popups/PythonPopup.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from "react";
+import { RotateCw, Cpu } from "lucide-react";
+
+interface PythonEnvironment {
+  name: string;
+  version: string;
+  path: string;
+  type: string;
+  active?: boolean;
+}
+
+interface PythonPopupProps {
+  onClose?: () => void;
+  onEnvironmentSwitch?: (env: PythonEnvironment) => void;
+}
+
+const PythonPopup: React.FC<PythonPopupProps> = ({
+  onClose,
+  onEnvironmentSwitch,
+}) => {
+  const [environments, setEnvironments] = useState<PythonEnvironment[]>([]);
+  const [currentEnv, setCurrentEnv] = useState<PythonEnvironment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadEnvironments();
+  }, []);
+
+  const loadEnvironments = async (full: boolean = true, forceRefresh: boolean = false) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = `/api/environments?full=${full}${forceRefresh ? '&force_refresh=true' : ''}`;
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch environments: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      if (data.status === "success") {
+        setEnvironments(
+          data.environments.map((env: any) => ({
+            ...env,
+            active: env.path === data.current.path,
+          })),
+        );
+        setCurrentEnv(data.current);
+      } else {
+        throw new Error(data.message || "Failed to load environments");
+      }
+    } catch (err: any) {
+      setError(err.message || "Failed to load environments");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="runtime-popup-loading">
+        Loading runtime environments...
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="runtime-popup-error">{error}</div>;
+  }
+
+  return (
+    <div className="runtime-popup">
+      {/* Python Environment Section */}
+      <section className="runtime-section">
+        <p className="runtime-subtitle">
+          Select the Python interpreter for local execution.
+        </p>
+
+        {/* Current Environment */}
+        {currentEnv && (
+          <div
+            style={{
+              padding: "12px",
+              borderRadius: "8px",
+              border: "2px solid var(--accent)",
+              backgroundColor: "var(--accent-bg)",
+              marginBottom: "16px",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                marginBottom: "8px",
+                fontSize: "10px",
+                fontWeight: 600,
+                color: "var(--accent)",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+              }}
+            >
+              <Cpu size={14} style={{ marginRight: "6px" }} />
+              Current Environment
+            </div>
+            <div style={{ fontWeight: 500, fontSize: "12px", marginBottom: "4px" }}>
+              {currentEnv.name}
+            </div>
+            <div style={{ fontSize: "10px", color: "var(--text-secondary)" }}>
+              Python {currentEnv.version} • {currentEnv.type}
+            </div>
+            <div
+              style={{
+                fontSize: "9px",
+                color: "var(--text-tertiary)",
+                marginTop: "6px",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+              title={currentEnv.path}
+            >
+              {currentEnv.path}
+            </div>
+          </div>
+        )}
+
+        {/* Available Environments */}
+        <div className="runtime-subsection">
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "12px",
+            }}
+          >
+            <h4
+              style={{
+                fontSize: "11px",
+                fontWeight: 600,
+                margin: 0,
+                color: "var(--text)",
+              }}
+            >
+              Available Environments
+            </h4>
+            <button
+              onClick={() => loadEnvironments(true, true)}
+              aria-label="Refresh environments"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "6px",
+                borderRadius: "4px",
+                border: "1px solid var(--border-color)",
+                backgroundColor: "var(--background)",
+                cursor: "pointer",
+                transition: "all 0.15s ease",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--hover-background)";
+                e.currentTarget.style.borderColor = "var(--accent)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--background)";
+                e.currentTarget.style.borderColor = "var(--border-color)";
+              }}
+            >
+              <RotateCw size={12} style={{ color: "var(--text-secondary)" }} />
+            </button>
+          </div>
+
+          <div
+            style={{
+              maxHeight: "320px",
+              overflowY: "auto",
+              overflowX: "hidden",
+            }}
+          >
+            {environments.map((env, index) => (
+              <div
+                key={index}
+                onClick={() => {
+                  if (!env.active && onEnvironmentSwitch) {
+                    onEnvironmentSwitch(env);
+                  }
+                }}
+                style={{
+                  padding: "12px",
+                  borderRadius: "6px",
+                  border: env.active
+                    ? "2px solid var(--accent)"
+                    : "1.5px solid var(--border-color)",
+                  marginBottom: "8px",
+                  cursor: env.active ? "default" : "pointer",
+                  backgroundColor: env.active
+                    ? "var(--accent-bg)"
+                    : "var(--background)",
+                  transition: "all 0.15s ease",
+                  position: "relative",
+                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
+                }}
+                onMouseEnter={(e) => {
+                  if (!env.active) {
+                    e.currentTarget.style.backgroundColor =
+                      "var(--hover-background)";
+                    e.currentTarget.style.borderColor = "var(--accent)";
+                    e.currentTarget.style.boxShadow =
+                      "0 2px 8px rgba(0, 0, 0, 0.1)";
+                    e.currentTarget.style.transform = "translateY(-1px)";
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!env.active) {
+                    e.currentTarget.style.backgroundColor =
+                      "var(--background)";
+                    e.currentTarget.style.borderColor = "var(--border-color)";
+                    e.currentTarget.style.boxShadow =
+                      "0 1px 3px rgba(0, 0, 0, 0.05)";
+                    e.currentTarget.style.transform = "translateY(0)";
+                  }
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                  }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div
+                      style={{
+                        fontWeight: 500,
+                        fontSize: "11px",
+                        marginBottom: "3px",
+                        color: env.active ? "var(--accent)" : "var(--text)",
+                      }}
+                    >
+                      {env.name}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "10px",
+                        color: "var(--text-secondary)",
+                        marginBottom: "4px",
+                      }}
+                    >
+                      Python {env.version} • {env.type}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "9px",
+                        color: "var(--text-tertiary)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                      title={env.path}
+                    >
+                      {env.path}
+                    </div>
+                  </div>
+                  {env.active && (
+                    <div
+                      style={{
+                        fontSize: "9px",
+                        fontWeight: 600,
+                        color: "var(--accent)",
+                        backgroundColor: "var(--accent-bg)",
+                        padding: "2px 6px",
+                        borderRadius: "4px",
+                        marginLeft: "8px",
+                        flexShrink: 0,
+                      }}
+                    >
+                      ACTIVE
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default PythonPopup;

frontend/components/popups/SettingsPopup.tsx

@@ -0,0 +1,68 @@
+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 [settings, setSettings] = useState<NotebookSettings>(() => loadSettings());
+  const [settingsJson, setSettingsJson] = useState(() => JSON.stringify(loadSettings(), null, 2));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSettingsJson(JSON.stringify(settings, null, 2));
+    applyTheme(settings.theme);
+  }, []);
+
+  const persistSettings = useCallback((updated: NotebookSettings) => {
+    setSettings(updated);
+    setSettingsJson(JSON.stringify(updated, null, 2));
+    saveSettings(updated);
+    applyTheme(updated.theme);
+    onSettingsChange?.(updated);
+  }, [onSettingsChange]);
+
+  const handleSave = () => {
+    try {
+      const parsed = JSON.parse(settingsJson);
+      const merged: NotebookSettings = {
+        ...DEFAULT_SETTINGS,
+        ...parsed,
+        theme: parsed.theme && THEMES[parsed.theme] ? parsed.theme : DEFAULT_SETTINGS.theme,
+      };
+      setError(null);
+      persistSettings(merged);
+    } catch (err: any) {
+      console.error('Failed to parse settings JSON', err);
+      setError('Invalid JSON. Please fix the syntax and try again.');
+    }
+  };
+
+  const handleReset = () => {
+    setError(null);
+    persistSettings(DEFAULT_SETTINGS);
+  };
+
+  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" 
+        value={settingsJson}
+        onChange={(e) => setSettingsJson(e.target.value)}
+        spellCheck={false}
+      />
+      {error && (
+        <div style={{ 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>
+        <button className="btn btn-primary" type="button" onClick={handleSave}>Save Settings</button>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPopup;

frontend/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;