create-interview-cockpit 0.11.0 → 0.13.0

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

@@ -19,6 +19,7 @@ import {
   Globe,
   SlidersHorizontal,
   ArrowRightLeft,
+  MoreHorizontal,
 } from "lucide-react";
 
 const ROOT_PARENT_VALUE = "__root__";
@@ -75,6 +76,9 @@ export default function Sidebar() {
   const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
     new Set(),
   );
+  const [openMenuQuestionId, setOpenMenuQuestionId] = useState<string | null>(
+    null,
+  );
   const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
     new Set(),
   );
@@ -320,6 +324,7 @@ export default function Sidebar() {
   ) => {
     // 12px base left padding + 16px per depth level
     const paddingLeft = 12 + depth * 16;
+    const isMenuOpen = openMenuQuestionId === q.id;
     return (
       <div
         key={q.id}
@@ -371,7 +376,8 @@ export default function Sidebar() {
           />
         ) : (
           <span
-            className="text-xs text-slate-400 truncate flex-1"
+            className="text-xs text-slate-400 truncate flex-1 min-w-0"
+            title={q.title}
             onDoubleClick={(e) => {
               e.stopPropagation();
               setEditingQuestionId(q.id);
@@ -381,63 +387,99 @@ export default function Sidebar() {
             {q.title}
           </span>
         )}
-        <span className="text-[10px] text-slate-700 shrink-0">
-          {q.messages.length > 0 ? `${q.messages.length}` : ""}
-        </span>
-        {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setAddingChildTo(q.id);
-              setNewChildTitle("");
-            }}
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-            title="Add child question"
-          >
-            <CornerDownRight className="w-2.5 h-2.5" />
-          </button>
-        )}
-        {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setEditingQuestionId(q.id);
-              setEditingQuestionTitle(q.title);
-            }}
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-            title="Rename"
-          >
-            <Pencil className="w-2.5 h-2.5" />
-          </button>
-        )}
+
+        {/* Right side: count fades on hover, replaced by "..." menu */}
         {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setMovingQuestionId((prev) => (prev === q.id ? null : q.id));
-              setMoveTargetParentId(q.parentQuestionId ?? ROOT_PARENT_VALUE);
-            }}
-            className={`p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all ${
-              movingQuestionId === q.id
-                ? "opacity-100 text-cyan-400"
-                : "text-slate-600 hover:text-cyan-400"
-            }`}
-            title="Move to a different parent"
+          <div
+            className="relative shrink-0 flex items-center"
+            onClick={(e) => e.stopPropagation()}
           >
-            <ArrowRightLeft className="w-2.5 h-2.5" />
-          </button>
+            {/* Count — hidden while hovering or when menu is open */}
+            <span
+              className={`text-[10px] text-slate-700 ${
+                isMenuOpen ? "hidden" : "group-hover:hidden"
+              }`}
+            >
+              {q.messages.length > 0 ? `${q.messages.length}` : ""}
+            </span>
+
+            {/* "..." button — shown on hover or while menu is open */}
+            <button
+              onClick={() => setOpenMenuQuestionId(isMenuOpen ? null : q.id)}
+              className={`p-0.5 rounded transition-all ${
+                isMenuOpen
+                  ? "text-cyan-400"
+                  : "opacity-0 group-hover:opacity-100 text-slate-500 hover:text-slate-300"
+              }`}
+              title="More options"
+            >
+              <MoreHorizontal className="w-3.5 h-3.5" />
+            </button>
+
+            {/* Dropdown */}
+            {isMenuOpen && (
+              <>
+                {/* Backdrop — closes menu when clicking outside */}
+                <div
+                  className="fixed inset-0 z-40"
+                  onClick={() => setOpenMenuQuestionId(null)}
+                />
+                <div className="absolute right-0 top-full mt-0.5 z-50 bg-slate-800 border border-slate-700 rounded-md shadow-xl min-w-[140px] py-0.5">
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setEditingQuestionId(q.id);
+                      setEditingQuestionTitle(q.title);
+                    }}
+                    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"
+                  >
+                    <Pencil className="w-3 h-3" /> Rename
+                  </button>
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setAddingChildTo(q.id);
+                      setNewChildTitle("");
+                    }}
+                    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"
+                  >
+                    <CornerDownRight className="w-3 h-3" /> Add child
+                  </button>
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setMovingQuestionId((prev) =>
+                        prev === q.id ? null : q.id,
+                      );
+                      setMoveTargetParentId(
+                        q.parentQuestionId ?? ROOT_PARENT_VALUE,
+                      );
+                    }}
+                    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"
+                  >
+                    <ArrowRightLeft className="w-3 h-3" /> Move
+                  </button>
+                  <div className="border-t border-slate-700 my-0.5" />
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      if (
+                        window.confirm(
+                          `Delete "${q.title}"? This cannot be undone.`,
+                        )
+                      ) {
+                        removeQuestion(q.id, topicId);
+                      }
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-slate-700 hover:text-red-300 transition-colors"
+                  >
+                    <Trash2 className="w-3 h-3" /> Delete
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
         )}
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
-              removeQuestion(q.id, topicId);
-            }
-          }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-        >
-          <Trash2 className="w-2.5 h-2.5" />
-        </button>
       </div>
     );
   };

