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

frontend/components/layout/ConnectionBanner.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import {
+  usePodWebSocket,
+  ConnectionState,
+} from "@/contexts/PodWebSocketContext";
+
+interface ConnectionBannerProps {
+  connectionState: ConnectionState;
+  podName?: string;
+}
+
+export const ConnectionBanner: React.FC<ConnectionBannerProps> = ({
+  connectionState,
+  podName,
+}) => {
+  if (!connectionState) return null;
+
+  const getMessage = () => {
+    switch (connectionState) {
+      case "provisioning":
+        return "PROVISIONING GPU";
+      case "deploying":
+        return "Deploying worker...";
+      case "connected":
+        return "Connected!";
+      default:
+        return null;
+    }
+  };
+
+  const message = getMessage();
+  if (!message) return null;
+
+  return (
+    <div className={`connection-banner ${connectionState}`}>
+      <span className="connection-status-text">{message}</span>
+    </div>
+  );
+};

frontend/components/{Sidebar.tsx → layout/Sidebar.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import { Folder, Package, Cpu, Settings, ChartArea, Zap } from "lucide-react";
+import { Folder, Package, Cpu, Settings, ChartArea } from "lucide-react";
 
 interface SidebarItemData {
   id: string;
@@ -8,16 +8,11 @@ interface SidebarItemData {
 }
 
 const sidebarItems: SidebarItemData[] = [
-  { id: "folder", icon: <Folder size={18} />, tooltip: "Files" },
-  { id: "packages", icon: <Package size={18} />, tooltip: "Packages" },
-  {
-    id: "python",
-    icon: <img src="assets/icons/python.svg" width={18} height={18} />,
-    tooltip: "Python",
-  },
-  { id: "compute", icon: <Cpu size={18} />, tooltip: "Compute" },
-  { id: "metrics", icon: <ChartArea size={18} />, tooltip: "Metrics" },
-  { id: "settings", icon: <Settings size={18} />, tooltip: "Settings" },
+  { id: "folder", icon: <Folder size={16} />, tooltip: "Files" },
+  { id: "packages", icon: <Package size={16} />, tooltip: "Packages" },
+  { id: "compute", icon: <Cpu size={16} />, tooltip: "Compute" },
+  { id: "metrics", icon: <ChartArea size={16} />, tooltip: "Metrics" },
+  { id: "settings", icon: <Settings size={16} />, tooltip: "Settings" },
 ];
 
 interface SidebarProps {
@@ -26,8 +21,18 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ onTogglePopup, activePopup }) => {
+  const activeIndex = sidebarItems.findIndex((item) => item.id === activePopup);
+
   return (
     <div id="sidebar" className="sidebar">
+      {activeIndex !== -1 && (
+        <div
+          className="sidebar-active-indicator"
+          style={{
+            transform: `translateY(${activeIndex * 44}px)`,
+          }}
+        />
+      )}
       {sidebarItems.map((item) => (
         <div
           key={item.id}

frontend/components/modals/ConfirmModal.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { AlertTriangle, X } from "lucide-react";
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  isDangerous?: boolean;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  isDangerous = false,
+}) => {
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "#1a1a1a",
+          borderRadius: "8px",
+          padding: "24px",
+          maxWidth: "500px",
+          width: "90%",
+          maxHeight: "80vh",
+          overflow: "auto",
+          border: "2px solid #444",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.8)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            {isDangerous && <AlertTriangle size={20} color="#ffc107" />}
+            <h2
+              style={{
+                margin: 0,
+                fontSize: "18px",
+                fontWeight: 600,
+                color: isDangerous ? "#ffc107" : "#e0e0e0",
+              }}
+            >
+              {title}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "4px",
+              display: "flex",
+              alignItems: "center",
+              color: "#999",
+            }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div
+          style={{
+            marginBottom: "20px",
+            fontSize: "14px",
+            lineHeight: "1.6",
+            whiteSpace: "pre-line",
+            color: "#e0e0e0",
+          }}
+        >
+          {message}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            gap: "8px",
+            justifyContent: "flex-end",
+          }}
+        >
+          <button
+            onClick={onClose}
+            style={{
+              padding: "10px 20px",
+              backgroundColor: "#2a2a2a",
+              color: "#e0e0e0",
+              border: "1px solid #444",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 500,
+            }}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={handleConfirm}
+            style={{
+              padding: "10px 20px",
+              backgroundColor: isDangerous ? "#dc2626" : "#4a9eff",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 500,
+            }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;

frontend/components/modals/SuccessModal.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { CheckCircle2, X } from "lucide-react";
+
+interface SuccessModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  message: string;
+}
+
+const SuccessModal: React.FC<SuccessModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  message,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "#1a1a1a",
+          borderRadius: "8px",
+          padding: "24px",
+          maxWidth: "500px",
+          width: "90%",
+          border: "2px solid #444",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.8)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+            }}
+          >
+            <CheckCircle2
+              size={20}
+              style={{
+                color: "#10b981",
+              }}
+            />
+            <h2
+              style={{
+                margin: 0,
+                fontSize: "18px",
+                fontWeight: 600,
+                color: "#10b981",
+                fontFamily:
+                  "'Fira', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+              }}
+            >
+              {title}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "4px",
+              display: "flex",
+              alignItems: "center",
+              color: "#999",
+            }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div
+          style={{
+            marginBottom: "20px",
+            fontSize: "14px",
+            lineHeight: "1.6",
+            whiteSpace: "pre-line",
+            color: "#e0e0e0",
+            fontFamily:
+              "'Fira', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+          }}
+        >
+          {message}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+          }}
+        >
+          <button
+            onClick={onClose}
+            style={{
+              padding: "10px 20px",
+              backgroundColor: "#000",
+              color: "#fff",
+              border: "1px solid #444",
+              borderRadius: "8px",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 500,
+              fontFamily:
+                "'Fira', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessModal;

frontend/components/output/MarkdownRenderer.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+
+interface MarkdownRendererProps {
+  source: string;
+  onClick?: () => void;
+}
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  source,
+  onClick,
+}) => {
+  if (!source || !source.trim()) {
+    return (
+      <div
+        className="markdown-rendered markdown-empty"
+        onClick={onClick}
+        style={{
+          minHeight: "2.5rem",
+          padding: "0.5rem",
+          color: "#9ca3af",
+          fontStyle: "italic",
+          cursor: "pointer",
+        }}
+      ></div>
+    );
+  }
+
+  const escapeHtml = (text: string) => {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  const renderMarkdown = (text: string) => {
+    let html = text;
+
+    // Code blocks (must be processed first)
+    html = html.replace(/```([\s\S]*?)```/g, (match, code) => {
+      return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
+    });
+
+    // Language-specific code blocks
+    html = html.replace(/```(\w+)\n([\s\S]*?)```/g, (match, lang, code) => {
+      return `<pre><code class="language-${lang}">${escapeHtml(code.trim())}</code></pre>`;
+    });
+
+    // Headers
+    html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+    html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+    html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+
+    // Bold and Italic
+    html = html.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
+    html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+
+    // Strikethrough
+    html = html.replace(/~~([^~]+)~~/g, "<del>$1</del>");
+
+    // Links
+    html = html.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+    );
+
+    // Unordered lists
+    html = html.replace(
+      /^\s*[-*+] (.+)$/gim,
+      (match, item) => `<li>${item}</li>`,
+    );
+    html = html
+      .replace(/(<li>[\s\S]*?<\/li>)/g, "<ul>$1</ul>")
+      .replace(/<\/ul>\s*<ul>/g, "");
+
+    // Ordered lists
+    html = html
+      .replace(
+        /^\s*\d+\. (.+)$/gim,
+        (match, item) => `<ol><li>${item}</li></ol>`,
+      )
+      .replace(/<\/ol>\s*<ol>/g, "");
+
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+    // Blockquotes
+    html = html.replace(/^> (.+)$/gim, "<blockquote>$1</blockquote>");
+
+    // Handle HTML br tags first - convert them to proper line breaks
+    html = html.replace(/<br\s*\/?>/gi, "\n");
+
+    // Line breaks and paragraphs - handle paragraph separation properly
+    // Split by double newlines to create paragraphs, but preserve single line breaks within paragraphs
+    html = html.replace(/\n\s*\n/g, "</p><p>"); // Paragraph breaks (double newlines with optional whitespace)
+    html = html.replace(/\n(?!<\/p>)/g, "<br>"); // Line breaks within paragraphs (but not paragraph breaks)
+
+    // Ensure content is wrapped in paragraph tags if not already in a block element
+    if (!html.match(/^<(h[1-6]|ul|ol|pre|blockquote|hr|p)/) && html.trim()) {
+      html = "<p>" + html + "</p>";
+    }
+
+    return html;
+  };
+
+  return (
+    <div
+      className="markdown-rendered"
+      onClick={onClick}
+      dangerouslySetInnerHTML={{ __html: renderMarkdown(source) }}
+    />
+  );
+};
+
+export default MarkdownRenderer;