create-interview-cockpit 0.14.0 → 0.16.0

package/template/client/src/store.ts

@@ -220,10 +220,12 @@ interface Store {
       | "user"
       | "ai"
       | "sandbox"
+      | "browser-security"
       | "infra"
       | "react"
       | "nextjs"
-      | "module-federation",
+      | "module-federation"
+      | "canvas",
   ) => Promise<import("./types").ContextFile>;
   clearMessages: (questionId: string) => Promise<void>;
 
@@ -283,6 +285,8 @@ interface Store {
     clientCode: string;
     clientLang: string;
     fileId?: string;
+    label?: string;
+    origin?: "sandbox" | "browser-security";
     /** If set, the client panel opens in React or Next.js preview mode instead of script mode */
     clientType?: "script" | "react" | "nextjs" | "module-federation";
     reactFiles?: Record<string, string> | null;
@@ -298,6 +302,8 @@ interface Store {
     clientLang: string,
     fileId?: string,
     opts?: {
+      label?: string;
+      origin?: "sandbox" | "browser-security";
       clientType?: "script" | "react" | "nextjs" | "module-federation";
       reactFiles?: Record<string, string>;
       reactActiveFile?: string;
@@ -320,6 +326,11 @@ interface Store {
   openDeploymentLab: () => void;
   closeDeploymentLab: () => void;
 
+  // ── Browser Security Lab ─────────────────────────────────────
+  showBrowserSecurityLab: boolean;
+  openBrowserSecurityLab: () => void;
+  closeBrowserSecurityLab: () => void;
+
   // ── Infra Lab ────────────────────────────────────────────────
   showInfraLab: boolean;
   runnerInitialInfra: InfraLabWorkspace | null;
@@ -346,6 +357,13 @@ interface Store {
     serverCode?: string,
     serverLang?: string,
   ) => void;
+
+  // ── Canvas Lab ───────────────────────────────────────────────
+  showCanvasLab: boolean;
+  canvasLabInitialCode: string | null;
+  canvasLabInitialFileId: string | null;
+  openCanvasLab: (code?: string, fileId?: string) => void;
+  closeCanvasLab: () => void;
 }
 
 export const useStore = create<Store>((set, get) => ({
@@ -373,9 +391,13 @@ export const useStore = create<Store>((set, get) => ({
   runnerInitialSandbox: null,
   runnerInitialFileId: null,
   showDeploymentLab: false,
+  showBrowserSecurityLab: false,
   showInfraLab: false,
   runnerInitialInfra: null,
   runnerInitialInfraFileId: null,
+  showCanvasLab: false,
+  canvasLabInitialCode: null,
+  canvasLabInitialFileId: null,
 
   // ── Workspaces ───────────────────────────────────────────────
   workspaces: [],
@@ -971,6 +993,8 @@ export const useStore = create<Store>((set, get) => ({
         clientCode,
         clientLang,
         fileId,
+        label: opts?.label,
+        origin: opts?.origin,
         clientType: opts?.clientType,
         reactFiles: opts?.reactFiles,
         reactActiveFile: opts?.reactActiveFile,
@@ -1058,10 +1082,23 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
   closeCodeRunner: () => set({ showCodeRunner: false }),
-  showDeploymentLab: false,
   openDeploymentLab: () => set({ showDeploymentLab: true }),
   closeDeploymentLab: () => set({ showDeploymentLab: false }),
+  openBrowserSecurityLab: () => set({ showBrowserSecurityLab: true }),
+  closeBrowserSecurityLab: () => set({ showBrowserSecurityLab: false }),
   closeInfraLab: () => set({ showInfraLab: false }),
+  openCanvasLab: (code?, fileId?) =>
+    set({
+      showCanvasLab: true,
+      canvasLabInitialCode: code ?? null,
+      canvasLabInitialFileId: fileId ?? null,
+    }),
+  closeCanvasLab: () =>
+    set({
+      showCanvasLab: false,
+      canvasLabInitialCode: null,
+      canvasLabInitialFileId: null,
+    }),
 
   fetchAiSettings: async () => {
     const settings = await api.fetchAiSettings();

package/template/client/src/types.ts

@@ -3,10 +3,12 @@ export type ContextFileOrigin =
   | "ai"
   | "upload"
   | "sandbox"
+  | "browser-security"
   | "infra"
   | "react"
   | "nextjs"
-  | "module-federation";
+  | "module-federation"
+  | "canvas";
 
 export interface ContextFile {
   id: string;
@@ -17,6 +19,7 @@ export interface ContextFile {
   /** Distinguishes how this file was added. 'upload' = user-uploaded doc,
    *  'user' = code saved from Code Runner, 'ai' = AI-generated code block,
    *  'sandbox' = paired server+client sandbox saved as JSON,
+   *  'browser-security' = paired server+client security lab saved as JSON,
    *  'infra' = Terraform-style infra lab workspace saved as JSON. */
   origin?: ContextFileOrigin;
   /** Language hint for code snippets (e.g. 'typescript', 'javascript'). */
@@ -49,6 +52,7 @@ export interface WorkspaceMeta {
   id: string;
   name: string;
   type: "local" | "google_drive";
+  questionSortOrder?: "name" | "createdAt";
   driveConfig?: {
     folderId: string;
     folderName: string;

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/browsersecuritylabmodal.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/deploymentlabmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/labspanel.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}

package/template/client/vite.config.ts

@@ -1,12 +1,19 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    proxy: {
-      "/api": "http://localhost:3001",
+export default defineConfig(({ mode }) => {
+  // Load the root .env (one level above client/)
+  const env = loadEnv(mode, "../", "");
+  const clientPort = parseInt(env.CLIENT_PORT || "5173", 10);
+  const serverPort = parseInt(env.PORT || "3001", 10);
+
+  return {
+    plugins: [react()],
+    server: {
+      port: clientPort,
+      proxy: {
+        "/api": `http://localhost:${serverPort}`,
+      },
     },
-  },
+  };
 });

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.13.0"
+  "version": "0.14.0"
 }

package/template/server/src/google-drive.ts

@@ -330,6 +330,7 @@ export async function syncWorkspace(
         let codeContextFiles: string[] = [];
         let codeAnnotations: storage.Question["codeAnnotations"] = {};
         let parentTitle: string | null = null;
+        let restoredCreatedAt: string | null = null;
         const restoredContextFiles: storage.ContextFile[] = [];
 
         if (filename.endsWith(".json")) {
@@ -342,6 +343,7 @@ export async function syncWorkspace(
             codeContextFiles = parsed.codeContextFiles || [];
             codeAnnotations = parsed.codeAnnotations || {};
             parentTitle = parsed.parentTitle || null;
+            if (parsed.createdAt) restoredCreatedAt = parsed.createdAt;
 
             // Restore code snippet context files (user/ai origin)
             if (
@@ -358,6 +360,7 @@ export async function syncWorkspace(
                       (cs.origin === "user" ||
                         cs.origin === "ai" ||
                         cs.origin === "sandbox" ||
+                        cs.origin === "browser-security" ||
                         cs.origin === "react" ||
                         cs.origin === "nextjs" ||
                         cs.origin === "module-federation" ||
@@ -398,7 +401,7 @@ export async function syncWorkspace(
           contextFiles: restoredContextFiles,
           messages,
           codeAnnotations,
-          createdAt: new Date().toISOString(),
+          createdAt: restoredCreatedAt ?? new Date().toISOString(),
         };
         await storage.saveQuestion(q);
         result.filesImported++;
@@ -769,6 +772,7 @@ export async function exportWorkspace(
                   cf.origin === "user" ||
                   cf.origin === "ai" ||
                   cf.origin === "sandbox" ||
+                  cf.origin === "browser-security" ||
                   cf.origin === "react" ||
                   cf.origin === "nextjs" ||
                   cf.origin === "module-federation" ||
@@ -796,6 +800,7 @@ export async function exportWorkspace(
                   codeContextFiles: q.codeContextFiles,
                   codeAnnotations: q.codeAnnotations ?? {},
                   codeSnippets: contextFilesWithContent,
+                  createdAt: q.createdAt,
                 },
                 null,
                 2,

package/template/server/src/index.ts

@@ -726,6 +726,7 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
       | "user"
       | "ai"
       | "sandbox"
+      | "browser-security"
       | "infra"
       | "react"
       | "nextjs"
@@ -738,14 +739,16 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
     origin !== "user" &&
     origin !== "ai" &&
     origin !== "sandbox" &&
+    origin !== "browser-security" &&
     origin !== "infra" &&
     origin !== "react" &&
     origin !== "nextjs" &&
-    origin !== "module-federation"
+    origin !== "module-federation" &&
+    origin !== "canvas"
   ) {
     return res.status(400).json({
       error:
-        "origin must be 'user', 'ai', 'sandbox', 'infra', 'react', 'nextjs', or 'module-federation'",
+        "origin must be 'user', 'ai', 'sandbox', 'browser-security', 'infra', 'react', 'nextjs', 'module-federation', or 'canvas'",
     });
   }
   try {
@@ -2885,6 +2888,51 @@ app.post("/api/nextjs/:id/update-files", async (req, res) => {
   res.json({ ok: true });
 });
 
+app.post("/api/nextjs/:id/command-stream", async (req, res) => {
+  const sb = nextSandboxes.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/nextjs/:id/status", (req, res) => {
   const sb = nextSandboxes.get(req.params.id);
   if (!sb) return res.json({ running: false });
@@ -2925,7 +2973,7 @@ app.post("/api/module-federation/start", async (req, res) => {
 
     await runLoggedCommand(
       npmCommand(),
-      ["install", "--no-audit", "--no-fund", "--prefer-offline"],
+      ["install", "--no-audit", "--no-fund", "--legacy-peer-deps"],
       {
         cwd: dir,
         env: {
@@ -2936,12 +2984,36 @@ app.post("/api/module-federation/start", async (req, res) => {
       logs,
     );
 
+    // Detect new modern Next.js MFE template types.
+    const isMultiZones = typeof files["apps/zone-b/package.json"] === "string";
+    const isMfRuntimeApi =
+      typeof files["apps/mf-remote/package.json"] === "string";
+    const isRspackShell =
+      typeof files["apps/rspack-shell/package.json"] === "string";
+
     // Detect isolated 2-app pattern (host + mfe-auth, no profile/checkout).
     const isIsolated =
       typeof files["apps/mfe-auth/package.json"] === "string" &&
       typeof files["apps/checkout/package.json"] !== "string";
 
-    const ports = await getDistinctPorts(isIsolated ? 2 : 3);
+    // Detect Next.js MF pattern (shell + remote, no mfe-auth/checkout/profile).
+    // Excludes Multi-Zones (zone-b) and MF Runtime API (mf-remote) which also use apps/shell.
+    const isNextjsMf =
+      typeof files["apps/shell/package.json"] === "string" &&
+      !isMultiZones &&
+      !isMfRuntimeApi &&
+      typeof files["apps/mfe-auth/package.json"] !== "string" &&
+      typeof files["apps/checkout/package.json"] !== "string";
+
+    const ports = await getDistinctPorts(
+      isIsolated ||
+        isNextjsMf ||
+        isMultiZones ||
+        isMfRuntimeApi ||
+        isRspackShell
+        ? 2
+        : 3,
+    );
     const [hostPort] = ports;
 
     const appUrls: Record<string, string> = {
@@ -2954,7 +3026,32 @@ app.post("/api/module-federation/start", async (req, res) => {
       npm_config_update_notifier: "false",
     };
 
-    if (isIsolated) {
+    if (isNextjsMf) {
+      const [, remotePort] = ports;
+      appUrls.remote = `http://localhost:${remotePort}`;
+      spawnEnv.REMOTE_PORT = String(remotePort);
+      // Next.js remotes put the entry at /_next/static/chunks/; webpack remotes put it at root.
+      const isNextjsRemote =
+        typeof files["apps/remote/next.config.js"] === "string";
+      const remoteEntryPath = isNextjsRemote
+        ? "/_next/static/chunks/remoteEntry.js"
+        : "/remoteEntry.js";
+      spawnEnv.NEXT_PUBLIC_REMOTE_URL = `http://localhost:${remotePort}${remoteEntryPath}`;
+    } else if (isMultiZones) {
+      const [, remotePort] = ports;
+      // Zone B serves everything under /store (basePath), so point the preview there.
+      appUrls.zoneB = `http://localhost:${remotePort}/store`;
+      spawnEnv.REMOTE_PORT = String(remotePort);
+    } else if (isMfRuntimeApi) {
+      const [, remotePort] = ports;
+      appUrls.mfRemote = `http://localhost:${remotePort}`;
+      spawnEnv.REMOTE_PORT = String(remotePort);
+      spawnEnv.NEXT_PUBLIC_REMOTE_URL = `http://localhost:${remotePort}/remoteEntry.js`;
+    } else if (isRspackShell) {
+      const [, remotePort] = ports;
+      appUrls.remote = `http://localhost:${remotePort}`;
+      spawnEnv.REMOTE_PORT = String(remotePort);
+    } else if (isIsolated) {
       const [, mfeAuthPort] = ports;
       appUrls.mfeAuth = `http://localhost:${mfeAuthPort}`;
       spawnEnv.MFE_AUTH_PORT = String(mfeAuthPort);
@@ -2967,7 +3064,14 @@ app.post("/api/module-federation/start", async (req, res) => {
     }
 
     const readyPorts = new Set<string>();
-    const requiredPorts = isIsolated ? 2 : 3;
+    const requiredPorts =
+      isIsolated ||
+      isNextjsMf ||
+      isMultiZones ||
+      isMfRuntimeApi ||
+      isRspackShell
+        ? 2
+        : 3;
 
     const child = spawn(npmCommand(), ["run", "dev"], {
       cwd: dir,

package/template/server/src/storage.ts

@@ -59,6 +59,7 @@ export interface ContextFile {
   /** Distinguishes how this file was added. 'upload' = user-uploaded doc,
    *  'user' = code saved from Code Runner, 'ai' = AI-generated code block,
    *  'sandbox' = paired server+client sandbox saved as JSON,
+   *  'browser-security' = paired server+client security lab saved as JSON,
    *  'infra' = Terraform-style infra lab workspace saved as JSON,
    *  'react' = React + TypeScript lab workspace,
    *  'nextjs' = Next.js App Router lab workspace,
@@ -68,6 +69,7 @@ export interface ContextFile {
     | "ai"
     | "upload"
     | "sandbox"
+    | "browser-security"
     | "infra"
     | "react"
     | "nextjs"
@@ -152,6 +154,7 @@ export interface WorkspaceMeta {
   id: string;
   name: string;
   type: "local" | "google_drive";
+  questionSortOrder?: "name" | "createdAt";
   driveConfig?: DriveConfig;
   createdAt: string;
 }