package/template/client/src/reactLab.ts

@@ -5,7 +5,65 @@ export type FrontendLabType = FrontendLabWorkspace["type"];
 // ── Default file contents ────────────────────────────────────────────────────
 
 const REACT_DEFAULT_FILES: Record<string, string> = {
-  "App.tsx": `import { useState } from "react";
+  "package.json": `{
+  "name": "react-lab",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.2",
+    "vite": "^6.0.3"
+  }
+}
+`,
+  "vite.config.ts": `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    headers: {
+      "X-Frame-Options": "ALLOWALL",
+    },
+  },
+});
+`,
+  "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>
+`,
+  "src/main.tsx": `import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "src/App.tsx": `import { useState } from "react";
 import { Counter } from "./Counter";
 import type { User } from "./types";
 
@@ -30,7 +88,7 @@ export default function App() {
   );
 }
 `,
-  "Counter.tsx": `import { useState, useCallback } from "react";
+  "src/Counter.tsx": `import { useState, useCallback } from "react";
 import type { CounterProps } from "./types";
 
 // Stateful child component — receives props from App
@@ -88,7 +146,7 @@ export function Counter({ initialCount = 0, onCountChange }: CounterProps) {
   );
 }
 `,
-  "types.ts": `// Type definitions — shared across components
+  "src/types.ts": `// Type definitions — shared across components
 
 export interface User {
   name: string;
@@ -1065,7 +1123,7 @@ export const DEFAULT_REACT_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "React Lab",
   type: "react",
-  activeFile: "App.tsx",
+  activeFile: "src/App.tsx",
   files: REACT_DEFAULT_FILES,
 };
 
@@ -1175,9 +1233,11 @@ export function getEntryFile(workspace: FrontendLabWorkspace): string {
       ? "apps/host/src/App.jsx"
       : Object.keys(workspace.files)[0];
   }
-  return workspace.files["App.tsx"]
-    ? "App.tsx"
-    : Object.keys(workspace.files)[0];
+  return workspace.files["main.tsx"]
+    ? "main.tsx"
+    : workspace.files["App.tsx"]
+      ? "App.tsx"
+      : Object.keys(workspace.files)[0];
 }
 
 /** Preferred display order for the file tree. */
