create-interview-cockpit 0.12.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/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.10.0"
+  "version": "0.12.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),

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[],