create-interview-cockpit 0.11.0 → 0.13.0

package/template/server/src/index.ts

@@ -684,6 +684,38 @@ app.delete(
   },
 );
 
+// Detach a lab file from AI context without deleting it
+app.post(
+  "/api/questions/:questionId/context-files/:fileId/detach",
+  async (req, res) => {
+    try {
+      const cf = await storage.detachQuestionContextFile(
+        req.params.questionId,
+        req.params.fileId,
+      );
+      res.json(cf);
+    } catch (err: any) {
+      res.status(500).json({ error: err?.message || "Failed to detach" });
+    }
+  },
+);
+
+// Re-attach a previously detached lab file to AI context
+app.post(
+  "/api/questions/:questionId/context-files/:fileId/attach",
+  async (req, res) => {
+    try {
+      const cf = await storage.attachQuestionContextFile(
+        req.params.questionId,
+        req.params.fileId,
+      );
+      res.json(cf);
+    } catch (err: any) {
+      res.status(500).json({ error: err?.message || "Failed to attach" });
+    }
+  },
+);
+
 // Save a code snippet (from Code Runner or AI response) as a question context file
 app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
   const { code, language, label, origin } = req.body as {
@@ -1376,7 +1408,9 @@ app.post("/api/chat", async (req, res) => {
   if (questionId) {
     const question = await storage.getQuestion(questionId);
     if (question?.contextFiles?.length) {
-      for (const cf of question.contextFiles) {
+      for (const cf of question.contextFiles.filter(
+        (c) => c.inContext !== false,
+      )) {
         fileRegistry.set(cf.id, {
           label: `[question] ${cf.originalName}`,
           reader: () => storage.readContextFileContent(cf.id),
@@ -2458,6 +2492,42 @@ function isPathInside(root: string, target: string): boolean {
   );
 }
 
+// Permissive npm command parser for the React lab.
+// Allows any npm subcommand (install, uninstall, run, update, etc.)
+// but blocks shell operators and dangerous flags.
+function parseReactLabCommand(command: string): { args: string[] } {
+  const tokens = splitShellLikeCommand(command);
+  if (tokens.length === 0) {
+    throw new Error("Command cannot be empty");
+  }
+
+  if (tokens[0] !== "npm") {
+    throw new Error("Only npm commands are supported in the React lab console");
+  }
+
+  if (tokens.some((t) => MODULE_FEDERATION_SHELL_META_TOKENS.has(t))) {
+    throw new Error(
+      "Shell operators are not supported. Run one npm command at a time.",
+    );
+  }
+
+  const dangerous = [
+    "--prefix",
+    "--workspaces",
+    "-w",
+    "--workspace",
+    "--global",
+    "-g",
+  ];
+  if (
+    tokens.some((t) => dangerous.some((d) => t === d || t.startsWith(d + "=")))
+  ) {
+    throw new Error("That flag is not allowed in the React lab console.");
+  }
+
+  return { args: tokens.slice(1) };
+}
+
 function parseModuleFederationCommand(command: string): {
   args: string[];
   displayCommand: string;
@@ -3330,6 +3400,245 @@ ${code}`;
   res.end();
 });
 
+// ─── React Lab (Vite) sandboxes ──────────────────────────────────────────────
+
+interface ReactLabSandboxEntry {
+  child: ReturnType<typeof spawn>;
+  port: number;
+  dir: string;
+  logs: string[];
+  ready: boolean;
+}
+
+const reactLabSandboxes = new Map<string, ReactLabSandboxEntry>();
+const REACT_LAB_SANDBOX_BASE = path.join(
+  os.tmpdir(),
+  "interview-cockpit-react-lab",
+);
+
+app.post("/api/react-lab/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" });
+  }
+
+  const id = randomUUID();
+  const dir = path.join(REACT_LAB_SANDBOX_BASE, id);
+  const logs: string[] = [];
+
+  try {
+    await fs.mkdir(dir, { recursive: true });
+
+    // Write all user files as-is
+    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");
+    }
+
+    // Auto-generate index.html if the user didn't provide one
+    const hasIndex = await fs
+      .access(path.join(dir, "index.html"))
+      .then(() => true)
+      .catch(() => false);
+    if (!hasIndex) {
+      await fs.writeFile(
+        path.join(dir, "index.html"),
+        `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Lab</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>\n`,
+        "utf8",
+      );
+    }
+
+    // Install dependencies
+    appendSandboxLog(logs, "Installing dependencies…\n");
+    await runLoggedCommand(
+      npmCommand(),
+      ["install", "--no-audit", "--no-fund", "--prefer-offline"],
+      {
+        cwd: dir,
+        env: { ...process.env, npm_config_update_notifier: "false" },
+      },
+      logs,
+    );
+
+    const port = await getFreePort();
+
+    const child = spawn(
+      npmCommand(),
+      ["run", "dev", "--", "--port", String(port), "--host", "localhost"],
+      {
+        cwd: dir,
+        env: {
+          ...process.env,
+          npm_config_update_notifier: "false",
+          NO_COLOR: "1",
+        },
+      },
+    );
+
+    const entry: ReactLabSandboxEntry = {
+      child,
+      port,
+      dir,
+      logs,
+      ready: false,
+    };
+
+    const markReady = (text: string) => {
+      if (!entry.ready && /Local:|ready in/i.test(text)) {
+        entry.ready = true;
+      }
+    };
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.stderr.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.on("exit", () => {
+      reactLabSandboxes.delete(id);
+      fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    });
+
+    reactLabSandboxes.set(id, entry);
+
+    const deadline = Date.now() + 60_000;
+    while (!entry.ready && Date.now() < deadline) {
+      await new Promise((r) => setTimeout(r, 400));
+      if (!reactLabSandboxes.has(id)) {
+        return res
+          .status(500)
+          .json({ error: logs.join("").trim() || "Vite server exited" });
+      }
+    }
+
+    if (!entry.ready) {
+      return res
+        .status(504)
+        .json({ error: "Vite did not start in time", logs });
+    }
+
+    res.json({ id, port, url: `http://localhost:${port}` });
+  } catch (error: any) {
+    await fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    res.status(500).json({
+      error:
+        logs.join("").trim() || error?.message || "Failed to start React lab",
+    });
+  }
+});
+
+app.post("/api/react-lab/:id/update-files", async (req, res) => {
+  const sb = reactLabSandboxes.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 || typeof files !== "object")
+    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.post("/api/react-lab/:id/command-stream", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+
+  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 (!sb) {
+    send({ type: "error", error: "Sandbox not found" });
+    res.end();
+    return;
+  }
+
+  const { command } = req.body as { command?: string };
+  if (typeof command !== "string" || !command.trim()) {
+    send({ type: "error", error: "command is required" });
+    res.end();
+    return;
+  }
+
+  try {
+    const parsed = parseReactLabCommand(command);
+
+    send({ type: "output", kind: "info", text: `$ ${command.trim()}\n` });
+
+    await runStreamedCommand(
+      npmCommand(),
+      parsed.args,
+      {
+        cwd: sb.dir,
+        env: { ...process.env, npm_config_update_notifier: "false" },
+      },
+      ({ kind, text }) => send({ type: "output", kind, text }),
+    );
+
+    send({ type: "complete" });
+  } catch (error: any) {
+    send({ type: "error", error: error?.message || "Command failed" });
+  }
+
+  res.end();
+});
+
+app.get("/api/react-lab/:id/read-file", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  if (!sb) return res.status(404).json({ error: "Sandbox not found" });
+
+  const filePath =
+    typeof req.query.path === "string" ? req.query.path : undefined;
+  if (!filePath) return res.status(400).json({ error: "path is required" });
+
+  // Restrict to safe relative paths only
+  const normalized = path.normalize(filePath).replace(/^\//, "");
+  if (normalized.startsWith("..") || path.isAbsolute(normalized)) {
+    return res.status(400).json({ error: "Invalid path" });
+  }
+
+  const fullPath = path.join(sb.dir, normalized);
+  if (!isPathInside(sb.dir, fullPath)) {
+    return res.status(400).json({ error: "Path must stay inside the sandbox" });
+  }
+
+  try {
+    const content = await fs.readFile(fullPath, "utf8");
+    res.json({ path: normalized, content });
+  } catch {
+    res.status(404).json({ error: "File not found" });
+  }
+});
+
+app.delete("/api/react-lab/:id", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  if (sb) {
+    sb.child.kill("SIGTERM");
+    reactLabSandboxes.delete(req.params.id);
+    await fs.rm(sb.dir, { recursive: true, force: true }).catch(() => {});
+  }
+  res.json({ ok: true });
+});
+
 // ─── Start ───────────────────────────────────────────────
 
 (async () => {

package/template/server/src/storage.ts

@@ -76,6 +76,9 @@ export interface ContextFile {
   language?: string;
   /** Short display label for code snippets. */
   label?: string;
+  /** When false, the file is saved but excluded from the AI prompt context.
+   *  Used to detach lab files without permanently deleting them. */
+  inContext?: boolean;
 }
 
 export interface Message {
@@ -802,6 +805,34 @@ export async function deleteQuestionContextFile(
   }
 }
 
+/** Removes a lab file from the AI context without deleting it from disk. */
+export async function detachQuestionContextFile(
+  questionId: string,
+  fileId: string,
+): Promise<ContextFile> {
+  const q = await getQuestion(questionId);
+  if (!q) throw new Error("Question not found");
+  const cf = (q.contextFiles || []).find((f) => f.id === fileId);
+  if (!cf) throw new Error("Context file not found");
+  cf.inContext = false;
+  await saveQuestion(q);
+  return cf;
+}
+
+/** Re-attaches a detached lab file to the AI context. */
+export async function attachQuestionContextFile(
+  questionId: string,
+  fileId: string,
+): Promise<ContextFile> {
+  const q = await getQuestion(questionId);
+  if (!q) throw new Error("Question not found");
+  const cf = (q.contextFiles || []).find((f) => f.id === fileId);
+  if (!cf) throw new Error("Context file not found");
+  cf.inContext = true;
+  await saveQuestion(q);
+  return cf;
+}
+
 export async function updateQuestionMessages(
   questionId: string,
   messages: Message[],