@illuma-ai/code-sandbox 1.4.0 → 1.4.1

package/LICENSE

@@ -1,15 +1,21 @@
-Copyright (c) 2026 Illuma AI. All rights reserved.
+MIT License
 
-PROPRIETARY AND CONFIDENTIAL
+Copyright (c) 2026 Illuma AI
 
-This software is the proprietary information of Illuma AI.
-Use is subject to license terms. Unauthorized copying of this software,
-via any medium, is strictly prohibited.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-This software is provided "as is", without warranty of any kind, express or
-implied, including but not limited to the warranties of merchantability,
-fitness for a particular purpose and noninfringement. In no event shall the
-authors or copyright holders be liable for any claim, damages or other
-liability, whether in an action of contract, tort or otherwise, arising from,
-out of or in connection with the software or the use or other dealings in the
-software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -712,4 +712,4 @@ export type {
 
 ## License
 
-Proprietary - Illuma AI. See [LICENSE](./LICENSE) for details.
+MIT - See [LICENSE](./LICENSE) for details.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@illuma-ai/code-sandbox",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "author": "Illuma AI (https://github.com/illuma-ai)",
   "publishConfig": {
     "access": "public"
@@ -24,8 +24,7 @@
     "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",

package/src/components/BootOverlay.tsx

@@ -1,145 +0,0 @@
-/**
- * BootOverlay — Loading animation displayed while Nodepod boots.
- *
- * Shows staged progress: initializing → writing files → installing → starting → ready.
- * Includes a progress bar and stage-specific messaging with a pulsing animation.
- */
-
-import React from "react";
-import type { BootOverlayProps } from "../types";
-
-/** Stage display configuration */
-const STAGE_CONFIG: Record<
-  string,
-  { icon: string; label: string; color: string }
-> = {
-  initializing: {
-    icon: "⚡",
-    label: "Initializing Runtime",
-    color: "text-blue-400",
-  },
-  "writing-files": {
-    icon: "📁",
-    label: "Writing Project Files",
-    color: "text-yellow-400",
-  },
-  installing: {
-    icon: "📦",
-    label: "Installing Dependencies",
-    color: "text-purple-400",
-  },
-  starting: {
-    icon: "🚀",
-    label: "Starting Application",
-    color: "text-green-400",
-  },
-  ready: { icon: "✅", label: "Application Ready", color: "text-green-400" },
-  error: { icon: "❌", label: "Error", color: "text-red-400" },
-};
-
-/**
- * Full-screen loading overlay with staged boot progress.
- *
- * Renders over the workbench while Nodepod boots. Shows:
- * - Current stage icon + label
- * - Progress bar with percentage
- * - Descriptive message of what's happening
- * - Pulsing dots animation
- */
-export function BootOverlay({ progress, className = "" }: BootOverlayProps) {
-  const config = STAGE_CONFIG[progress.stage] || STAGE_CONFIG.initializing;
-
-  if (progress.stage === "ready") {
-    return null;
-  }
-
-  return (
-    <div
-      className={`absolute inset-0 z-50 flex items-center justify-center bg-sb-bg/95 backdrop-blur-sm ${className}`}
-    >
-      <div className="flex flex-col items-center gap-6 max-w-md px-8">
-        {/* Animated icon */}
-        <div className="text-5xl animate-bounce">{config.icon}</div>
-
-        {/* Stage label */}
-        <h2 className={`text-xl font-semibold ${config.color}`}>
-          {config.label}
-          {progress.stage !== "error" && <PulsingDots />}
-        </h2>
-
-        {/* Progress bar */}
-        <div className="w-64 h-2 bg-sb-bg-active rounded-full overflow-hidden">
-          <div
-            className="h-full bg-sb-accent rounded-full transition-all duration-500 ease-out"
-            style={{ width: `${progress.percent}%` }}
-          />
-        </div>
-
-        {/* Message */}
-        <p className="text-sm text-sb-text-muted text-center">
-          {progress.message}
-        </p>
-
-        {/* Stage indicators */}
-        <div className="flex items-center gap-2 mt-4">
-          {["initializing", "writing-files", "installing", "starting"].map(
-            (stage, i) => {
-              const isCompleted = getStageOrder(progress.stage) > i;
-              const isCurrent = progress.stage === stage;
-
-              return (
-                <React.Fragment key={stage}>
-                  <div
-                    className={`w-3 h-3 rounded-full transition-colors duration-300 ${
-                      isCompleted
-                        ? "bg-sb-success"
-                        : isCurrent
-                          ? "bg-sb-accent animate-pulse"
-                          : "bg-sb-bg-active"
-                    }`}
-                  />
-                  {i < 3 && (
-                    <div
-                      className={`w-8 h-0.5 transition-colors duration-300 ${
-                        isCompleted ? "bg-sb-success" : "bg-sb-bg-active"
-                      }`}
-                    />
-                  )}
-                </React.Fragment>
-              );
-            },
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** Get numeric order of a boot stage for progress indicators */
-function getStageOrder(stage: string): number {
-  const order = [
-    "initializing",
-    "writing-files",
-    "installing",
-    "starting",
-    "ready",
-  ];
-  return order.indexOf(stage);
-}
-
-/** Animated "..." dots */
-function PulsingDots() {
-  return (
-    <span className="inline-flex ml-1">
-      <span className="animate-pulse" style={{ animationDelay: "0ms" }}>
-        .
-      </span>
-      <span className="animate-pulse" style={{ animationDelay: "200ms" }}>
-        .
-      </span>
-      <span className="animate-pulse" style={{ animationDelay: "400ms" }}>
-        .
-      </span>
-    </span>
-  );
-}

package/src/components/CodeEditor.tsx

@@ -1,298 +0,0 @@
-/**
- * CodeEditor — Monaco editor with file tabs, diff mode, and change indicators.
- *
- * Uses @monaco-editor/react for both the regular editor and diff editor.
- * Renders a tab bar of open files with change status indicators:
- * - Green dot: new file
- * - Orange dot: modified file
- * - Red dot: deleted file (shown as read-only)
- *
- * When diff mode is active, displays Monaco's side-by-side DiffEditor
- * comparing the original file content (left) with the current content (right).
- *
- * @see @monaco-editor/react DiffEditor: https://github.com/suren-atoyan/monaco-react
- */
-
-import React, { useCallback, useMemo, useState } from "react";
-import type { CodeEditorProps, FileChangeStatus } from "../types";
-
-// Lazy import Monaco to keep the bundle splittable
-let MonacoEditor: React.ComponentType<any> | null = null;
-let MonacoDiffEditor: React.ComponentType<any> | null = null;
-let monacoLoadPromise: Promise<void> | null = null;
-
-/**
- * Load Monaco editor (regular + diff) dynamically.
- * Returns both Editor and DiffEditor from @monaco-editor/react.
- */
-function loadMonaco(): Promise<void> {
-  if (MonacoEditor && MonacoDiffEditor) return Promise.resolve();
-  if (monacoLoadPromise) return monacoLoadPromise;
-
-  monacoLoadPromise = import("@monaco-editor/react").then((mod) => {
-    MonacoEditor = mod.default || mod.Editor;
-    MonacoDiffEditor = mod.DiffEditor;
-  });
-
-  return monacoLoadPromise;
-}
-
-/**
- * Get Monaco language from file path.
- */
-function getLanguage(path: string): string {
-  const ext = path.split(".").pop()?.toLowerCase() || "";
-  const langMap: Record<string, string> = {
-    js: "javascript",
-    jsx: "javascript",
-    ts: "typescript",
-    tsx: "typescript",
-    json: "json",
-    html: "html",
-    htm: "html",
-    css: "css",
-    scss: "scss",
-    less: "less",
-    md: "markdown",
-    py: "python",
-    rb: "ruby",
-    go: "go",
-    rs: "rust",
-    yml: "yaml",
-    yaml: "yaml",
-    xml: "xml",
-    sql: "sql",
-    sh: "shell",
-    bash: "shell",
-    svg: "xml",
-  };
-  return langMap[ext] || "plaintext";
-}
-
-/** Color for each file change status indicator dot */
-const STATUS_COLORS: Record<FileChangeStatus, string> = {
-  new: "#4ade80", // green-400
-  modified: "#fb923c", // orange-400
-  deleted: "#f87171", // red-400
-  unchanged: "transparent",
-};
-
-/** Tooltip for each file change status */
-const STATUS_LABELS: Record<FileChangeStatus, string> = {
-  new: "New file",
-  modified: "Modified",
-  deleted: "Deleted",
-  unchanged: "",
-};
-
-/**
- * CodeEditor component — Monaco editor with file tabs, diff view, and
- * change status indicators.
- *
- * When `originalFiles` has content for the active file (meaning a prior
- * version exists), a "Diff" toggle button appears in the tab bar. Clicking
- * it switches to Monaco's DiffEditor showing the old (left) vs new (right).
- */
-export function CodeEditor({
-  files,
-  originalFiles,
-  fileChanges,
-  activeFile,
-  openFiles,
-  onSelectFile,
-  onCloseFile,
-  onFileChange,
-  readOnly = false,
-}: CodeEditorProps) {
-  const [loaded, setLoaded] = React.useState(!!MonacoEditor);
-  const [diffMode, setDiffMode] = useState(false);
-
-  // Load Monaco on mount
-  React.useEffect(() => {
-    if (!MonacoEditor) {
-      loadMonaco().then(() => setLoaded(true));
-    }
-  }, []);
-
-  const activeContent = activeFile ? files[activeFile] || "" : "";
-  const activeOriginalContent = activeFile
-    ? (originalFiles[activeFile] ?? "")
-    : "";
-  const language = activeFile ? getLanguage(activeFile) : "plaintext";
-
-  /**
-   * Whether the active file has a diff available.
-   * A diff is available when:
-   * - The file is marked as "modified" (content differs from original), OR
-   * - The file is marked as "new" (no original — diff shows empty left side)
-   */
-  const hasDiff = activeFile
-    ? fileChanges[activeFile] === "modified" ||
-      fileChanges[activeFile] === "new"
-    : false;
-
-  // Auto-disable diff mode when switching to a file with no diff
-  React.useEffect(() => {
-    if (!hasDiff && diffMode) {
-      setDiffMode(false);
-    }
-  }, [hasDiff, diffMode, activeFile]);
-
-  const handleEditorChange = useCallback(
-    (value: string | undefined) => {
-      if (activeFile && value !== undefined) {
-        onFileChange(activeFile, value);
-      }
-    },
-    [activeFile, onFileChange],
-  );
-
-  /**
-   * Handler for Monaco DiffEditor's modified content changes.
-   * The DiffEditor fires `onMount` with the editor instance — we
-   * listen to the modified editor's onDidChangeModelContent event.
-   */
-  const handleDiffEditorMount = useCallback(
-    (editor: any) => {
-      if (!editor || !activeFile) return;
-      const modifiedEditor = editor.getModifiedEditor();
-      modifiedEditor.onDidChangeModelContent(() => {
-        const value = modifiedEditor.getValue();
-        onFileChange(activeFile, value);
-      });
-    },
-    [activeFile, onFileChange],
-  );
-
-  return (
-    <div className="flex flex-col h-full bg-sb-editor">
-      {/* Tab bar */}
-      <div className="flex items-center bg-sb-bg-alt border-b border-sb-border overflow-x-auto">
-        {openFiles.map((path) => {
-          const fileName = path.split("/").pop() || path;
-          const isActive = path === activeFile;
-          const changeStatus: FileChangeStatus =
-            fileChanges[path] || "unchanged";
-
-          return (
-            <div
-              key={path}
-              className={`group flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer border-r border-sb-border
-                ${
-                  isActive
-                    ? "bg-sb-editor text-sb-text-active border-t-2 border-t-sb-accent"
-                    : "bg-sb-bg-alt text-sb-text-muted hover:bg-sb-bg-hover border-t-2 border-t-transparent"
-                }`}
-              onClick={() => onSelectFile(path)}
-            >
-              {/* Change status indicator dot */}
-              {changeStatus !== "unchanged" && (
-                <span
-                  className="w-2 h-2 rounded-full shrink-0"
-                  style={{ backgroundColor: STATUS_COLORS[changeStatus] }}
-                  title={STATUS_LABELS[changeStatus]}
-                />
-              )}
-              <span className="truncate max-w-[120px]">{fileName}</span>
-              <button
-                className="opacity-0 group-hover:opacity-100 hover:text-sb-text-active ml-1 text-[10px]"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCloseFile(path);
-                }}
-                title="Close"
-              >
-                ✕
-              </button>
-            </div>
-          );
-        })}
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Diff toggle button — only shown when a diff is available */}
-        {hasDiff && (
-          <button
-            className={`shrink-0 px-2 py-1 mr-1 text-[10px] font-medium rounded transition-colors ${
-              diffMode
-                ? "bg-sb-accent text-white"
-                : "text-sb-text-muted hover:text-sb-text-active hover:bg-sb-bg-hover"
-            }`}
-            onClick={() => setDiffMode((prev) => !prev)}
-            title={diffMode ? "Switch to editor" : "Show diff view"}
-          >
-            {diffMode ? "Editor" : "Diff"}
-          </button>
-        )}
-      </div>
-
-      {/* Editor / DiffEditor / placeholder */}
-      <div className="flex-1 overflow-hidden">
-        {!activeFile && (
-          <div className="flex items-center justify-center h-full text-sb-text-muted text-sm">
-            Select a file to edit
-          </div>
-        )}
-
-        {/* Diff mode: Monaco DiffEditor (side-by-side) */}
-        {activeFile && loaded && diffMode && MonacoDiffEditor && (
-          <MonacoDiffEditor
-            height="100%"
-            language={language}
-            original={activeOriginalContent}
-            modified={activeContent}
-            theme="vs-dark"
-            onMount={handleDiffEditorMount}
-            options={{
-              readOnly,
-              minimap: { enabled: false },
-              fontSize: 13,
-              wordWrap: "on",
-              scrollBeyondLastLine: false,
-              padding: { top: 8 },
-              renderWhitespace: "selection",
-              automaticLayout: true,
-              tabSize: 2,
-              // DiffEditor-specific options
-              renderSideBySide: true,
-              enableSplitViewResizing: true,
-              renderIndicators: true,
-              renderMarginRevertIcon: false,
-              originalEditable: false,
-            }}
-          />
-        )}
-
-        {/* Regular mode: Monaco Editor */}
-        {activeFile && loaded && !diffMode && MonacoEditor && (
-          <MonacoEditor
-            height="100%"
-            language={language}
-            value={activeContent}
-            onChange={handleEditorChange}
-            theme="vs-dark"
-            options={{
-              readOnly,
-              minimap: { enabled: false },
-              fontSize: 13,
-              lineNumbers: "on",
-              wordWrap: "on",
-              scrollBeyondLastLine: false,
-              padding: { top: 8 },
-              renderWhitespace: "selection",
-              automaticLayout: true,
-              tabSize: 2,
-            }}
-          />
-        )}
-
-        {activeFile && !loaded && (
-          <div className="flex items-center justify-center h-full text-sb-text-muted text-sm">
-            Loading editor...
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}