create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/components/CodeRunnerModal.tsx

@@ -0,0 +1,3030 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useLayoutEffect,
+} from "react";
+import {
+  X,
+  GripVertical,
+  Maximize2,
+  Minimize2,
+  Play,
+  Trash2,
+  Loader2,
+  Terminal,
+  Clock,
+  Save,
+  Check,
+  Server,
+  StopCircle,
+  Globe,
+  Copy,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  Eye,
+  Code2,
+  FilePlus,
+  MessageSquare,
+  Send,
+  Clipboard,
+  ClipboardCheck,
+} from "lucide-react";
+import { useStore } from "../store";
+import Editor from "react-simple-code-editor";
+import Prism from "prismjs";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import {
+  generatePreviewHTML,
+  defaultForType,
+  resolveNextjsEntry,
+} from "../reactLab";
+import {
+  startNextjsSandbox,
+  updateNextjsFiles,
+  stopNextjsSandbox,
+} from "../api";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+const MIN_W = 420;
+const MIN_H = 300;
+const DEFAULT_W = 760;
+const DEFAULT_H = 560;
+
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+interface OutputLine {
+  kind: "stdout" | "stderr" | "info" | "warn";
+  text: string;
+  source?: "server" | "client";
+}
+
+const LANG_OPTIONS = ["typescript", "javascript"] as const;
+type Lang = (typeof LANG_OPTIONS)[number];
+
+// ── Sandbox default snippets ─────────────────────────────────────────
+const DEFAULT_SERVER_CODE = `import express from 'express';
+import { Readable } from 'stream';
+const app = express();
+app.use(express.json());
+
+app.get('/ping', (_req, res) => {
+  res.json({ message: 'pong', time: Date.now() });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('Server on :' + port));
+`;
+
+const DEFAULT_CLIENT_CODE = `// SANDBOX_URL is pre-injected \u2014 points at your running server
+
+// \u2500\u2500 REST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+console.log('--- REST ---');
+const rest = await fetch(SANDBOX_URL + '/ping');
+console.log(await rest.json());
+`;
+
+// VS Code Dark+ token colours injected once for prismjs.
+// react-simple-code-editor uses Prism.highlight() which emits class-based spans;
+// these inline styles map those classes to the same palette used in the old theme.
+function ensurePrismStyles() {
+  const ID = "__code_runner_prism_vsc";
+  if (typeof document === "undefined" || document.getElementById(ID)) return;
+  const el = document.createElement("style");
+  el.id = ID;
+  el.textContent = [
+    `.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6A9955}`,
+    `.token.punctuation{color:#D4D4D4}`,
+    `.token.keyword{color:#569CD6}`,
+    `.token.builtin{color:#4EC9B0}`,
+    `.token.boolean,.token.constant{color:#569CD6}`,
+    `.token.number{color:#B5CEA8}`,
+    `.token.string,.token.attr-value,.token.template-string{color:#CE9178}`,
+    `.token.char,.token.regex{color:#D16969}`,
+    `.token.operator,.token.entity,.token.url{color:#D4D4D4}`,
+    `.token.variable{color:#9CDCFE}`,
+    `.token.atrule,.token.attr-name{color:#9CDCFE}`,
+    `.token.function{color:#DCDCAA}`,
+    `.token.class-name{color:#4EC9B0}`,
+    `.token.property{color:#9CDCFE}`,
+    `.token.selector{color:#D7BA7D}`,
+    `.token.tag{color:#4EC9B0}`,
+    `.token.important,.token.bold{font-weight:bold}`,
+    `.token.italic{font-style:italic}`,
+  ].join("\n");
+  document.head.appendChild(el);
+}
+
+const EDITOR_FONT =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+
+// Syntax-highlighted code editor using react-simple-code-editor.
+// Cursor alignment is exact because the library manages both the textarea and
+// the highlight <pre> with identical computed styles internally.
+function SyntaxEditor({
+  value,
+  onChange,
+  onCtrlEnter,
+  language,
+  placeholder,
+  autoFocus = false,
+  fontSize = "12px",
+  focusRingClass = "ring-violet-500/40",
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  onCtrlEnter?: () => void;
+  language: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  fontSize?: string;
+  focusRingClass?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    ensurePrismStyles();
+    if (autoFocus) {
+      setTimeout(
+        () =>
+          containerRef.current
+            ?.querySelector<HTMLTextAreaElement>("textarea")
+            ?.focus(),
+        50,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const grammar =
+    language === "typescript"
+      ? Prism.languages.typescript
+      : Prism.languages.javascript;
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 overflow-auto bg-slate-950"
+    >
+      <Editor
+        value={value}
+        onValueChange={onChange}
+        highlight={(src) =>
+          grammar ? Prism.highlight(src, grammar, language) : src
+        }
+        padding={12}
+        insertSpaces
+        tabSize={2}
+        placeholder={placeholder}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+            e.preventDefault();
+            onCtrlEnter?.();
+          }
+        }}
+        style={{
+          fontFamily: EDITOR_FONT,
+          fontSize,
+          lineHeight: 1.625,
+          color: "#D4D4D4",
+          caretColor: "white",
+          minHeight: "100%",
+        }}
+        textareaClassName={`outline-none focus:ring-1 ${focusRingClass} placeholder:text-slate-600`}
+      />
+    </div>
+  );
+}
+
+export default function CodeRunnerModal() {
+  const {
+    closeCodeRunner,
+    runnerInitialCode,
+    runnerInitialLanguage,
+    runnerInitialSandbox,
+    runnerInitialFileId,
+    currentQuestion,
+    saveCodeSnippetToQuestion,
+    overwriteContextFileContent,
+  } = useStore();
+
+  const [code, setCode] = useState(runnerInitialCode);
+  const [lang, setLang] = useState<Lang>(
+    (runnerInitialLanguage as Lang) ?? "typescript",
+  );
+  const [running, setRunning] = useState(false);
+  const [output, setOutput] = useState<OutputLine[]>([]);
+  const [durationMs, setDurationMs] = useState<number | null>(null);
+  const [timedOut, setTimedOut] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [naming, setNaming] = useState(false);
+  const [snippetName, setSnippetName] = useState("");
+  /** Non-null when editing a previously saved script — Save overwrites, Save As creates new */
+  const [activeScriptId, setActiveScriptId] = useState<string | null>(
+    runnerInitialFileId ?? null,
+  );
+
+  // ── Sandbox state ─────────────────────────────────────────
+  const [mode, setMode] = useState<"script" | "sandbox">("script");
+  const [serverCode, setServerCode] = useState(DEFAULT_SERVER_CODE);
+  const [serverLang, setServerLang] = useState<Lang>("typescript");
+  const [clientCode, setClientCode] = useState(DEFAULT_CLIENT_CODE);
+  const [clientLang, setClientLang] = useState<Lang>("javascript");
+  const [sandboxId, setSandboxId] = useState<string | null>(null);
+  const [sandboxPort, setSandboxPort] = useState<number | null>(null);
+  const [sandboxUrl, setSandboxUrl] = useState<string | null>(null);
+  const [serverStarting, setServerStarting] = useState(false);
+  const [serverRunning, setServerRunning] = useState(false);
+  const [sandboxOutput, setSandboxOutput] = useState<OutputLine[]>([]);
+  const [clientRunning, setClientRunning] = useState(false);
+
+  // ── React/Next.js client state ──────────────────────────────
+  const [clientType, setClientType] = useState<"script" | "react" | "nextjs">(
+    "script",
+  );
+  const [reactFiles, setReactFiles] = useState<Record<string, string>>({});
+  const [reactActiveFile, setReactActiveFile] = useState<string>("");
+  const [reactClientTab, setReactClientTab] = useState<"edit" | "preview">(
+    "edit",
+  );
+  const [reactPreviewSrc, setReactPreviewSrc] = useState<string | null>(null);
+  const [reactAddingFile, setReactAddingFile] = useState(false);
+  const [reactNewFileName, setReactNewFileName] = useState("");
+  // Folders that are collapsed in the Next.js file tree sidebar
+  const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
+    new Set(),
+  );
+  // Real Next.js dev-server state
+  const [nxSandboxId, setNxSandboxId] = useState<string | null>(null);
+  const [nxSandboxUrl, setNxSandboxUrl] = useState<string | null>(null);
+  const [nxStarting, setNxStarting] = useState(false);
+  const [nxError, setNxError] = useState<string | null>(null);
+  const nxIframeRef = useRef<HTMLIFrameElement>(null);
+  // Simulated URL bar state for Next.js mode
+  const [reactPreviewPath, setReactPreviewPath] = useState("/");
+  const [reactNavInput, setReactNavInput] = useState("/");
+  const [reactNavHistory, setReactNavHistory] = useState<string[]>(["/"]);
+  const [reactNavIndex, setReactNavIndex] = useState(0);
+
+  // ── Sandbox output tab ("output" | "chat") ──────────────────
+  const [sbxBottomTab, setSbxBottomTab] = useState<"output" | "chat">("output");
+
+  // ── Sandbox panel sizes ─────────────────────────────────────────
+  // sbxSplit: server pane width as % of the editor row (0–100)
+  const [sbxSplit, setSbxSplit] = useState(50);
+  // sbxOutputH: output panel height in px
+  const [sbxOutputH, setSbxOutputH] = useState(176);
+  const [serverCollapsed, setServerCollapsed] = useState(false);
+  const [clientCollapsed, setClientCollapsed] = useState(false);
+  const [outputCollapsed, setOutputCollapsed] = useState(false);
+  const sbxDividerDrag = useRef<{
+    startX: number;
+    startPct: number;
+    containerW: number;
+  } | null>(null);
+  const sbxOutputDrag = useRef<{ startY: number; startH: number } | null>(null);
+  const sbxEditorRowRef = useRef<HTMLDivElement>(null);
+
+  // ── Sandbox save state (single combined save) ──────────────────
+  const [sbxNaming, setSbxNaming] = useState(false);
+  const [sbxName, setSbxName] = useState("My Sandbox");
+  const [sbxSaved, setSbxSaved] = useState(false);
+  const [sbxSaving, setSbxSaving] = useState(false);
+  /** When non-null we are editing a previously saved sandbox — Save overwrites, Save As still creates new */
+  const [activeSandboxId, setActiveSandboxId] = useState<string | null>(null);
+  const sbxNameInputRef = useRef<HTMLInputElement>(null);
+
+  // ── Sandbox chat state (declared after activeSandboxId) ──────────────
+  type SbxChatMessage = {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+  };
+  const sbxChatKey = `sbx-chat:${activeSandboxId ?? `q:${currentQuestion?.id ?? "_"}`}`;
+  const sbxChatKeyRef = useRef(sbxChatKey);
+  const [sbxChatMessages, setSbxChatMessages] = useState<SbxChatMessage[]>(
+    () => {
+      try {
+        const s = localStorage.getItem(sbxChatKey);
+        return s ? (JSON.parse(s) as SbxChatMessage[]) : [];
+      } catch {
+        return [];
+      }
+    },
+  );
+  const [sbxChatInput, setSbxChatInput] = useState("");
+  const [sbxChatLoading, setSbxChatLoading] = useState(false);
+  const sbxChatScrollRef = useRef<HTMLDivElement>(null);
+  const sbxChatInputRef = useRef<HTMLTextAreaElement>(null);
+  const sbxChatAbortRef = useRef<{ aborted: boolean }>({ aborted: false });
+  const [sbxChatCopiedId, setSbxChatCopiedId] = useState<string | null>(null);
+
+  // Keep key ref fresh
+  useEffect(() => {
+    sbxChatKeyRef.current = sbxChatKey;
+  }, [sbxChatKey]);
+  // Reload chat when artifact changes
+  useEffect(() => {
+    try {
+      const s = localStorage.getItem(sbxChatKey);
+      setSbxChatMessages(s ? (JSON.parse(s) as SbxChatMessage[]) : []);
+    } catch {
+      setSbxChatMessages([]);
+    }
+  }, [sbxChatKey]);
+  // Persist chat
+  useEffect(() => {
+    if (sbxChatMessages.length === 0) {
+      localStorage.removeItem(sbxChatKeyRef.current);
+      return;
+    }
+    localStorage.setItem(
+      sbxChatKeyRef.current,
+      JSON.stringify(sbxChatMessages),
+    );
+  }, [sbxChatMessages]);
+  // Auto-scroll chat
+  useEffect(() => {
+    if (sbxBottomTab === "chat" && sbxChatScrollRef.current)
+      sbxChatScrollRef.current.scrollTop =
+        sbxChatScrollRef.current.scrollHeight;
+  }, [sbxChatMessages, sbxChatLoading, sbxBottomTab]);
+
+  // Save server+client together as one JSON blob
+  const saveSandboxSnippet = async (label: string) => {
+    if (!currentQuestion) return;
+    setSbxSaving(true);
+    try {
+      const origin =
+        clientType === "react"
+          ? "react"
+          : clientType === "nextjs"
+            ? "nextjs"
+            : "sandbox";
+      const payload = JSON.stringify(
+        clientType === "script"
+          ? { serverCode, serverLang, clientCode, clientLang }
+          : {
+              serverCode,
+              serverLang,
+              clientCode: "",
+              clientLang: "javascript",
+              clientType,
+              reactFiles,
+              reactActiveFile,
+            },
+      );
+      const cf = await saveCodeSnippetToQuestion(
+        currentQuestion.id,
+        payload,
+        origin,
+        label || "My Sandbox",
+        origin,
+      );
+      setActiveSandboxId(cf.id);
+      setSbxSaved(true);
+      setTimeout(() => setSbxSaved(false), 2000);
+    } finally {
+      setSbxSaving(false);
+    }
+  };
+
+  // Overwrite the existing sandbox blob in-place
+  const overwriteSandboxSnippet = async () => {
+    if (!currentQuestion || !activeSandboxId) return;
+    setSbxSaving(true);
+    try {
+      const payload = JSON.stringify(
+        clientType === "script"
+          ? { serverCode, serverLang, clientCode, clientLang }
+          : {
+              serverCode,
+              serverLang,
+              clientCode: "",
+              clientLang: "javascript",
+              clientType,
+              reactFiles,
+              reactActiveFile,
+            },
+      );
+      await overwriteContextFileContent(
+        currentQuestion.id,
+        activeSandboxId,
+        payload,
+      );
+      setSbxSaved(true);
+      setTimeout(() => setSbxSaved(false), 2000);
+    } finally {
+      setSbxSaving(false);
+    }
+  };
+
+  // Overwrite the existing script snippet in-place
+  const overwriteScriptSnippet = async () => {
+    if (!currentQuestion || !activeScriptId) return;
+    setSaving(true);
+    try {
+      await overwriteContextFileContent(
+        currentQuestion.id,
+        activeScriptId,
+        code,
+      );
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const outputEndRef = useRef<HTMLDivElement>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  // Tracks how many server log lines have already been flushed to sandboxOutput
+  const sandboxLogOffsetRef = useRef(0);
+  // Stable ref so unmount cleanup can stop sandbox without stale closure
+  const sandboxIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    sandboxIdRef.current = sandboxId;
+  }, [sandboxId]);
+
+  // Sync initial code when the modal is (re)opened with new content
+  useLayoutEffect(() => {
+    setCode(runnerInitialCode);
+    setLang((runnerInitialLanguage as Lang) ?? "typescript");
+    setOutput([]);
+    setDurationMs(null);
+    setTimedOut(false);
+  }, [runnerInitialCode, runnerInitialLanguage]);
+
+  // Restore a saved sandbox when opened via openSandbox()
+  useLayoutEffect(() => {
+    if (!runnerInitialSandbox) return;
+    setMode("sandbox");
+    setServerCode(runnerInitialSandbox.serverCode);
+    setServerLang((runnerInitialSandbox.serverLang as Lang) ?? "typescript");
+    setClientCode(runnerInitialSandbox.clientCode);
+    setClientLang((runnerInitialSandbox.clientLang as Lang) ?? "javascript");
+    setSandboxOutput([]);
+    setActiveSandboxId(runnerInitialSandbox.fileId ?? null);
+    // Restore client type and React/Next.js files
+    const ct =
+      (runnerInitialSandbox.clientType as "script" | "react" | "nextjs") ??
+      "script";
+    setClientType(ct);
+    if (ct === "react" || ct === "nextjs") {
+      if (
+        runnerInitialSandbox.reactFiles &&
+        Object.keys(runnerInitialSandbox.reactFiles).length > 0
+      ) {
+        setReactFiles(runnerInitialSandbox.reactFiles);
+        setReactActiveFile(
+          runnerInitialSandbox.reactActiveFile ??
+            Object.keys(runnerInitialSandbox.reactFiles)[0] ??
+            "",
+        );
+      } else {
+        const defs = defaultForType(ct);
+        setReactFiles(defs.files);
+        setReactActiveFile(defs.activeFile);
+      }
+      setReactPreviewSrc(null);
+      setReactClientTab("edit");
+    }
+  }, [runnerInitialSandbox]);
+
+  // Auto-focus is handled inside SyntaxEditor via autoFocus prop.
+
+  // Scroll output to bottom whenever it grows
+  useEffect(() => {
+    outputEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [output]);
+
+  // ── Sandbox divider drag handlers ────────────────────────────────
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (sbxDividerDrag.current) {
+        const { startX, startPct, containerW } = sbxDividerDrag.current;
+        const dx = e.clientX - startX;
+        const pct = Math.min(
+          95,
+          Math.max(5, startPct + (dx / containerW) * 100),
+        );
+        setSbxSplit(pct);
+      }
+      if (sbxOutputDrag.current) {
+        const { startY, startH } = sbxOutputDrag.current;
+        const dy = startY - e.clientY; // drag up = increase height
+        setSbxOutputH(Math.max(60, Math.min(600, startH + dy)));
+      }
+    };
+    const onUp = () => {
+      sbxDividerDrag.current = null;
+      sbxOutputDrag.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  // ── Position / Size ──────────────────────────────────────────
+
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + (e.clientX - drag.mx)),
+          y: Math.max(0, drag.oy + (e.clientY - drag.my)),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w;
+          let h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w"))
+          setPos((p) => ({
+            ...p,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        if (dir.includes("n"))
+          setPos((p) => ({
+            ...p,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeCodeRunner();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [closeCodeRunner]);
+
+  // ── Run ──────────────────────────────────────────────────────
+
+  const runCode = useCallback(async () => {
+    if (running) return;
+    setRunning(true);
+    setOutput([]);
+    setDurationMs(null);
+    setTimedOut(false);
+
+    try {
+      const res = await fetch("/api/run-code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code, language: lang }),
+      });
+      const data: {
+        stdout: string;
+        stderr: string;
+        durationMs: number;
+        timedOut: boolean;
+      } = await res.json();
+
+      const lines: OutputLine[] = [];
+
+      if (data.stdout.trim()) {
+        data.stdout.split("\n").forEach((l) => {
+          if (l !== "") lines.push({ kind: "stdout", text: l });
+        });
+      }
+      if (data.stderr.trim()) {
+        data.stderr.split("\n").forEach((l) => {
+          if (l !== "") lines.push({ kind: "stderr", text: l });
+        });
+      }
+      if (lines.length === 0) {
+        lines.push({ kind: "info", text: "(no output)" });
+      }
+      if (data.timedOut) {
+        lines.push({ kind: "warn", text: "⏱  Timed out after 10 seconds" });
+      }
+
+      setOutput(lines);
+      setDurationMs(data.durationMs);
+      setTimedOut(data.timedOut);
+    } catch (err) {
+      setOutput([{ kind: "stderr", text: String(err) }]);
+    } finally {
+      setRunning(false);
+    }
+  }, [code, lang, running]);
+
+  // ── Sandbox: stop on unmount ──────────────────────────────
+
+  useEffect(() => {
+    return () => {
+      if (sandboxIdRef.current) {
+        fetch(`/api/sandbox/${sandboxIdRef.current}`, {
+          method: "DELETE",
+        }).catch(() => {});
+      }
+    };
+  }, []);
+
+  // ── Sandbox: poll server logs while running ────────────────
+
+  useEffect(() => {
+    if (!sandboxId) return;
+    const interval = setInterval(async () => {
+      try {
+        const r = await fetch(`/api/sandbox/${sandboxId}/status`);
+        const data = await r.json();
+        if (!data.running) {
+          setSandboxId(null);
+          setSandboxPort(null);
+          setSandboxUrl(null);
+          setServerRunning(false);
+          sandboxLogOffsetRef.current = 0;
+          return;
+        }
+        const newLogs: string[] = (data.logs as string[]).slice(
+          sandboxLogOffsetRef.current,
+        );
+        if (newLogs.length > 0) {
+          sandboxLogOffsetRef.current = (data.logs as string[]).length;
+          setSandboxOutput((prev) => [
+            ...prev,
+            ...newLogs.flatMap((chunk) =>
+              chunk
+                .split("\n")
+                .filter(Boolean)
+                .map((text) => ({
+                  kind: "stdout" as const,
+                  text,
+                  source: "server" as const,
+                })),
+            ),
+          ]);
+        }
+      } catch {
+        /* ignore transient network errors */
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [sandboxId]);
+
+  // ── React/Next.js helpers ─────────────────────────────────────
+
+  /** Seed sensible default content for a freshly created file. */
+  const newFileContent = (name: string): string => {
+    const base = name.split("/").pop() ?? name;
+    // Next.js special files
+    if (base === "page.tsx" || base === "page.ts") {
+      const routeSegments = name
+        .replace(/^app\//, "")
+        .replace(/\/page\.tsx?$/, "")
+        .split("/")
+        .filter(Boolean);
+      const routeName =
+        routeSegments.length === 0
+          ? "Home"
+          : routeSegments
+              .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+              .join("");
+      const urlPath =
+        routeSegments.length === 0 ? "/" : "/" + routeSegments.join("/");
+      return [
+        `// ${urlPath} → ${name}`,
+        `// Server Component by default — no "use client" needed unless you use hooks`,
+        ``,
+        `export default function ${routeName}Page() {`,
+        `  return (`,
+        `    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>`,
+        `      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold" }}>${routeName}</h1>`,
+        `      <p style={{ color: "#64748b", marginTop: "0.5rem" }}>`,
+        `        You are on <code>${urlPath}</code>`,
+        `      </p>`,
+        `      <button`,
+        `        onClick={() => (window as any).__nxNavigate("/")}`,
+        `        style={{ marginTop: "1rem", padding: "0.5rem 1rem", cursor: "pointer",`,
+        `          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}`,
+        `      >`,
+        `        ← Back to Home`,
+        `      </button>`,
+        `    </div>`,
+        `  );`,
+        `}`,
+        ``,
+      ].join("\n");
+    }
+    if (base === "layout.tsx" || base === "layout.ts") {
+      return [
+        `// Root Layout — wraps ALL pages, persists across navigations`,
+        ``,
+        `export default function Layout({ children }: { children: React.ReactNode }) {`,
+        `  return (`,
+        `    <html lang="en">`,
+        `      <body style={{ margin: 0, fontFamily: "system-ui, sans-serif" }}>`,
+        `        {children}`,
+        `      </body>`,
+        `    </html>`,
+        `  );`,
+        `}`,
+        ``,
+      ].join("\n");
+    }
+    if (base === "loading.tsx" || base === "loading.ts") {
+      return [
+        `// Shown automatically while the page is loading (Suspense boundary)`,
+        ``,
+        `export default function Loading() {`,
+        `  return <p style={{ padding: "2rem", color: "#64748b" }}>Loading…</p>;`,
+        `}`,
+        ``,
+      ].join("\n");
+    }
+    if (base === "error.tsx" || base === "error.ts") {
+      return [
+        `"use client"; // error boundaries must be Client Components`,
+        ``,
+        `export default function Error({ error, reset }: { error: Error; reset: () => void }) {`,
+        `  return (`,
+        `    <div style={{ padding: "2rem" }}>`,
+        `      <h2>Something went wrong</h2>`,
+        `      <pre style={{ color: "#dc2626", fontSize: "0.8rem" }}>{error.message}</pre>`,
+        `      <button onClick={reset}>Try again</button>`,
+        `    </div>`,
+        `  );`,
+        `}`,
+        ``,
+      ].join("\n");
+    }
+    return `// ${name}\n`;
+  };
+
+  const getReactEntry = (
+    files: Record<string, string>,
+    type: "react" | "nextjs",
+  ): string => {
+    if (type === "nextjs")
+      return files["app/page.tsx"]
+        ? "app/page.tsx"
+        : (Object.keys(files)[0] ?? "");
+    return files["App.tsx"] ? "App.tsx" : (Object.keys(files)[0] ?? "");
+  };
+
+  const refreshPreview = useCallback(
+    (overridePath?: string) => {
+      const type = clientType as "react" | "nextjs";
+      let entry: string;
+      if (type === "nextjs") {
+        const path = overridePath ?? reactPreviewPath;
+        const resolved = resolveNextjsEntry(reactFiles, path);
+        if (!resolved) {
+          // Show a proper 404 — don't fall back to the home page
+          const notFoundHTML = generatePreviewHTML(
+            {
+              "__404__.tsx": [
+                `export default function NotFound() {`,
+                `  const path = ${JSON.stringify(path)};`,
+                `  return (`,
+                `    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>`,
+                `      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#dc2626" }}>404 — Page Not Found</h1>`,
+                `      <p style={{ color: "#64748b", marginTop: "0.5rem" }}>`,
+                `        No file matches <code style={{ background: "#f1f5f9", padding: "0.1em 0.4em", borderRadius: "0.25rem" }}>{path}</code>`,
+                `      </p>`,
+                `      <p style={{ color: "#94a3b8", fontSize: "0.875rem", marginTop: "1rem" }}>`,
+                `        Create <code style={{ background: "#f1f5f9", padding: "0.1em 0.4em", borderRadius: "0.25rem" }}>app${path === "/" ? "" : path}/page.tsx</code> to make this route work.`,
+                `      </p>`,
+                `      <button onClick={() => (window as any).__nxNavigate("/")}`,
+                `        style={{ marginTop: "1.5rem", padding: "0.5rem 1rem", cursor: "pointer",`,
+                `          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}>`,
+                `        ← Back to Home`,
+                `      </button>`,
+                `    </div>`,
+                `  );`,
+                `}`,
+              ].join("\n"),
+            },
+            "__404__.tsx",
+            undefined,
+            true,
+          );
+          setReactPreviewSrc(notFoundHTML);
+          setReactClientTab("preview");
+          return;
+        }
+        entry = resolved;
+      } else {
+        entry = getReactEntry(reactFiles, type);
+      }
+      if (!entry) return;
+      const html = generatePreviewHTML(
+        reactFiles,
+        entry,
+        sandboxUrl ?? undefined,
+        type === "nextjs",
+      );
+      setReactPreviewSrc(html);
+      setReactClientTab("preview");
+    },
+    [clientType, reactFiles, sandboxUrl, reactPreviewPath],
+  );
+
+  // Auto-refresh preview when files change while the preview tab is visible
+  const reactFilesRef = useRef(reactFiles);
+  useEffect(() => {
+    if (reactFiles === reactFilesRef.current) return;
+    reactFilesRef.current = reactFiles;
+    if (reactClientTab === "preview" && reactPreviewSrc) {
+      refreshPreview();
+    }
+  }, [reactFiles, reactClientTab, reactPreviewSrc, refreshPreview]);
+
+  /** Navigate to a new path (updates URL bar + history + re-renders preview). */
+  const navigatePreview = useCallback(
+    (to: string) => {
+      const path = to.startsWith("/") ? to : "/" + to;
+      setReactPreviewPath(path);
+      setReactNavInput(path);
+      setReactNavHistory((prev) => {
+        const trimmed = prev.slice(0, reactNavIndex + 1);
+        return [...trimmed, path];
+      });
+      setReactNavIndex((i) => i + 1);
+      refreshPreview(path);
+    },
+    [reactNavIndex, refreshPreview],
+  );
+
+  // Listen for rlab-nav messages from the preview iframe
+  useEffect(() => {
+    const handler = (e: MessageEvent) => {
+      if (e.data?.type === "rlab-nav" && typeof e.data.to === "string") {
+        navigatePreview(e.data.to);
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [navigatePreview]);
+
+  /** Start a real Next.js dev-server for the lab and point the iframe at it. */
+  const startNextjsServer = useCallback(async () => {
+    if (nxStarting) return;
+    setNxStarting(true);
+    setNxError(null);
+    try {
+      const info = await startNextjsSandbox(reactFiles);
+      setNxSandboxId(info.id);
+      setNxSandboxUrl(info.url);
+      setReactClientTab("preview");
+    } catch (err: any) {
+      setNxError(err?.message ?? String(err));
+    } finally {
+      setNxStarting(false);
+    }
+  }, [nxStarting, reactFiles]);
+
+  /** Push updated files to the running Next.js server (HMR picks them up). */
+  const pushNextjsFiles = useCallback(
+    async (files: Record<string, string>) => {
+      if (!nxSandboxId) return;
+      try {
+        await updateNextjsFiles(nxSandboxId, files);
+      } catch {
+        // non-fatal; HMR may already have picked up the change
+      }
+    },
+    [nxSandboxId],
+  );
+
+  // Auto-push file changes to the running Next.js server
+  const nxFilesRef = useRef(reactFiles);
+  useEffect(() => {
+    if (!nxSandboxId || reactFiles === nxFilesRef.current) return;
+    nxFilesRef.current = reactFiles;
+    void pushNextjsFiles(reactFiles);
+  }, [reactFiles, nxSandboxId, pushNextjsFiles]);
+
+  // Clean up Next.js server when the modal is closed or mode changes away from nextjs
+  const prevClientTypeRef = useRef(clientType);
+  useEffect(() => {
+    const prev = prevClientTypeRef.current;
+    prevClientTypeRef.current = clientType;
+    if (prev === "nextjs" && clientType !== "nextjs" && nxSandboxId) {
+      void stopNextjsSandbox(nxSandboxId);
+      setNxSandboxId(null);
+      setNxSandboxUrl(null);
+    }
+  }, [clientType, nxSandboxId]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (nxSandboxId) void stopNextjsSandbox(nxSandboxId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nxSandboxId]);
+
+  const handleClientTypeChange = useCallback(
+    (ct: "script" | "react" | "nextjs") => {
+      if (ct === clientType) return;
+      setClientType(ct);
+      if (ct === "react" || ct === "nextjs") {
+        const defs = defaultForType(ct);
+        setReactFiles(defs.files);
+        setReactActiveFile(defs.activeFile);
+        setReactPreviewSrc(null);
+        setReactClientTab("edit");
+        if (ct === "nextjs") {
+          setReactPreviewPath("/");
+          setReactNavInput("/");
+          setReactNavHistory(["/"]);
+          setReactNavIndex(0);
+        }
+      }
+    },
+    [clientType],
+  );
+
+  // ── Sandbox chat handler ──────────────────────────────────
+
+  const handleSbxChatSend = useCallback(async () => {
+    const text = sbxChatInput.trim();
+    if (!text || sbxChatLoading) return;
+    setSbxChatInput("");
+    const userMsg: SbxChatMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: text,
+    };
+    setSbxChatMessages((prev) => [...prev, userMsg]);
+    setSbxChatLoading(true);
+    const abort = { aborted: false };
+    sbxChatAbortRef.current = abort;
+    const aId = crypto.randomUUID();
+    setSbxChatMessages((prev) => [
+      ...prev,
+      { id: aId, role: "assistant", content: "" },
+    ]);
+    const isReactMode = clientType === "react" || clientType === "nextjs";
+    const workspaceFiles = isReactMode
+      ? reactFiles
+      : { "client.js": clientCode, "server.ts": serverCode };
+    const labType: "react" | "nextjs" =
+      clientType === "nextjs" ? "nextjs" : "react";
+    try {
+      const history = [...sbxChatMessages, userMsg].map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+      const { streamFrontendLabAsk } = await import("../api");
+      await streamFrontendLabAsk(
+        {
+          messages: history,
+          workspace: workspaceFiles,
+          labType,
+          questionId: currentQuestion?.id,
+        },
+        (delta) => {
+          if (abort.aborted) return;
+          setSbxChatMessages((prev) =>
+            prev.map((m) =>
+              m.id === aId ? { ...m, content: m.content + delta } : m,
+            ),
+          );
+        },
+      );
+    } catch (err: unknown) {
+      if (!abort.aborted)
+        setSbxChatMessages((prev) =>
+          prev.map((m) =>
+            m.id === aId
+              ? { ...m, content: (err as Error)?.message ?? "Request failed" }
+              : m,
+          ),
+        );
+    } finally {
+      if (!abort.aborted) setSbxChatLoading(false);
+    }
+  }, [
+    sbxChatInput,
+    sbxChatLoading,
+    sbxChatMessages,
+    clientType,
+    reactFiles,
+    clientCode,
+    serverCode,
+  ]);
+
+  // ── Sandbox handlers ─────────────────────────────────────────────
+
+  const startServer = async () => {
+    if (serverStarting) return;
+    // Tear down any existing sandbox first
+    if (sandboxId) {
+      await fetch(`/api/sandbox/${sandboxId}`, { method: "DELETE" }).catch(
+        () => {},
+      );
+      setSandboxId(null);
+      setSandboxPort(null);
+      setSandboxUrl(null);
+      setServerRunning(false);
+    }
+    setServerStarting(true);
+    sandboxLogOffsetRef.current = 0;
+    setSandboxOutput([{ kind: "info", text: "Starting server…" }]);
+    try {
+      const res = await fetch("/api/sandbox/start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ serverCode, language: serverLang }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setSandboxOutput((prev) => [
+          ...prev,
+          { kind: "stderr", text: data.error || "Failed to start" },
+        ]);
+        return;
+      }
+      setSandboxId(data.sandboxId);
+      setSandboxPort(data.port);
+      setSandboxUrl(data.sandboxUrl);
+      setServerRunning(true);
+      setSandboxOutput((prev) => [
+        ...prev,
+        {
+          kind: "info",
+          text: `✓ Server started at ${data.sandboxUrl}`,
+          source: "server",
+        },
+      ]);
+    } catch (err) {
+      setSandboxOutput((prev) => [
+        ...prev,
+        { kind: "stderr", text: String(err) },
+      ]);
+    } finally {
+      setServerStarting(false);
+    }
+  };
+
+  const stopServer = async () => {
+    if (!sandboxId) return;
+    await fetch(`/api/sandbox/${sandboxId}`, { method: "DELETE" }).catch(
+      () => {},
+    );
+    setSandboxId(null);
+    setSandboxPort(null);
+    setSandboxUrl(null);
+    setServerRunning(false);
+    setSandboxOutput((prev) => [
+      ...prev,
+      { kind: "info", text: "Server stopped." },
+    ]);
+  };
+
+  const runClient = async () => {
+    if (clientRunning || !sandboxUrl) return;
+    setClientRunning(true);
+    setSandboxOutput((prev) => [
+      ...prev,
+      { kind: "info", text: "── client run ──", source: "client" },
+    ]);
+    let hadOutput = false;
+    try {
+      const res = await fetch("/api/sandbox/run-client", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          code: clientCode,
+          language: clientLang,
+          sandboxUrl,
+        }),
+      });
+      if (!res.body) throw new Error("No response body");
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = "";
+      // Read the SSE stream and push each line to sandboxOutput immediately
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        // SSE messages are separated by double newlines
+        const parts = buf.split("\n\n");
+        buf = parts.pop() ?? "";
+        for (const part of parts) {
+          const dataLine = part.split("\n").find((l) => l.startsWith("data:"));
+          if (!dataLine) continue;
+          const payload = JSON.parse(dataLine.slice(5).trim()) as {
+            kind: string;
+            text: string;
+          };
+          if (payload.kind === "done") {
+            const meta = JSON.parse(payload.text) as {
+              timedOut: boolean;
+              durationMs: number;
+            };
+            if (!hadOutput)
+              setSandboxOutput((prev) => [
+                ...prev,
+                { kind: "info", text: "(no output)", source: "client" },
+              ]);
+            if (meta.timedOut)
+              setSandboxOutput((prev) => [
+                ...prev,
+                {
+                  kind: "warn",
+                  text: "⏱  Timed out after 10 seconds",
+                  source: "client",
+                },
+              ]);
+          } else {
+            hadOutput = true;
+            setSandboxOutput((prev) => [
+              ...prev,
+              {
+                kind: payload.kind as OutputLine["kind"],
+                text: payload.text,
+                source: "client",
+              },
+            ]);
+          }
+        }
+      }
+    } catch (err) {
+      setSandboxOutput((prev) => [
+        ...prev,
+        { kind: "stderr", text: String(err), source: "client" },
+      ]);
+    } finally {
+      setClientRunning(false);
+    }
+  };
+
+  // ── Styles ───────────────────────────────────────────────────
+
+  const modalStyle: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  return (
+    <div
+      className="fixed z-[60] flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+      style={modalStyle}
+    >
+      {/* ── Resize handles ── */}
+      {!maximized && (
+        <>
+          <div
+            className="absolute inset-x-0 top-0 h-1 cursor-n-resize"
+            onMouseDown={startResize("n")}
+          />
+          <div
+            className="absolute inset-x-0 bottom-0 h-1 cursor-s-resize"
+            onMouseDown={startResize("s")}
+          />
+          <div
+            className="absolute inset-y-0 left-0 w-1 cursor-w-resize"
+            onMouseDown={startResize("w")}
+          />
+          <div
+            className="absolute inset-y-0 right-0 w-1 cursor-e-resize"
+            onMouseDown={startResize("e")}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize"
+            onMouseDown={startResize("se")}
+          />
+          <div
+            className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize"
+            onMouseDown={startResize("sw")}
+          />
+        </>
+      )}
+
+      {/* ── Title bar ── */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 bg-slate-800 border-b border-slate-700 shrink-0"
+        onMouseDown={onTitleMouseDown}
+        style={{ cursor: maximized ? "default" : "grab" }}
+      >
+        <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+        <Terminal className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+        <span className="text-xs font-mono text-slate-300">Code Runner</span>
+
+        {/* Mode toggle */}
+        <div
+          className="flex items-center rounded overflow-hidden border border-slate-700 text-[10px] ml-1 mr-auto shrink-0"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          {(["script", "sandbox"] as const).map((m) => (
+            <button
+              key={m}
+              type="button"
+              onClick={() => setMode(m)}
+              className={`px-2 py-0.5 capitalize transition-colors ${
+                mode === m
+                  ? "bg-slate-600 text-slate-200"
+                  : "text-slate-500 hover:text-slate-400"
+              }`}
+            >
+              {m}
+            </button>
+          ))}
+        </div>
+
+        {/* Script-mode controls */}
+        {mode === "script" && (
+          <>
+            {/* Language toggle */}
+            <div className="flex items-center gap-0.5 shrink-0">
+              {LANG_OPTIONS.map((l) => (
+                <button
+                  key={l}
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={() => setLang(l)}
+                  className={`px-2 py-0.5 rounded text-[10px] uppercase tracking-wider font-mono transition-colors ${
+                    lang === l
+                      ? "bg-violet-600/30 text-violet-300"
+                      : "text-slate-500 hover:text-slate-300"
+                  }`}
+                >
+                  {l === "typescript" ? "TS" : "JS"}
+                </button>
+              ))}
+            </div>
+
+            {/* Save to Context */}
+            {currentQuestion && !naming && (
+              <button
+                type="button"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={() => {
+                  if (activeScriptId) {
+                    void overwriteScriptSnippet();
+                  } else {
+                    if (!code.trim()) return;
+                    setSnippetName("Runner snippet");
+                    setNaming(true);
+                    setTimeout(() => {
+                      nameInputRef.current?.focus();
+                      nameInputRef.current?.select();
+                    }, 30);
+                  }
+                }}
+                disabled={saving || (!activeScriptId && !code.trim())}
+                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium transition-colors shrink-0 ${
+                  saved
+                    ? "bg-cyan-600/30 text-cyan-300"
+                    : "bg-slate-700/60 hover:bg-slate-600/60 text-slate-400 hover:text-slate-200"
+                } disabled:opacity-40`}
+                title={
+                  activeScriptId
+                    ? "Overwrite saved script"
+                    : "Save to question context"
+                }
+              >
+                {saved ? (
+                  <>
+                    <Check className="w-3 h-3" />
+                    Saved
+                  </>
+                ) : saving ? (
+                  <>
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                    Saving…
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-3 h-3" />
+                    Save
+                  </>
+                )}
+              </button>
+            )}
+
+            {/* Save As — only shown when a script is already saved */}
+            {currentQuestion && !naming && activeScriptId && (
+              <button
+                type="button"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={() => {
+                  if (!code.trim()) return;
+                  setSnippetName("Runner snippet");
+                  setNaming(true);
+                  setTimeout(() => {
+                    nameInputRef.current?.focus();
+                    nameInputRef.current?.select();
+                  }, 30);
+                }}
+                disabled={!code.trim() || saving}
+                className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium text-slate-400 hover:text-cyan-300 hover:bg-cyan-600/10 transition-colors shrink-0 disabled:opacity-40"
+                title="Save as a new script"
+              >
+                <Save className="w-3 h-3" /> Save As
+              </button>
+            )}
+
+            {/* Inline name input */}
+            {currentQuestion && naming && (
+              <div
+                className="flex items-center gap-1 shrink-0"
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <input
+                  ref={nameInputRef}
+                  value={snippetName}
+                  onChange={(e) => setSnippetName(e.target.value)}
+                  onKeyDown={async (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      const label = snippetName.trim() || "Runner snippet";
+                      setSaving(true);
+                      setNaming(false);
+                      try {
+                        const cf = await saveCodeSnippetToQuestion(
+                          currentQuestion.id,
+                          code,
+                          lang,
+                          label,
+                          "user",
+                        );
+                        setActiveScriptId(cf.id);
+                        setSaved(true);
+                        setTimeout(() => setSaved(false), 2000);
+                      } finally {
+                        setSaving(false);
+                      }
+                    } else if (e.key === "Escape") {
+                      setNaming(false);
+                    }
+                  }}
+                  placeholder="Snippet name…"
+                  className="w-32 bg-slate-900 border border-cyan-600/50 rounded px-2 py-0.5 text-[11px] text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
+                />
+                <button
+                  type="button"
+                  onClick={async () => {
+                    const label = snippetName.trim() || "Runner snippet";
+                    setSaving(true);
+                    setNaming(false);
+                    try {
+                      const cf = await saveCodeSnippetToQuestion(
+                        currentQuestion.id,
+                        code,
+                        lang,
+                        label,
+                        "user",
+                      );
+                      setActiveScriptId(cf.id);
+                      setSaved(true);
+                      setTimeout(() => setSaved(false), 2000);
+                    } finally {
+                      setSaving(false);
+                    }
+                  }}
+                  className="p-0.5 rounded bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 transition-colors"
+                  title="Confirm save (Enter)"
+                >
+                  {saving ? (
+                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  ) : (
+                    <Check className="w-3.5 h-3.5" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setNaming(false)}
+                  className="p-0.5 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors"
+                  title="Cancel (Esc)"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+
+            {/* Run */}
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() => void runCode()}
+              disabled={running}
+              className="flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-600/20 hover:bg-emerald-600/40 text-emerald-400 hover:text-emerald-300 disabled:opacity-40 transition-colors shrink-0"
+              title="Run (Ctrl+Enter)"
+            >
+              {running ? (
+                <Loader2 className="w-3 h-3 animate-spin" />
+              ) : (
+                <Play className="w-3 h-3" />
+              )}
+              Run
+            </button>
+
+            {/* Clear output */}
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() =>
+                navigator.clipboard.writeText(
+                  output.map((l) => l.text).join("\n"),
+                )
+              }
+              className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+              title="Copy output"
+            >
+              <Copy className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() => {
+                setOutput([]);
+                setDurationMs(null);
+                setTimedOut(false);
+              }}
+              className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+              title="Clear output"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </>
+        )}
+
+        {/* Sandbox: save + clear */}
+        {mode === "sandbox" && (
+          <>
+            {currentQuestion && !sbxNaming && (
+              <>
+                {/* Save — overwrites when a sandbox is already active, otherwise shows naming flow */}
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={async () => {
+                    if (activeSandboxId) {
+                      await overwriteSandboxSnippet();
+                    } else {
+                      setSbxName("My Sandbox");
+                      setSbxNaming(true);
+                      setTimeout(() => sbxNameInputRef.current?.focus(), 30);
+                    }
+                  }}
+                  disabled={sbxSaving}
+                  className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium text-slate-400 hover:text-violet-300 hover:bg-violet-600/10 transition-colors shrink-0"
+                  title={
+                    activeSandboxId
+                      ? "Overwrite saved sandbox"
+                      : "Save both server and client code as a sandbox"
+                  }
+                >
+                  {sbxSaved ? (
+                    <>
+                      <Check className="w-3 h-3 text-violet-400" /> Saved
+                    </>
+                  ) : sbxSaving ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <>
+                      <Save className="w-3 h-3" /> Save
+                    </>
+                  )}
+                </button>
+                {/* Save As — always creates a new sandbox */}
+                {activeSandboxId && (
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={() => {
+                      setSbxName("My Sandbox");
+                      setSbxNaming(true);
+                      setTimeout(() => sbxNameInputRef.current?.focus(), 30);
+                    }}
+                    disabled={sbxSaving}
+                    className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium text-slate-400 hover:text-violet-300 hover:bg-violet-600/10 transition-colors shrink-0"
+                    title="Save as a new sandbox"
+                  >
+                    <Save className="w-3 h-3" /> Save As
+                  </button>
+                )}
+              </>
+            )}
+            {sbxNaming && (
+              <div
+                className="flex items-center gap-1 shrink-0"
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <input
+                  ref={sbxNameInputRef}
+                  value={sbxName}
+                  onChange={(e) => setSbxName(e.target.value)}
+                  onKeyDown={async (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      setSbxNaming(false);
+                      await saveSandboxSnippet(sbxName.trim());
+                    } else if (e.key === "Escape") {
+                      setSbxNaming(false);
+                    }
+                  }}
+                  placeholder="Sandbox name…"
+                  className="w-32 bg-slate-900 border border-violet-600/50 rounded px-2 py-0.5 text-[11px] text-slate-200 placeholder-slate-600 outline-none focus:border-violet-500"
+                />
+                <button
+                  type="button"
+                  onClick={async () => {
+                    setSbxNaming(false);
+                    await saveSandboxSnippet(sbxName.trim());
+                  }}
+                  className="p-0.5 rounded bg-violet-600/20 hover:bg-violet-600/40 text-violet-400 transition-colors"
+                  title="Confirm (Enter)"
+                >
+                  {sbxSaving ? (
+                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  ) : (
+                    <Check className="w-3.5 h-3.5" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setSbxNaming(false)}
+                  className="p-0.5 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors"
+                  title="Cancel (Esc)"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() =>
+                navigator.clipboard.writeText(
+                  sandboxOutput.map((l) => l.text).join("\n"),
+                )
+              }
+              className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+              title="Copy output"
+            >
+              <Copy className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() => setSandboxOutput([])}
+              className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+              title="Clear output"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </>
+        )}
+
+        <button
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={toggleMax}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+          title={maximized ? "Restore" : "Maximise"}
+        >
+          {maximized ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={closeCodeRunner}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+          title="Close (Esc)"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* ── Body ── */}
+      {mode === "script" ? (
+        <div className="flex flex-col flex-1 overflow-hidden">
+          {/* Editor pane */}
+          <div className="flex-1 min-h-0 relative">
+            <SyntaxEditor
+              value={code}
+              onChange={setCode}
+              onCtrlEnter={() => void runCode()}
+              language={lang}
+              autoFocus
+              fontSize="13px"
+              focusRingClass="ring-violet-500/40"
+              placeholder={`// TypeScript / JavaScript\n// Ctrl+Enter to run\n\nconst res = await fetch('https://jsonplaceholder.typicode.com/todos/1');\nconst data = await res.json();\nconsole.log(data);`}
+            />
+          </div>
+
+          {/* Divider */}
+          <div
+            className="h-px bg-slate-700 shrink-0"
+            onMouseDown={startResize("s")}
+          />
+
+          {/* Output pane */}
+          <div className="h-44 bg-slate-950 flex flex-col overflow-hidden shrink-0">
+            <div className="flex items-center gap-2 px-3 py-1 bg-slate-900 border-b border-slate-800 shrink-0">
+              <span className="text-[10px] uppercase tracking-wider text-slate-500 font-medium">
+                Output
+              </span>
+              {running && (
+                <Loader2 className="w-3 h-3 text-emerald-400 animate-spin ml-auto" />
+              )}
+              {!running && durationMs !== null && (
+                <span className="ml-auto flex items-center gap-1 text-[10px] text-slate-600">
+                  <Clock className="w-3 h-3" />
+                  {durationMs}ms{timedOut ? " · timed out" : ""}
+                </span>
+              )}
+            </div>
+            <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[12px] leading-relaxed">
+              {output.length === 0 && !running && (
+                <span className="text-slate-600">
+                  Press Run (Ctrl+Enter) to execute
+                </span>
+              )}
+              {output.map((line, i) => (
+                <div
+                  key={i}
+                  className={
+                    line.kind === "stderr"
+                      ? "text-red-400 whitespace-pre-wrap"
+                      : line.kind === "warn"
+                        ? "text-amber-400 whitespace-pre-wrap"
+                        : line.kind === "info"
+                          ? "text-slate-500 italic whitespace-pre-wrap"
+                          : "text-slate-200 whitespace-pre-wrap"
+                  }
+                >
+                  {line.text}
+                </div>
+              ))}
+              <div ref={outputEndRef} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* ── Sandbox mode ── */
+        <div className="flex flex-col flex-1 overflow-hidden">
+          {/* Two-pane editor row */}
+          <div
+            ref={sbxEditorRowRef}
+            className="flex flex-1 min-h-0 overflow-hidden"
+          >
+            {/* ── Server pane ── */}
+            {serverCollapsed ? (
+              /* Collapsed: slim vertical tab always visible so user can re-open */
+              <button
+                type="button"
+                onClick={() => setServerCollapsed(false)}
+                className="flex flex-col items-center justify-center w-7 shrink-0 bg-slate-800/60 border-r border-slate-700 text-slate-500 hover:text-emerald-400 hover:bg-slate-800 transition-colors gap-1.5 py-3"
+                title="Expand server"
+              >
+                <Server className="w-3 h-3" />
+                <span
+                  className="text-[8px] uppercase tracking-widest font-medium"
+                  style={{
+                    writingMode: "vertical-rl",
+                    transform: "rotate(180deg)",
+                  }}
+                >
+                  Server
+                </span>
+                <ChevronRight className="w-3 h-3" />
+              </button>
+            ) : (
+              <div
+                className="flex flex-col min-w-0 overflow-hidden"
+                style={
+                  clientCollapsed
+                    ? { flex: "1 1 0" }
+                    : { width: `${sbxSplit}%`, minWidth: 0 }
+                }
+              >
+                <div className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800/60 border-b border-slate-700 shrink-0">
+                  <Server className="w-3 h-3 text-emerald-500/70 shrink-0" />
+                  <span className="text-[10px] uppercase tracking-wider text-slate-500 font-medium flex-1">
+                    Server
+                  </span>
+                  {serverRunning && (
+                    <span className="flex items-center gap-1 text-[9px] font-mono text-emerald-400 shrink-0">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse inline-block" />
+                      :{sandboxPort}
+                    </span>
+                  )}
+                  <div className="flex items-center gap-0.5">
+                    {LANG_OPTIONS.map((l) => (
+                      <button
+                        key={l}
+                        type="button"
+                        onClick={() => setServerLang(l)}
+                        className={`px-1.5 py-0.5 rounded text-[9px] uppercase tracking-wider font-mono transition-colors ${
+                          serverLang === l
+                            ? "bg-violet-600/30 text-violet-300"
+                            : "text-slate-600 hover:text-slate-300"
+                        }`}
+                      >
+                        {l === "typescript" ? "TS" : "JS"}
+                      </button>
+                    ))}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (!clientCollapsed) setServerCollapsed((v) => !v);
+                    }}
+                    disabled={clientCollapsed}
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shrink-0"
+                    title="Collapse server"
+                  >
+                    <ChevronLeft className="w-3 h-3" />
+                  </button>
+                  {!serverRunning ? (
+                    <button
+                      type="button"
+                      onClick={() => void startServer()}
+                      disabled={serverStarting}
+                      className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-emerald-600/20 hover:bg-emerald-600/40 text-emerald-400 disabled:opacity-40 transition-colors shrink-0"
+                      title="Start server (Ctrl+Enter in editor)"
+                    >
+                      {serverStarting ? (
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                      ) : (
+                        <Play className="w-3 h-3" />
+                      )}
+                      Start
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => void stopServer()}
+                      className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-red-600/20 hover:bg-red-600/40 text-red-400 transition-colors shrink-0"
+                      title="Stop server"
+                    >
+                      <StopCircle className="w-3 h-3" />
+                      Stop
+                    </button>
+                  )}
+                </div>
+                <div className="flex-1 min-h-0 relative">
+                  <SyntaxEditor
+                    value={serverCode}
+                    onChange={setServerCode}
+                    onCtrlEnter={() => void startServer()}
+                    language={serverLang}
+                    fontSize="12px"
+                    focusRingClass="ring-emerald-500/30"
+                    placeholder={
+                      "import express from 'express';\n// process.env.PORT is auto-injected\n// Ctrl+Enter to start"
+                    }
+                  />
+                </div>
+              </div>
+            )}
+            {!serverCollapsed && !clientCollapsed && (
+              <div
+                className="w-1.5 bg-slate-700 hover:bg-violet-500/60 cursor-col-resize shrink-0 transition-colors"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  const containerW = sbxEditorRowRef.current?.offsetWidth ?? 1;
+                  sbxDividerDrag.current = {
+                    startX: e.clientX,
+                    startPct: sbxSplit,
+                    containerW,
+                  };
+                }}
+              />
+            )}
+
+            {/* ── Client pane ── */}
+            {clientCollapsed ? (
+              /* Collapsed: slim vertical tab always visible so user can re-open */
+              <button
+                type="button"
+                onClick={() => setClientCollapsed(false)}
+                className="flex flex-col items-center justify-center w-7 shrink-0 bg-slate-800/60 border-l border-slate-700 text-slate-500 hover:text-cyan-400 hover:bg-slate-800 transition-colors gap-1.5 py-3"
+                title="Expand client"
+              >
+                <Globe className="w-3 h-3" />
+                <span
+                  className="text-[8px] uppercase tracking-widest font-medium"
+                  style={{
+                    writingMode: "vertical-rl",
+                    transform: "rotate(180deg)",
+                  }}
+                >
+                  Client
+                </span>
+                <ChevronLeft className="w-3 h-3" />
+              </button>
+            ) : (
+              <div
+                className="flex flex-col min-w-0 overflow-hidden"
+                style={{ flex: "1 1 0" }}
+              >
+                {/* Client panel header */}
+                <div className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800/60 border-b border-slate-700 shrink-0">
+                  <Globe className="w-3 h-3 text-cyan-500/70 shrink-0" />
+                  <span className="text-[10px] uppercase tracking-wider text-slate-500 font-medium">
+                    Client
+                  </span>
+                  {/* Client type selector: JS / React / Next */}
+                  <div className="flex items-center rounded overflow-hidden border border-slate-700 text-[9px] ml-1 shrink-0">
+                    {(["script", "react", "nextjs"] as const).map((ct) => (
+                      <button
+                        key={ct}
+                        type="button"
+                        onClick={() => handleClientTypeChange(ct)}
+                        className={`px-1.5 py-0.5 transition-colors ${
+                          clientType === ct
+                            ? "bg-slate-600 text-slate-200"
+                            : "text-slate-500 hover:text-slate-400"
+                        }`}
+                      >
+                        {ct === "script"
+                          ? "JS"
+                          : ct === "react"
+                            ? "React"
+                            : "Next"}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="flex-1" />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (!serverCollapsed) setClientCollapsed((v) => !v);
+                    }}
+                    disabled={serverCollapsed}
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shrink-0"
+                    title="Collapse client"
+                  >
+                    <ChevronRight className="w-3 h-3" />
+                  </button>
+                  {/* Script mode: URL + lang toggle + Run */}
+                  {clientType === "script" && (
+                    <>
+                      {sandboxUrl && (
+                        <span
+                          className="text-[9px] font-mono text-slate-600 truncate max-w-[90px]"
+                          title={sandboxUrl}
+                        >
+                          {sandboxUrl}
+                        </span>
+                      )}
+                      <div className="flex items-center gap-0.5">
+                        {LANG_OPTIONS.map((l) => (
+                          <button
+                            key={l}
+                            type="button"
+                            onClick={() => setClientLang(l)}
+                            className={`px-1.5 py-0.5 rounded text-[9px] uppercase tracking-wider font-mono transition-colors ${
+                              clientLang === l
+                                ? "bg-violet-600/30 text-violet-300"
+                                : "text-slate-600 hover:text-slate-300"
+                            }`}
+                          >
+                            {l === "typescript" ? "TS" : "JS"}
+                          </button>
+                        ))}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => void runClient()}
+                        disabled={clientRunning || !serverRunning}
+                        className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 disabled:opacity-40 transition-colors shrink-0"
+                        title={
+                          serverRunning
+                            ? "Run client (Ctrl+Enter in editor)"
+                            : "Start the server first"
+                        }
+                      >
+                        {clientRunning ? (
+                          <Loader2 className="w-3 h-3 animate-spin" />
+                        ) : (
+                          <Play className="w-3 h-3" />
+                        )}
+                        Run
+                      </button>
+                    </>
+                  )}
+                  {/* React/Next mode: optional URL + Preview button + edit/preview toggle for Next */}
+                  {(clientType === "react" || clientType === "nextjs") && (
+                    <>
+                      {sandboxUrl && (
+                        <span
+                          className="text-[9px] font-mono text-slate-600 truncate max-w-[80px]"
+                          title={sandboxUrl}
+                        >
+                          {sandboxUrl}
+                        </span>
+                      )}
+                      {/* React mode: simple preview button */}
+                      {clientType === "react" && (
+                        <button
+                          type="button"
+                          onClick={refreshPreview}
+                          className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 transition-colors shrink-0"
+                          title="Render preview"
+                        >
+                          <Eye className="w-3 h-3" />
+                          Preview
+                        </button>
+                      )}
+                      {/* Next.js mode: start real server OR edit/preview toggle */}
+                      {clientType === "nextjs" && (
+                        <>
+                          {!nxSandboxUrl ? (
+                            <button
+                              type="button"
+                              onClick={() => void startNextjsServer()}
+                              disabled={nxStarting}
+                              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 disabled:opacity-50 transition-colors shrink-0"
+                              title="Start real Next.js dev server"
+                            >
+                              {nxStarting ? (
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                              ) : (
+                                <Play className="w-3 h-3" />
+                              )}
+                              {nxStarting ? "Starting…" : "Run Next.js"}
+                            </button>
+                          ) : (
+                            <div className="flex items-center rounded overflow-hidden border border-slate-700/50 text-[9px] shrink-0">
+                              <button
+                                type="button"
+                                onClick={() => setReactClientTab("edit")}
+                                className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                  reactClientTab === "edit"
+                                    ? "bg-slate-700 text-slate-200"
+                                    : "text-slate-500 hover:text-slate-400"
+                                }`}
+                                title="Edit code"
+                              >
+                                <Code2 className="w-2.5 h-2.5" />
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => setReactClientTab("preview")}
+                                className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                  reactClientTab === "preview"
+                                    ? "bg-slate-700 text-slate-200"
+                                    : "text-slate-500 hover:text-slate-400"
+                                }`}
+                                title="Live preview"
+                              >
+                                <Eye className="w-2.5 h-2.5" />
+                              </button>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {/* File tabs row (React only — Next.js uses the tree sidebar) */}
+                {clientType === "react" && (
+                  <div className="flex items-center gap-0.5 px-2 py-1 bg-slate-800/40 border-b border-slate-700 shrink-0 overflow-x-auto">
+                    {Object.keys(reactFiles).map((fname) => (
+                      <button
+                        key={fname}
+                        type="button"
+                        onClick={() => {
+                          setReactActiveFile(fname);
+                          setReactClientTab("edit");
+                        }}
+                        className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-mono whitespace-nowrap transition-colors ${
+                          fname === reactActiveFile && reactClientTab === "edit"
+                            ? "bg-slate-900 text-slate-200 border border-slate-600"
+                            : "text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
+                        }`}
+                      >
+                        {fname.includes("/") ? fname.split("/").pop() : fname}
+                        <span
+                          role="button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (Object.keys(reactFiles).length <= 1) return;
+                            const remaining = Object.keys(reactFiles).filter(
+                              (f) => f !== fname,
+                            );
+                            setReactFiles((prev) => {
+                              const next = { ...prev };
+                              delete next[fname];
+                              return next;
+                            });
+                            if (reactActiveFile === fname)
+                              setReactActiveFile(remaining[0] ?? "");
+                          }}
+                          className="w-3 h-3 flex items-center justify-center text-slate-600 hover:text-red-400 rounded transition-colors"
+                          title="Delete file"
+                        >
+                          <X className="w-2.5 h-2.5" />
+                        </span>
+                      </button>
+                    ))}
+                    {/* Add new file */}
+                    {reactAddingFile ? (
+                      <input
+                        autoFocus
+                        value={reactNewFileName}
+                        onChange={(e) => setReactNewFileName(e.target.value)}
+                        onBlur={() => {
+                          setReactAddingFile(false);
+                          setReactNewFileName("");
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            const name = reactNewFileName.trim();
+                            if (name && !reactFiles[name]) {
+                              setReactFiles((prev) => ({
+                                ...prev,
+                                [name]: newFileContent(name),
+                              }));
+                              setReactActiveFile(name);
+                              setReactClientTab("edit");
+                            }
+                            setReactAddingFile(false);
+                            setReactNewFileName("");
+                          } else if (e.key === "Escape") {
+                            setReactAddingFile(false);
+                            setReactNewFileName("");
+                          }
+                        }}
+                        placeholder="filename.tsx"
+                        className="w-28 bg-slate-900 border border-cyan-600/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
+                      />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => setReactAddingFile(true)}
+                        className="p-0.5 rounded text-slate-600 hover:text-cyan-400 transition-colors shrink-0"
+                        title="New file"
+                      >
+                        <FilePlus className="w-3 h-3" />
+                      </button>
+                    )}
+                    {/* Edit / Preview tab toggle */}
+                    <div className="ml-auto flex items-center rounded overflow-hidden border border-slate-700/50 text-[9px] shrink-0">
+                      <button
+                        type="button"
+                        onClick={() => setReactClientTab("edit")}
+                        className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                          reactClientTab === "edit"
+                            ? "bg-slate-700 text-slate-200"
+                            : "text-slate-500 hover:text-slate-400"
+                        }`}
+                        title="Edit code"
+                      >
+                        <Code2 className="w-2.5 h-2.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (!reactPreviewSrc) refreshPreview();
+                          else setReactClientTab("preview");
+                        }}
+                        className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                          reactClientTab === "preview"
+                            ? "bg-slate-700 text-slate-200"
+                            : "text-slate-500 hover:text-slate-400"
+                        }`}
+                        title="Live preview"
+                      >
+                        <Eye className="w-2.5 h-2.5" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Client body */}
+                <div
+                  className={`flex-1 min-h-0 ${clientType === "nextjs" ? "flex flex-row" : "relative"}`}
+                >
+                  {/* ── Next.js VS Code-style file tree sidebar ── */}
+                  {clientType === "nextjs" && (
+                    <div className="w-36 shrink-0 flex flex-col border-r border-slate-700 bg-slate-900/60 overflow-y-auto">
+                      {/* Sidebar header */}
+                      <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-700/60">
+                        <span className="text-[9px] uppercase tracking-widest text-slate-500 font-semibold select-none">
+                          Explorer
+                        </span>
+                        {/* Add file button */}
+                        {reactAddingFile ? (
+                          <input
+                            autoFocus
+                            value={reactNewFileName}
+                            onChange={(e) =>
+                              setReactNewFileName(e.target.value)
+                            }
+                            onBlur={() => {
+                              setReactAddingFile(false);
+                              setReactNewFileName("");
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                const name = reactNewFileName.trim();
+                                if (name && !reactFiles[name]) {
+                                  setReactFiles((prev) => ({
+                                    ...prev,
+                                    [name]: newFileContent(name),
+                                  }));
+                                  setReactActiveFile(name);
+                                  setReactClientTab("edit");
+                                }
+                                setReactAddingFile(false);
+                                setReactNewFileName("");
+                              } else if (e.key === "Escape") {
+                                setReactAddingFile(false);
+                                setReactNewFileName("");
+                              }
+                            }}
+                            placeholder="app/new.tsx"
+                            className="w-full bg-slate-800 border border-cyan-600/50 rounded px-1 py-0.5 text-[9px] font-mono text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
+                          />
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => setReactAddingFile(true)}
+                            className="p-0.5 rounded text-slate-600 hover:text-cyan-400 transition-colors"
+                            title="New file (use paths like app/dashboard/page.tsx)"
+                          >
+                            <FilePlus className="w-3 h-3" />
+                          </button>
+                        )}
+                      </div>
+                      {/* Tree nodes */}
+                      <div className="flex-1 py-1">
+                        {(() => {
+                          // Build a folder → file[] map, plus root-level files
+                          const allFiles = Object.keys(reactFiles).sort(
+                            (a, b) => {
+                              const ad = a.split("/").length;
+                              const bd = b.split("/").length;
+                              return ad !== bd ? ad - bd : a.localeCompare(b);
+                            },
+                          );
+                          // Collect unique top-level folders (first path segment for nested files)
+                          const folders = Array.from(
+                            new Set(
+                              allFiles
+                                .filter((f) => f.includes("/"))
+                                .map((f) => f.split("/")[0]),
+                            ),
+                          ).sort();
+                          const rootFiles = allFiles.filter(
+                            (f) => !f.includes("/"),
+                          );
+
+                          const fileIcon = (name: string) => {
+                            if (name.endsWith(".tsx") || name.endsWith(".jsx"))
+                              return (
+                                <span className="text-cyan-400 mr-1 text-[9px]">
+                                  ⚛
+                                </span>
+                              );
+                            if (name.endsWith(".ts") || name.endsWith(".js"))
+                              return (
+                                <span className="text-yellow-400 mr-1 text-[9px]">
+                                  JS
+                                </span>
+                              );
+                            return (
+                              <span className="text-slate-500 mr-1 text-[9px]">
+                                f
+                              </span>
+                            );
+                          };
+
+                          const renderFile = (path: string, indent = 0) => (
+                            <div key={path} className="group flex items-center">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setReactActiveFile(path);
+                                  setReactClientTab("edit");
+                                }}
+                                style={{ paddingLeft: `${8 + indent * 10}px` }}
+                                className={`flex-1 flex items-center gap-0.5 py-0.5 pr-1 text-left text-[10px] font-mono truncate transition-colors ${
+                                  path === reactActiveFile &&
+                                  reactClientTab === "edit"
+                                    ? "bg-slate-700 text-slate-100"
+                                    : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                                }`}
+                                title={path}
+                              >
+                                {fileIcon(path.split("/").pop() ?? path)}
+                                <span className="truncate">
+                                  {path.split("/").pop()}
+                                </span>
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  if (Object.keys(reactFiles).length <= 1)
+                                    return;
+                                  const remaining = Object.keys(
+                                    reactFiles,
+                                  ).filter((f) => f !== path);
+                                  setReactFiles((prev) => {
+                                    const next = { ...prev };
+                                    delete next[path];
+                                    return next;
+                                  });
+                                  if (reactActiveFile === path)
+                                    setReactActiveFile(remaining[0] ?? "");
+                                }}
+                                className="opacity-0 group-hover:opacity-100 p-0.5 mr-1 rounded text-slate-600 hover:text-red-400 transition-all shrink-0"
+                                title="Delete file"
+                              >
+                                <X className="w-2.5 h-2.5" />
+                              </button>
+                            </div>
+                          );
+
+                          const renderFolder = (folder: string) => {
+                            const isOpen = !collapsedFolders.has(folder);
+                            const children = allFiles.filter((f) => {
+                              const parts = f.split("/");
+                              return parts[0] === folder && parts.length >= 2;
+                            });
+                            // Build sub-folder groups within this folder
+                            const subFolders = Array.from(
+                              new Set(
+                                children
+                                  .filter((f) => f.split("/").length > 2)
+                                  .map((f) =>
+                                    f.split("/").slice(0, 2).join("/"),
+                                  ),
+                              ),
+                            ).sort();
+                            const directFiles = children.filter(
+                              (f) => f.split("/").length === 2,
+                            );
+
+                            return (
+                              <div key={folder}>
+                                {/* Folder row */}
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    setCollapsedFolders((prev) => {
+                                      const next = new Set(prev);
+                                      if (next.has(folder)) next.delete(folder);
+                                      else next.add(folder);
+                                      return next;
+                                    })
+                                  }
+                                  className="w-full flex items-center gap-0.5 px-2 py-0.5 text-left text-[10px] font-mono text-slate-300 hover:bg-slate-800 transition-colors select-none"
+                                >
+                                  {isOpen ? (
+                                    <ChevronDown className="w-2.5 h-2.5 shrink-0 text-slate-500" />
+                                  ) : (
+                                    <ChevronRight className="w-2.5 h-2.5 shrink-0 text-slate-500" />
+                                  )}
+                                  <span className="text-yellow-300/80 mr-0.5">
+                                    📁
+                                  </span>
+                                  <span className="truncate">{folder}/</span>
+                                </button>
+                                {/* Children */}
+                                {isOpen && (
+                                  <div>
+                                    {subFolders.map((sf) => {
+                                      const sfIsOpen =
+                                        !collapsedFolders.has(sf);
+                                      const sfChildren = allFiles.filter(
+                                        (f) =>
+                                          f.startsWith(sf + "/") &&
+                                          f.split("/").length ===
+                                            sf.split("/").length + 1,
+                                      );
+                                      const sfKey = sf.split("/").pop() ?? sf;
+                                      return (
+                                        <div key={sf}>
+                                          <button
+                                            type="button"
+                                            onClick={() =>
+                                              setCollapsedFolders((prev) => {
+                                                const next = new Set(prev);
+                                                if (next.has(sf))
+                                                  next.delete(sf);
+                                                else next.add(sf);
+                                                return next;
+                                              })
+                                            }
+                                            className="w-full flex items-center gap-0.5 pl-[18px] pr-2 py-0.5 text-left text-[10px] font-mono text-slate-300 hover:bg-slate-800 transition-colors select-none"
+                                          >
+                                            {sfIsOpen ? (
+                                              <ChevronDown className="w-2.5 h-2.5 shrink-0 text-slate-500" />
+                                            ) : (
+                                              <ChevronRight className="w-2.5 h-2.5 shrink-0 text-slate-500" />
+                                            )}
+                                            <span className="text-yellow-300/80 mr-0.5">
+                                              📁
+                                            </span>
+                                            <span className="truncate">
+                                              {sfKey}/
+                                            </span>
+                                          </button>
+                                          {sfIsOpen &&
+                                            sfChildren.map((f) =>
+                                              renderFile(f, 3),
+                                            )}
+                                        </div>
+                                      );
+                                    })}
+                                    {directFiles.map((f) => renderFile(f, 1))}
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          };
+
+                          return (
+                            <>
+                              {folders.map(renderFolder)}
+                              {rootFiles.map((f) => renderFile(f, 0))}
+                            </>
+                          );
+                        })()}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* ── Editor / Preview area ── */}
+                  <div
+                    className={`${clientType === "nextjs" ? "flex-1 min-w-0 relative" : "absolute inset-0"}`}
+                  >
+                    {clientType === "script" ? (
+                      <SyntaxEditor
+                        value={clientCode}
+                        onChange={setClientCode}
+                        onCtrlEnter={() => {
+                          if (serverRunning) void runClient();
+                        }}
+                        language={clientLang}
+                        fontSize="12px"
+                        focusRingClass="ring-cyan-500/30"
+                        placeholder={
+                          "// SANDBOX_URL is injected automatically\n// Start the server first, then Ctrl+Enter to run"
+                        }
+                      />
+                    ) : reactClientTab === "edit" ? (
+                      <SyntaxEditor
+                        key={reactActiveFile}
+                        value={reactFiles[reactActiveFile] ?? ""}
+                        onChange={(val) =>
+                          setReactFiles((prev) => ({
+                            ...prev,
+                            [reactActiveFile]: val,
+                          }))
+                        }
+                        language={
+                          reactActiveFile.endsWith(".ts") ||
+                          reactActiveFile.endsWith(".tsx")
+                            ? "typescript"
+                            : "javascript"
+                        }
+                        fontSize="12px"
+                        focusRingClass="ring-cyan-500/30"
+                        placeholder={`// ${reactActiveFile}\n`}
+                      />
+                    ) : (
+                      // Preview area — URL bar for Next.js, plain iframe for React
+                      <div className="w-full h-full flex flex-col">
+                        {clientType === "nextjs" && (
+                          <div className="flex items-center gap-1 px-2 py-1 bg-slate-800 border-b border-slate-700 shrink-0">
+                            {/* Back */}
+                            <button
+                              type="button"
+                              disabled={reactNavIndex <= 0}
+                              onClick={() => {
+                                const idx = reactNavIndex - 1;
+                                const path = reactNavHistory[idx] ?? "/";
+                                setReactNavIndex(idx);
+                                setReactPreviewPath(path);
+                                setReactNavInput(path);
+                                if (nxSandboxUrl) {
+                                  if (nxIframeRef.current)
+                                    nxIframeRef.current.src =
+                                      nxSandboxUrl + path;
+                                } else {
+                                  refreshPreview(path);
+                                }
+                              }}
+                              className="p-0.5 rounded text-slate-500 hover:text-slate-200 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shrink-0"
+                              title="Back"
+                            >
+                              <ChevronLeft className="w-3.5 h-3.5" />
+                            </button>
+                            {/* Forward */}
+                            <button
+                              type="button"
+                              disabled={
+                                reactNavIndex >= reactNavHistory.length - 1
+                              }
+                              onClick={() => {
+                                const idx = reactNavIndex + 1;
+                                const path = reactNavHistory[idx] ?? "/";
+                                setReactNavIndex(idx);
+                                setReactPreviewPath(path);
+                                setReactNavInput(path);
+                                if (nxSandboxUrl) {
+                                  if (nxIframeRef.current)
+                                    nxIframeRef.current.src =
+                                      nxSandboxUrl + path;
+                                } else {
+                                  refreshPreview(path);
+                                }
+                              }}
+                              className="p-0.5 rounded text-slate-500 hover:text-slate-200 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shrink-0"
+                              title="Forward"
+                            >
+                              <ChevronRight className="w-3.5 h-3.5" />
+                            </button>
+                            {/* Refresh */}
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (nxSandboxUrl && nxIframeRef.current) {
+                                  nxIframeRef.current.src =
+                                    nxIframeRef.current.src;
+                                } else {
+                                  refreshPreview();
+                                }
+                              }}
+                              className="p-0.5 rounded text-slate-500 hover:text-slate-200 transition-colors shrink-0"
+                              title="Refresh"
+                            >
+                              <svg
+                                className="w-3 h-3"
+                                viewBox="0 0 16 16"
+                                fill="currentColor"
+                              >
+                                <path d="M13.65 2.35A8 8 0 1 0 15 8h-2a6 6 0 1 1-1.1-3.48L10 6h5V1l-1.35 1.35z" />
+                              </svg>
+                            </button>
+                            {/* URL bar */}
+                            <form
+                              className="flex-1 flex items-center gap-1 bg-slate-900 border border-slate-600 rounded px-2 py-0.5 focus-within:border-blue-500/60 transition-colors"
+                              onSubmit={(e) => {
+                                e.preventDefault();
+                                const path = reactNavInput.startsWith("/")
+                                  ? reactNavInput
+                                  : "/" + reactNavInput;
+                                setReactPreviewPath(path);
+                                setReactNavHistory((prev) => [
+                                  ...prev.slice(0, reactNavIndex + 1),
+                                  path,
+                                ]);
+                                setReactNavIndex((i) => i + 1);
+                                if (nxSandboxUrl) {
+                                  if (nxIframeRef.current)
+                                    nxIframeRef.current.src =
+                                      nxSandboxUrl + path;
+                                } else {
+                                  navigatePreview(path);
+                                }
+                              }}
+                            >
+                              <span className="text-slate-600 text-[9px] font-mono select-none shrink-0">
+                                {nxSandboxUrl
+                                  ? `localhost:${nxSandboxUrl.split(":").pop()}`
+                                  : "localhost:3000"}
+                              </span>
+                              <input
+                                value={reactNavInput}
+                                onChange={(e) =>
+                                  setReactNavInput(e.target.value)
+                                }
+                                onFocus={(e) => e.target.select()}
+                                className="flex-1 bg-transparent text-[11px] font-mono text-slate-200 outline-none placeholder-slate-600 min-w-0"
+                                placeholder="/"
+                                spellCheck={false}
+                              />
+                            </form>
+                            {/* Status indicator */}
+                            {nxSandboxUrl ? (
+                              <span className="text-[9px] font-mono text-green-400 shrink-0">
+                                ● live
+                              </span>
+                            ) : (
+                              (() => {
+                                const resolved = resolveNextjsEntry(
+                                  reactFiles,
+                                  reactPreviewPath,
+                                );
+                                return resolved ? (
+                                  <span
+                                    className="text-[9px] font-mono text-slate-600 truncate max-w-[100px] shrink-0"
+                                    title={resolved}
+                                  >
+                                    → {resolved}
+                                  </span>
+                                ) : (
+                                  <span className="text-[9px] font-mono text-red-400 shrink-0">
+                                    404
+                                  </span>
+                                );
+                              })()
+                            )}
+                          </div>
+                        )}
+                        {/* Error banner */}
+                        {nxError && (
+                          <div className="text-[10px] text-red-400 bg-red-950/40 border-b border-red-800 px-3 py-1.5 shrink-0 font-mono">
+                            {nxError}
+                          </div>
+                        )}
+                        {/* Starting overlay */}
+                        {nxStarting && (
+                          <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-400 text-sm bg-slate-950">
+                            <Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
+                            <p className="text-[12px]">
+                              Starting Next.js dev server…
+                            </p>
+                            <p className="text-[10px] text-slate-600">
+                              This takes ~10 seconds on the first run
+                            </p>
+                          </div>
+                        )}
+                        {/* Real Next.js iframe */}
+                        {!nxStarting && nxSandboxUrl && (
+                          <iframe
+                            ref={nxIframeRef}
+                            src={nxSandboxUrl + reactPreviewPath}
+                            className="flex-1 min-h-0 w-full border-0 bg-white"
+                            title="Next.js Preview"
+                            onLoad={() => {
+                              // Try to read the iframe path (may be blocked cross-origin)
+                              try {
+                                const p =
+                                  nxIframeRef.current?.contentWindow?.location
+                                    .pathname;
+                                if (p) {
+                                  setReactPreviewPath(p);
+                                  setReactNavInput(p);
+                                }
+                              } catch {
+                                // cross-origin — ignore
+                              }
+                            }}
+                          />
+                        )}
+                        {/* Simulation iframe (when no real server) */}
+                        {!nxStarting && !nxSandboxUrl && (
+                          <iframe
+                            srcDoc={reactPreviewSrc ?? ""}
+                            sandbox="allow-scripts"
+                            className="flex-1 min-h-0 w-full border-0 bg-white"
+                            title="React Preview"
+                          />
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Horizontal resizer (output) */}
+          <div
+            className="h-1.5 bg-slate-700 hover:bg-violet-500/60 cursor-row-resize shrink-0 transition-colors"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              sbxOutputDrag.current = {
+                startY: e.clientY,
+                startH: outputCollapsed ? 0 : sbxOutputH,
+              };
+              if (outputCollapsed) setOutputCollapsed(false);
+            }}
+          />
+
+          {/* Sandbox output pane */}
+          <div
+            className="bg-slate-950 flex flex-col overflow-hidden shrink-0 transition-[height]"
+            style={{ height: outputCollapsed ? 0 : sbxOutputH }}
+          >
+            {/* Tab bar */}
+            <div className="flex items-center gap-0 px-1 bg-slate-900 border-b border-slate-800 shrink-0">
+              <button
+                type="button"
+                onClick={() => setSbxBottomTab("output")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-[10px] uppercase tracking-wider font-medium border-b-2 transition-colors ${
+                  sbxBottomTab === "output"
+                    ? "border-emerald-500 text-emerald-300"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                {(serverStarting || clientRunning) &&
+                sbxBottomTab !== "output" ? (
+                  <Loader2 className="w-3 h-3 animate-spin" />
+                ) : null}
+                Output
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setSbxBottomTab("chat");
+                  setTimeout(() => sbxChatInputRef.current?.focus(), 30);
+                }}
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-[10px] uppercase tracking-wider font-medium border-b-2 transition-colors ${
+                  sbxBottomTab === "chat"
+                    ? "border-violet-500 text-violet-300"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                <MessageSquare className="w-3 h-3" />
+                Chat
+              </button>
+              <div className="flex-1" />
+              {sbxBottomTab === "output" &&
+                (serverStarting || clientRunning) && (
+                  <Loader2 className="w-3 h-3 text-emerald-400 animate-spin mr-1" />
+                )}
+              {sbxBottomTab === "output" && sandboxOutput.length > 0 && (
+                <div className="flex items-center gap-1 mr-1">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      navigator.clipboard.writeText(
+                        sandboxOutput.map((l) => l.text).join("\n"),
+                      )
+                    }
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Copy output"
+                  >
+                    <Copy className="w-3 h-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSandboxOutput([])}
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Clear output"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              )}
+              {sbxBottomTab === "chat" && sbxChatMessages.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setSbxChatMessages([])}
+                  className="mr-2 text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                >
+                  clear
+                </button>
+              )}
+              <button
+                type="button"
+                className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors mr-1"
+                onClick={() => setOutputCollapsed((v) => !v)}
+                title={outputCollapsed ? "Expand" : "Collapse"}
+              >
+                {outputCollapsed ? (
+                  <ChevronUp className="w-3 h-3" />
+                ) : (
+                  <ChevronDown className="w-3 h-3" />
+                )}
+              </button>
+            </div>
+
+            {/* Output tab */}
+            {sbxBottomTab === "output" && (
+              <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[12px] leading-relaxed">
+                {sandboxOutput.length === 0 &&
+                  !serverStarting &&
+                  !clientRunning && (
+                    <span className="text-slate-600">
+                      Start the server, then run the client
+                    </span>
+                  )}
+                {sandboxOutput.map((line, i) => (
+                  <div key={i} className="flex items-start gap-2">
+                    <span
+                      className={`shrink-0 text-[9px] font-bold mt-0.5 w-7 text-right ${
+                        line.source === "server"
+                          ? "text-emerald-600"
+                          : line.source === "client"
+                            ? "text-cyan-600"
+                            : "text-slate-700"
+                      }`}
+                    >
+                      {line.source === "server"
+                        ? "srv"
+                        : line.source === "client"
+                          ? "cli"
+                          : "···"}
+                    </span>
+                    <span
+                      className={
+                        line.kind === "stderr"
+                          ? "text-red-400 whitespace-pre-wrap"
+                          : line.kind === "warn"
+                            ? "text-amber-400 whitespace-pre-wrap"
+                            : line.kind === "info"
+                              ? "text-slate-500 italic whitespace-pre-wrap"
+                              : "text-slate-200 whitespace-pre-wrap"
+                      }
+                    >
+                      {line.text}
+                    </span>
+                  </div>
+                ))}
+                <div ref={outputEndRef} />
+              </div>
+            )}
+
+            {/* Chat tab */}
+            {sbxBottomTab === "chat" && (
+              <>
+                <div
+                  ref={sbxChatScrollRef}
+                  className="flex-1 overflow-y-auto px-3 py-2 space-y-3"
+                >
+                  {sbxChatMessages.length === 0 && (
+                    <p className="text-xs text-slate-600 pt-1">
+                      Ask anything about your code —{" "}
+                      {clientType === "react" || clientType === "nextjs" ? (
+                        <span className="text-slate-500">
+                          "Why does my useEffect run twice?"
+                        </span>
+                      ) : (
+                        <span className="text-slate-500">
+                          "Why is fetch failing?"
+                        </span>
+                      )}
+                    </p>
+                  )}
+                  {sbxChatMessages.map((msg) => (
+                    <div
+                      key={msg.id}
+                      className={`flex flex-col gap-0.5 ${msg.role === "user" ? "items-end" : "items-start"}`}
+                    >
+                      <div
+                        className={`max-w-[85%] rounded-xl px-3 py-2 text-xs leading-5 ${
+                          msg.role === "user"
+                            ? "bg-violet-600/30 text-violet-100 whitespace-pre-wrap"
+                            : "bg-slate-800 text-slate-200 prose prose-invert prose-xs max-w-none"
+                        }`}
+                      >
+                        {msg.role === "user" ? (
+                          msg.content
+                        ) : msg.content ? (
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                              code({ className, children, ...props }) {
+                                const isBlock =
+                                  className?.startsWith("language-");
+                                return isBlock ? (
+                                  <pre className="bg-slate-900/80 rounded p-2 overflow-x-auto my-1">
+                                    <code
+                                      className={`${className ?? ""} text-[11px]`}
+                                      {...props}
+                                    >
+                                      {children}
+                                    </code>
+                                  </pre>
+                                ) : (
+                                  <code
+                                    className="bg-slate-900/60 px-1 rounded text-violet-300 text-[11px]"
+                                    {...props}
+                                  >
+                                    {children}
+                                  </code>
+                                );
+                              },
+                              p({ children }) {
+                                return (
+                                  <p className="mb-1 last:mb-0">{children}</p>
+                                );
+                              },
+                              ul({ children }) {
+                                return (
+                                  <ul className="list-disc list-inside mb-1 space-y-0.5">
+                                    {children}
+                                  </ul>
+                                );
+                              },
+                              ol({ children }) {
+                                return (
+                                  <ol className="list-decimal list-inside mb-1 space-y-0.5">
+                                    {children}
+                                  </ol>
+                                );
+                              },
+                              h2({ children }) {
+                                return (
+                                  <h2 className="text-xs font-semibold text-slate-200 mt-2 mb-0.5">
+                                    {children}
+                                  </h2>
+                                );
+                              },
+                              h3({ children }) {
+                                return (
+                                  <h3 className="text-xs font-semibold text-slate-300 mt-1.5 mb-0.5">
+                                    {children}
+                                  </h3>
+                                );
+                              },
+                            }}
+                          >
+                            {msg.content}
+                          </ReactMarkdown>
+                        ) : (
+                          <span className="flex items-center gap-1.5 text-slate-500">
+                            <Loader2 className="w-3 h-3 animate-spin" />{" "}
+                            thinking…
+                          </span>
+                        )}
+                      </div>
+                      {msg.role === "assistant" && msg.content && (
+                        <button
+                          onClick={() => {
+                            void navigator.clipboard
+                              .writeText(msg.content)
+                              .then(() => {
+                                setSbxChatCopiedId(msg.id);
+                                setTimeout(
+                                  () => setSbxChatCopiedId(null),
+                                  1800,
+                                );
+                              });
+                          }}
+                          className="flex items-center gap-1 text-[10px] text-slate-700 hover:text-slate-400 transition-colors px-1"
+                          title="Copy response"
+                        >
+                          {sbxChatCopiedId === msg.id ? (
+                            <>
+                              <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                              <span className="text-emerald-400">Copied</span>
+                            </>
+                          ) : (
+                            <>
+                              <Clipboard className="w-3 h-3" />
+                              <span>Copy</span>
+                            </>
+                          )}
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-end gap-1.5 px-3 py-2 border-t border-slate-800 bg-slate-900/60 shrink-0">
+                  <textarea
+                    ref={sbxChatInputRef}
+                    rows={1}
+                    value={sbxChatInput}
+                    onChange={(e) => setSbxChatInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        void handleSbxChatSend();
+                      }
+                    }}
+                    placeholder={`Ask about your ${clientType === "react" ? "React" : clientType === "nextjs" ? "Next.js" : "sandbox"} code…`}
+                    disabled={sbxChatLoading}
+                    className="flex-1 bg-transparent text-xs text-slate-200 placeholder-slate-600 outline-none resize-none disabled:opacity-50 max-h-20"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => void handleSbxChatSend()}
+                    disabled={sbxChatLoading || !sbxChatInput.trim()}
+                    className="p-1 rounded text-slate-600 hover:text-violet-400 hover:bg-violet-500/10 disabled:opacity-40 transition-colors shrink-0"
+                    title="Send (Enter)"
+                  >
+                    {sbxChatLoading ? (
+                      <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    ) : (
+                      <Send className="w-3.5 h-3.5" />
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}