create-interview-cockpit 0.14.0 → 0.15.0

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

@@ -5,6 +5,7 @@ import {
   parseFrontendLabWorkspace,
   ISOLATED_MODULE_FEDERATION_LAB,
 } from "../reactLab";
+import { BROWSER_SECURITY_TEMPLATES } from "../browserSecurityTemplates";
 import type { ContextFile } from "../types";
 import {
   Plus,
@@ -21,12 +22,14 @@ import {
   LinkIcon,
   Link2Off,
   Network,
+  Shield,
 } from "lucide-react";
 
 // ─── Helpers ─────────────────────────────────────────────
 
 const LAB_ORIGINS = new Set([
   "sandbox",
+  "browser-security",
   "infra",
   "react",
   "nextjs",
@@ -239,19 +242,50 @@ export default function LabsPanel() {
         parsed.clientCode,
         parsed.clientLang,
         cf.id,
-        parsed.clientType
-          ? {
-              clientType: parsed.clientType,
-              reactFiles: parsed.reactFiles,
-              reactActiveFile: parsed.reactActiveFile,
-            }
-          : undefined,
+        {
+          label: cf.label || cf.originalName,
+          origin:
+            cf.origin === "browser-security" ? "browser-security" : "sandbox",
+          ...(parsed.clientType
+            ? {
+                clientType: parsed.clientType,
+                reactFiles: parsed.reactFiles,
+                reactActiveFile: parsed.reactActiveFile,
+              }
+            : {}),
+        },
       );
     } catch {
       /* ignore */
     }
   };
 
+  const openBrowserSecurityTemplate = (templateId: string) => {
+    const template = BROWSER_SECURITY_TEMPLATES.find(
+      (item) => item.id === templateId,
+    );
+    if (!template) return;
+
+    openSandbox(
+      template.serverCode,
+      "javascript",
+      template.clientCode,
+      "javascript",
+      undefined,
+      {
+        label: template.label,
+        origin: "browser-security",
+        ...(template.clientType
+          ? {
+              clientType: template.clientType,
+              reactFiles: template.reactFiles,
+              reactActiveFile: template.reactActiveFile,
+            }
+          : {}),
+      },
+    );
+  };
+
   const openInfraFile = async (cf: ContextFile) => {
     const raw = await fetch(`/api/context-files/${cf.id}/content`)
       .then((r) => r.json())
@@ -531,6 +565,22 @@ export default function LabsPanel() {
             accentClass="text-slate-300"
             bgClass="bg-slate-500/10 border border-slate-500/20"
           />
+          <Section
+            title="Browser Security"
+            icon={Shield}
+            iconColor="text-cyan-400/70"
+            origin="browser-security"
+            emptyText="Save a browser security lab to reopen it here"
+            newLabMenu={BROWSER_SECURITY_TEMPLATES.map((template) => ({
+              label: template.label,
+              description: template.description,
+              onClick: () => openBrowserSecurityTemplate(template.id),
+            }))}
+            onOpen={openSandboxFile}
+            openTitle="Open in Browser Security Lab"
+            accentClass="text-cyan-200"
+            bgClass="bg-cyan-500/10 border border-cyan-500/20"
+          />
           <Section
             title="Infra Labs"
             icon={Globe}

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

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { X, MessageSquare, Check, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { X, MessageSquare, Check, Loader2, Search } from "lucide-react";
 import type { Question } from "../types";
 import { useStore } from "../store";
 
@@ -14,20 +14,10 @@ export default function LinkedConvosPicker({
   topicId,
   onClose,
 }: Props) {
-  const { linkConversation, unlinkConversation } = useStore();
-  const [siblings, setSiblings] = useState<Question[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { linkConversation, unlinkConversation, topics, questionsByTopic } =
+    useStore();
   const [pending, setPending] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetch(`/api/topics/${topicId}/questions`)
-      .then((r) => r.json())
-      .then((qs: Question[]) => {
-        // Exclude the current question itself
-        setSiblings(qs.filter((q2) => q2.id !== question.id));
-      })
-      .finally(() => setLoading(false));
-  }, [topicId, question.id]);
+  const [search, setSearch] = useState("");
 
   const linked = new Set(question.linkedConversationIds ?? []);
 
@@ -44,9 +34,35 @@ export default function LinkedConvosPicker({
     }
   };
 
+  // Current topic first, then the rest alphabetically
+  const grouped = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    const sortedTopics = [
+      topics.find((t) => t.id === topicId),
+      ...topics.filter((t) => t.id !== topicId),
+    ].filter(Boolean);
+
+    return sortedTopics
+      .map((topic) => ({
+        topic: topic!,
+        questions: (questionsByTopic[topic!.id] ?? []).filter(
+          (q2) =>
+            q2.id !== question.id &&
+            (q ? q2.title.toLowerCase().includes(q) : true),
+        ),
+      }))
+      .filter((g) => g.questions.length > 0);
+  }, [topics, questionsByTopic, topicId, question.id, search]);
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col max-h-[70vh]">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+    >
+      <div
+        className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col max-h-[75vh]"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="flex items-center gap-2 px-4 py-3 border-b border-slate-700 shrink-0">
           <MessageSquare className="w-4 h-4 text-violet-400 shrink-0" />
@@ -61,58 +77,100 @@ export default function LinkedConvosPicker({
           </button>
         </div>
 
+        {/* Search */}
+        <div className="px-3 py-2 border-b border-slate-800 shrink-0">
+          <div className="flex items-center gap-2 bg-slate-800 rounded-lg px-2.5 py-1.5">
+            <Search className="w-3 h-3 text-slate-500 shrink-0" />
+            <input
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search conversations…"
+              className="flex-1 bg-transparent text-xs text-slate-300 placeholder-slate-600 focus:outline-none"
+            />
+            {search && (
+              <button
+                onClick={() => setSearch("")}
+                className="text-slate-600 hover:text-slate-400 transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
+        </div>
+
         {/* Body */}
-        <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-1">
-          {loading && (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="w-5 h-5 text-violet-400 animate-spin" />
-            </div>
-          )}
-          {!loading && siblings.length === 0 && (
+        <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-4">
+          {grouped.length === 0 && (
             <p className="text-xs text-slate-500 text-center py-8">
-              No other conversations in this topic yet.
+              {search
+                ? "No conversations match your search."
+                : "No other conversations yet."}
             </p>
           )}
-          {!loading &&
-            siblings.map((sibling) => {
-              const isLinked = linked.has(sibling.id);
-              const isPending = pending === sibling.id;
-              const msgCount = sibling.messages?.length ?? 0;
-              return (
-                <button
-                  key={sibling.id}
-                  onClick={() => toggle(sibling.id)}
-                  disabled={isPending}
-                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
-                    isLinked
-                      ? "bg-violet-500/15 border border-violet-500/30 hover:bg-violet-500/20"
-                      : "bg-slate-800/50 border border-transparent hover:bg-slate-800"
+
+          {grouped.map(({ topic, questions }) => (
+            <div key={topic.id}>
+              {/* Topic group header */}
+              <div className="flex items-center gap-2 mb-1.5">
+                <span
+                  className={`text-[10px] font-semibold uppercase tracking-wide shrink-0 ${
+                    topic.id === topicId ? "text-violet-400" : "text-slate-500"
                   }`}
                 >
-                  <div
-                    className={`w-4 h-4 rounded border shrink-0 flex items-center justify-center transition-colors ${
-                      isLinked
-                        ? "bg-violet-500 border-violet-500"
-                        : "border-slate-600"
-                    }`}
-                  >
-                    {isPending ? (
-                      <Loader2 className="w-2.5 h-2.5 animate-spin text-white" />
-                    ) : isLinked ? (
-                      <Check className="w-2.5 h-2.5 text-white" />
-                    ) : null}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs font-medium text-slate-200 truncate">
-                      {sibling.title}
-                    </p>
-                    <p className="text-[10px] text-slate-500 mt-0.5">
-                      {msgCount} message{msgCount !== 1 ? "s" : ""}
-                    </p>
-                  </div>
-                </button>
-              );
-            })}
+                  {topic.name}
+                </span>
+                {topic.id === topicId && (
+                  <span className="text-[9px] bg-violet-500/20 text-violet-400 px-1.5 py-0.5 rounded shrink-0">
+                    current
+                  </span>
+                )}
+                <div className="flex-1 h-px bg-slate-800" />
+              </div>
+
+              <div className="space-y-1">
+                {questions.map((sibling) => {
+                  const isLinked = linked.has(sibling.id);
+                  const isPending = pending === sibling.id;
+                  const msgCount = sibling.messages?.length ?? 0;
+                  return (
+                    <button
+                      key={sibling.id}
+                      onClick={() => toggle(sibling.id)}
+                      disabled={isPending}
+                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                        isLinked
+                          ? "bg-violet-500/15 border border-violet-500/30 hover:bg-violet-500/20"
+                          : "bg-slate-800/50 border border-transparent hover:bg-slate-800"
+                      }`}
+                    >
+                      <div
+                        className={`w-4 h-4 rounded border shrink-0 flex items-center justify-center transition-colors ${
+                          isLinked
+                            ? "bg-violet-500 border-violet-500"
+                            : "border-slate-600"
+                        }`}
+                      >
+                        {isPending ? (
+                          <Loader2 className="w-2.5 h-2.5 animate-spin text-white" />
+                        ) : isLinked ? (
+                          <Check className="w-2.5 h-2.5 text-white" />
+                        ) : null}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-xs font-medium text-slate-200 truncate">
+                          {sibling.title}
+                        </p>
+                        <p className="text-[10px] text-slate-500 mt-0.5">
+                          {msgCount} message{msgCount !== 1 ? "s" : ""}
+                        </p>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
         </div>
 
         {/* Footer hint */}

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

@@ -3,6 +3,7 @@ import { useStore } from "../store";
 import type { Question } from "../types";
 import FileAttachments from "./FileAttachments";
 import WorkspaceSwitcher from "./WorkspaceSwitcher";
+
 import {
   ChevronRight,
   ChevronDown,
@@ -20,10 +21,46 @@ import {
   SlidersHorizontal,
   ArrowRightLeft,
   MoreHorizontal,
+  Download,
+  Link,
 } from "lucide-react";
 
 const ROOT_PARENT_VALUE = "__root__";
 
+// ── Download helpers ─────────────────────────────────────────────────────────
+
+function downloadJson(data: unknown, filename: string) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function buildQuestionExport(q: Question, allQuestions: Question[]): object {
+  const children = allQuestions
+    .filter((c) => c.parentQuestionId === q.id)
+    .map((c) => buildQuestionExport(c, allQuestions));
+  return {
+    id: q.id,
+    title: q.title,
+    topicId: q.topicId,
+    parentQuestionId: q.parentQuestionId ?? null,
+    systemContext: q.systemContext,
+    contextFiles: q.contextFiles,
+    codeContextFiles: q.codeContextFiles,
+    messages: q.messages,
+    annotations: q.annotations ?? [],
+    linkedConversationIds: q.linkedConversationIds ?? [],
+    createdAt: q.createdAt,
+    ...(children.length > 0 ? { children } : {}),
+  };
+}
+
 export default function Sidebar() {
   const {
     topics,
@@ -56,6 +93,9 @@ export default function Sidebar() {
     uploadWorkspaceFiles,
     removeWorkspaceFile,
     updateTopicSystemContext,
+    currentQuestion,
+    linkConversation,
+    unlinkConversation,
   } = useStore();
 
   const [newTopicName, setNewTopicName] = useState("");
@@ -460,6 +500,53 @@ export default function Sidebar() {
                     <ArrowRightLeft className="w-3 h-3" /> Move
                   </button>
                   <div className="border-t border-slate-700 my-0.5" />
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      const allQ = questionsByTopic[topicId] ?? [];
+                      downloadJson(
+                        buildQuestionExport(q, allQ),
+                        `${q.title.replace(/[^a-z0-9]+/gi, "-")}.json`,
+                      );
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <Download className="w-3 h-3" /> Download
+                  </button>
+                  {/* Link to current — only shown when a different question is open */}
+                  {currentQuestion &&
+                    currentQuestion.id !== q.id &&
+                    (() => {
+                      const alreadyLinked = (
+                        currentQuestion.linkedConversationIds ?? []
+                      ).includes(q.id);
+                      return (
+                        <>
+                          <div className="border-t border-slate-700 my-0.5" />
+                          <button
+                            onClick={() => {
+                              setOpenMenuQuestionId(null);
+                              if (alreadyLinked) {
+                                unlinkConversation(currentQuestion.id, q.id);
+                              } else {
+                                linkConversation(currentQuestion.id, q.id);
+                              }
+                            }}
+                            className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-slate-700 transition-colors ${
+                              alreadyLinked
+                                ? "text-violet-400 hover:text-violet-300"
+                                : "text-slate-300 hover:text-white"
+                            }`}
+                          >
+                            <Link className="w-3 h-3" />
+                            {alreadyLinked
+                              ? "Unlink from current"
+                              : "Link to current"}
+                          </button>
+                        </>
+                      );
+                    })()}
+                  <div className="border-t border-slate-700 my-0.5" />
                   <button
                     onClick={() => {
                       setOpenMenuQuestionId(null);
@@ -789,6 +876,32 @@ export default function Sidebar() {
                     >
                       <Trash2 className="w-3 h-3" />
                     </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const topicQuestions = questionsByTopic[topic.id] ?? [];
+                        const rootQuestions = topicQuestions.filter(
+                          (q) => !q.parentQuestionId,
+                        );
+                        downloadJson(
+                          {
+                            id: topic.id,
+                            name: topic.name,
+                            systemContext: topic.systemContext ?? "",
+                            contextFiles: topic.contextFiles,
+                            createdAt: topic.createdAt,
+                            questions: rootQuestions.map((q) =>
+                              buildQuestionExport(q, topicQuestions),
+                            ),
+                          },
+                          `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
+                        );
+                      }}
+                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+                      title="Download topic as JSON"
+                    >
+                      <Download className="w-3 h-3" />
+                    </button>
                   </div>
 
                   {/* Questions list */}

package/template/client/src/store.ts

@@ -220,6 +220,7 @@ interface Store {
       | "user"
       | "ai"
       | "sandbox"
+      | "browser-security"
       | "infra"
       | "react"
       | "nextjs"
@@ -283,6 +284,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 +301,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 +325,11 @@ interface Store {
   openDeploymentLab: () => void;
   closeDeploymentLab: () => void;
 
+  // ── Browser Security Lab ─────────────────────────────────────
+  showBrowserSecurityLab: boolean;
+  openBrowserSecurityLab: () => void;
+  closeBrowserSecurityLab: () => void;
+
   // ── Infra Lab ────────────────────────────────────────────────
   showInfraLab: boolean;
   runnerInitialInfra: InfraLabWorkspace | null;
@@ -373,6 +383,7 @@ export const useStore = create<Store>((set, get) => ({
   runnerInitialSandbox: null,
   runnerInitialFileId: null,
   showDeploymentLab: false,
+  showBrowserSecurityLab: false,
   showInfraLab: false,
   runnerInitialInfra: null,
   runnerInitialInfraFileId: null,
@@ -971,6 +982,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,9 +1071,10 @@ 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 }),
 
   fetchAiSettings: async () => {

package/template/client/src/types.ts

@@ -3,6 +3,7 @@ export type ContextFileOrigin =
   | "ai"
   | "upload"
   | "sandbox"
+  | "browser-security"
   | "infra"
   | "react"
   | "nextjs"
@@ -17,6 +18,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'). */

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/server/src/google-drive.ts

@@ -358,6 +358,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" ||
@@ -769,6 +770,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" ||

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,6 +739,7 @@ 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" &&
@@ -745,7 +747,7 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
   ) {
     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', or 'module-federation'",
     });
   }
   try {
@@ -2885,6 +2887,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 });

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"