create-interview-cockpit 0.5.0 → 0.6.0

package/template/server/src/index.ts

@@ -30,6 +30,12 @@ import net from "net";
 import ts from "typescript";
 import * as storage from "./storage.js";
 import * as googleDrive from "./google-drive.js";
+import {
+  getInfraRun,
+  listInfraRuns,
+  runInfraAction,
+  streamInfraCommand,
+} from "./infra-runner.js";
 
 const app = express();
 app.use(cors());
@@ -38,14 +44,14 @@ app.use(express.json({ limit: "25mb" }));
 const upload = multer({
   limits: { fileSize: 20 * 1024 * 1024 }, // 20MB max
   fileFilter: (_req, file, cb) => {
-    const allowedExt =
-      /\.(txt|md|ts|tsx|js|jsx|json|css|scss|html|xml|yaml|yml|csv|py|java|cs|go|rs|sql|sh|env|cfg|conf|toml|ini|log|pdf|docx|png|jpg|jpeg|gif|webp|svg)$/i;
-    const allowedMime =
-      file.mimetype.startsWith("text/") || file.mimetype.startsWith("image/");
-    if (allowedExt.test(file.originalname) || allowedMime) {
-      cb(null, true);
+    // Block only clearly non-text binary formats (executables, archives, etc.)
+    const blockedExt =
+      /\.(exe|dll|so|dylib|bin|zip|tar|gz|bz2|rar|7z|dmg|iso|mp3|mp4|avi|mov|wmv|flac|wav|class|pyc|wasm)$/i;
+    if (blockedExt.test(file.originalname)) {
+      cb(new Error(`Unsupported file type: ${file.originalname}`));
     } else {
-      cb(new Error("Unsupported file type"));
+      // Accept everything else — extractText handles unknown extensions gracefully
+      cb(null, true);
     }
   },
 });
@@ -226,12 +232,24 @@ app.post("/api/workspaces/:id/drive-subfolders", async (req, res) => {
   const { name } = req.body as { name?: string };
   if (!name?.trim()) return res.status(400).json({ error: "name required" });
   try {
+    if (!(await googleDrive.isExportAuthed())) {
+      return res.json({
+        needsAuth: true,
+        authUrl: googleDrive.getExportAuthUrl(),
+      });
+    }
     const folder = await googleDrive.createDriveSubfolder(
       req.params.id,
       name.trim(),
     );
     res.json(folder);
   } catch (err: any) {
+    if (err?.needsReauth) {
+      return res.json({
+        needsAuth: true,
+        authUrl: googleDrive.getExportAuthUrl(),
+      });
+    }
     res.status(500).json({ error: err?.message || "Failed to create folder" });
   }
 });
@@ -363,6 +381,8 @@ app.patch("/api/topics/:id", async (req, res) => {
   const topic = topics.find((t) => t.id === req.params.id);
   if (!topic) return res.status(404).json({ error: "Not found" });
   if (typeof req.body.name === "string") topic.name = req.body.name;
+  if (typeof req.body.systemContext === "string")
+    topic.systemContext = req.body.systemContext;
   await storage.saveTopic(topic);
   res.json(topic);
 });
@@ -374,33 +394,29 @@ app.get("/api/workspace/context-files", async (_req, res) => {
   res.json(files);
 });
 
-app.post(
-  "/api/workspace/context-files",
-  upload.array("files", 20),
-  async (req, res) => {
-    try {
-      const files = req.files as Express.Multer.File[];
-      if (!files?.length) return res.status(400).json({ error: "No files" });
-      const results: storage.ContextFile[] = [];
-      for (const file of files) {
-        const id = randomUUID();
-        const text = await extractText(file.buffer, file.originalname);
-        // Store original bytes for download; extracted text for the LLM
-        await storage.writeOriginalBlob(id, file.buffer);
-        const cf = await storage.saveWorkspaceContextFile(
-          id,
-          file.originalname,
-          Buffer.from(text, "utf-8"),
-        );
-        results.push(cf);
-      }
-      res.json(results);
-    } catch (err: any) {
-      console.error("workspace upload error:", err?.message || err);
-      res.status(500).json({ error: err?.message || "Upload failed" });
+app.post("/api/workspace/context-files", upload.any(), async (req, res) => {
+  try {
+    const files = req.files as Express.Multer.File[];
+    if (!files?.length) return res.status(400).json({ error: "No files" });
+    const results: storage.ContextFile[] = [];
+    for (const file of files) {
+      const id = randomUUID();
+      const text = await extractText(file.buffer, file.originalname);
+      // Store original bytes for download; extracted text for the LLM
+      await storage.writeOriginalBlob(id, file.buffer);
+      const cf = await storage.saveWorkspaceContextFile(
+        id,
+        file.originalname,
+        Buffer.from(text, "utf-8"),
+      );
+      results.push(cf);
     }
-  },
-);
+    res.json(results);
+  } catch (err: any) {
+    console.error("workspace upload error:", err?.message || err);
+    res.status(500).json({ error: err?.message || "Upload failed" });
+  }
+});
 
 app.delete("/api/workspace/context-files/:fileId", async (req, res) => {
   await storage.deleteWorkspaceContextFile(req.params.fileId);
@@ -440,7 +456,7 @@ app.get("/api/workspace/context-files/:fileId/download", async (req, res) => {
 
 app.post(
   "/api/topics/:topicId/context-files",
-  upload.array("files", 20),
+  upload.any(),
   async (req, res) => {
     try {
       const files = req.files as Express.Multer.File[];
@@ -538,12 +554,45 @@ app.patch("/api/questions/:id", async (req, res) => {
   if (req.body.systemContext !== undefined)
     q.systemContext = req.body.systemContext;
   if (req.body.title !== undefined) q.title = req.body.title;
-  if (req.body.parentQuestionId !== undefined)
-    q.parentQuestionId = req.body.parentQuestionId;
+  if (req.body.parentQuestionId !== undefined) {
+    const nextParentId = req.body.parentQuestionId as string | null;
+    if (nextParentId === q.id) {
+      return res.status(400).json({ error: "A question cannot parent itself" });
+    }
+    if (nextParentId != null) {
+      const allInTopic = await storage.getQuestionsByTopic(q.topicId);
+      const parentExists = allInTopic.some(
+        (candidate) => candidate.id === nextParentId,
+      );
+      if (!parentExists) {
+        return res
+          .status(400)
+          .json({ error: "Selected parent question was not found" });
+      }
+      const descendantIds = new Set<string>();
+      const visit = (parentId: string) => {
+        for (const candidate of allInTopic) {
+          if (candidate.parentQuestionId !== parentId) continue;
+          if (descendantIds.has(candidate.id)) continue;
+          descendantIds.add(candidate.id);
+          visit(candidate.id);
+        }
+      };
+      visit(q.id);
+      if (descendantIds.has(nextParentId)) {
+        return res.status(400).json({
+          error: "A question cannot be moved under one of its descendants",
+        });
+      }
+    }
+    q.parentQuestionId = nextParentId ?? undefined;
+  }
   if (req.body.messages !== undefined) q.messages = req.body.messages;
   if (req.body.annotations !== undefined) q.annotations = req.body.annotations;
   if (req.body.readingBookmark !== undefined)
     q.readingBookmark = req.body.readingBookmark;
+  if (req.body.linkedConversationIds !== undefined)
+    q.linkedConversationIds = req.body.linkedConversationIds;
   await storage.saveQuestion(q);
   res.json(q);
 });
@@ -598,7 +647,7 @@ app.patch("/api/questions/:id/code-annotations", async (req, res) => {
 
 app.post(
   "/api/questions/:questionId/context-files",
-  upload.array("files", 20),
+  upload.any(),
   async (req, res) => {
     try {
       const files = req.files as Express.Multer.File[];
@@ -641,15 +690,23 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
     code: string;
     language: string;
     label: string;
-    origin: "user" | "ai" | "sandbox";
+    origin: "user" | "ai" | "sandbox" | "infra" | "react" | "nextjs";
   };
   if (typeof code !== "string" || !code.trim()) {
     return res.status(400).json({ error: "code is required" });
   }
-  if (origin !== "user" && origin !== "ai" && origin !== "sandbox") {
-    return res
-      .status(400)
-      .json({ error: "origin must be 'user', 'ai', or 'sandbox'" });
+  if (
+    origin !== "user" &&
+    origin !== "ai" &&
+    origin !== "sandbox" &&
+    origin !== "infra" &&
+    origin !== "react" &&
+    origin !== "nextjs"
+  ) {
+    return res.status(400).json({
+      error:
+        "origin must be 'user', 'ai', 'sandbox', 'infra', 'react', or 'nextjs'",
+    });
   }
   try {
     const id = randomUUID();
@@ -659,7 +716,9 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
         ? "ts"
         : language === "javascript"
           ? "js"
-          : "txt";
+          : language === "infra"
+            ? "infra.json"
+            : "txt";
     const fileName = `${safeLabel}.${ext}`;
     const cf = await storage.saveQuestionContextFile(
       req.params.questionId,
@@ -784,6 +843,288 @@ app.get("/api/context-files/all", async (_req, res) => {
   res.json(deduped);
 });
 
+app.post("/api/infra/run", async (req, res) => {
+  const { questionId, fileId, label, action, workspace } = req.body as {
+    questionId?: string;
+    fileId?: string;
+    label?: string;
+    action?: "validate" | "plan";
+    workspace?: unknown;
+  };
+
+  if (action !== "validate" && action !== "plan") {
+    return res
+      .status(400)
+      .json({ error: "action must be 'validate' or 'plan'" });
+  }
+
+  try {
+    const run = await runInfraAction({
+      questionId,
+      fileId,
+      label,
+      action,
+      workspace,
+    });
+    res.json(run);
+  } catch (err: any) {
+    res
+      .status(400)
+      .json({ error: err?.message || "Failed to run infra action" });
+  }
+});
+
+// ─── Infra Lab AI Ask (streaming) ───────────────────────────────────────────
+app.post("/api/infra/ask", async (req, res) => {
+  const { messages, workspace, questionId } = req.body as {
+    messages?: Array<{ role: "user" | "assistant"; content: string }>;
+    workspace?: Record<string, string>; // { "main.tf": "..." }
+    questionId?: string;
+  };
+
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return res.status(400).json({ error: "messages is required" });
+  }
+
+  const isGoogle = ["google", "gemini"].includes(
+    (process.env.AI_PROVIDER || "openai").toLowerCase(),
+  );
+  const aiSettings = await storage.getAiSettings();
+
+  // Build workspace context block
+  let workspaceBlock = "";
+  if (workspace && typeof workspace === "object") {
+    const entries = Object.entries(workspace).filter(
+      ([k, v]) => typeof k === "string" && typeof v === "string",
+    );
+    if (entries.length > 0) {
+      workspaceBlock = "\n\n--- Workspace Files ---\n";
+      for (const [name, content] of entries) {
+        workspaceBlock += `\n### ${name}\n\`\`\`hcl\n${content}\n\`\`\`\n`;
+      }
+    }
+  }
+
+  const system =
+    `You are a senior infrastructure engineer and Terraform expert acting as a coding assistant inside an Infrastructure Lab.\n` +
+    `The user is editing a Terraform workspace. Answer questions about their code clearly and accurately.\n` +
+    `When suggesting edits, show the changed HCL as a fenced \`\`\`hcl code block.\n` +
+    `Be concise unless the user asks for a deeper explanation.` +
+    workspaceBlock;
+
+  try {
+    const result = streamText({
+      model: getModel(),
+      maxOutputTokens: 2000,
+      ...(isGoogle && {
+        providerOptions: {
+          google: {
+            thinkingConfig: { thinkingBudget: aiSettings.thinkingBudget ?? 0 },
+          },
+        },
+      }),
+      system,
+      messages: messages.map((m) => ({ role: m.role, content: m.content })),
+    });
+
+    result.pipeUIMessageStreamToResponse(res);
+  } catch (err: any) {
+    console.error("infra/ask error:", err?.message || err);
+    if (!res.headersSent) {
+      res
+        .status(500)
+        .json({ error: err?.message || "Failed to generate response" });
+    }
+  }
+});
+
+app.post("/api/notes/ask", async (req, res) => {
+  const { messages, noteContent, noteName } = req.body as {
+    messages?: Array<{ role: "user" | "assistant"; content: string }>;
+    noteContent?: string;
+    noteName?: string;
+  };
+
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return res.status(400).json({ error: "messages is required" });
+  }
+
+  const isGoogle = ["google", "gemini"].includes(
+    (process.env.AI_PROVIDER || "openai").toLowerCase(),
+  );
+  const aiSettings = await storage.getAiSettings();
+
+  const noteBlock = noteContent?.trim()
+    ? `\n\n--- Note: ${noteName || "Untitled"} ---\n${noteContent}\n---`
+    : "";
+
+  const system =
+    `You are a knowledgeable study assistant helping the user understand and improve their notes.\n` +
+    `Answer questions about the note content clearly. Help the user expand on ideas, clarify concepts, or drill deeper.\n` +
+    `Be concise unless the user asks for a deeper explanation.` +
+    noteBlock;
+
+  try {
+    const result = streamText({
+      model: getModel(),
+      maxOutputTokens: 2000,
+      ...(isGoogle && {
+        providerOptions: {
+          google: {
+            thinkingConfig: { thinkingBudget: aiSettings.thinkingBudget ?? 0 },
+          },
+        },
+      }),
+      system,
+      messages: messages.map((m) => ({ role: m.role, content: m.content })),
+    });
+
+    result.pipeUIMessageStreamToResponse(res);
+  } catch (err: any) {
+    console.error("notes/ask error:", err?.message || err);
+    if (!res.headersSent) {
+      res
+        .status(500)
+        .json({ error: err?.message || "Failed to generate response" });
+    }
+  }
+});
+
+app.post("/api/frontend-lab/ask", async (req, res) => {
+  const { messages, workspace, labType, questionId } = req.body as {
+    messages?: Array<{ role: "user" | "assistant"; content: string }>;
+    workspace?: Record<string, string>;
+    labType?: "react" | "nextjs";
+    questionId?: string;
+  };
+
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return res.status(400).json({ error: "messages is required" });
+  }
+
+  const isGoogle = ["google", "gemini"].includes(
+    (process.env.AI_PROVIDER || "openai").toLowerCase(),
+  );
+  const aiSettings = await storage.getAiSettings();
+
+  const typeLabel =
+    labType === "nextjs" ? "Next.js App Router" : "React + TypeScript";
+
+  let workspaceBlock = "";
+  if (workspace && typeof workspace === "object") {
+    const entries = Object.entries(workspace).filter(
+      ([k, v]) => typeof k === "string" && typeof v === "string",
+    );
+    if (entries.length > 0) {
+      workspaceBlock = "\n\n--- Workspace Files ---\n";
+      for (const [name, content] of entries) {
+        workspaceBlock += `\n### ${name}\n\`\`\`tsx\n${content}\n\`\`\`\n`;
+      }
+    }
+  }
+
+  const system =
+    `You are an expert ${typeLabel} tutor acting as a coding assistant inside a hands-on lab.\n` +
+    `The user is practising ${typeLabel} concepts. Help them understand their code, fix bugs, and learn best practices.\n` +
+    `When suggesting code changes, use fenced TypeScript/TSX code blocks.\n` +
+    `Be concise unless the user asks for deeper explanation.` +
+    workspaceBlock;
+
+  try {
+    const result = streamText({
+      model: getModel(),
+      maxOutputTokens: 2000,
+      ...(isGoogle && {
+        providerOptions: {
+          google: {
+            thinkingConfig: { thinkingBudget: aiSettings.thinkingBudget ?? 0 },
+          },
+        },
+      }),
+      system,
+      messages: messages.map((m) => ({ role: m.role, content: m.content })),
+    });
+
+    result.pipeUIMessageStreamToResponse(res);
+  } catch (err: any) {
+    console.error("frontend-lab/ask error:", err?.message || err);
+    if (!res.headersSent) {
+      res
+        .status(500)
+        .json({ error: err?.message || "Failed to generate response" });
+    }
+  }
+});
+
+app.post("/api/infra/command-stream", async (req, res) => {
+  const { questionId, fileId, label, command, workspace } = req.body as {
+    questionId?: string;
+    fileId?: string;
+    label?: string;
+    command?: string;
+    workspace?: unknown;
+  };
+
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+  res.flushHeaders();
+
+  const send = (payload: unknown) => {
+    res.write(`data: ${JSON.stringify(payload)}\n\n`);
+  };
+
+  if (typeof command !== "string" || !command.trim()) {
+    send({ type: "error", error: "command is required" });
+    res.end();
+    return;
+  }
+
+  try {
+    const run = await streamInfraCommand({
+      questionId,
+      fileId,
+      label,
+      command,
+      workspace,
+      onMessage: send,
+    });
+    send({ type: "complete", run });
+  } catch (err: any) {
+    send({
+      type: "error",
+      error: err?.message || "Failed to run infra command",
+    });
+  }
+
+  res.end();
+});
+
+app.get("/api/infra/runs", async (req, res) => {
+  const fileId =
+    typeof req.query.fileId === "string" ? req.query.fileId : undefined;
+  const questionId =
+    typeof req.query.questionId === "string" ? req.query.questionId : undefined;
+
+  try {
+    const runs = await listInfraRuns({ fileId, questionId });
+    res.json(runs);
+  } catch (err: any) {
+    res
+      .status(500)
+      .json({ error: err?.message || "Failed to list infra runs" });
+  }
+});
+
+app.get("/api/infra/runs/:runId", async (req, res) => {
+  try {
+    const run = await getInfraRun(req.params.runId);
+    res.json(run);
+  } catch {
+    res.status(404).json({ error: "Infra run not found" });
+  }
+});
+
 // Link an existing file to a topic without re-uploading
 app.post("/api/topics/:topicId/context-files/link", async (req, res) => {
   const { fileId, originalName } = req.body as {
@@ -900,6 +1241,10 @@ app.patch("/api/settings", async (req, res) => {
       typeof req.body.vizGuide === "string"
         ? req.body.vizGuide
         : current.vizGuide,
+    plotGuide:
+      typeof req.body.plotGuide === "string"
+        ? req.body.plotGuide
+        : current.plotGuide,
     promptGroups:
       req.body.promptGroups != null
         ? req.body.promptGroups
@@ -934,10 +1279,11 @@ app.post("/api/chat", async (req, res) => {
     codeSnippets,
     systemContext,
     responseLength,
+    linkedConversationIds,
   } = req.body;
 
   const aiSettings = await storage.getAiSettings();
-  const { responseProfiles, vizGuide } = aiSettings;
+  const { responseProfiles, vizGuide, plotGuide } = aiSettings;
   const selectedResponseProfile = responseProfiles[responseLength] ??
     responseProfiles["normal"] ?? { maxOutputTokens: 3000, maxSteps: 5 };
 
@@ -952,6 +1298,34 @@ app.post("/api/chat", async (req, res) => {
   if (systemContext) {
     system += `\n\n--- Additional Context ---\n${systemContext}`;
   }
+  if (
+    Array.isArray(linkedConversationIds) &&
+    linkedConversationIds.length > 0
+  ) {
+    const linkedQuestions = await Promise.all(
+      linkedConversationIds.map((id: string) => storage.getQuestion(id)),
+    );
+    const valid = linkedQuestions.filter(
+      (q) => q && q.messages && q.messages.length > 0,
+    ) as storage.Question[];
+    if (valid.length > 0) {
+      system += `\n\n--- Linked Conversation${valid.length > 1 ? "s" : ""} (read-only reference) ---\nThe user has linked the following conversation${valid.length > 1 ? "s" : ""} from this topic as background context. Do not treat them as the current conversation — they are reference material only.\n`;
+      for (const lq of valid) {
+        system += `\n### "${lq.title}"\n`;
+        for (const msg of lq.messages) {
+          const role = msg.role === "user" ? "User" : "Assistant";
+          const text =
+            typeof msg.content === "string"
+              ? msg.content
+              : (msg.parts
+                  ?.filter((p: any) => p.type === "text")
+                  .map((p: any) => p.text)
+                  .join("") ?? "");
+          system += `**${role}:** ${text.slice(0, 2000)}${text.length > 2000 ? "…" : ""}\n\n`;
+        }
+      }
+    }
+  }
 
   // Build a file registry: id → { label, reader }
   // The model sees the list of file names and can call readFile(id) for any of them.
@@ -969,10 +1343,13 @@ app.post("/api/chat", async (req, res) => {
     });
   }
 
-  // Topic-level uploaded files
+  // Topic-level uploaded files + topic-wide system prompt
   if (topicId) {
     const topics = await storage.getTopics();
     const topic = topics.find((t) => t.id === topicId);
+    if (topic?.systemContext?.trim()) {
+      system += `\n\n--- Topic-Wide System Context ---\n${topic.systemContext.trim()}`;
+    }
     if (topic?.contextFiles?.length) {
       for (const cf of topic.contextFiles) {
         fileRegistry.set(cf.id, {
@@ -1147,6 +1524,12 @@ Examples (illustrative only — use real ids and names from the list above):
           inputSchema: z.object({}),
           execute: async () => ({ guide: vizGuide }),
         }),
+        getPlotGuide: tool({
+          description:
+            "Get the full plotting spec reference. Call this before writing a ```plot block so you use the supported schema for graphs, curves, and charts.",
+          inputSchema: z.object({}),
+          execute: async () => ({ guide: plotGuide }),
+        }),
         ...(fileRegistry.size > 0
           ? {
               readFile: tool({
@@ -1620,13 +2003,13 @@ app.post("/api/fix-viz", async (req, res) => {
 
     const { text } = await generateText({
       model: getModel(),
-      maxOutputTokens: 2500,
+      maxOutputTokens: 8000,
       ...(isGoogle && {
         providerOptions: {
           google: { thinkingConfig: { thinkingBudget: 0 } },
         },
       }),
-      prompt: `The following viz diagram spec failed to render.${renderError ? `\n\nRender error:\n${renderError}` : ""}\n\nFix the spec so it renders correctly. Common issues to check:\n- x/y coordinates must be numbers, not strings\n- node ids must be kebab-case with no spaces\n- Truncated spec: if the spec looks cut off mid-label or mid-step, complete all missing steps before returning — output the full corrected spec.\n- Signal chain direction: a chain [A, B] animates along the edge FROM A TO B. That directed edge (from: A, to: B) MUST exist in the edges section. If you want to show data flowing from B to A but only have the edge A→B, either flip the chain to [A, B] (showing the reverse path) or add a new reverse edge. Never use a chain direction that has no matching directed edge.\n- chain arrays in autoSignals/signals must reference valid node ids\n- YAML flow sequences ([a, b]) must be correctly indented and closed\n- Do NOT mix autoSignals and steps in the same spec\n- Typography: replace en-dashes (–, U+2013) and em-dashes (—, U+2014) with a plain ASCII hyphen (-). Replace curly/smart quotes with straight ASCII quotes. These typographic Unicode characters cause the YAML parser to fail with "Missing closing quote" errors.\n- YAML string quoting: if a label or value contains special characters (hyphens like --, colons, brackets, slashes, or leading/trailing spaces), wrap the ENTIRE value in double quotes. Do NOT use single quotes — single-quoted YAML strings must be self-contained; trailing words after the closing quote cause parse errors. Example of wrong: label: 'update-index --skip-worktree' changes file metadata  Example of correct: label: "update-index --skip-worktree changes file metadata"\n- Never split a label across multiple YAML lines unless using a literal block scalar (| or >)\n\nReturn ONLY the corrected YAML (or JSON) spec with no explanation and no markdown fences — just the raw spec.\n\nFailed spec:\n${spec}`,
+      prompt: `The following viz diagram spec failed to render.${renderError ? `\n\nRender error:\n${renderError}` : ""}\n\nFix the spec so it renders correctly. Common issues to check:\n- x/y coordinates must be numbers, not strings\n- node ids must be kebab-case with no spaces\n- Truncated spec: if the spec looks cut off mid-label or mid-step, complete all missing steps before returning — output the full corrected spec.\n- Signal chain direction: a chain [A, B] animates along the edge FROM A TO B. That directed edge (from: A, to: B) MUST exist in the edges section.\n- chain arrays in autoSignals/signals must reference valid node ids\n- YAML flow sequences ([a, b]) must be correctly indented and closed\n- Do NOT mix autoSignals and steps in the same spec\n- Typography: replace en-dashes (–, U+2013) and em-dashes (—, U+2014) with a plain ASCII hyphen (-). Replace curly/smart quotes with straight ASCII quotes.\n- YAML string quoting: ALWAYS use double quotes for ALL string values — NEVER single quotes. Single-quoted YAML values (e.g. fill: '#fff') cause "Flow map must end with a }" parse errors in yaml v2. Every string in the spec must use double quotes. Wrong: fill: '#1e40af'  Correct: fill: "#1e40af"\n- Inline flow maps must be single-line: any node written as { id: foo, x: 1, ... } MUST have its opening { and closing } on the SAME line with no line breaks inside. The yaml v2 parser throws "Flow map must end with a }" when a flow map spans multiple lines. If a flow map is too long to fit on one line, convert it to block style (indented key: value pairs), but NEVER split a single { ... } across lines.\n- Never split a label across multiple YAML lines unless using a literal block scalar (| or >)\n\nReturn ONLY the corrected YAML (or JSON) spec with no explanation and no markdown fences — just the raw spec.\n\nFailed spec:\n${spec}`,
     });
 
     // Strip any fences the model might have added
@@ -1642,6 +2025,43 @@ app.post("/api/fix-viz", async (req, res) => {
   }
 });
 
+// ─── Fix Plot ───────────────────────────────────────────
+
+app.post("/api/fix-plot", async (req, res) => {
+  const { spec, error: renderError } = req.body;
+  if (typeof spec !== "string" || !spec.trim()) {
+    return res.status(400).json({ error: "spec is required" });
+  }
+
+  try {
+    const { plotGuide } = await storage.getAiSettings();
+    const isGoogle = ["google", "gemini"].includes(
+      (process.env.AI_PROVIDER || "openai").toLowerCase(),
+    );
+
+    const { text } = await generateText({
+      model: getModel(),
+      maxOutputTokens: 4000,
+      ...(isGoogle && {
+        providerOptions: {
+          google: { thinkingConfig: { thinkingBudget: 0 } },
+        },
+      }),
+      prompt: `The following plot spec failed to render.${renderError ? `\n\nRender error:\n${renderError}` : ""}${plotGuide ? `\n\nSupported plotting guide:\n${plotGuide}` : ""}\n\nFix the spec so it renders correctly as a Vega-Lite plot.\nRules:\n- Return ONLY the corrected JSON or YAML spec with no explanation and no markdown fences\n- The spec must describe a valid Vega-Lite chart\n- Prefer simple, valid encodings over clever transforms\n- Ensure x and y encodings include valid field/type definitions when needed\n- If the chart represents a mathematical curve, provide concrete sampled data points instead of symbolic expressions\n- Keep the dark-theme friendly defaults implicit; do not add custom JS callbacks or unsupported runtime code\n\nFailed spec:\n${spec}`,
+    });
+
+    const fixed = text
+      .replace(/^```(?:plot|vega|vega-lite|json|yaml)?\s*/i, "")
+      .replace(/```\s*$/, "")
+      .trim();
+
+    res.json({ spec: fixed });
+  } catch (err: any) {
+    console.error("fix-plot error:", err?.message || err);
+    res.status(500).json({ error: err?.message || "Failed to fix plot" });
+  }
+});
+
 // ─── Refine Viz ─────────────────────────────────────────
 
 app.post("/api/refine-viz", async (req, res) => {
@@ -1685,7 +2105,7 @@ Rules:
 
     const { text } = await generateText({
       model: getModel(),
-      maxOutputTokens: 1600,
+      maxOutputTokens: 8000,
       ...(isGoogle && {
         providerOptions: {
           google: { thinkingConfig: { thinkingBudget: 0 } },
@@ -1809,10 +2229,10 @@ app.post("/api/run-code", async (req, res) => {
     }, RUN_TIMEOUT_MS);
 
     child.stdout.on("data", (chunk: Buffer) => {
-      stdoutLines.push(chunk.toString());
+      stdoutLines.push(chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, ""));
     });
     child.stderr.on("data", (chunk: Buffer) => {
-      stderrLines.push(chunk.toString());
+      stderrLines.push(chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, ""));
     });
     child.on("close", () => {
       clearTimeout(killTimer);
@@ -1843,6 +2263,223 @@ interface SandboxEntry {
 const sandboxes = new Map<string, SandboxEntry>();
 const SANDBOX_DIR = path.join(__dirname, "..", ".sandbox-tmp");
 
+// ── Next.js real-server sandboxes ────────────────────────────────────────────
+// We symlink node_modules from the pre-installed npx cache so there's
+// zero npm-install cost per sandbox.
+interface NextSandboxEntry {
+  child: ReturnType<typeof spawn>;
+  port: number;
+  dir: string;
+  logs: string[];
+  ready: boolean;
+}
+const nextSandboxes = new Map<string, NextSandboxEntry>();
+const NEXT_NPX_DIR = path.join(os.homedir(), ".npm/_npx/8b377f6eec906bc4");
+const NEXT_MODULES_DIR = path.join(NEXT_NPX_DIR, "node_modules");
+// Sandboxes live INSIDE the npx cache dir so Next.js finds node_modules by
+// walking up the directory tree — no symlinks needed, no Turbopack restrictions.
+const NEXT_SANDBOX_BASE = path.join(NEXT_NPX_DIR, ".sandboxes");
+
+/** Write all user files and necessary config into a sandbox directory. */
+async function writeNextSandboxFiles(
+  dir: string,
+  files: Record<string, string>,
+) {
+  // package.json — needed so Next.js can resolve its own packages
+  await fs.writeFile(
+    path.join(dir, "package.json"),
+    JSON.stringify(
+      {
+        name: "nextjs-lab",
+        private: true,
+        type: "module",
+        dependencies: {
+          next: "^16.2.4",
+          react: "^19.0.0",
+          "react-dom": "^19.0.0",
+        },
+      },
+      null,
+      2,
+    ),
+  );
+  // next.config.ts — set turbopack.root to the NPX cache dir (parent of both
+  // node_modules and .sandboxes). This lets Turbopack find next/package.json
+  // in node_modules while watching files within the sandbox subdirectory.
+  // Setting it to the sandbox dir itself would block node_modules resolution
+  // since node_modules sits above the sandbox root boundary.
+  await fs.writeFile(
+    path.join(dir, "next.config.ts"),
+    `import type { NextConfig } from "next";
+const c: NextConfig = {
+  turbopack: { root: ${JSON.stringify(NEXT_NPX_DIR)} },
+  async headers() {
+    return [{ source: "/(.*)", headers: [{ key: "X-Frame-Options", value: "ALLOWALL" }] }];
+  },
+};
+export default c;\n`,
+  );
+  // tsconfig so Next.js TypeScript support works
+  await fs.writeFile(
+    path.join(dir, "tsconfig.json"),
+    JSON.stringify(
+      {
+        compilerOptions: {
+          lib: ["dom", "dom.iterable", "esnext"],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: false,
+          noEmit: true,
+          esModuleInterop: true,
+          module: "esnext",
+          moduleResolution: "bundler",
+          resolveJsonModule: true,
+          isolatedModules: true,
+          jsx: "preserve",
+          incremental: true,
+          plugins: [{ name: "next" }],
+          baseUrl: ".",
+        },
+        include: ["**/*.ts", "**/*.tsx"],
+        exclude: ["node_modules"],
+      },
+      null,
+      2,
+    ),
+  );
+  // User files
+  for (const [filePath, content] of Object.entries(files)) {
+    const fullPath = path.join(dir, filePath);
+    await fs.mkdir(path.dirname(fullPath), { recursive: true });
+    await fs.writeFile(fullPath, content, "utf8");
+  }
+}
+
+app.post("/api/nextjs/start", async (req, res) => {
+  const { files } = req.body as { files: Record<string, string> };
+  if (!files || typeof files !== "object") {
+    return res.status(400).json({ error: "files is required" });
+  }
+
+  // Use the actual file path (not the .bin symlink) so Node's __filename resolves
+  // correctly and internal require("../server/require-hook") works.
+  const nextBin = path.join(NEXT_MODULES_DIR, "next", "dist", "bin", "next");
+  const nextExists = await fs
+    .access(nextBin)
+    .then(() => true)
+    .catch(() => false);
+  if (!nextExists) {
+    return res.status(503).json({
+      error:
+        "Next.js is not available in the npx cache. Run `npx next --version` once to install it.",
+    });
+  }
+
+  const id = randomUUID();
+  const dir = path.join(NEXT_SANDBOX_BASE, id);
+  await fs.mkdir(dir, { recursive: true });
+
+  await writeNextSandboxFiles(dir, files);
+
+  const port = await getFreePort();
+  const logs: string[] = [];
+  // Run via `node <actual-bin>` — sandbox dir is inside the npx cache so
+  // node_modules is resolved naturally two levels up; no symlinks required.
+  const child = spawn(
+    process.execPath,
+    [nextBin, "dev", "--port", String(port)],
+    {
+      cwd: dir,
+      env: {
+        ...process.env,
+        NEXT_TELEMETRY_DISABLED: "1",
+        NODE_NO_WARNINGS: "1",
+      },
+    },
+  );
+
+  const entry: NextSandboxEntry = {
+    child,
+    port,
+    dir,
+    logs,
+    ready: false,
+  };
+  nextSandboxes.set(id, entry);
+
+  const markReady = (text: string) => {
+    if (!entry.ready && /ready|started server on|Local:/i.test(text)) {
+      entry.ready = true;
+    }
+  };
+  child.stdout.on("data", (chunk: Buffer) => {
+    const t = chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+    logs.push(t);
+    markReady(t);
+  });
+  child.stderr.on("data", (chunk: Buffer) => {
+    const t = chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+    logs.push(t);
+    markReady(t);
+  });
+  child.on("exit", () => {
+    nextSandboxes.delete(id);
+    fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+  });
+
+  // Wait up to 30 s for Next.js to be ready
+  const deadline = Date.now() + 30_000;
+  while (!entry.ready && Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, 400));
+    if (!nextSandboxes.has(id)) {
+      return res
+        .status(500)
+        .json({ error: logs.join("").trim() || "Next.js server exited" });
+    }
+  }
+  if (!entry.ready) {
+    return res
+      .status(504)
+      .json({ error: "Next.js did not start in time", logs });
+  }
+
+  res.json({ id, port, url: `http://localhost:${port}` });
+});
+
+app.post("/api/nextjs/:id/update-files", async (req, res) => {
+  const sb = nextSandboxes.get(req.params.id);
+  if (!sb) return res.status(404).json({ error: "Sandbox not found" });
+  const { files } = req.body as { files: Record<string, string> };
+  if (!files) return res.status(400).json({ error: "files is required" });
+  for (const [filePath, content] of Object.entries(files)) {
+    const fullPath = path.join(sb.dir, filePath);
+    await fs.mkdir(path.dirname(fullPath), { recursive: true });
+    await fs.writeFile(fullPath, content, "utf8");
+  }
+  res.json({ ok: true });
+});
+
+app.get("/api/nextjs/:id/status", (req, res) => {
+  const sb = nextSandboxes.get(req.params.id);
+  if (!sb) return res.json({ running: false });
+  res.json({
+    running: true,
+    ready: sb.ready,
+    port: sb.port,
+    logs: sb.logs.slice(-30),
+  });
+});
+
+app.delete("/api/nextjs/:id", async (req, res) => {
+  const sb = nextSandboxes.get(req.params.id);
+  if (sb) {
+    sb.child.kill("SIGTERM");
+    nextSandboxes.delete(req.params.id);
+    await fs.rm(sb.dir, { recursive: true, force: true }).catch(() => {});
+  }
+  res.json({ ok: true });
+});
+
 async function getFreePort(): Promise<number> {
   return new Promise((resolve, reject) => {
     const srv = net.createServer();
@@ -1893,8 +2530,12 @@ app.post("/api/sandbox/start", async (req, res) => {
   const child = spawn(process.execPath, [tmpFile], {
     env: { ...process.env, PORT: String(port), NODE_NO_WARNINGS: "1" },
   });
-  child.stdout.on("data", (chunk: Buffer) => logs.push(chunk.toString()));
-  child.stderr.on("data", (chunk: Buffer) => logs.push(chunk.toString()));
+  child.stdout.on("data", (chunk: Buffer) =>
+    logs.push(chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "")),
+  );
+  child.stderr.on("data", (chunk: Buffer) =>
+    logs.push(chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "")),
+  );
   child.on("exit", () => {
     sandboxes.delete(id);
     fs.unlink(tmpFile).catch(() => {});