@illuma-ai/code-sandbox 1.2.2 → 1.3.1

package/src/components/Terminal.tsx

@@ -1,252 +1,111 @@
 /**
- * Terminal — Git-bash inspired terminal output panel.
- *
- * Renders process stdout/stderr with color-coded output:
- * - Commands ($ ...) get a green prompt + white command
- * - stderr lines get red text
- * - Success markers (checkmarks) get green
- * - Warnings get yellow
- * - Package names get purple
- * - URLs and paths get cyan
- * - Exit codes get colored by status
+ * Terminal — Clean monochrome terminal output panel with minimize toggle.
  *
  * Uses a simple div-based approach (not xterm.js) to keep the bundle lean.
  * Auto-scrolls to bottom as new output arrives.
+ * Minimize/expand state is controlled by the parent via props.
  */
 
 import React, { useEffect, useRef } from "react";
 import type { TerminalProps } from "../types";
 
-/** Classify a terminal output line for color coding */
-type LineType =
-  | "prompt" // $ command
-  | "stderr" // [stderr] ...
-  | "success" // ✓ ...
-  | "error" // ✗ ... or error messages
-  | "warning" // warn / Warning
-  | "info" // Installing, Dependencies, info lines
-  | "exit-ok" // Process exited with code 0
-  | "exit-fail" // Process exited with non-zero code
-  | "dim" // Empty or separator lines
-  | "normal"; // Default output
-
 /**
- * Classify a line of terminal output for styling.
- *
- * Pattern matching order matters — more specific patterns first.
- */
-function classifyLine(line: string): LineType {
-  const trimmed = line.trim();
-
-  // Empty or whitespace-only
-  if (!trimmed) return "dim";
-
-  // Explicit stderr prefix from runtime
-  if (trimmed.startsWith("[stderr]")) return "stderr";
-
-  // Command prompt ($ node server.js)
-  if (/^\$\s/.test(trimmed)) return "prompt";
-
-  // Success indicators
-  if (/^\s*✓/.test(line) || /^\s*✔/.test(line) || /^done$/i.test(trimmed))
-    return "success";
-
-  // Error indicators
-  if (
-    /^\s*✗/.test(line) ||
-    /^\s*✘/.test(line) ||
-    /^error\b/i.test(trimmed) ||
-    /^Error:/i.test(trimmed) ||
-    /^TypeError:/i.test(trimmed) ||
-    /^ReferenceError:/i.test(trimmed) ||
-    /^SyntaxError:/i.test(trimmed) ||
-    /ENOENT|EACCES|ECONNREFUSED/i.test(trimmed)
-  )
-    return "error";
-
-  // Process exit
-  if (/^Process exited with code\s+(\d+)/.test(trimmed)) {
-    const code = trimmed.match(/code\s+(\d+)/)?.[1];
-    return code === "0" ? "exit-ok" : "exit-fail";
-  }
-
-  // Warning
-  if (
-    /^warn\b/i.test(trimmed) ||
-    /^warning\b/i.test(trimmed) ||
-    /^Warning:/i.test(trimmed) ||
-    /deprecated/i.test(trimmed)
-  )
-    return "warning";
-
-  // Info / install progress
-  if (
-    /^Installing\b/i.test(trimmed) ||
-    /^Dependencies\s+installed/i.test(trimmed) ||
-    /^Listening\b/i.test(trimmed) ||
-    /^Server\s+(running|started|listening)/i.test(trimmed) ||
-    /^Starting\b/i.test(trimmed)
-  )
-    return "info";
-
-  return "normal";
-}
-
-/** CSS class name for each line type */
-const LINE_CLASS: Record<LineType, string> = {
-  prompt: "", // handled specially (split into prompt + command)
-  stderr: "sb-term-stderr",
-  success: "sb-term-success",
-  error: "sb-term-stderr",
-  warning: "sb-term-warning",
-  info: "sb-term-info",
-  "exit-ok": "sb-term-exit-ok",
-  "exit-fail": "sb-term-exit-fail",
-  dim: "sb-term-dim",
-  normal: "sb-term-line",
-};
-
-/**
- * Render a single terminal line with appropriate styling.
- *
- * Prompt lines are split into a green "$ " prefix and white command text.
- * Stderr lines strip the "[stderr]" prefix and show in red.
- * Package install lines highlight the package name in purple.
- */
-function TerminalLine({ line }: { line: string }) {
-  const type = classifyLine(line);
-
-  // Prompt line: split into green prompt + white command
-  if (type === "prompt") {
-    const commandText = line.replace(/^\$\s*/, "");
-    return (
-      <div className="whitespace-pre-wrap">
-        <span className="sb-term-prompt">{"$ "}</span>
-        <span className="sb-term-cmd">{commandText}</span>
-      </div>
-    );
-  }
-
-  // Stderr: strip prefix, show in red
-  if (type === "stderr") {
-    const message = line.replace(/^\[stderr\]\s*/, "");
-    return (
-      <div className="whitespace-pre-wrap sb-term-stderr">
-        <span className="sb-term-dim select-none">{"stderr "}</span>
-        {message}
-      </div>
-    );
-  }
-
-  // Package install success: "  ✓ express@4.18.0" → green check + purple pkg
-  if (type === "success" && /✓\s+\S+@/.test(line)) {
-    const match = line.match(/(.*✓\s*)(\S+@\S+)(.*)/);
-    if (match) {
-      return (
-        <div className="whitespace-pre-wrap sb-term-success">
-          {match[1]}
-          <span className="sb-term-pkg">{match[2]}</span>
-          {match[3]}
-        </div>
-      );
-    }
-  }
-
-  // Info lines with port numbers: highlight the port
-  if (type === "info" && /:\d{4}/.test(line)) {
-    const parts = line.split(/(:\d{4,5})/);
-    return (
-      <div className="whitespace-pre-wrap sb-term-info">
-        {parts.map((part, i) =>
-          /^:\d{4,5}$/.test(part) ? (
-            <span key={i} className="sb-term-path">
-              {part}
-            </span>
-          ) : (
-            <span key={i}>{part}</span>
-          ),
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className={`whitespace-pre-wrap ${LINE_CLASS[type]}`}>{line}</div>
-  );
-}
-
-/**
- * Terminal component — renders process output in a git-bash inspired panel.
+ * Terminal component — renders process output in a clean monochrome panel.
  *
  * Features:
- * - Color-coded output (commands, errors, warnings, info, packages)
- * - Monospace font stack (Cascadia Code → JetBrains Mono → Fira Code → fallback)
+ * - Monospace font with proper line spacing
  * - Auto-scroll to bottom on new output
+ * - Minimize/expand toggle via chevron in header (parent-controlled)
  * - Modern thin scrollbar matching the sandbox theme
- * - Dark background separate from editor for visual distinction
  */
-export function Terminal({ output, className = "" }: TerminalProps) {
+export function Terminal({
+  output,
+  className = "",
+  minimized = false,
+  onToggleMinimize,
+}: TerminalProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to bottom when new output arrives
   useEffect(() => {
     const el = containerRef.current;
-    if (el) {
+    if (el && !minimized) {
       el.scrollTop = el.scrollHeight;
     }
-  }, [output.length]);
+  }, [output.length, minimized]);
 
   return (
     <div
-      className={`flex flex-col h-full ${className}`}
+      className={`flex flex-col ${minimized ? "" : "h-full"} ${className}`}
       style={{ background: "var(--sb-terminal)" }}
     >
-      {/* Header — styled like a real terminal tab bar */}
+      {/* Header */}
       <div
-        className="flex items-center gap-2 px-3 py-1.5 border-b border-sb-border shrink-0"
+        className="flex items-center gap-2 px-3 py-1 border-t border-sb-border shrink-0 select-none cursor-pointer"
         style={{ background: "var(--sb-terminal-header)" }}
+        onClick={onToggleMinimize}
       >
-        {/* Traffic light dots (decorative) */}
-        <div className="flex items-center gap-1.5 mr-1">
-          <span
-            className="w-2.5 h-2.5 rounded-full"
-            style={{ background: "#f85149" }}
-          />
-          <span
-            className="w-2.5 h-2.5 rounded-full"
-            style={{ background: "#d29922" }}
-          />
-          <span
-            className="w-2.5 h-2.5 rounded-full"
-            style={{ background: "#3fb950" }}
+        {/* Chevron toggle */}
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          className="shrink-0 transition-transform duration-150"
+          style={{
+            transform: minimized ? "rotate(-90deg)" : "rotate(0deg)",
+            color: "var(--sb-text-muted)",
+          }}
+        >
+          <path
+            d="M4 6l4 4 4-4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           />
-        </div>
+        </svg>
         <span
           className="text-[11px] font-medium tracking-wider"
           style={{ color: "var(--sb-text-muted)" }}
         >
           TERMINAL
         </span>
-        {/* Shell indicator */}
-        <span className="text-[10px] ml-auto" style={{ color: "#484f58" }}>
-          bash
-        </span>
-      </div>
-
-      {/* Output area */}
-      <div
-        ref={containerRef}
-        className="flex-1 overflow-auto px-3.5 py-2.5 sb-terminal-output overscroll-contain"
-      >
-        {output.length === 0 ? (
-          <div className="flex items-center gap-2 sb-term-dim">
-            <span className="sb-term-prompt">$</span>
-            <span className="animate-pulse">_</span>
-          </div>
-        ) : (
-          output.map((line, i) => <TerminalLine key={i} line={line} />)
+        {/* Line count badge */}
+        {output.length > 0 && (
+          <span
+            className="text-[10px] ml-auto tabular-nums"
+            style={{ color: "var(--sb-text-muted)", opacity: 0.6 }}
+          >
+            {output.length} lines
+          </span>
         )}
       </div>
+
+      {/* Output area — hidden when minimized */}
+      {!minimized && (
+        <div
+          ref={containerRef}
+          className="flex-1 overflow-auto px-3.5 py-2 sb-terminal-output overscroll-contain min-h-0"
+        >
+          {output.length === 0 ? (
+            <div style={{ color: "var(--sb-text-muted)" }}>
+              <span>$ </span>
+              <span className="animate-pulse">_</span>
+            </div>
+          ) : (
+            output.map((line, i) => (
+              <div
+                key={i}
+                className="whitespace-pre-wrap"
+                style={{ color: "var(--sb-text)" }}
+              >
+                {line}
+              </div>
+            ))
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/Workbench.tsx

@@ -183,6 +183,7 @@ export const CodeSandbox = forwardRef<CodeSandboxHandle, CodeSandboxProps>(
             <Preview
               url={state.previewUrl}
               onBrowserError={handleBrowserError}
+              reloadKey={state.previewReloadKey}
             />
           </motion.div>
         </div>
@@ -303,6 +304,7 @@ interface CodeViewProps {
 /**
  * CodeView — FileTree (left) + Editor (top-right) + Terminal (bottom-right).
  * Uses Allotment for resizable split panes.
+ * Terminal can be minimized to just a header bar.
  * Responsive: file tree shrinks on narrow containers.
  */
 function CodeView({
@@ -317,6 +319,8 @@ function CodeView({
   onCloseFile,
   onFileChange,
 }: CodeViewProps) {
+  const [terminalMinimized, setTerminalMinimized] = useState(false);
+
   return (
     <div className="h-full w-full">
       <Allotment>
@@ -332,24 +336,45 @@ function CodeView({
 
         {/* Editor + Terminal — right */}
         <Allotment.Pane>
-          <Allotment vertical>
-            <Allotment.Pane preferredSize="70%">
-              <CodeEditor
-                files={files}
-                originalFiles={originalFiles}
-                fileChanges={fileChanges}
-                activeFile={selectedFile}
-                openFiles={openFiles}
-                onSelectFile={onSelectFile}
-                onCloseFile={onCloseFile}
-                onFileChange={onFileChange}
-              />
-            </Allotment.Pane>
+          <div className="h-full flex flex-col">
+            {/* Editor takes remaining space */}
+            <div
+              className={
+                terminalMinimized ? "flex-1 min-h-0" : "flex-1 min-h-0"
+              }
+              style={{ height: terminalMinimized ? "100%" : "70%" }}
+            >
+              <div className="h-full">
+                <CodeEditor
+                  files={files}
+                  originalFiles={originalFiles}
+                  fileChanges={fileChanges}
+                  activeFile={selectedFile}
+                  openFiles={openFiles}
+                  onSelectFile={onSelectFile}
+                  onCloseFile={onCloseFile}
+                  onFileChange={onFileChange}
+                />
+              </div>
+            </div>
 
-            <Allotment.Pane preferredSize="30%" minSize={60}>
-              <Terminal output={terminalOutput} />
-            </Allotment.Pane>
-          </Allotment>
+            {/* Terminal — collapsible */}
+            {terminalMinimized ? (
+              <Terminal
+                output={terminalOutput}
+                minimized={true}
+                onToggleMinimize={() => setTerminalMinimized(false)}
+              />
+            ) : (
+              <div style={{ height: "30%", minHeight: 60 }}>
+                <Terminal
+                  output={terminalOutput}
+                  minimized={false}
+                  onToggleMinimize={() => setTerminalMinimized(true)}
+                />
+              </div>
+            )}
+          </div>
         </Allotment.Pane>
       </Allotment>
     </div>

package/src/hooks/useRuntime.ts

@@ -29,6 +29,38 @@ import type {
 /** Debug log prefix for easy filtering in DevTools */
 const DBG = "[CodeSandbox:useRuntime]";
 
+/**
+ * File extensions that can be hot-reloaded (iframe refresh) without
+ * restarting the Node.js server process. These are static assets
+ * served by Express — changing them doesn't require a process restart.
+ */
+const HOT_RELOAD_EXTENSIONS = new Set([
+  "css",
+  "html",
+  "htm",
+  "svg",
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "ico",
+  "woff",
+  "woff2",
+  "ttf",
+  "eot",
+]);
+
+/**
+ * Check whether a file path is hot-reloadable (static asset that doesn't
+ * require a server restart). Returns false for JS/TS/JSON and any file
+ * without an extension.
+ */
+function isHotReloadable(filePath: string): boolean {
+  const ext = filePath.split(".").pop()?.toLowerCase();
+  return ext ? HOT_RELOAD_EXTENSIONS.has(ext) : false;
+}
+
 /**
  * Compute per-file change statuses between an original and current file set.
  *
@@ -115,6 +147,7 @@ export function useRuntime(props: CodeSandboxProps) {
     files: {},
     originalFiles: {},
     fileChanges: {},
+    previewReloadKey: 0,
     error: null,
     errors: [],
   });
@@ -340,12 +373,14 @@ export function useRuntime(props: CodeSandboxProps) {
       // Runtime exists — diff and write changed files
       const currentFiles = runtime.getCurrentFiles();
       let changed = false;
+      const changedPaths: string[] = [];
 
       for (const [path, content] of Object.entries(newFiles)) {
         if (currentFiles[path] !== content) {
           try {
             await runtime.writeFile(path, content);
             changed = true;
+            changedPaths.push(path);
             console.log(DBG, `updated file: ${path}`);
           } catch (err) {
             console.warn(DBG, `failed to write ${path}:`, err);
@@ -356,25 +391,54 @@ export function useRuntime(props: CodeSandboxProps) {
       // Compute change status — "original" is what we had before this update
       const fileChanges = computeFileChanges(currentFiles, newFiles);
 
-      // Update React state with new file set + diff info
-      setState((prev) => ({
-        ...prev,
-        originalFiles: currentFiles,
-        files: newFiles,
-        fileChanges,
-      }));
+      // Decide: hot reload (iframe refresh) vs cold restart (kill + rerun server).
+      // Hot reload when ALL changed files are static assets (CSS, HTML, images).
+      // Cold restart when ANY changed file is JS/TS/JSON/etc. that affects the server.
+      const canHotReload =
+        changed &&
+        changedPaths.length > 0 &&
+        changedPaths.every(isHotReloadable);
 
-      // Restart server if any files changed
       if (changed && shouldRestart) {
-        console.log(
-          DBG,
-          `files changed — restarting server (${Object.keys(fileChanges).length} files differ)`,
-        );
-        try {
-          await runtime.restart();
-        } catch (err) {
-          console.error(DBG, "restart failed:", err);
+        if (canHotReload) {
+          // Hot reload — just bump the preview reload key to refresh the iframe
+          console.log(
+            DBG,
+            `hot reload: ${changedPaths.length} static file(s) changed — refreshing preview`,
+          );
+          setState((prev) => ({
+            ...prev,
+            originalFiles: currentFiles,
+            files: newFiles,
+            fileChanges,
+            previewReloadKey: prev.previewReloadKey + 1,
+          }));
+        } else {
+          // Cold restart — server code changed, need full process restart
+          console.log(
+            DBG,
+            `cold restart: ${changedPaths.length} file(s) changed — restarting server`,
+          );
+          setState((prev) => ({
+            ...prev,
+            originalFiles: currentFiles,
+            files: newFiles,
+            fileChanges,
+          }));
+          try {
+            await runtime.restart();
+          } catch (err) {
+            console.error(DBG, "restart failed:", err);
+          }
         }
+      } else {
+        // No changes or restart disabled — just update state
+        setState((prev) => ({
+          ...prev,
+          originalFiles: currentFiles,
+          files: newFiles,
+          fileChanges,
+        }));
       }
 
       // Notify host that files have been processed

package/src/styles.css

@@ -67,7 +67,7 @@
 }
 
 /* ---------------------------------------------------------------------------
- * Terminal theme — git-bash inspired colors and styling
+ * Terminal — clean monochrome styling
  * --------------------------------------------------------------------------- */
 
 .sb-terminal-output {
@@ -81,47 +81,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Terminal line colors via data attribute */
-.sb-term-line {
-  color: #c9d1d9;
-}
-.sb-term-prompt {
-  color: var(--sb-success);
-  font-weight: 600;
-}
-.sb-term-cmd {
-  color: #f0f6fc;
-  font-weight: 500;
-}
-.sb-term-stderr {
-  color: var(--sb-error);
-}
-.sb-term-success {
-  color: var(--sb-success);
-}
-.sb-term-warning {
-  color: var(--sb-warning);
-}
-.sb-term-info {
-  color: var(--sb-info);
-}
-.sb-term-dim {
-  color: #484f58;
-}
-.sb-term-path {
-  color: var(--sb-cyan);
-}
-.sb-term-pkg {
-  color: var(--sb-magenta);
-}
-.sb-term-exit-ok {
-  color: var(--sb-success);
-}
-.sb-term-exit-fail {
-  color: var(--sb-error);
-  font-weight: 600;
-}
-
 /*
  * Ranger Theme Variables — bridged from ranger/client/src/style.css.
  *

package/src/types.ts

@@ -150,6 +150,12 @@ export interface RuntimeState {
    * Missing keys should be treated as "unchanged".
    */
   fileChanges: Record<string, FileChangeStatus>;
+  /**
+   * Monotonically increasing counter that triggers an iframe reload
+   * without restarting the server process. Incremented when only
+   * hot-reloadable files change (CSS, HTML, static assets).
+   */
+  previewReloadKey: number;
   /** Error message if status is 'error' */
   error: string | null;
   /**
@@ -343,6 +349,10 @@ export interface CodeEditorProps {
 export interface TerminalProps {
   output: string[];
   className?: string;
+  /** Whether the terminal is collapsed to just its header bar */
+  minimized?: boolean;
+  /** Called when the user clicks the minimize/expand toggle */
+  onToggleMinimize?: () => void;
 }
 
 export interface PreviewProps {
@@ -351,6 +361,12 @@ export interface PreviewProps {
   onRefresh?: () => void;
   /** Called when a JavaScript error occurs inside the preview iframe */
   onBrowserError?: (error: SandboxError) => void;
+  /**
+   * Monotonically increasing counter. When this changes, the iframe
+   * is soft-reloaded (location.reload) without restarting the server.
+   * Used for hot-reloading static asset changes (CSS, HTML, images).
+   */
+  reloadKey?: number;
 }
 
 export interface BootOverlayProps {