@@ -1228,7 +1288,8 @@ export function resolveNextjsEntry(
  *
  * Approach: loads React 18 UMD + Babel standalone from CDN, runs a
  * custom module system built on top of Babel's CJS transform plugin,
- * then renders the default export from `entryFile`.
+ * then either runs a bootstrap entry such as main.tsx or renders the
+ * default export from `entryFile`.
  *
  * CDN URLs are version-pinned so the preview is reproducible.
  */
@@ -1242,9 +1303,6 @@ export function generatePreviewHTML(
   const entryJSON = JSON.stringify(entryFile);
   const sandboxJSON = JSON.stringify(sandboxUrl ?? "");
   const isNextjsJSON = isNextjs ? "true" : "false";
-  // _i breaks up the 'import' keyword so Vite/Babel doesn't misparse
-  // the template literal below as containing real module import declarations
-  const _i = "import";
 
   return `<!DOCTYPE html>
 <html>
@@ -1252,6 +1310,8 @@ export function generatePreviewHTML(
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>window.__F__=${filesJSON};window.__E__=${entryJSON};window.SANDBOX_URL=${sandboxJSON};window.__NX__=${isNextjsJSON};</script>
+<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
 <script src="https://unpkg.com/@babel/standalone@7.26.10/babel.min.js"></script>
 <style>
 *{box-sizing:border-box}
@@ -1262,11 +1322,7 @@ body{margin:0;background:#fff;font-family:system-ui,sans-serif}
 <body>
 <div id="root"></div>
 <div id="__err"></div>
-<script type="module">
-${_i} React from 'https://esm.sh/react@19.1.0';
-${_i} * as ReactDOM from 'https://esm.sh/react-dom@19.1.0/client?deps=react@19.1.0';
-window.React = React;
-window.ReactDOM = ReactDOM;
+<script>
 (function(){
   var files=window.__F__,entry=window.__E__,reg={};
   function norm(from,id){
@@ -1329,27 +1385,36 @@ window.ReactDOM = ReactDOM;
   window.addEventListener('unhandledrejection',function(e){showErr(e.reason&&e.reason.message?e.reason.message:String(e.reason));});
   try{
     order.forEach(loadMod);
-    var em=reg[entry];
-    if(!em)throw new Error('Entry not found: '+entry);
-    var Comp=em.exports.default;
-    if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
     // Expose a navigate helper so in-preview code can trigger URL bar changes:
     //   window.__nxNavigate('/dashboard')
     window.__nxNavigate=function(to){try{parent.postMessage({type:'rlab-nav',to:to},'*');}catch(e){}};
-    var pageEl=React.createElement(Comp,null);
-    // In Next.js mode: wrap the page in app/layout.tsx if it exists
-    if(window.__NX__){
-      var lk=null;
-      for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
-        if(reg[_le]){lk=_le;break;}
+    var em=reg[entry];
+    if(!em)throw new Error('Entry not found: '+entry);
+    var isBootstrapEntry=/(^|\\/)(main|index)\\.(tsx|ts|jsx|js)$/.test(entry);
+    if(isBootstrapEntry){
+      if(typeof em.exports.mount==='function'){
+        var mountRoot=document.getElementById('root');
+        if(!mountRoot)throw new Error('Root element #root not found');
+        em.exports.mount(mountRoot);
       }
-      if(lk&&typeof reg[lk].exports.default==='function'){
-        pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+    }else{
+      var Comp=em.exports.default;
+      if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
+      var pageEl=React.createElement(Comp,null);
+      // In Next.js mode: wrap the page in app/layout.tsx if it exists
+      if(window.__NX__){
+        var lk=null;
+        for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
+          if(reg[_le]){lk=_le;break;}
+        }
+        if(lk&&typeof reg[lk].exports.default==='function'){
+          pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+        }
       }
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        React.createElement(React.StrictMode,null,pageEl)
+      );
     }
-    ReactDOM.createRoot(document.getElementById('root')).render(
-      React.createElement(React.StrictMode,null,pageEl)
-    );
     try{parent.postMessage({type:'rlab-ready'},'*');}catch(e){}
   }catch(err){showErr(err.message+(err.stack?'\\n\\n'+err.stack:''));}
 })();

package/template/client/src/store.ts

@@ -106,6 +106,7 @@ interface Store {
   expandedTopics: string[];
   availableFiles: string[];
   showCodePanel: boolean;
+  showLabsPanel: boolean;
   showSidebar: boolean;
   viewingFile: string | null;
   viewingDoc: { fileId: string; quote: string; fileName: string } | null;
@@ -183,6 +184,7 @@ interface Store {
   selectQuestion: (topicId: string, questionId: string) => Promise<void>;
   toggleTopic: (topicId: string) => void;
   toggleCodePanel: () => void;
+  toggleLabsPanel: () => void;
   toggleSidebar: () => void;
   fetchAvailableFiles: () => Promise<void>;
   updateCodeContext: (questionId: string, files: string[]) => Promise<void>;
@@ -202,6 +204,8 @@ interface Store {
     files: FileList | File[],
   ) => Promise<void>;
   removeQuestionFile: (questionId: string, fileId: string) => Promise<void>;
+  detachLabFile: (questionId: string, fileId: string) => Promise<void>;
+  attachLabFile: (questionId: string, fileId: string) => Promise<void>;
   linkFileToQuestion: (
     questionId: string,
     fileId: string,
@@ -311,6 +315,11 @@ interface Store {
   ) => Promise<void>;
   closeCodeRunner: () => void;
 
+  // ── Deployment Lab ──────────────────────────────────────────
+  showDeploymentLab: boolean;
+  openDeploymentLab: () => void;
+  closeDeploymentLab: () => void;
+
   // ── Infra Lab ────────────────────────────────────────────────
   showInfraLab: boolean;
   runnerInitialInfra: InfraLabWorkspace | null;
@@ -349,6 +358,7 @@ export const useStore = create<Store>((set, get) => ({
   expandedTopics: [],
   availableFiles: [],
   showCodePanel: false,
+  showLabsPanel: false,
   showSidebar: true,
   viewingFile: null,
   viewingDoc: null,
@@ -362,6 +372,7 @@ export const useStore = create<Store>((set, get) => ({
   runnerInitialLanguage: "typescript",
   runnerInitialSandbox: null,
   runnerInitialFileId: null,
+  showDeploymentLab: false,
   showInfraLab: false,
   runnerInitialInfra: null,
   runnerInitialInfraFileId: null,
@@ -671,13 +682,20 @@ export const useStore = create<Store>((set, get) => ({
   },
 
   toggleCodePanel: () => {
-    set((s) => ({ showCodePanel: !s.showCodePanel }));
+    set((s) => ({
+      showCodePanel: !s.showCodePanel,
+      showLabsPanel: false,
+    }));
     const { availableFiles, fetchAvailableFiles } = get();
     if (availableFiles.length === 0) {
       fetchAvailableFiles();
     }
   },
 
+  toggleLabsPanel: () => {
+    set((s) => ({ showLabsPanel: !s.showLabsPanel, showCodePanel: false }));
+  },
+
   fetchAvailableFiles: async () => {
     const files = await api.fetchCodeContextTree();
     set({ availableFiles: files });
@@ -769,6 +787,36 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
 
+  detachLabFile: async (questionId, fileId) => {
+    const cf = await api.detachQuestionLabFile(questionId, fileId);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: (s.currentQuestion.contextFiles || []).map((f) =>
+                f.id === fileId ? { ...f, inContext: cf.inContext } : f,
+              ),
+            }
+          : s.currentQuestion,
+    }));
+  },
+
+  attachLabFile: async (questionId, fileId) => {
+    const cf = await api.attachQuestionLabFile(questionId, fileId);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: (s.currentQuestion.contextFiles || []).map((f) =>
+                f.id === fileId ? { ...f, inContext: cf.inContext } : f,
+              ),
+            }
+          : s.currentQuestion,
+    }));
+  },
+
   linkFileToQuestion: async (questionId, fileId, originalName) => {
     const cf = await api.linkFileToQuestion(questionId, fileId, originalName);
     set((s) => ({
@@ -1010,6 +1058,9 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
   closeCodeRunner: () => set({ showCodeRunner: false }),
+  showDeploymentLab: false,
+  openDeploymentLab: () => set({ showDeploymentLab: true }),
+  closeDeploymentLab: () => set({ showDeploymentLab: false }),
   closeInfraLab: () => set({ showInfraLab: false }),
 
   fetchAiSettings: async () => {

package/template/client/src/types.ts

@@ -23,6 +23,8 @@ export interface ContextFile {
   language?: string;
   /** Short display label for code snippets. */
   label?: string;
+  /** When false, file is saved but excluded from AI prompt context (detached lab). */
+  inContext?: boolean;
 }
 
 export interface FrontendLabWorkspace {

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.9.0"
+  "version": "0.12.0"
 }